converted recent changes to module

public/javascripts/recent_changes.js

@@ -1,7 +1,8 @@
-const recentChangesDialog = $("#recent-changes-dialog");
+const recentChanges = (function() {
+    const dialog = $("#recent-changes-dialog");
 
-async function showRecentChanges() {
-    recentChangesDialog.dialog({
+    async function showDialog() {
+        dialog.dialog({
             modal: true,
             width: 800,
             height: 700
@@ -13,7 +14,7 @@ async function showRecentChanges() {
             error: () => error("Error getting recent changes.")
         });
 
-    recentChangesDialog.html('');
+        dialog.html('');
 
         const groupedByDate = groupByDate(result);
 
@@ -41,11 +42,11 @@ async function showRecentChanges() {
                     .append(' (').append(revLink).append(')'));
             }
 
-        recentChangesDialog.append(dayEl);
+            dialog.append(dayEl);
+        }
     }
-}
 
-function groupByDate(result) {
+    function groupByDate(result) {
         const groupedByDate = new Map();
         const dayCache = {};
 
@@ -74,13 +75,18 @@ function groupByDate(result) {
             groupedByDate.get(dateDay).push(row);
         }
         return groupedByDate;
-}
+    }
 
 
-$(document).bind('keydown', 'alt+r', showRecentChanges);
+    $(document).bind('keydown', 'alt+r', showDialog);
 
-$(document).on('click', '#recent-changes-dialog a', e => {
+    $(document).on('click', '#recent-changes-dialog a', e => {
         goToInternalNote(e, () => {
-        recentChangesDialog.dialog('close');
+            dialog.dialog('close');
         });
-});
+    });
+
+    return {
+        showDialog
+    };
+})();

public/javascripts/recent_notes.js

@@ -1,36 +1,39 @@
-glob.recentNotes = [];
-
-recentNotes = (function() {
-    const recentNotesSelectBox = $('#recent-notes-select-box');
-    const recentNotesDialog = $("#recent-notes-dialog");
-    const recentNotesJumpTo = $('#recentNotesJumpTo');
-    const recentNotesAddLink = $('#recentNotesAddLink');
+const recentNotes = (function() {
+    const dialog = $("#recent-notes-dialog");
+    const selectBox = $('#recent-notes-select-box');
+    const jumpToButton = $('#recentNotesJumpTo');
+    const addLinkButton = $('#recentNotesAddLink');
     const noteDetail = $('#note-detail');
+    let list = [];
 
     function addRecentNote(noteTreeId, noteContentId) {
         setTimeout(() => {
             // we include the note into recent list only if the user stayed on the note at least 5 seconds
             if (noteTreeId === glob.currentNote.detail.note_id || noteContentId === glob.currentNote.detail.note_id) {
                 // if it's already there, remove the note
-                glob.recentNotes = glob.recentNotes.filter(note => note !== noteTreeId);
+                list = list.filter(note => note !== noteTreeId);
 
-                glob.recentNotes.unshift(noteTreeId);
+                list.unshift(noteTreeId);
             }
         }, 1500);
     }
 
-    function showRecentNotes() {
+    function removeRecentNote(noteIdToRemove) {
+        list = list.filter(note => note !== noteIdToRemove);
+    }
+
+    function showDialog() {
         noteDetail.summernote('editor.saveRange');
 
-        recentNotesDialog.dialog({
+        dialog.dialog({
             modal: true,
             width: 800
         });
 
-        recentNotesSelectBox.find('option').remove();
+        selectBox.find('option').remove();
 
         // remove the current note
-        const recNotes = glob.recentNotes.filter(note => note !== glob.currentNote.detail.note_id);
+        const recNotes = list.filter(note => note !== glob.currentNote.detail.note_id);
 
         $.each(recNotes, (key, valueNoteId) => {
             const noteTitle = getFullName(valueNoteId);
@@ -48,14 +51,12 @@ recentNotes = (function() {
                 option.attr("selected", "selected");
             }
 
-            recentNotesSelectBox.append(option);
+            selectBox.append(option);
         });
     }
 
-    $(document).bind('keydown', 'alt+q', showRecentNotes);
-
     function getSelectedNoteIdFromRecentNotes() {
-        return recentNotesSelectBox.find("option:selected").val();
+        return selectBox.find("option:selected").val();
     }
 
     function setActiveNoteBasedOnRecentNotes() {
@@ -63,7 +64,7 @@ recentNotes = (function() {
 
         getNodeByKey(noteId).setActive();
 
-        recentNotesDialog.dialog('close');
+        dialog.dialog('close');
     }
 
     function addLinkBasedOnRecentNotes() {
@@ -71,7 +72,7 @@ recentNotes = (function() {
 
         const linkTitle = getNoteTitle(noteId);
 
-        recentNotesDialog.dialog("close");
+        dialog.dialog("close");
 
         noteDetail.summernote('editor.restoreRange');
 
@@ -82,7 +83,7 @@ recentNotes = (function() {
         });
     }
 
-    recentNotesSelectBox.keydown(e => {
+    selectBox.keydown(e => {
         const key = e.which;
 
         if (key === 13)// the enter key code
@@ -99,14 +100,18 @@ recentNotes = (function() {
         e.preventDefault();
     });
 
-    recentNotesSelectBox.dblclick(e => {
+    $(document).bind('keydown', 'alt+q', showDialog);
+
+    selectBox.dblclick(e => {
         setActiveNoteBasedOnRecentNotes();
     });
 
-    recentNotesJumpTo.click(setActiveNoteBasedOnRecentNotes);
-    recentNotesAddLink.click(addLinkBasedOnRecentNotes);
+    jumpToButton.click(setActiveNoteBasedOnRecentNotes);
+    addLinkButton.click(addLinkBasedOnRecentNotes);
 
     return {
-        addRecentNote
+        showDialog,
+        addRecentNote,
+        removeRecentNote
     };
 })();

public/javascripts/tree_mutations.js

@@ -49,8 +49,7 @@ function deleteNode(node) {
 
                 glob.allNoteIds = glob.allNoteIds.filter(e => e !== node.key);
 
-                // remove from recent notes
-                glob.recentNotes = glob.recentNotes.filter(note => note !== node.key);
+                recentNotes.removeRecentNote(node.key);
 
                 let next = node.getNextSibling();
                 if (!next) {

views/index.ejs

@@ -12,8 +12,8 @@
         </div>
 
         <div style="flex-grow: 100;">
-          <button class="btn btn-xs" onclick="showRecentChanges();">Recent changes</button>
-          <button class="btn btn-xs" onclick="showRecentNotes();">Recent notes</button>
+          <button class="btn btn-xs" onclick="recentChanges.showDialog();">Recent changes</button>
+          <button class="btn btn-xs" onclick="recentNotes.showDialog();">Recent notes</button>
           <button class="btn btn-xs" onclick="showJumpToNote();">Jump to note</button>
           <button class="btn btn-xs" onclick="showEventLog();">Event log</button>
         </div>