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

3 files changed, 44 insertions, 45 deletions

diff --git a/scripts/src/main-nav.js b/scripts/src/main-nav.js
index 0be7712..0dcd82b 100644
--- a/scripts/src/main-nav.js
+++ b/scripts/src/main-nav.js
@@ -46,40 +46,15 @@ if (document.getElementById('account-menu')) {
     }, false);
 }
 
-//function buildNotebookMenu () {
-//    var data = JSON.parse(this.responseText);
-//    var div = document.getElementById("notebooks-menu");
-//    var ul = document.createElement("ul");
-//    ul.classList.add("vertical","list-style-none");
-//    div.appendChild(ul);
-//    for(var i in data) {
-//        var li = document.createElement("li");
-//        var a = document.createElement("a");
-//        a.setAttribute("href", data[i]['json_absolute_url']);
-//        a.innerHTML = data[i]['name']; 
-//        li.append(a);
-//        ul.append(li);
-//    }
-//    var li = document.createElement("li");
-//    var a = document.createElement("a");
-//    a.setAttribute("href", '/user/{{user.username}}/notebooks/');
-//    a.innerHTML = "View all"
-//    li.append(a);
-//    ul.append(li);
-//}
-//
-//
-////    getJSON("{%url 'notebook-api-list' %}", buildNotebookMenu);
-//
-
-if (typeof(document.getElementById('js-overlay-content')) != 'undefined' && document.getElementById('js-overlay-content') != null) {
+if (typeof(document.getElementById('js-overlay-login')) != 'undefined' && document.getElementById('js-overlay-login') != null) {
   // Select your overlay trigger
-  var trigger = document.querySelector('#overlay-trigger');
-  trigger.addEventListener('click', function(e){
-    e.preventDefault();
-    novicell.overlay.create({
-      'selector': trigger.getAttribute('data-element'),
-      'class': 'selector-overlay',
-    });
-  });
+    var trigger = document.getElementById('overlay-trigger');
+    addLoginHandler(trigger);
+    function addLoginHandler(el){
+        console.log(el);
+        el.addEventListener('click', function(e){
+            e.preventDefault();
+            var modal = modalBox(el, document.getElementById('js-overlay-login'));
+        });
+    }
 }
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);
             });
         }
     });
diff --git a/scripts/src/util.js b/scripts/src/util.js
index daad7e1..144deae 100644
--- a/scripts/src/util.js
+++ b/scripts/src/util.js
@@ -35,7 +35,7 @@ function ajaxHijack(form, func) {
 //global init for Color Picker
 function initColorPicker(form){
     var notebook_form_inputs = form.getElementsByTagName('input');
-    var p = notebook_form.getElementsByTagName('fieldset')['color-picker'];
+    var p = form.getElementsByTagName('fieldset')['color-picker'];
     //document.getElementById('js-novi-backdrop').removeEventListener("click", handleMouseDown, true); 
     p.classList.add('top');
     p.popup = p.popup || new Picker({
@@ -100,23 +100,32 @@ function initQuill(el) {
 }
 
 //global modal function, give a DOM element, puts it in a model box.
-function modalBox(el, content){
+function modalBox(content, btn){
+    // if passed a btn object get data from that, otherwise check the content object
+    if (btn) {
+        var type = btn.dataset.modalHedClass;
+        var headline = btn.dataset.modalHed;
+    } else {
+        var type = content.hedClass || ''; 
+        var headline = content.modalHed || '';
+    }
     if (window.elemsRemoved !== undefined) {
         content = window.elemsRemoved;
     }
-    var headlines = ['Prompt'];
     var options = {
-        type : el.dataset.modalHedClass, 
-        headline : el.dataset.modalHed,
+        type : type, 
+        headline : headline,
         content : content,
         cancelText : 'X',
         confirmText : 'OK',
         cancelAction : function(){},
         confirmAction : function(){},
         reject : false,
+        class : content.wrapperClass
     };
     //build the modal
-    var overlay = buildComponent('div', 'overlay');
+    console.log(options.class);
+    var overlay = buildComponent('div', options.class);
     var outermodal = buildComponent('div', 'overlay-wrapper');
     var innermodal = buildComponent('div', 'modal');
     var headline = buildComponent('header', false, options.headline);