changed to custom modal, added saving animation for note editing.

1 files changed, 19 insertions, 4 deletions

diff --git a/scripts/src/note-edit.js b/scripts/src/note-edit.js
index 5abbab7..3d01794 100644
--- a/scripts/src/note-edit.js
+++ b/scripts/src/note-edit.js
@@ -52,6 +52,9 @@ function edit_note(btn, form, title, quill, qcontainer, url){
                         link.setAttribute('href', '/n/t/'+tags[i]['fields']['slug']);
                         link.appendChild(span);
                         tags_display.appendChild(link);
+                        if (window.overlay !== undefined) {
+                            window.overlay.destroy();
+                        }
                     }
                     quill.change = false;
                 } else {
@@ -62,8 +65,16 @@ function edit_note(btn, form, title, quill, qcontainer, url){
             request.onerror = function() {
                 console.log('error on request');
             };
-            console.log(request);
-            console.log(form);
+            //create a modal to let the user know we're saving
+            var saveModal = document.createElement('div');
+            var loader = document.createElement('div');
+            loader.classList.add('loader');
+            saveModal.appendChild(loader);
+            saveModal.modalHed = "Saving changes"; //modal text content
+            saveModal.wrapperClass = 'loading'; //add a wrapper class to the modal for styling
+            var modal = modalBox(saveModal);
+            document.getElementById('close-btn').classList.add('hide');
+            //send the request to the REST API
             request.send(new FormData(form));           
         }
         title.setAttribute('contenteditable', false);
@@ -141,7 +152,9 @@ 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');
+        var formbtn = document.getElementById('btn-js-hide')
+        formbtn.classList.add('hide');
+        console.log(formbtn);
         btn.classList.remove('hide');
         btn.editing = false;
         btn.addEventListener('click', function(e){
@@ -157,7 +170,9 @@ if (typeof(document.getElementById('note-edit-form')) != 'undefined' && document
         function addHandler(el){
             el.addEventListener('click', function(e){
                 e.preventDefault();
-                var modal = modalBox(el, document.getElementById('js-overlay-notebook'));
+                var modalContent = document.getElementById('js-overlay-notebook');
+                modalContent.wrapperClass = 'overlay'; //add a wrapper class to the modal for styling
+                var modal = modalBox(modalContent, el);
             });
         }
     });