latest changes

1 files changed, 76 insertions, 60 deletions

diff --git a/scripts/src/notebook-edit.js b/scripts/src/notebook-edit.js
index 802ec79..7d0aa8f 100644
--- a/scripts/src/notebook-edit.js
+++ b/scripts/src/notebook-edit.js
@@ -19,13 +19,12 @@ function initNotebookEditor() {
     btn.classList.remove('hide');
     btn.addEventListener('click', function(e){
         e.preventDefault();
-        edit_notebook(this, title, form, picker, fname, window.url);
+        edit_notebook(title, form, picker, fname, window.url);
     }, false);
 }
-function initNotebookCreator(btn, title, url) {
-    var notebook_form = document.querySelector('#nb-create-form');
-    var notebook_form_inputs = notebook_form.getElementsByTagName('input');
-    var picker = notebook_form.getElementsByTagName('fieldset')['color-picker'];
+function activatePicker(form, picker) {
+    var inputs = form.getElementsByTagName('input');
+    var picker = picker;
     picker.popup = new Picker({
         parent: picker,
         color: 'blue',
@@ -34,87 +33,82 @@ function initNotebookCreator(btn, title, url) {
         editorFormat: 'hex',
         onDone: function(color) {
             this.settings['parent'].style.backgroundColor = color.rgbString;
-            notebook_form_inputs['color_rgb'].value = color.rgbString;
+            inputs['color_rgb'].value = color.rgbString;
         },
     });
+}
+function initMultiNotebookEditor(notebooks){
+    // Takes an array of elements containing forms 
     var forms = [];
     var btns = [];
-    var notebooks = document.getElementsByClassName('nb-list-item');
     window.bookediting = false;
     for (var i = 0; i < notebooks.length; i++) {
-        var fname = notebooks[i].getElementsByTagName('input')['id_form-'+i+'-name'];
+        var nb = notebooks[i];
+        var form = forms[i];
+        var btn = btns[i];
+        // hide the form elements
+        var fname = nb.getElementsByTagName('input')['id_name-'+i];
         fname.parentNode.classList.add('hide');
-        notebooks[i].getElementsByTagName('input')['i-'+i].classList.add('hide');
-        forms[i] = notebooks[i].getElementsByTagName('form')[0];
-        forms[i].getElementsByTagName('input')['color_rgb'].disabled = true;
-        forms[i].addEventListener('input', function () {
+        nb.getElementsByTagName('input')['i-'+i].classList.add('hide');
+        form = nb.getElementsByTagName('form')[0];
+        form.getElementsByTagName('input')['color_rgb'].disabled = true;
+        form.addEventListener('input', function () {
             window.formchange = true;
             console.log('adding change');
         });
-        btns[i] = notebooks[i].getElementsByTagName('a')['edit-toggle-btn-'+i];
-        btns[i].addEventListener('click', myFunc, false);
-        btns[i].t = notebooks[i].getElementsByTagName('h2')[0];
-        btns[i].picker = notebooks[i].getElementsByTagName('fieldset')['color-picker-'+i];
-        btns[i].fname = fname;
-        btns[i].form = forms[i];
-        btns[i].url = forms[i]['action'];
-        function myFunc(e) {
+        btn = nb.getElementsByTagName('a')['edit-toggle-btn-'+i];
+        btn.addEventListener('click', clickHandler, false);
+        btn.t = nb.getElementsByTagName('h2')[0].getElementsByTagName('a')[0];
+        btn.picker = nb.getElementsByTagName('fieldset')['color-picker-'+i];
+        btn.fname = fname;
+        btn.form = form;
+        btn.url = form['action'];
+        btn.trash = nb.getElementsByTagName('button')['trash']
+        btn.trash.classList.add('hide') 
+        btn.isHidden = true;
+        function clickHandler(e) {
             e.preventDefault();
-            edit_notebook(e.target, e.target.t, e.target.form, e.target.picker, e.target.fname, e.target.url);
+            e.target.textContent = e.target.isHidden ? 'Save' : 'Edit';
+            e.target.isHidden = !e.target.isHidden;
+            e.target.classList.toggle('save');
+            e.target.trash.classList.toggle('hide');
+            edit_notebook(e.target.t, e.target.form, e.target.picker, e.target.fname, e.target.url, 'POST');
         };
+        var more = form.getElementsByTagName('button')['more-button-'+i]
+        if (more !== undefined) {
+            more.slider = form.getElementsByTagName('ul')['n-list-'+i]
+            var isHidden = true;
+            more.addEventListener('click', moreclickHandler, false);
+            function moreclickHandler(e) {
+                console.log(e.target.slider);
+                e.preventDefault();
+                e.target.slider.classList.toggle('slideup');
+                e.target.slider.classList.toggle('slidedown');
+                e.target.textContent = isHidden ? 'Less' : 'More';
+                isHidden = !isHidden;
+            }
+        }
     }
 }
-function edit_notebook(btn, title, form, picker, fname, url){
+function edit_notebook(title, form, picker, fname, url, method){
+    var method = method || 'PUT';
     var form_inputs = form.getElementsByTagName('input');
-    console.log(picker);
     if (window.bookediting === false) {
-        picker.popup= new Picker({
-            parent: picker,
-            color: 'blue',
-            alpha: false,
-            //editor: false,
-            editorFormat: 'hex',
-            onDone: function(color) {
-                this.settings['parent'].style.backgroundColor = color.rgbString;
-                form_inputs['color_rgb'].value = color.rgbString;
-            },
-        });
+        activatePicker(form, picker);
         title.setAttribute('contenteditable', true);
         title.classList.add('highlight');
         form_inputs['color_rgb'].disabled = false;
-        btn.innerHTML = 'Save';
-        btn.classList.add('save');
         window.bookediting = true;
         window.titlecontents = title.innerHTML; 
         window.colorcontent = form_inputs['color_rgb'].value;
     } else {
         if (window.titlecontents !== title.innerHTML || window.colorcontent !== form_inputs['color_rgb'].value || window.formchange) {
-            console.log('changed');
-            console.log(form_inputs);
             fname.value = title.innerHTML;
-            //const data = formToJSON(form.elements);
-            //console.log(JSON.stringify(data, null, '  '));
-            var request = new XMLHttpRequest();
-            request.open('PATCH', url);
-            var csrftoken = getCookie('csrftoken');
-            request.setRequestHeader('X-CSRFToken', csrftoken);
-            request.onload = function() {
-                if (request.status >= 200 && request.status < 400) {
-                    console.log(request); 
-                } else {
-                    console.log(request); 
-                    console.log('server error');
-                }
-            };
-            request.onerror = function() {
-                console.log('error on request');
-            };
-            request.send(new FormData(form));           
+            var data = new FormData(form)
+            getJSONFromDjango(method, url, notebookCallback.bind(null, title), data);
         }
         title.setAttribute('contenteditable', false);
         title.classList.remove('highlight');
-        btn.innerHTML = 'Edit';
-        btn.classList.remove('save');
         form_inputs['color_rgb'].disabled = true;
         document.body.focus();
         window.bookediting = false;
@@ -122,9 +116,31 @@ function edit_notebook(btn, title, form, picker, fname, url){
     }
     return false;
 }
+function notebookCallback(title, request) {
+    if (request.status >= 200 && request.status < 400) {
+        if (title.href) {
+            var data = JSON.parse(request.responseText);
+            title.href = '/nb/'+ data['notebook']['permalink'];
+            console.log(title.href);
+        }
+        if (window.overlay !== undefined) {
+            window.overlay.destroy();
+        }
+    } else {
+        console.log(request); 
+        console.log('server error');
+    }
+}
 if (typeof(document.getElementById('nb-edit-form')) != 'undefined' && document.getElementById('nb-edit-form') != null) {
     initNotebookEditor();
 }
-if (typeof(document.getElementById('nb-create-form')) != 'undefined' && document.getElementById('nb-create-form') != null && document.getElementById('note-edit-form') === null) {
-    initNotebookCreator();
+if (typeof(document.getElementById('nb-create-form')) != 'undefined' && document.getElementById('nb-create-form') != null && document.getElementById('nb-list-home') !== null) {
+    var newnotebook = document.getElementById('notebook-wrapper');
+    newnotebook.classList.add('hide');
+    var notebookAddForm = document.getElementById('nb-create-form');
+    var btn = document.getElementById('add_id_notebook');
+    addNotebookModal(notebookAddForm, btn);
+    var create_form = document.getElementById('nb-create-form');
+    activatePicker(create_form, create_form.getElementsByTagName('fieldset')['color-picker']);
+    initMultiNotebookEditor(document.getElementsByClassName('nb-list-item'));
 }