using ES6 modules for whole frontend SPA app

src/public/javascripts/bootstrap.js

@@ -1,9 +1,38 @@
-import searchTree from './search_tree.js';
+import addLink from './dialogs/add_link.js';
+import editTreePrefix from './dialogs/edit_tree_prefix.js';
+import eventLog from './dialogs/event_log.js';
+import jumpToNote from './dialogs/jump_to_note.js';
+import labelsDialog from './dialogs/labels.js';
+import noteHistory from './dialogs/note_history.js';
+import noteSource from './dialogs/note_source.js';
+import recentChanges from './dialogs/recent_changes.js';
+import recentNotes from './dialogs/recent_notes.js';
+import settings from './dialogs/settings.js';
+import sqlConsole from './dialogs/sql_console.js';
 
+import cloning from './cloning.js';
+import contextMenu from './context_menu.js';
+import dragAndDropSetup from './drag_and_drop.js';
+import exportService from './export.js';
+import link from './link.js';
+import messaging from './messaging.js';
+import noteEditor from './note_editor.js';
+import noteType from './note_type.js';
+import protected_session from './protected_session.js';
+import ScriptApi from './script_api.js';
+import ScriptContext from './script_context.js';
+import sync from './sync.js';
+import treeChanges from './tree_changes.js';
+import treeUtils from './tree_utils.js';
+import utils from './utils.js';
+
+import searchTreeService from './search_tree.js';
+import './init.js';
+import treeService from './note_tree.js';
 const $toggleSearchButton = $("#toggle-search-button");
 
