refactored JS

7 files changed, 55 insertions, 13 deletions

diff --git a/design/sass/_forms.scss b/design/sass/_forms.scss
index d8a6a03..152e0ac 100644
--- a/design/sass/_forms.scss
+++ b/design/sass/_forms.scss
@@ -186,3 +186,12 @@ select {
     }
     margin: 3rem 0 1.5rem;
 }
+.form-alert {
+    border: 3px solid red;
+    &:before {
+        display: block;
+        content: "This field is required";
+        padding: 6px;
+        color: red;
+    }
+}
diff --git a/design/sass/_modal.scss b/design/sass/_modal.scss
index dd21816..f333fd2 100644
--- a/design/sass/_modal.scss
+++ b/design/sass/_modal.scss
@@ -1,5 +1,4 @@
 #overlay{
-    font-family:Lato;
     position:fixed;
     width:100vw;
     height:100vh;
diff --git a/design/templates/notes/notes_detail.html b/design/templates/notes/notes_detail.html
index 26bff03..edf45e7 100644
--- a/design/templates/notes/notes_detail.html
+++ b/design/templates/notes/notes_detail.html
@@ -50,6 +50,7 @@
         <div id="q-container" class="inactive"><div id="note-body">{% if object.body_html %}{{object.body_html|safe}}{%else%}{{object.body_text}}{%endif%}</div></div>
         <input id="btn-js-hide" type="submit" class="btn sm" value="Save" >
         </form>
+        <button type="submit" value="trash" class="btn btn-hollow">Move to Trash</button>
     </article>
     <!--<aside class="note-list-container">
         <div class="svg-wrapper"><svg class="svg-icon-arrow">
diff --git a/scripts/package.json b/scripts/package.json
index 1ec659e..4b55662 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -14,7 +14,7 @@
         "uglify:local": "uglifyjs tmp/main.pack.js -m -o  ../media/js/main.min.js",
         "uglify:deploy": "mkdir -p ../media/js && uglifyjs tmp/*.js -m -c drop_console=true -o ../media/js/main.min.js",
         "cleanup": "rm -rf tmp",
-        "build": "pnpm run babel && pnpm run include && pnpm run concat && pnpm run browserify && pnpm run uglify:local && pnpm run cleanup",
+        "build": "pnpm run babel && pnpm run concat && pnpm run browserify && pnpm run uglify:local && pnpm run cleanup",
         "deploy": "pnpm run babel && pnpm run include && pnpm run uglify && pnpm run cleanup",
         "watch": "watch 'pnpm run build' ."
     },
diff --git a/scripts/src/note-create.js b/scripts/src/note-create.js
index b8ecb46..0a30808 100644
--- a/scripts/src/note-create.js
+++ b/scripts/src/note-create.js
@@ -4,13 +4,26 @@ if (typeof(document.getElementById('new-note-form')) != 'undefined' && document.
             var form = document.getElementById('new-note-form');
             form.quill = initQuill("#note-body");
             form.note_text = document.getElementById('id_body_text');
+            form.note_text.required = false;
+            form.note_qjson = document.getElementById('id_body_qjson');
             form.fs_body_text = document.getElementById("fs-body_text");
             form.fs_body_text.classList.add('hide')
             form.note_html = document.getElementById('id_body_html');
             form.note_html.innerHTML = form.quill.root.innerHTML;
+            form.quill.on('text-change', function(delta, oldDelta, source) {
+                if (source == 'api') {
+                    console.log("An API call triggered this change.");
+                } else if (source == 'user') {
+                    console.log("A user action triggered this change.");
+                    form.note_text.innerHTML = form.quill.getText();
+                }
+            });
             form.onsubmit = function(e) {
                 var form_texts = e.target.getElementsByTagName('textarea');
-                form_texts['body_text'].innerHTML = e.target.quill.getText();
+                if (isQuillEmpty(e.target.quill)) {
+                    e.preventDefault();
+                    document.getElementById('q-container').classList.add('form-alert');
+                }
                 form_texts['body_html'].innerHTML = e.target.quill.root.innerHTML;
                 form_texts['body_qjson'].innerHTML = JSON.stringify(e.target.quill.getContents());
             };
@@ -22,6 +35,8 @@ if (typeof(document.getElementById('new-note-form')) != 'undefined' && document.
                     var modal = modalBox(el, document.getElementById('js-overlay-notebook'));
                 });
             }
+            var notebookAddForm = document.getElementById('nb-create-form');
+            ajaxHijack(notebookAddForm, notebookCreate)
         }
     });
 }
diff --git a/scripts/src/note-edit.js b/scripts/src/note-edit.js
index c8f3caa..5abbab7 100644
--- a/scripts/src/note-edit.js
+++ b/scripts/src/note-edit.js
@@ -82,13 +82,6 @@ function edit_note(btn, form, title, quill, qcontainer, url){
     }
     return false;
 }
-function ajaxHijack(form, func) {
-    form.onsubmit = function(e) {
-        e.preventDefault();
-        func(e.target);
-        return false;
-    }
-}
 function notebookCreate(form) {
     var request = new XMLHttpRequest();
     var url = form.action
@@ -107,7 +100,9 @@ function notebookCreate(form) {
             var select = document.getElementById('id_notebook');
             var parentForm = document.getElementById('note-edit-form');
             select.options.add(new Option(data['name'], data['id'], false, true));
-            parentForm.formchange = true;
+            if (parentForm !== null) {
+                parentForm.formchange = true;
+            }
         } else {
             var data = JSON.parse(request.responseText);
             console.log(data);
@@ -146,7 +141,7 @@ if (typeof(document.getElementById('note-edit-form')) != 'undefined' && document
         form.addEventListener('input', function (e) {
             form.formchange = true;
         });
-        //document.getElementById('btn-js-hide').classList.add('hide');
+        document.getElementById('btn-js-hide').classList.add('hide');
         btn.classList.remove('hide');
         btn.editing = false;
         btn.addEventListener('click', function(e){
diff --git a/scripts/src/util.js b/scripts/src/util.js
index 694a393..daad7e1 100644
--- a/scripts/src/util.js
+++ b/scripts/src/util.js
@@ -23,6 +23,15 @@ function getJSON(method, url, callback) {
     request.send();
 }
 
+// hijack a form and submit with ajax
+function ajaxHijack(form, func) {
+    form.onsubmit = function(e) {
+        e.preventDefault();
+        func(e.target);
+        return false;
+    }
+}
+
 //global init for Color Picker
 function initColorPicker(form){
     var notebook_form_inputs = form.getElementsByTagName('input');
@@ -130,7 +139,7 @@ function modalBox(el, content){
     //handle removing modals 
     overlay.destroy = function(){
         if(overlay.parentNode === document.body) {
-            wrapper = document.querySelector('#content-wrapper').firstChild;
+            var wrapper = document.querySelector('#content-wrapper').firstChild;
             window.elemsRemoved = wrapper;
             wrapper.remove();
             overlay.parentNode.removeChild(overlay);
@@ -150,3 +159,17 @@ function modalBox(el, content){
     });
     return overlay;
 };
+
+/**
+ * Check whether editor content is empty or not.
+ * @return {Bool}
+ */
+function isQuillEmpty(quill) {
+    return quill.getContents().ops[0].insert == '\n' && quill.getLength() < 2;
+}
+function isEmpty(quill) {
+    const commentText = quill.getText().trim();
+    console.log(commentText);
+    const re = /^<p>(<br>|<br\/>|<br\s\/>|\s+|\r)<\/p>$/gm;
+    return re.test(commentText);
+};