Adds requirejs, and load CodeMirror via requirejs and other optimizations

.eslintrc.js

@@ -30,12 +30,13 @@ module.exports = {
     globals: {
         Clipboard: true,
         clippy: true,
-        CodeMirror: true,
+        codeMirror: true,
         console: true,
         cssEditorUtils: true,
         editorConsole: true,
         featureDetector: true,
         mceAnalytics: true,
+        mceEvents: true,
         mceUtils: true,
         Prism: true,
         require: true

css/editable-js.css

@@ -3,6 +3,10 @@
     font-size: 14px;
 }
 
+.js .editor {
+    min-height: 280px;
+}
+
 .editor {
     position: relative;
     margin-bottom: 1em;

index.js

@@ -8,6 +8,7 @@ const uglify = require('uglify-es');
 
 const config = {
     baseDir: './docs/',
+    codeMirrorModes: 'js/libs/mode',
     destCssDir: './docs/css/',
     destJsDir: './docs/js/',
     examplesDir: './docs/pages/',
@@ -49,16 +50,21 @@ function buildBundles(bundles) {
         let currentFilename = currentBundle.destFileName;
 
         if (currentBundle.javascript) {
+            let outputFileName = config.destJsDir + currentFilename + '.js';
+
             // ensure the target dir exists
             ensureDir(config.destJsDir);
 
+            if (bundle === 'codeMirror') {
+                // use a different output directory
+                outputFileName =
+                    config.destJsDir + 'libs/' + currentFilename + '.js';
+            }
+
             // concatenate, uglify, and write the result to file
             concat(currentBundle.javascript).then(function(result) {
                 let uglified = uglify.minify(result);
-                fse.outputFileSync(
-                    config.destJsDir + currentFilename + '.js',
-                    uglified.code
-                );
+                fse.outputFileSync(outputFileName, uglified.code);
             });
         }
 
@@ -160,7 +166,19 @@ function copyDirectory(sourceDir, destDir) {
 
         // copy all examples to target directory
         for (let file in files) {
-            fse.copySync(files[file], destDir + files[file]);
+            let currentFile = files[file];
+
+            // if it is the javascript mode file
+            if (currentFile.includes('javascript.js')) {
+                // we need to read the contents in
+                let fileContents = fse.readFileSync(currentFile, 'utf-8');
+                // minify the contents
+                let uglified = uglify.minify(fileContents);
+                // then only write the result out
+                fse.outputFileSync(destDir + files[file], uglified.code);
+            } else {
+                fse.copySync(files[file], destDir + files[file]);
+            }
         }
     });
 }
@@ -236,6 +254,8 @@ function init() {
             // copy assets in `/media`
             copyDirectory(config.mediaRoot, config.baseDir);
 
+            copyDirectory(config.codeMirrorModes, config.baseDir);
+
             // builds the CSS and JS bundles
             buildBundles(site.bundles);
             // generates the pages

js/editable-css.js

@@ -100,6 +100,9 @@
 
         clippy.addClippy();
 
+        // register events handlers
+        mceEvents.register();
+
         handleResetEvents();
     }
 

js/editable-js.js

@@ -1,13 +1,13 @@
 (function() {
     'use strict';
 
-    var editorContainer = document.getElementById('editor');
+    var exampleFeature = document.getElementById('static-js').dataset[
+        'feature'
+    ];
     var execute = document.getElementById('execute');
     var liveContainer = '';
     var reset = document.getElementById('reset');
-    var codeMirror = undefined;
     var staticContainer;
-    var codeBlock;
 
     /**
      * Reads the textContent from the interactiveCodeBlock, sends the
@@ -23,21 +23,10 @@
         staticContainer = document.getElementById('static');
         staticContainer.classList.add('hidden');
 
-        codeBlock = staticContainer.querySelector('#static-js');
-
         liveContainer = document.getElementById('live');
         liveContainer.classList.remove('hidden');
 
-        // eslint-disable-next-line new-cap
-        codeMirror = CodeMirror(editorContainer, {
-            autofocus: true,
-            inputStyle: 'contenteditable',
-            lineNumbers: true,
-            mode: 'javascript',
-            undoDepth: 50,
-            tabindex: 0,
-            value: codeBlock.textContent
-        });
+        mceEvents.register();
     }
 
     /**
@@ -62,25 +51,22 @@
         });
     }
 
-    execute.addEventListener('click', function() {
-        editorConsole.clearOutput();
-        applyCode();
-    });
+    /* only execute JS in supported browsers. As `document.all`
+    is a non standard object available only in IE10 and older,
+    this will stop JS from executing in those versions. */
+    if (!document.all && featureDetector.isDefined(exampleFeature)) {
+        document.documentElement.classList.add('js');
 
-    reset.addEventListener('click', function() {
-        window.location.reload();
-    });
+        initInteractiveEditor();
 
-    window.addEventListener('load', function() {
-        var exampleFeature = document.getElementById('static-js').dataset[
-            'feature'
-        ];
+        execute.addEventListener('click', function() {
+            editorConsole.clearOutput();
+            applyCode();
+            mceAnalytics.trackRunClicks();
+        });
 
-        /* only execute JS in supported browsers. As `document.all`
-        is a non standard object available only in IE10 and older,
-        this will stop JS from executing in those versions. */
-        if (!document.all && featureDetector.isDefined(exampleFeature)) {
-            initInteractiveEditor();
-        }
-    });
+        reset.addEventListener('click', function() {
+            window.location.reload();
+        });
+    }
 })();

js/editor-libs/codemirrorLoader.js

@@ -0,0 +1,16 @@
+require(['libs/codemirror'], function(CodeMirror) {
+    var codeBlock = document.getElementById('static-js');
+    var editorContainer = document.getElementById('editor');
+    // eslint-disable-next-line new-cap
+    var codeMirror = CodeMirror(editorContainer, {
+        autofocus: true,
+        inputStyle: 'contenteditable',
+        lineNumbers: true,
+        mode: 'javascript',
+        undoDepth: 10,
+        tabindex: 0,
+        value: codeBlock.textContent
+    });
+
+    window.codeMirror = codeMirror;
+});

js/editor-libs/console.js

@@ -28,7 +28,7 @@
     function formatArray(input) {
         var output = '';
         for (var i = 0, l = input.length; i < l; i++) {
-            if (typeof(input[i]) === "string") {
+            if (typeof input[i] === 'string') {
                 output += '"' + input[i] + '"';
             } else if (Array.isArray(input[i])) {
                 output += '[';
@@ -38,7 +38,7 @@
                 output += input[i];
             }
 
-            if (i < (input.length - 1)) {
+            if (i < input.length - 1) {
                 output += ', ';
             }
         }
@@ -54,16 +54,16 @@
      * @param {any} input - The output to log.
      * @returns Formatted output as a string.
      */
-     function formatOutput(input) {
-         if (typeof(input) === "string") {
-             return '"' + input + '"';
-         } else if (Array.isArray(input)) {
-             // check the contents of the array
-             return '[' + formatArray(input) + ']';
-         } else {
-             return input;
-         }
-     }
+    function formatOutput(input) {
+        if (typeof input === 'string') {
+            return '"' + input + '"';
+        } else if (Array.isArray(input)) {
+            // check the contents of the array
+            return '[' + formatArray(input) + ']';
+        } else {
+            return input;
+        }
+    }
 
     /**
      * Writes the provided content to the editor’s output area