restructured scripts and styled note edit interface

1 files changed, 83 insertions, 0 deletions

diff --git a/scripts/src/notebook-edit.js b/scripts/src/notebook-edit.js
new file mode 100644
index 0000000..00e9708
--- /dev/null
+++ b/scripts/src/notebook-edit.js
@@ -0,0 +1,83 @@
+
+const picker = document.getElementById('color-picker');
+function disablePicker(e) {
+    console.log(e.target.popup);
+}
+function initNotebookEditor() {
+    var btn = document.getElementById('edit-toggle-btn'),
+        title = document.getElementById('nb-title'),
+        form = document.getElementById('nb-edit-form');
+    
+    window.bookediting = false;
+    form.getElementsByTagName('input')['color_rgb'].disabled = true;
+    form.addEventListener('input', function () {
+        window.formchange = true;
+        console.log("adding change");
+    });
+    document.getElementById('btn-js-hide').classList.add('hide');
+    
+    btn.classList.remove('hide');
+    btn.addEventListener('click', function(e){
+        e.preventDefault();
+        edit_notebook(this, title, form, window.url);
+    }, false);
+}
+function edit_notebook(btn, title, form, url){
+    var form_inputs = form.getElementsByTagName('input');
+    if (window.bookediting === false) {
+        picker.popup= new Picker({
+            parent: picker,
+            color: 'blue',
+            alpha: false,
+            //editor: false,
+            editorFormat: 'hex',
+            onDone: function(color) {
+                picker.style.backgroundColor = color.rgbString;
+                document.getElementById('id_color_rgb').value = color.rgbString;
+            },
+        });
+        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 = document.getElementById('id_color_rgb').value
+    } else {
+        if (window.titlecontents !== title.innerHTML || window.colorcontent !== document.getElementById('id_color_rgb').value || window.formchange) {
+            console.log("changed");
+            form_inputs['name'].value = title.innerHTML;
+            //const data = formToJSON(form.elements);
+            //console.log(JSON.stringify(data, null, '  '));
+            var request = new XMLHttpRequest();
+            request.open('PATCH', url);
+            var csrftoken = Cookies.get('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));           
+        }
+        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;
+        picker.popup = null;
+    }
+    return false;
+}
+if (typeof(document.getElementById('nb-edit-form')) != "undefined" && document.getElementById('nb-edit-form') != null) {
+    initNotebookEditor();
+}