cleanup demo html pages

patrickbrownsync · May 5, 2014 · efea2a7 · efea2a7
1 parent ee4bed3
commit efea2a7
Show file tree

Hide file tree

Showing 13 changed files with 180 additions and 106 deletions.
diff --git a/Makefile.dryice.js b/Makefile.dryice.js
@@ -247,6 +247,46 @@ function demo(project) {
     });
 
     copyFileSync(ACE_HOME + "/demo/kitchen-sink/logo.png", BUILD_DIR + "/kitchen-sink/logo.png");
+
+    fs.readdirSync(ACE_HOME + "/demo/").forEach(function(x) {        
+        if (/\s|requirejs/.test(x) || !/\.(js|html)$/.test(x))
+            return;        
+        copy({
+            source: ACE_HOME +"/demo/" + x,
+            dest:   BUILD_DIR + "/demo/" + x,
+            filter: [function(source) {
+                if (/\.(js)$/.test(x)) 
+                    return source;
+                var removeRequireJS
+                source = source.replace(/<script src="kitchen-sink\/require.js"[\s\S]+?require\(\[([^\]]+).*/, function(e, m){
+                    removeRequireJS = true;
+                    var scripts = m.split(/,\s*/);
+                    var result = [];
+                    function comment(str) {result.push("<!-- " + str + " -->")};
+                    function script(str) {result.push('<script src="../src/' + str + '.js"></script>')}
+                    scripts.forEach(function(s) {
+                        s = s.replace(/"/g, "");
+                        if (s == "ace/ace") {
+                            comment("load ace")
+                            script("ace")
+                        } else {
+                            var extName = s.match(/[^/]*$/)[0];
+                            comment("load ace " + extName + " extension");
+                            script("ext-" + extName);
+                        }
+                    });
+                    result.push("<script>")
+                    return result.join("\n");
+                });
+                if (removeRequireJS)
+                    source = source.replace(/\s*\}\);?\s*(<\/script>)/, "\n$1");
+                source = source.replace(/"\.\.\/build\//g, function(e) {
+                    console.log(e); return '"../';
+                });
+                return source;
+            }]
+        });
+    });
 }
 
 function jsFileList(path, filter) {

diff --git a/demo/autocompletion.html b/demo/autocompletion.html
@@ -35,7 +35,8 @@
     // enable autocompletion and snippets
     editor.setOptions({
         enableBasicAutocompletion: true,
-        enableSnippets: true
+        enableSnippets: true,
+        enableLiveAutocompletion: false
     });
 </script>
 

diff --git a/demo/autoresize.html b/demo/autoresize.html
@@ -20,29 +20,37 @@
     </style>
 </head>
 <body>
-<pre id="editor">autoresizing editor</pre>
+<pre id="editor1">autoresizing editor</pre>
 <div class="scrollmargin"></div>
 <pre id="editor2">minHeight = 2 lines</pre>
+<div class="scrollmargin"></div>
+<pre id="editor"></pre>
 
 <script src="../build/src/ace.js"></script>
 <script>
 
-// create first editor
-var editor = ace.edit("editor");
-editor.setTheme("ace/theme/tomorrow");
-editor.session.setMode("ace/mode/html");
-editor.setAutoScrollEditorIntoView();
-editor.setOption("maxLines", 100);
+var editor1 = ace.edit("editor1");
+editor1.setTheme("ace/theme/tomorrow_night_eighties");
+editor1.session.setMode("ace/mode/html");
+editor1.setAutoScrollEditorIntoView(true);
+editor1.setOption("maxLines", 30);
 
 var editor2 = ace.edit("editor2");
 editor2.setTheme("ace/theme/tomorrow_night_blue");
 editor2.session.setMode("ace/mode/html");
-editor2.setAutoScrollEditorIntoView();
+editor2.setAutoScrollEditorIntoView(true);
 editor2.setOption("maxLines", 30);
 editor2.setOption("minLines", 2);
 
+var editor = ace.edit("editor");
+editor.setTheme("ace/theme/tomorrow");
+editor.session.setMode("ace/mode/html");
+editor.setAutoScrollEditorIntoView(true);
+editor.setOption("maxLines", 100);
 
 </script>
 
+<script src="./show_own_source.js"></script>
+
 </body>
 </html>
diff --git a/demo/emmet.html b/demo/emmet.html
@@ -22,19 +22,20 @@
 
 <pre id="editor"></pre>
 
-<!-- load ace -->
-<script src="../build/src-noconflict/ace.js"></script>
-<!-- load ace emmet extension -->
-<script src="../build/src-noconflict/ext-emmet.js"></script>
-<!-- load core emmet files -->
+<!-- load emmet code and snippets compiled for browser -->
 <script src="https://nightwing.github.io/emmet-core/emmet.js"></script>
+
+<script src="kitchen-sink/require.js"></script>
 <script>
-    // trigger extension
-    ace.require("ace/ext/emmet");
+// setup paths
+require.config({paths: { "ace" : "../lib/ace"}});
+// load ace and extensions
+require(["ace/ace", "ace/ext/emmet"], function(ace) {
     var editor = ace.edit("editor");
     editor.session.setMode("ace/mode/html");
     // enable emmet on the current editor
-    editor.setOption("enableEmmet", true);    
+    editor.setOption("enableEmmet", true);
+});
 </script>
 
 <script src="./show_own_source.js"></script>

diff --git a/demo/ie7.html b/demo/ie7.html
@@ -5,7 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <title>ACE Editor StatusBar Demo</title>
   <style type="text/css" media="screen">
-    /*!important without this top: 0; bottom: 0 doesn't work */
+    /*!important without this top: 0; bottom: 0 doesn't work on old ie */
     body, html {
         position: absolute;
         top: 0px; bottom: 0; left: 0; right: 0;

diff --git a/demo/keyboard_shortcuts.html b/demo/keyboard_shortcuts.html
@@ -22,8 +22,11 @@
 
 <pre id="editor"></pre>
 
-<script src="../build/src-noconflict/ace.js"></script>
+<script src="kitchen-sink/require.js"></script>
 <script>
+// setup paths
+require.config({paths: { "ace" : "../lib/ace"}});
+require(["ace/ace"], function(ace) {
     var editor = ace.edit("editor")
     editor.setTheme("ace/theme/twilight")
     editor.session.setMode("ace/mode/html")
@@ -39,6 +42,8 @@
             })
         }
     })