-$toggleSearchButton.click(searchTree.toggleSearch);
-bindShortcut('ctrl+s', searchTree.toggleSearch);
+$toggleSearchButton.click(searchTreeService.toggleSearch);
+bindShortcut('ctrl+s', searchTreeService.toggleSearch);
 
 function bindShortcut(keyboardShortcut, handler) {
     $(document).bind('keydown', keyboardShortcut, e => {

src/public/javascripts/cloning.js

@@ -1,6 +1,7 @@
 "use strict";
 
-const cloning = (function() {
+import treeService from './note_tree.js';
+
 async function cloneNoteTo(childNoteId, parentNoteId, prefix) {
     const resp = await server.put('notes/' + childNoteId + '/clone-to/' + parentNoteId, {
         prefix: prefix
@@ -26,8 +27,7 @@ const cloning = (function() {
     await treeService.reload();
 }
 
-    return {
+export default {
     cloneNoteAfter,
     cloneNoteTo
 };
-})();

src/public/javascripts/context_menu.js

@@ -1,6 +1,14 @@
 "use strict";
 
-const contextMenu = (function() {
+import treeService from './note_tree.js';
+import cloning from './cloning.js';
+import exportService from './export.js';
+import messaging from './messaging.js';
+import protected_session from './protected_session.js';
+import treeChanges from './tree_changes.js';
+import treeUtils from './tree_utils.js';
+import utils from './utils.js';
+
 const $tree = $("#tree");
 
 let clipboardIds = [];
@@ -171,11 +179,10 @@ const contextMenu = (function() {
     }
 };
 
-    return {
+export default {
     pasteAfter,
     pasteInto,
     cut,
     copy,
     contextMenuSettings
-    }
-})();
+};

src/public/javascripts/dialogs/add_link.js

@@ -1,6 +1,11 @@
 "use strict";
 
-const addLink = (function() {
+import treeService from '../note_tree.js';
+import cloning from '../cloning.js';
+import link from '../link.js';
+import noteEditor from '../note_editor.js';
+import treeUtils from '../tree_utils.js';
+
 const $dialog = $("#add-link-dialog");
 const $form = $("#add-link-form");
 const $autoComplete = $("#note-autocomplete");
@@ -131,7 +136,6 @@ const addLink = (function() {
     e.preventDefault();
 });
 
-    return {
+export default {
     showDialog
 };
-})();

src/public/javascripts/dialogs/edit_tree_prefix.js

@@ -1,6 +1,7 @@
 "use strict";
 
-const editTreePrefix = (function() {
+import treeService from '../note_tree.js';
+
 const $dialog = $("#edit-tree-prefix-dialog");
 const $form = $("#edit-tree-prefix-form");
 const $treePrefixInput = $("#tree-prefix-input");
@@ -40,7 +41,6 @@ const editTreePrefix = (function() {
     return false;
 });
 
-    return {
+export default {
     showDialog
 };
-})();

src/public/javascripts/dialogs/event_log.js

@@ -1,6 +1,8 @@
 "use strict";
 
-const eventLog = (function() {
+import link from '../link.js';
+import utils from '../utils.js';
+
 const $dialog = $("#event-log-dialog");
 const $list = $("#event-log-list");
 
@@ -32,7 +34,6 @@ const eventLog = (function() {
     }
 }
 
-    return {
+export default {
     showDialog
 };
-})();

src/public/javascripts/dialogs/jump_to_note.js

@@ -1,6 +1,9 @@
 "use strict";
 
-const jumpToNote = (function() {
+import treeService from '../note_tree.js';
+import link from '../link.js';
+import utils from '../utils.js';
+
 const $showDialogButton = $("#jump-to-note-button");
 const $dialog = $("#jump-to-note-dialog");
 const $autoComplete = $("#jump-to-note-autocomplete");
@@ -53,7 +56,6 @@ const jumpToNote = (function() {
 
 $showDialogButton.click(showDialog);
 
-    return {
+export default {
     showDialog
 };
-})();

src/public/javascripts/dialogs/labels.js

@@ -1,6 +1,8 @@
 "use strict";
 
-const labelsDialog = (function() {
+import noteEditor from '../note_editor.js';
+import utils from '../utils.js';
+
 const $showDialogButton = $(".show-labels-button");
 const $dialog = $("#labels-dialog");
 const $saveLabelsButton = $("#save-labels-button");
@@ -221,7 +223,6 @@ const labelsDialog = (function() {
 
 $showDialogButton.click(showDialog);
 
-    return {
+export default {
     showDialog
 };
-})();

src/public/javascripts/dialogs/note_history.js

@@ -1,6 +1,8 @@
 "use strict";
 
-const noteHistory = (function() {
+import noteEditor from '../note_editor.js';
+import utils from '../utils.js';
+
 const $showDialogButton = $("#show-history-button");
 const $dialog = $("#note-history-dialog");
 const $list = $("#note-history-list");
@@ -75,7 +77,6 @@ const noteHistory = (function() {
 
 $showDialogButton.click(showCurrentNoteHistory);
 
-    return {
+export default {
     showCurrentNoteHistory
 };
-})();

src/public/javascripts/dialogs/note_source.js

@@ -1,6 +1,7 @@
 "use strict";
 
-const noteSource = (function() {
+import noteEditor from '../note_editor.js';
+
 const $showDialogButton = $("#show-source-button");
 const $dialog = $("#note-source-dialog");
 const $noteSource = $("#note-source");
@@ -54,7 +55,6 @@ const noteSource = (function() {
 
 $showDialogButton.click(showDialog);
 
-    return {
+export default {
     showDialog
 };
-})();

src/public/javascripts/dialogs/recent_changes.js

@@ -1,6 +1,8 @@
 "use strict";
 
-const recentChanges = (function() {
+import link from '../link.js';
+import utils from '../utils.js';
+
 const $showDialogButton = $("#recent-changes-button");
 const $dialog = $("#recent-changes-dialog");
 
@@ -86,7 +88,6 @@ const recentChanges = (function() {
 
 $showDialogButton.click(showDialog);
 
-    return {
+export default {
     showDialog
 };
-})();

src/public/javascripts/dialogs/recent_notes.js

@@ -1,6 +1,9 @@
 "use strict";
 
-const recentNotes = (function() {
+import treeService from '../note_tree.js';
+import server from '../server.js';
+import messaging from '../messaging.js';
+
 const $showDialogButton = $("#recent-notes-button");
 const $dialog = $("#recent-notes-dialog");
 const $searchInput = $('#recent-notes-search-input');
@@ -97,9 +100,8 @@ const recentNotes = (function() {
 
 $showDialogButton.click(showDialog);
 
-    return {
+export default {
     showDialog,
     addRecentNote,
     reload
 };
-})();

src/public/javascripts/dialogs/settings.js

@@ -1,6 +1,9 @@
 "use strict";
 
-const settings = (function() {
+import protected_session from '../protected_session.js';
+import utils from '../utils.js';
+import server from '../server.js';
+
 const $showDialogButton = $("#settings-button");
 const $dialog = $("#settings-dialog");
 const $tabs = $("#settings-tabs");
@@ -41,14 +44,13 @@ const settings = (function() {
 
 $showDialogButton.click(showDialog);
 
-    return {
+export default {
     showDialog,
     saveSettings,
     addModule
 };
-})();
 
-settings.addModule((function() {
+addModule((function() {
     const $form = $("#change-password-form");
     const $oldPassword = $("#old-password");
     const $newPassword1 = $("#new-password1");
@@ -94,7 +96,7 @@ settings.addModule((function() {
     };
 })());
 
-settings.addModule((function() {
+addModule((function() {
     const $form = $("#protected-session-timeout-form");
     const $protectedSessionTimeout = $("#protected-session-timeout-in-seconds");
     const settingName = 'protected_session_timeout';
@@ -118,7 +120,7 @@ settings.addModule((function() {
     };
 })());
 
-settings.addModule((function () {
+addModule((function () {
     const $form = $("#history-snapshot-time-interval-form");
     const $timeInterval = $("#history-snapshot-time-interval-in-seconds");
     const settingName = 'history_snapshot_time_interval';
@@ -138,7 +140,7 @@ settings.addModule((function () {
     };
 })());
 
-settings.addModule((async function () {
+addModule((async function () {
     const $appVersion = $("#app-version");
     const $dbVersion = $("#db-version");
     const $buildDate = $("#build-date");
@@ -155,7 +157,7 @@ settings.addModule((async function () {
     return {};
 })());
 
-settings.addModule((async function () {
+addModule((async function () {
     const $forceFullSyncButton = $("#force-full-sync-button");
     const $fillSyncRowsButton = $("#fill-sync-rows-button");
     const $anonymizeButton = $("#anonymize-button");

src/public/javascripts/dialogs/sql_console.js

@@ -1,6 +1,7 @@
 "use strict";
 
-const sqlConsole = (function() {
+import utils from '../utils.js';
+
 const $dialog = $("#sql-console-dialog");
 const $query = $('#sql-console-query');
 const $executeButton = $('#sql-console-execute');
@@ -100,7 +101,6 @@ const sqlConsole = (function() {
 
 $executeButton.click(execute);
 
-    return {
+export default {
     showDialog
 };
-})();

src/public/javascripts/drag_and_drop.js

@@ -1,5 +1,8 @@
 "use strict";
 
+import treeService from './note_tree.js';
+import treeChanges from './tree_changes.js';
+
 const dragAndDropSetup = {
     autoExpandMS: 600,
     draggable: { // modify default jQuery draggable options
@@ -65,3 +68,5 @@ const dragAndDropSetup = {
         }
     }
 };
+
+export default dragAndDropSetup;

src/public/javascripts/export.js

@@ -1,6 +1,9 @@
 "use strict";
 
-const exportService = (function () {
+import treeService from './note_tree.js';
+import protected_session from './protected_session.js';
+import utils from './utils.js';
+
 function exportSubTree(noteId) {
     const url = utils.getHost() + "/api/export/" + noteId + "?protectedSessionId="
         + encodeURIComponent(protected_session.getProtectedSessionId());
@@ -32,8 +35,7 @@ const exportService = (function () {
     await treeService.reload();
 });
 
-    return {
+export default {
     exportSubTree,
     importSubTree
 };
-})();

src/public/javascripts/init.js

@@ -1,6 +1,13 @@
 "use strict";
 
-const initService = (function() {
+import treeService from './note_tree.js';
+import link from './link.js';
+import messaging from './messaging.js';
+import noteEditor from './note_editor.js';
+import treeUtils from './tree_utils.js';
+import utils from './utils.js';
+import server from './server.js';
+
 // hot keys are active also inside inputs and content editables
 jQuery.hotkeys.options.filterInputAcceptingElements = false;
 jQuery.hotkeys.options.filterContentEditable = false;
@@ -249,4 +256,3 @@ const initService = (function() {
 
     await treeService.activateNode(resp.noteId);
 });
-})();

src/public/javascripts/link.js

@@ -1,6 +1,9 @@
 "use strict";
 
-const link = (function() {
+import treeService from './note_tree.js';
+import noteEditor from './note_editor.js';
+import treeUtils from './tree_utils.js';
+
 function getNotePathFromLink(url) {
     const notePathMatch = /#([A-Za-z0-9/]+)$/.exec(url);
 
@@ -93,11 +96,10 @@ const link = (function() {
 $(document).on('click', 'div.popover-content a, div.ui-tooltip-content a', goToLink);
 $(document).on('dblclick', '#note-detail a', goToLink);
 
-    return {
+export default {
     getNodePathFromLabel,
     getNotePathFromLink,
     createNoteLink,
     addLinkToEditor,
     addTextToEditor
 };
-})();

src/public/javascripts/messaging.js

@@ -1,6 +1,10 @@
 "use strict";
 
-const messaging = (function() {
+import treeService from './note_tree.js';
+import noteEditor from './note_editor.js';
+import sync from './sync.js';
+import utils from './utils.js';
+
 const $changesToPushCount = $("#changes-to-push-count");
 
 function logError(message) {
@@ -109,7 +113,6 @@ const messaging = (function() {
     }));
 }, 1000);
 
-    return {
+export default {
     logError
 };
-})();

src/public/javascripts/note_editor.js

@@ -1,6 +1,11 @@
 "use strict";
 
-const noteEditor = (function() {
+import treeService from './note_tree.js';
+import noteType from './note_type.js';
+import protected_session from './protected_session.js';
+import utils from './utils.js';
+import server from './server.js';
+
 const $noteTitle = $("#note-title");
 
 const $noteDetail = $('#note-detail');
@@ -68,7 +73,7 @@ const noteEditor = (function() {
         return;
     }
 
-        const note = noteEditor.getCurrentNote();
+    const note = getCurrentNote();
 
     updateNoteFromInputs(note);
 
@@ -379,7 +384,7 @@ const noteEditor = (function() {
 
 setInterval(saveNoteIfChanged, 5000);
 
-    return {
+export default {
     reload,
     switchToNote,
     saveNoteIfChanged,
@@ -397,4 +402,3 @@ const noteEditor = (function() {
     loadLabelList,
     setContent
 };
-})();

src/public/javascripts/note_tree.js

@@ -1,5 +1,17 @@
 "use strict";
 
+import contextMenu from './context_menu.js';
+import dragAndDropSetup from './drag_and_drop.js';
+import link from './link.js';
+import messaging from './messaging.js';
+import noteEditor from './note_editor.js';
+import protected_session from './protected_session.js';
+import treeChanges from './tree_changes.js';
+import treeUtils from './tree_utils.js';
+import utils from './utils.js';
+import server from './server.js';
+import recentNotes from './dialogs/recent_notes.js';
+
 class TreeCache {
     constructor(noteRows, branchRows) {
         this.parents = [];
@@ -126,7 +138,6 @@ class Branch {
     }
 }
 
-const treeService = (function() {
 let treeCache;
 
 const $tree = $("#tree");
@@ -1020,7 +1031,7 @@ const treeService = (function() {
 $collapseTreeButton.click(collapseTree);
 $scrollToCurrentNoteButton.click(scrollToCurrentNote);
 
-    return {
+export default {
     reload,
     collapseTree,
     scrollToCurrentNote,
@@ -1047,4 +1058,3 @@ const treeService = (function() {
     getBranch,
     getNote
 };
-})();

src/public/javascripts/note_type.js

@@ -1,6 +1,9 @@
 "use strict";
 
-const noteType = (function() {
+import treeService from './note_tree.js';
+import noteEditor from './note_editor.js';
+import utils from './utils.js';
+
 const $executeScriptButton = $("#execute-script-button");
 const noteTypeModel = new NoteTypeModel();
 
@@ -131,7 +134,7 @@ const noteType = (function() {
 
 ko.applyBindings(noteTypeModel, document.getElementById('note-type'));
 
-    return {
+export default {
     getNoteType: () => noteTypeModel.type(),
     setNoteType: type => noteTypeModel.type(type),
 
@@ -142,4 +145,3 @@ const noteType = (function() {
         noteTypeModel.updateExecuteScriptButtonVisibility();
     }
 };
-})();

src/public/javascripts/protected_session.js

@@ -1,6 +1,10 @@
 "use strict";
 
-const protected_session = (function() {
+import treeService from './note_tree.js';
+import noteEditor from './note_editor.js';
+import utils from './utils.js';
+import server from './server.js';
+
 const $dialog = $("#protected-session-password-dialog");
 const $passwordForm = $("#protected-session-password-form");
 const $password = $("#protected-session-password");
@@ -174,7 +178,7 @@ const protected_session = (function() {
 $protectButton.click(protectNoteAndSendToServer);
 $unprotectButton.click(unprotectNoteAndSendToServer);
 
-    return {
+export default {
     setProtectedSessionTimeout,
     ensureProtectedSession,
     resetProtectedSession,
@@ -186,4 +190,3 @@ const protected_session = (function() {
     protectSubTree,
     ensureDialogIsClosed
 };
-})();

src/public/javascripts/script_api.js

@@ -1,3 +1,5 @@
+import treeService from './note_tree.js';
+
 function ScriptApi(startNote, currentNote) {
     const $pluginButtons = $("#plugin-buttons");
 
@@ -52,3 +54,5 @@ function ScriptApi(startNote, currentNote) {
         runOnServer
     }
 }
+
+export default ScriptApi;

src/public/javascripts/script_context.js

@@ -1,3 +1,8 @@
+"use strict";
+
+import ScriptApi from './script_api.js';
+import utils from './utils.js';
+
 function ScriptContext(startNote, allNotes) {
     const modules = {};
 
@@ -19,3 +24,5 @@ function ScriptContext(startNote, allNotes) {
         }
     };
 }
+
+export default ScriptContext;

src/public/javascripts/search_tree.js

@@ -1,5 +1,7 @@
 "use strict";
 
+import treeService from './note_tree.js';
+
 const $tree = $("#tree");
 const $searchInput = $("input[name='search-text']");
 const $resetSearchButton = $("#reset-search-button");

src/public/javascripts/server.js

@@ -1,4 +1,8 @@
-const server = (function() {
+"use strict";
+
+import protected_session from './protected_session.js';
+import utils from './utils.js';
+
 function getHeaders() {
     let protectedSessionId = null;
 
@@ -89,7 +93,7 @@ const server = (function() {
     });
 }
 
-    return {
+export default {
     get,
     post,
     put,
@@ -97,5 +101,4 @@ const server = (function() {
     ajax,
     // don't remove, used from CKEditor image upload!
     getHeaders
-    }
-})();
+};

src/public/javascripts/sync.js

@@ -1,6 +1,7 @@
 "use strict";
 
-const syncService = (function() {
+import utils from './utils.js';
+
 async function syncNow() {
     const result = await server.post('sync/now');
 
@@ -24,8 +25,7 @@ const syncService = (function() {
     utils.showMessage("Note added to sync queue.");
 }
 
-    return {
+export default {
     syncNow,
     forceNoteSync
 };
-})();

src/public/javascripts/tree_changes.js

@@ -1,6 +1,8 @@
 "use strict";
 
-const treeChanges = (function() {
+import treeService from './note_tree.js';
+import utils from './utils.js';
+
 async function moveBeforeNode(nodesToMove, beforeNode) {
     for (const nodeToMove of nodesToMove) {
         const resp = await server.put('tree/' + nodeToMove.data.branchId + '/move-before/' + beforeNode.data.branchId);
@@ -122,11 +124,10 @@ const treeChanges = (function() {
     treeService.setCurrentNotePathToHash(node);
 }
 
-    return {
+export default {
     moveBeforeNode,
     moveAfterNode,
     moveToNode,
     deleteNodes,
     moveNodeUpInHierarchy
 };
-})();

src/public/javascripts/tree_utils.js

@@ -1,6 +1,7 @@
 "use strict";
 
-const treeUtils = (function() {
+import utils from './utils.js';
+
 const $tree = $("#tree");
 
 function getParentProtectedStatus(node) {
@@ -31,10 +32,9 @@ const treeUtils = (function() {
     return path.reverse().join("/");
 }
 
-    return {
+export default {
     getParentProtectedStatus,
     getNodeByKey,
     getNotePath,
     getNoteIdFromNotePath,
 };
-})();

src/public/javascripts/utils.js

@@ -1,6 +1,9 @@
 "use strict";
 
-const utils = (function() {
+import link from './link.js';
+import messaging from './messaging.js';
+import ScriptContext from './script_context.js';
+
 function reloadApp() {
     window.location.reload(true);
 }
@@ -235,7 +238,7 @@ const utils = (function() {
     return text;
 }
 
-    return {
+export default {
     reloadApp,
     showMessage,
     showError,
@@ -267,4 +270,3 @@ const utils = (function() {
     toObject,
     randomString
 };
-})();

src/views/index.ejs

@@ -521,43 +521,6 @@
 
     <script src="/javascripts/bootstrap.js" type="module"></script>
 
-    <script src="/javascripts/utils.js"></script>
-    <script src="/javascripts/init.js"></script>
-    <script src="/javascripts/server.js"></script>
-
-    <!-- Tree scripts -->
-    <script src="/javascripts/note_tree.js"></script>
-    <script src="/javascripts/tree_changes.js"></script>
-    <script src="/javascripts/cloning.js"></script>
-    <script src="/javascripts/tree_utils.js"></script>
-    <script src="/javascripts/drag_and_drop.js"></script>
-    <script src="/javascripts/context_menu.js"></script>
-    <script src="/javascripts/export.js"></script>
-
-    <!-- Note detail -->
-    <script src="/javascripts/note_editor.js"></script>
-    <script src="/javascripts/protected_session.js"></script>
-    <script src="/javascripts/note_type.js"></script>
-
-    <!-- dialogs -->
-    <script src="/javascripts/dialogs/recent_notes.js"></script>
-    <script src="/javascripts/dialogs/add_link.js"></script>
-    <script src="/javascripts/dialogs/jump_to_note.js"></script>
-    <script src="/javascripts/dialogs/settings.js"></script>
-    <script src="/javascripts/dialogs/note_history.js"></script>
-    <script src="/javascripts/dialogs/recent_changes.js"></script>
-    <script src="/javascripts/dialogs/event_log.js"></script>
-    <script src="/javascripts/dialogs/edit_tree_prefix.js"></script>
-    <script src="/javascripts/dialogs/sql_console.js"></script>
-    <script src="/javascripts/dialogs/note_source.js"></script>
-    <script src="/javascripts/dialogs/labels.js"></script>
-
-    <script src="/javascripts/link.js"></script>
-    <script src="/javascripts/sync.js"></script>
-    <script src="/javascripts/messaging.js"></script>
-    <script src="/javascripts/script_context.js"></script>
-    <script src="/javascripts/script_api.js"></script>
-
     <script type="text/javascript">
       // we hide container initally because otherwise it is rendered first without CSS and then flickers into
       // final form which is pretty ugly.