lazy / dynamic loading of CKEditor and Code mirror

src/public/javascripts/dialogs/sql_console.js

@@ -17,26 +17,34 @@ const sqlConsole = (function() {
             width: $(window).width(),
             height: $(window).height(),
             open: function() {
-                CodeMirror.keyMap.default["Shift-Tab"] = "indentLess";
-                CodeMirror.keyMap.default["Tab"] = "indentMore";
-
-                CodeMirror.modeURL = 'libraries/codemirror/mode/%N/%N.js';
-
-                codeEditor = CodeMirror($query[0], {
-                    value: "",
-                    viewportMargin: Infinity,
-                    indentUnit: 4,
-                    highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: false }
-                });
-
-                codeEditor.setOption("mode", "text/x-sqlite");
-                CodeMirror.autoLoadMode(codeEditor, "sql");
-
-                codeEditor.focus();
+                initEditor();
             }
         });
     }
 
+    async function initEditor() {
+        if (!codeEditor) {
+            await requireLibrary(CODE_MIRROR);
+
+            CodeMirror.keyMap.default["Shift-Tab"] = "indentLess";
+            CodeMirror.keyMap.default["Tab"] = "indentMore";
+
+            CodeMirror.modeURL = 'libraries/codemirror/mode/%N/%N.js';
+
+            codeEditor = CodeMirror($query[0], {
+                value: "",
+                viewportMargin: Infinity,
+                indentUnit: 4,
+                highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: false}
+            });
+
+            codeEditor.setOption("mode", "text/x-sqlite");
+            CodeMirror.autoLoadMode(codeEditor, "sql");
+        }
+
+        codeEditor.focus();
+    }
+
     async function execute() {
         const sqlQuery = codeEditor.getValue();
 

src/public/javascripts/note_editor.js

@@ -124,14 +124,42 @@ const noteEditor = (function() {
         isNewNoteCreated = true;
     }
 
-    function setContent(content) {
+    async function setContent(content) {
         if (currentNote.detail.type === 'text') {
+            if (!editor) {
+                await requireLibrary(CKEDITOR);
+
+                editor = await BalloonEditor.create($noteDetail[0], {});
+
+                editor.document.on('change', noteChanged);
+            }
+
             // temporary workaround for https://github.com/ckeditor/ckeditor5-enter/issues/49
             editor.setData(content ? content : "<p></p>");
 
             $noteDetail.show();
         }
         else if (currentNote.detail.type === 'code') {
+            if (!codeEditor) {
+                await requireLibrary(CODE_MIRROR);
+
+                CodeMirror.keyMap.default["Shift-Tab"] = "indentLess";
+                CodeMirror.keyMap.default["Tab"] = "indentMore";
+
+                CodeMirror.modeURL = 'libraries/codemirror/mode/%N/%N.js';
+
+                codeEditor = CodeMirror($("#note-detail-code")[0], {
+                    value: "",
+                    viewportMargin: Infinity,
+                    indentUnit: 4,
+                    matchBrackets: true,
+                    matchTags: { bothTags: true },
+                    highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: false }
+                });
+
+                codeEditor.on('change', noteChanged);
+            }
+
             $noteDetailCode.show();
 
             // this needs to happen after the element is shown, otherwise the editor won't be refresheds
@@ -196,7 +224,7 @@ const noteEditor = (function() {
             $attachmentFileType.text(currentNote.detail.mime);
         }
         else {
-            setContent(currentNote.detail.content);
+            await setContent(currentNote.detail.content);
         }
 
         noteChangeDisabled = false;
@@ -312,34 +340,6 @@ const noteEditor = (function() {
             noteTree.setNoteTitle(getCurrentNoteId(), title);
         });
 
-        BalloonEditor
-            .create(document.querySelector('#note-detail'), {
-            })
-            .then(edit => {
-                editor = edit;
-
-                editor.document.on('change', noteChanged);
-            })
-            .catch(error => {
-                console.error(error);
-            });
-
-        CodeMirror.keyMap.default["Shift-Tab"] = "indentLess";
-        CodeMirror.keyMap.default["Tab"] = "indentMore";
-
-        CodeMirror.modeURL = 'libraries/codemirror/mode/%N/%N.js';
-
-        codeEditor = CodeMirror($("#note-detail-code")[0], {
-            value: "",
-            viewportMargin: Infinity,
-            indentUnit: 4,
-            matchBrackets: true,
-            matchTags: { bothTags: true },
-            highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: false }
-        });
-
-        codeEditor.on('change', noteChanged);
-
         // so that tab jumps from note title (which has tabindex 1)
         $noteDetail.attr("tabindex", 2);
     });

src/public/javascripts/utils.js

@@ -131,4 +131,57 @@ function formatAttribute(attr) {
     }
 
     return str;
+}
+
+const CKEDITOR = { "js": ["libraries/ckeditor/ckeditor.js"] };
+
+const CODE_MIRROR = {
+    js: [
+        "libraries/codemirror/codemirror.js",
+        "libraries/codemirror/addon/mode/loadmode.js",
+        "libraries/codemirror/addon/fold/xml-fold.js",
+        "libraries/codemirror/addon/edit/matchbrackets.js",
+        "libraries/codemirror/addon/edit/matchtags.js",
+        "libraries/codemirror/addon/search/match-highlighter.js",
+        "libraries/codemirror/mode/meta.js"
+    ],
+    css: [
+        "libraries/codemirror/codemirror.css"
+    ]
+};
+
+async function requireLibrary(library) {
+    if (library.css) {
+        library.css.map(cssUrl => requireCss(cssUrl));
+    }
+
+    if (library.js) {
+        for (const scriptUrl of library.js) {
+            await requireScript(scriptUrl);
+        }
+    }
+}
+
+async function requireScript(url) {
+    const scripts = Array
+        .from(document.querySelectorAll('script'))
+        .map(scr => scr.src);
+
+    if (!scripts.includes(url)) {
+        return $.ajax({
+            url: url,
+            dataType: "script",
+            cache: true
+        })
+    }
+}
+
+async function requireCss(url) {
+    const css = Array
+        .from(document.querySelectorAll('link'))
+        .map(scr => scr.href);
+
+    if (!css.includes(url)) {
+        $('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', url));
+    }
 }

src/views/index.ejs

@@ -476,8 +476,6 @@
     <link href="libraries/fancytree/skin-win8/ui.fancytree.css" rel="stylesheet">
     <script src="libraries/fancytree/jquery.fancytree-all.min.js"></script>
 
-    <script src="libraries/ckeditor/ckeditor.js"></script>
-
     <script src="libraries/jquery.hotkeys.js"></script>
     <script src="libraries/jquery.fancytree.hotkeys.js"></script>
 
@@ -485,15 +483,6 @@
 
     <script src="libraries/knockout.min.js"></script>
 
-    <script src="libraries/codemirror/codemirror.js"></script>
-    <link rel="stylesheet" href="libraries/codemirror/codemirror.css">
-    <script src="libraries/codemirror/addon/mode/loadmode.js"></script>
-    <script src="libraries/codemirror/addon/fold/xml-fold.js"></script>
-    <script src="libraries/codemirror/addon/edit/matchbrackets.js"></script>
-    <script src="libraries/codemirror/addon/edit/matchtags.js"></script>
-    <script src="libraries/codemirror/addon/search/match-highlighter.js"></script>
-    <script src="libraries/codemirror/mode/meta.js"></script>
-
     <link href="stylesheets/style.css" rel="stylesheet">
 
     <script src="javascripts/utils.js"></script>