+    editor.execCommand("showKeyboardShortcuts")
+})
 </script>
 
 <script src="./show_own_source.js"></script>

diff --git a/demo/modelist.html b/demo/modelist.html
@@ -23,24 +23,27 @@
 
 <pre id="editor"></pre>
 
-<script src="../build/src-noconflict/ace.js"></script>
-<script src="../build/src-noconflict/ext-modelist.js"></script>
+<script src="kitchen-sink/require.js"></script>
 <script>
+// setup paths
+require.config({paths: { "ace" : "../lib/ace"}});
+// load ace and extensions
+require(["ace/ace", "ace/ext/modelist"], function(ace) {
     var editor = ace.edit("editor");
     editor.setTheme("ace/theme/twilight");
     (function () {
-        var modelist = ace.require('ace/ext/modelist');
+        var modelist = ace.require("ace/ext/modelist");
         // the file path could come from an xmlhttp request, a drop event,
         // or any other scriptable file loading process.
         // Extensions could consume the modelist and use it to dynamically
         // set the editor mode. Webmasters could use it in their scripts
         // for site specific purposes as well.
-        var filePath = 'blahblah/weee/some.js';
+        var filePath = "blahblah/weee/some.js";
         var mode = modelist.getModeForPath(filePath).mode;
         console.log(mode);
         editor.session.setMode(mode);
     }());
-    
+})
 </script>
 
 <script src="./show_own_source.js"></script>

diff --git a/demo/scrollable-page.html b/demo/scrollable-page.html
@@ -5,37 +5,35 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <title>Editor</title>
   <style type="text/css" media="screen">
-
-	.ace_editor {
-		position: relative !important;
-		border: 1px solid lightgray;
-		margin: auto;
-		height: 200px;
-		width: 80%;
-	}
+    .ace_editor {
+        position: relative !important;
+        border: 1px solid lightgray;
+        margin: auto;
+        height: 200px;
+        width: 80%;
+    }
 
     .ace_editor.fullScreen {
-		height: auto;
-		width: auto;
-		border: 0;
+        height: auto;
+        width: auto;
+        border: 0;
         margin: 0;
         position: fixed !important;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
         z-index: 10;
-        background: white;
     }
 
-	.fullScreen {
-		overflow: hidden
-	}
+    .fullScreen {
+        overflow: hidden
+    }
 
