updated scripts

public/js/script.js

@@ -1,9 +1,11 @@
 // Get the link element
 const link = document.querySelector('.hamburger');
 var converter = null;
-var markdownit = null;
+var md = null;
 var references = {};
 let saved = false;
+let textDirty = false;
+let saveTimeout = 10000;
 
 // Add an event listener to the link
 if (link) {
@@ -13,11 +15,22 @@ if (link) {
     });
 }
 
+document.addEventListener('keyup', function (event) {
+    if (event.key == "F3") {
+        openRef();
+    }
+});
+
+document.querySelector('#notes').addEventListener('keyup', function (event) {
+    textDirty = true;
+    document.querySelector('#note-header-left h2').classList.add('dirty');
+});
+
 function setHeight() {
     converter = new showdown.Converter();
     //converter.setFlavor();
 
-    markdownit = new markdownit({
+    md = new markdownit({
         html: true,
         linkify: true,
         breaks: true
@@ -45,12 +58,30 @@ function setHeight() {
     dt = new Date();
     date.value = dt.getFullYear() + '-' + ((dt.getMonth() < 9) ? '0' + (dt.getMonth() + 1) : (dt.getMonth() + 1)) + '-' + dt.getDate();
 
-    setTimeout(saveNote, 10000);
+    setTimeout(saveNote, saveTimeout);
 }
 
 function newNote() {
-    notes = document.querySelector('.notes');
+    notes = document.querySelector('#notes');
-    notes.textContent = '';
+    notes.text = '';
+    notes.value = '';
+    references = {};
+    saved = true;
+    textDirty = false;
+    document.querySelector('#note-header-left h2').classList.remove('dirty');
+
+    dt = new Date();
+    document.querySelector('#noteDate').value = dt.getFullYear() + '-' + ((dt.getMonth() < 9) ? '0' + (dt.getMonth() + 1) : (dt.getMonth() + 1)) + '-' + dt.getDate();
+    document.querySelector('#noteTitle').value = '';
+    document.querySelector('#speaker').value = 0;
+    document.querySelector('#series').value = 0;
+    document.querySelector('#template').value = 0;
+    document.querySelector('#passage').value = '';
+    document.querySelector('#noteId').value = uuidv4();
+
+    document.querySelector('#noteSearch').style.display = 'none';
+    document.querySelector('#ref-list').innerHTML = '';
+    document.querySelector('#ref').innerHTML = '';
 }
 
 /**
@@ -64,8 +95,8 @@ function saveNote(event) {
         event.preventDefault();
     }
 
-    if (!validateNote()) {
+    if (!textDirty || !validateNote()) {
-        setTimeout(saveNote, 5000);
+        setTimeout(saveNote, saveTimeout);
         return;
     }
 
@@ -76,7 +107,8 @@ function saveNote(event) {
         speaker: document.querySelector('#speaker').value,
         series: document.querySelector('#series').value,
         passage: document.querySelector('#passage').value,
-        note: document.querySelector('#notes').value
+        note: document.querySelector('#notes').value,
+        refs: references
     };
     fetch('/index.php/save-note', {
         method: 'POST',
@@ -90,10 +122,12 @@ function saveNote(event) {
             if (data.msg == 'saved' && !saved) {
                 showSave();
                 saved = true;
+                textDirty = false;
+                document.querySelector('#note-header-left h2').classList.remove('dirty');
             }
         })
         .catch(error => console.log(error));
-    setTimeout(saveNote, 10000);
+    setTimeout(saveNote, saveTimeout);
 }
 
 function validateNote() {
@@ -105,7 +139,7 @@ function validateNote() {
     const id = document.querySelector('#noteId');
     const psg = document.querySelector('#passage');
 
-    if (!parseInt(id.value)) { return false; }
+    if (!isUuidV4Valid(id.value)) { return false; }
     if (!title.value.length) { return false; }
     if (!date.value) { return false; }
     if (!parseInt(speaker.value)) { return false; }
@@ -116,6 +150,11 @@ function validateNote() {
     return true;
 }
 
+function isUuidV4Valid(uuid) {
+    const regex = /^[a-f0-9]{8}-[a-f0-9]{4}-4[a-f0-9]{3}-[8|9|a|b][a-f0-9]{3}-[a-f0-9]{12}$/i;
+    return regex.test(uuid);
+}
+
 /**
  * Displays a checkmark animation on the screen.
  *
@@ -267,7 +306,7 @@ function queryRef() {
         body: JSON.stringify({
             'type': type.value,
             'book': book.value,
-            'reference': input.value
+            'reference': input.value,
         })
     })
         .then(response => response.text())
@@ -277,17 +316,7 @@ function queryRef() {
             const list = document.querySelector('#ref-list');
             var newList = document.createElement('li');
             newList.className = 'tab';
-            var button = document.createElement('button');
+            button = makeButton(results.title);
-            button.innerText = results.title;
-            button.onclick = function () {
-                document.querySelector('#ref').innerHTML = converter.makeHtml(references[button.innerText]);
-            }
-            button.ondblclick = function () {
-                document.querySelector('#ref').innerHTML = '';
-                delete references[results.title];
-                var list = button.parentElement;
-                list.remove();
-            }
             newList.appendChild(button);
             list.appendChild(newList);
 
@@ -297,13 +326,38 @@ function queryRef() {
             references[results.title] = results.text;
 
             input.value = '';
-            document.querySelector('#referenceType').value = 0;
+            document.querySelector('#referenceType').value = '';
-            document.querySelector('#referenceBook').value = 0;
+            document.querySelector('#referenceBook').value = '';
             openRef();
+            if (document.querySelector('ul.hamburger-list').classList.contains('menu-open')) {
                 link.click();
+            }
+            saved = false;
+            textDirty = true;
+            saveNote();
         });
 }
 
+function makeButton(title) {
+    var btn = document.createElement('button');
+    btn.innerText = title;
+    btn.addEventListener('click', function () {
+        document.querySelector('#ref').innerHTML = converter.makeHtml(references[title]);
+    });
+
+    btn.addEventListener('dblclick', function () {
+        document.querySelector('#ref').innerHTML = '';
+        delete references[title];
+        var list = this.parentElement;
+        list.remove();
+        saved = false;
+        textDirty = true;
+        saveNote();
+    });
+
+    return btn;
+}
+
 function retrieveTemplate(orig, dest) {
     const temp = document.querySelector('#' + orig);
     if (temp.value == '0') {
@@ -464,8 +518,14 @@ function previewNote() {
     var notePreview = document.querySelector('#notePreview');
     var previewButton = document.querySelector('#previewBtn');
 
-    //notePreview.innerHTML = converter.makeHtml(noteText.value);
+    const title = document.querySelector('#noteTitle');
-    notePreview.innerHTML = markdownit.render(noteText.value);
+    const speaker = document.querySelector('#speaker');
+    const passage = document.querySelector('#passage');
+
+    const markdownPreview = "# " + title.value + " - " +
+        speaker.options[speaker.selectedIndex].text + " - " + passage.value + "\n\n" + noteText.value;
+
+    notePreview.innerHTML = md.render(markdownPreview);
 
     if (previewButton.value == 'Preview') {
         previewButton.value = 'Hide Preview';
@@ -482,7 +542,7 @@ function previewNote() {
 
 function findLinks() {
     var links = document.querySelector('#notePreview').querySelectorAll('a');
-    alert(links.length);
+    //alert(links.length);
 }
 
 function showSearchNote(event) {
@@ -519,5 +579,33 @@ function searchNote() {
 
             document.querySelector('#noteSearch').style.display = 'none';
             link.click();
+
+            if (result.references) {
+                references = result.references;
+            }
+
+            const list = document.querySelector('#ref-list');
+            var newList = null;
+            for (var x in references) {
+                var newList = document.createElement('li');
+                newList.className = 'tab';
+                var button = makeButton(x);
+                newList.appendChild(button);
+                list.appendChild(newList);
+            }
+        });
+}
+
+/**
+ * Generates a random UUIDv4 string.
+ *
+ * @return {string} The generated UUIDv4 string.
+ */
+function uuidv4() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
+        .replace(/[xy]/g, function (c) {
+            const r = Math.random() * 16 | 0,
+                v = c == 'x' ? r : (r & 0x3 | 0x8);
+            return v.toString(16);
         });
 }