upd: note.js

migrate from old to new

assets/js/note.js

@@ -1,5 +1,65 @@
 import { state } from './state.js';
-import { toggleFields } from './home.js';
+import { toggleFields, makeButton } from './home.js';
+
+var failureCount = state.saveFailureCount;
+
+/**
+ * Retrieves a note from the server based on the provided ID.
+ *
+ * @param {string} id - The ID of the note to retrieve.
+ * @param {boolean} [runOpen=true] - Whether to open the note sidebar after retrieving the note.
+ * @return {Promise<void>} A promise that resolves when the note is successfully retrieved and the UI is updated.
+ */
+export function retrieveNote(id, runOpen = true) {
+    fetch('/get-note', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            'id': id
+        })
+    })
+        .then(response => response.json())
+        .then(result => {
+            var dt = new Date(result.date.date);
+
+            document.querySelector('#notes').value = result.text;
+            document.querySelector('#passage').value = result.passage;
+            document.querySelector('#series').value = result.series.id;
+            document.querySelector('#speaker').value = result.speaker.id;
+            document.querySelector('#noteTitle').value = result.title;
+            document.querySelector('#noteDate').value = '';
+            document.querySelector('#noteDate').value =
+                (dt.getMonth() < 9 ? '0' + (dt.getMonth() + 1) : (dt.getMonth() + 1)) + '/' +
+                (dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate()) + '/' +
+                dt.getFullYear();
+            document.querySelector('#noteId').value = result.id;
+
+            if (result.recording) {
+                document.querySelector('#recording').value = result.recording;
+            }
+
+            if (result.refs) {
+                state.references = result.refs;
+            }
+
+            const list = document.querySelector('#ref-list');
+            list.innerHTML = '';
+            var newList = null;
+            for (var x in state.references) {
+                var newList = document.createElement('li');
+                newList.className = 'tab';
+                var button = makeButton(x);
+                newList.appendChild(button);
+                list.appendChild(newList);
+            }
+
+            if (runOpen) {
+                note.openNote(false);
+            }
+        });
+}
 
 /**
  * Toggles the visibility of the note list and reference elements.
@@ -9,7 +69,7 @@ import { toggleFields } from './home.js';
  */
 export function openNote(openSidebar = true) {
     const noteList = document.querySelector('#note-list');
-    const refs = document.querySelector('#ref');
+    const refs = document.querySelector('#ref-text');
 
     if (noteList.style.display == 'block') {
         noteList.style.display = 'none';
@@ -19,8 +79,8 @@ export function openNote(openSidebar = true) {
         refs.style.display = 'none';
     }
 
-    if (openSidebar) {
+    if (openSidebar && !document.querySelector('.container').classList.contains('sidebar-collapsed')) {
-        document.querySelector('.toggle').click();
+        document.querySelector('.container').classList.add('sidebar-collapsed');
     }
 }
 
@@ -51,7 +111,7 @@ export function showSave() {
     // Schedule the animation to run every 1 second (which is equivalent to a 1-second delay between each iteration)
     var si = setInterval(function () {
         // Increment the opacity of the checkmark by 0.01 each time
-        op = parseFloat(checkmark.style.opacity);
+        let op = parseFloat(checkmark.style.opacity);
         checkmark.style.opacity = op - 0.1;
 
         // If the opacity is greater than or equal to 1, reset it back to 0 and stop the animation
@@ -144,9 +204,9 @@ export function newNote() {
     state.references = {};
     state.saved = true;
     state.textDirty = false;
-    document.querySelector('#note-header-left h2').classList.remove('dirty');
+    document.querySelector('.note-header-column h2').classList.remove('dirty');
 
-    dt = new Date();
+    var dt = new Date();
     document.querySelector('#noteDate').value = dt.getFullYear() + '-' +
         (dt.getMonth() < 9 ? '0' + (dt.getMonth() + 1) : (dt.getMonth() + 1)) + '-' +
         (dt.getDate() < 10 ? '0' + dt.getDate() : dt.getDate());
@@ -159,8 +219,8 @@ export function newNote() {
     document.querySelector('#noteId').value = '';
 
     document.querySelector('#ref-list').innerHTML = '';
-    document.querySelector('#ref').innerHTML = '';
+    document.querySelector('#ref-text').innerHTML = '';
-    document.querySelector('.toggle').click();
+    document.querySelector('.container').classList.add('sidebar-collapsed');
 }
 
 /**
@@ -208,7 +268,7 @@ export function saveNote(event) {
         passage: document.querySelector('#passage').value,
         note: document.querySelector('#notes').value,
         recording: document.querySelector('#recording').value,
-        refs: references
+        refs: state.references
     };
     $.ajax({
         url: '/save-note',
@@ -220,14 +280,13 @@ export function saveNote(event) {
     })
         .done(function (data) {
             if (data.msg == 'saved' && !state.saved) {
-                state.saveFailureCount = SAVE_FAILURE_LIMIT;
                 saveCheck.classList.remove('saving', 'error', 'fa-times-circle', 'fa-save');
                 showSave();
                 if (noteText == document.querySelector('#notes').value) {
                     state.saved = true;
                     state.textDirty = false;
-                    document.querySelector('note-header h2').classList.remove('dirty');
+                    document.querySelector('.note-header h2').classList.remove('dirty');
-                    document.querySelector('mobile-note-header h2').classList.remove('dirty');
+                    document.querySelector('.mobile-note-header h2').classList.remove('dirty');
                 }
 
                 if (data.new) {
@@ -236,7 +295,7 @@ export function saveNote(event) {
             }
         })
         .fail(function (xhr, status, error) {
-            state.saveFailureCount--;
+            state.failureCount--;
             saveCheck.classList.remove('saving', 'fa-save');
             saveCheck.classList.add('fa-times-circle', 'error');
             console.error(error);
@@ -246,11 +305,11 @@ export function saveNote(event) {
                 saveCheck.classList.remove('saving', 'fa-save');
                 saveCheck.classList.add('error', 'fa-times-circle');
             }
-            clearTimeout(to);
+            clearTimeout(state.to);
-            if (state.saveFailureCount > 0) {
+            if (state.failureCount > 0) {
                 state.to = setTimeout(saveNote, state.saveInterval);
             } else {
-                state.saveFailureCount = SAVE_FAILURE_LIMIT;
+                state.failureCount = state.saveFailureCount;
             }
         });
 }
@@ -281,6 +340,8 @@ export function findRefLinks() {
             })
                 .then(response => response.text())
                 .then(result => {
+                    let psg, book, cv;
+
                     passage = passage.replace(/\+/g, ' ');
                     psg = passage.split(' ');
                     if (psg.length > 2) {
@@ -292,8 +353,8 @@ export function findRefLinks() {
                     }
                     showPassage(
                         e,
-                        "<button onclick='closePopup()'>Close</button>&nbsp;&nbsp;" +
+                        "<button onclick='note.closePopup()'>Close</button>&nbsp;&nbsp;" +
-                        "<button onclick=\"queryRef('bible', '" + book + "', '" + cv + "')\">Open Ref</button><br/>" +
+                        "<button onclick=\"ref.queryRef('bible', '" + book + "', '" + cv + "')\">Open Ref</button><br/>" +
                         result);
                 });
         });
@@ -339,30 +400,63 @@ export function findLinks() {
                     }
                     showPassage(
                         e,
-                        "<button onclick='home.closePopup()'>Close</button>&nbsp;&nbsp;" +
+                        "<button onclick='note.closePopup()'>Close</button>&nbsp;&nbsp;" +
-                        "<button onclick=\"home.queryRef('bible', '" + book + "', '" + cv + "')\">Open Ref</button><br/>" +
+                        "<button onclick=\"ref.queryRef('bible', '" + book + "', '" + cv + "')\">Open Ref</button><br/>" +
                         result);
                 });
         });
     }
 }
 
+/**
+ * Shows a passage in a popup element relative to the cursor position.
+ *
+ * @param {Event} event - The event that triggered the function.
+ * @param {string} text - The text to be displayed in the popup.
+ * @return {void} This function does not return a value.
+ */
+export function showPassage(event, text) {
+    // Create a new div element for the popup
+    const popup = document.querySelector('#passage-popup');
+    popup.innerHTML = state.md.render(text);
+
+    // Position the popup relative to the cursor
+    let x = event.clientX + window.scrollX;
+    let y = event.clientY + window.scrollY;
+
+    // Set the position of the popup element
+    popup.style.top = `${y}px`;
+    popup.style.left = `${x}px`;
+    popup.style.display = 'block';
+}
+
+/**
+ * Closes the passage popup by clearing its content and hiding it.
+ *
+ * @return {void} This function does not return anything.
+ */
+export function closePopup() {
+    const popup = document.querySelector('#passage-popup');
+    popup.innerHTML = '';
+    popup.style.display = 'none';
+}
+
 /**
  * Opens the share note functionality.
  */
 export function openShareNote() {
-    var id = document.querySelector('#noteId').value;
+    let id = document.querySelector('#noteId').value;
     if (!id) {
         alert('No Open Note Found');
         return;
     }
 
-    bd = document.querySelector('#modal-backdrop');
+    let bd = document.querySelector('#modal-backdrop');
     bd.style.display = 'block';
-    cont = document.querySelector('#modal-container');
+    let cont = document.querySelector('#modal-container');
     cont.style.display = bd.style.display;
 
-    emailCont = document.querySelector('#modal-container');
+    let emailCont = document.querySelector('#modal-container');
     emailCont.style.left = ((window.innerWidth / 2) - (emailCont.clientWidth / 2)) + 'px';
     emailCont.style.top = ((window.innerHeight / 2) - (emailCont.clientHeight / 2)) + 'px';
 }