-	.scrollmargin {
-		height: 500px;
+    .scrollmargin {
+        height: 500px;
         text-align: center;
-	}
+    }
 
     .large-button {
         color: lightblue;
@@ -56,7 +54,7 @@
 <body>
 <div class="scrollmargin">
     <span onclick="scroll()" class="large-button">
-	scroll down &dArr;
+    scroll down &dArr;
     </span>
 </div>
 <pre id="editor">function foo(items) {
@@ -76,28 +74,35 @@
 
 </div>
 
-<script src="../build/src/ace.js"></script>
+<script src="kitchen-sink/require.js"></script>
 <script>
+require.config({paths: { "ace" : "../lib/ace"}});
+require(["ace/ace", "ace/ext/themelist"], function(ace) {
+
 var $ = document.getElementById.bind(document);
 var dom = require("ace/lib/dom");
 
 //add command to all new editor instaces
 require("ace/commands/default_commands").commands.push({
-	name: "Toggle Fullscreen",
-	bindKey: "F11",
-	exec: function(editor) {
-		dom.toggleCssClass(document.body, "fullScreen")
-		dom.toggleCssClass(editor.container, "fullScreen")
-        editor.setAutoScrollEditorIntoView()
-		editor.resize()
-	}
+    name: "Toggle Fullscreen",
+    bindKey: "F11",
+    exec: function(editor) {
+        var fullScreen = dom.toggleCssClass(document.body, "fullScreen")
+        dom.setCssClass(editor.container, "fullScreen", fullScreen)
+        editor.setAutoScrollEditorIntoView(!fullScreen)
+        editor.resize()
+    }
 })
 
 // create first editor
 var editor = ace.edit("editor");
 editor.setTheme("ace/theme/twilight");
 editor.session.setMode("ace/mode/javascript");
-editor.setAutoScrollEditorIntoView();
+editor.renderer.setScrollMargin(10, 10);
+editor.setOptions({
+    // "scrollPastEnd": 0.8,
+    autoScrollEditorIntoView: true
+});
 
 var count = 1;
 function add() {
@@ -110,12 +115,13 @@
     oldEl.parentNode.insertBefore(el, pad.nextSibling)
 
     count++
-    var theme = "ace/theme/" + themes[Math.floor(themes.length * Math.random() - 1e-5)]
+    var theme = themes[Math.floor(themes.length * Math.random() - 1e-5)]
     editor = ace.edit(el)
-    editor.setTheme(theme)
-    editor.session.setMode("ace/mode/javascript")
-
-    editor.setAutoScrollEditorIntoView()
+    editor.setOptions({
+        mode: "ace/mode/javascript",
+        theme: theme,
+        autoScrollEditorIntoView: true
+    })
 
     editor.setValue([
         "this is editor number: ", count, "\n",
@@ -126,7 +132,6 @@
     scroll()
 }
 
-
 function scroll(speed) {
     var top = editor.container.getBoundingClientRect().top
     speed = speed || 10
@@ -139,14 +144,11 @@
     }
 }
 
-var themes = {
-    bright: [ "chrome", "clouds", "crimson_editor", "dawn", "dreamweaver", "eclipse", "github",
-        "solarized_light", "textmate", "tomorrow"],
-    dark: [ "clouds_midnight", "cobalt", "idle_fingers", "kr_theme", "merbivore", "merbivore_soft",
-        "mono_industrial", "monokai", "pastel_on_dark", "solarized_dark",  "terminal", "tomorrow_night",
-        "tomorrow_night_blue", "tomorrow_night_bright", "tomorrow_night_eighties", "twilight", "vibrant_ink"]
-}
-themes = [].concat(themes.bright, themes.dark);
+var themes = require("ace/ext/themelist").themes.map(function(t){return t.theme});
+
+window.add = add;
+window.scroll = scroll;
+});
 </script>
 
 </body>

diff --git a/demo/settings_menu.html b/demo/settings_menu.html
@@ -23,9 +23,12 @@
 
 <pre id="editor"></pre>
 
-<script src="../build/src-noconflict/ace.js"></script>
-<script src="../build/src-noconflict/ext-settings_menu.js"></script>
+<script src="kitchen-sink/require.js"></script>
 <script>
+// setup paths
+require.config({paths: { "ace" : "../lib/ace"}});
+// load ace and extensions
+require(["ace/ace", "ace/ext/settings_menu"], function(ace) {
     var editor = ace.edit("editor");
     ace.require('ace/ext/settings_menu').init(editor);
     editor.setTheme("ace/theme/twilight");
@@ -38,6 +41,7 @@
 		},
 		readOnly: true
 	}]);
+})
 </script>
 
 <script src="./show_own_source.js"></script>

diff --git a/demo/show_own_source.js b/demo/show_own_source.js
@@ -1,3 +1,16 @@
-ace.require("ace/lib/net").get(document.baseURI, function(t){
-    editor.setValue(t, 1);
-})
+if (typeof ace == "undefined" && typeof require == "undefined") {
+    document.body.innerHTML = "<p style='padding: 20px 50px;'>couldn't find ace.js file, <br>"
+        + "to build it run <code>node Makefile.dryice.js full<code>"
+} else if (typeof ace == "undefined" && typeof require != "undefined") {
+    require(["ace/ace"], setValue)
+} else {
+    require = ace.require;
+    setValue()
+}
+
+function setValue() {
+    require("ace/lib/net").get(document.baseURI, function(t){
+        var el = document.getElementById("editor");
+        el.env.editor.setValue(t, 1);
+    })
+}