cleaned up JS and made modal handler.

8 files changed, 369 insertions, 325 deletions

diff --git a/scripts/src/color-picker.js b/scripts/src/color-picker.js
deleted file mode 100644
index e69de29..0000000
--- a/scripts/src/color-picker.js
+++ /dev/null
diff --git a/scripts/src/lib/overlay.js b/scripts/src/lib/overlay.js
deleted file mode 100644
index b40d911..0000000
--- a/scripts/src/lib/overlay.js
+++ /dev/null
@@ -1,253 +0,0 @@
-'use strict';
-/**
- * @name Novicell overlay
- * @desc Simple script that opens an overlay / modal with some content form either a selector or an URL
- * @author Danni Larsen (DLA), Michael Sølvsteen (MSL), Signe Helbo Poulsen (SHP), Emil Skytte Ankersen (EAN)
- * @example novicell.overlay.create({ 'selector': SELECTOR, 'url': URL,  'class':'CLASSNAME', 'onCreate': FUNCTIONNAME, 'onLoaded': FUNCTIONNAME, 'onDestroy': FUNCTIONNAME });
- * @requires none
- */
-
-var novicell = novicell || {};
-
-novicell.overlay = novicell.overlay || new function () {
-    var self = this;
-    var options = {};
-    var overlayElem;
-    var overlayContainer;
-    var overlayContent;
-    var backdrop;
-    var content;
-    var onCreate;
-    var onLoaded;
-    var onDestroy;
-    var isVideo = false;
-
-    this.create = function (opts) {
-        var self = this;
-        // Set global options
-        options = opts;
-
-        // Call onCreate callback
-        if (typeof options.onCreate === 'function') {
-            options.onCreate();
-        }
-
-        // Remove existing overlays
-        self.destroy();
-
-        // Check if content comes from a DOM selector
-        if (options.hasOwnProperty('selector') && options.selector !== null) {
-            var element = document.querySelector(options.selector);
-            
-            if (element) {
-                content = element.innerHTML;
-                constructOverlay();
-            } else {
-                console.warn('novicell.overlay: element does not exist. Please provide a valid selector for use in document.querySelector.');
-                return;
-            }
-        }
-
-        // Check if content comes from a HTML element
-        else if (options.hasOwnProperty('element') && options.element !== null) {
-            var element = options.element;
-
-            if (element) {
-                content = element.innerHTML;
-                constructOverlay();
-            } else {
-                console.warn('novicell.overlay: element does not exist. Please provide a valid DOM element.');
-                return;
-            }
-        }
-
-        // Or if content comes from an ID
-        else if (options.hasOwnProperty('videoId')) {
-            if (options.videoId !== null) {
-                var src = '';
-                isVideo = true;
-
-                if(options.type == 'vimeo') {
-                    src = 'https://player.vimeo.com/video/' + options.videoId + '?autoplay=' + options.autoplay;
-                }
-                else if(options.type == 'youtube') {
-                    src = 'https://www.youtube.com/embed/' + options.videoId + '?autoplay=' + options.autoplay + '&rel=0';
-                }
-                else {
-                    return;
-                }
-
-                var iframe = document.createElement('iframe');
-                iframe.setAttribute('src', src);
-                iframe.setAttribute('frameborder', 0);
-                iframe.setAttribute('allowfullscreen', '');
-                iframe.setAttribute('width', '100%');
-                iframe.setAttribute('height', '100%');
-
-                content = iframe.outerHTML;
-                
-                constructOverlay();
-            } else {
-                console.warn('novicell.overlay: video-id is empty. Please provide a video-id for use in video embed code (we support only Vimeo and YouTube).');
-                return;
-            }
-        }
-        // If nothing is working, send error to los consolé
-        else {
-            console.error('novicell.overlay: no content to display! Please set a selector or a url to load.')
-            return;
-        }
-    };
-
-    this.destroy = function () {
-        if(document.querySelector('#js-novi-overlay')) {
-            // Remove elements
-            overlayElem.parentElement.removeChild(overlayElem);
-            backdrop.parentElement.removeChild(backdrop);
-
-            // Stop listening for close overlay events
-            document.removeEventListener('keyup', self.destroy);
-
-            // Remove class on body
-            document.documentElement.classList.remove('no-scroll', 'novi-overlay--open');
-
-            // Reset video variable
-            isVideo = false;
-
-            // Call onDestroy callback
-            if (typeof options.onDestroy === 'function') {
-                options.onDestroy();
-            }
-        }
-    };
-
-    function constructOverlay() {
-        // Create backdrop
-        setupBackdrop();
-
-        // Create the overlay
-        setupOverlay();
-
-        // Create content for overlay
-        setupOverlayContainer();
-
-        // Create close button
-        setupCloseButton();
-
-        // Add class to body-element
-        document.documentElement.classList.add('no-scroll');
-
-        // Call onLoaded callback
-        if (typeof options.onLoaded === 'function') {
-            options.onLoaded();
-        }
-    };
-
-    function setupBackdrop() {
-        // Create the backdrop
-        backdrop = document.createElement('div');
-        backdrop.classList.add('novi-backdrop');
-        backdrop.id = 'js-novi-backdrop';
-
-        backdrop.addEventListener('click', function(e){
-            if(e.target.classList.contains('novi-overlay') || e.target.classList.contains('novi-overlay__container')) {
-                self.destroy();
-            }
-        });
-
-        // Add backdrop to overlay element
-        document.querySelector('body').appendChild(backdrop);
-    };
-
-    /*
-     * Helper functions for HTML elements
-     */
-    function setupOverlay() {
-        // Create the overlay
-        overlayElem = document.createElement('div');
-        overlayElem.classList.add('novi-overlay');
-        overlayElem.id = 'js-novi-overlay';
-
-        // Set class for the overlay, if set in options
-        if (options.hasOwnProperty('class')) {
-            overlayElem.classList.add(options.class);
-        }
-
-        // Add overlay to overlay element
-        // document.querySelector('body').appendChild(overlayElem);
-        backdrop.appendChild(overlayElem);
-    };
-
-    function setupOverlayContainer() {
-        // Create content for overlay
-        overlayContainer = document.createElement('div');
-        overlayContainer.classList.add('novi-overlay__container');
-
-        // Create scroll element
-        overlayContent = document.createElement('div');
-        overlayContent.classList.add('novi-overlay__content');
-
-        if(isVideo) {
-            overlayContent.classList.add('novi-overlay__content--video')
-        }
-
-        // Set content
-        overlayContent.innerHTML = content;
-        overlayContainer.appendChild(overlayContent);
-
-        // Add overlayContainer to overlay element
-        overlayElem.appendChild(overlayContainer);
-    };
-
-    function setupCloseButton() {
-        // Create the button
-        var btnClose = document.createElement('button');
-        btnClose.classList.add('novi-overlay-close', 'button--close');
-        btnClose.type = 'button';
-        btnClose.id = 'js-novi-overlay-close';
-
-        // Add eventlistener for button click
-        btnClose.addEventListener('click', self.destroy);
-
-        // Add eventlistener for esc key
-        document.addEventListener('keydown', function (e) {
-            if (e.keyCode === 27) {
-                self.destroy();
-            }
-        });
-
-        // Add close button to overlay element
-        overlayContent.appendChild(btnClose);
-    };
-
-    /*
-     * Helper functions for getting content
-     */
-    function get(url) {
-        // Return a new promise.
-        return new Promise(function (resolve, reject) {
-            // Do the usual XHR stuff
-            var req = new XMLHttpRequest();
-            req.open('GET', url);
-
-            req.onload = function () {
-                if (req.status >= 200 && req.status < 400) {
-                    // Success!!
-                    resolve(req.response);
-                } else {
-                    // Error!!
-                    reject(Error(req.statusText));
-                }
-            };
-
-            // Handle network errors
-            req.onerror = function () {
-                reject(Error("Network Error"));
-            };
-
-            // Make the request
-            req.send();
-        });
-    };
-
-}();
diff --git a/scripts/src/main-nav.js b/scripts/src/main-nav.js
index c85cb4f..0be7712 100644
--- a/scripts/src/main-nav.js
+++ b/scripts/src/main-nav.js
@@ -70,4 +70,16 @@ if (document.getElementById('account-menu')) {
 //
 //
 ////    getJSON("{%url 'notebook-api-list' %}", buildNotebookMenu);
+//
 
+if (typeof(document.getElementById('js-overlay-content')) != 'undefined' && document.getElementById('js-overlay-content') != 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',
+    });
+  });
+}
diff --git a/scripts/src/note-edit.js b/scripts/src/note-edit.js
index c9126f1..c8f3caa 100644
--- a/scripts/src/note-edit.js
+++ b/scripts/src/note-edit.js
@@ -1,48 +1,59 @@
-function edit_note(btn, form, title, qcontainer, url){
+function edit_note(btn, form, title, quill, qcontainer, url){
     var form_inputs = form.getElementsByTagName('input');
+    var form_texts = form.getElementsByTagName('textarea');
+    var tags = form.getElementsByTagName('div')['tags'];
+    var tags_edit = document.getElementById('t-edit');;
     var notebook_display = document.getElementById('n-link');
+    var notebook_wrapper = form.getElementsByTagName('select')['notebook'].parentNode;
     var tags_display = document.getElementById('t-display');
-    var tags_edit = form.getElementsByTagName('input')['tags']
-    var form_texts = form.getElementsByTagName('textarea');
     var colorbox = document.getElementById('n-box');
-    if (window.editing === false) {
+    var fs_url = document.getElementById('fs-url');
+    if (btn.editing === false) {
         title.setAttribute('contenteditable', true);
         title.classList.add('highlight');
         qcontainer.classList.remove('inactive');
-        form.getElementsByTagName('select')['notebook'].parentNode.classList.remove('hide');
-        document.getElementsByTagName('select')['notebook'].parentNode.classList.remove('hide');
+        notebook_wrapper.classList.remove('hide');
+        //document.getElementsByTagName('select')['notebook'].parentNode.classList.remove('hide');
         notebook_display.classList.add('hide');
         tags_display.classList.add('hide');
-        tags_edit.parentNode.classList.remove('hide');
-        window.quill.enable(true);
+        tags_edit.classList.remove('hide');
+        fs_url.classList.toggle('hide');
+        quill.enable(true);
         btn.innerHTML = 'Save';
         btn.classList.add('save');
-        window.editing = true;
-        window.titlecontents = title.innerHTML; 
+        btn.editing = true;
+        title.titlecontents = title.innerHTML; 
     } else {
-        if (window.quillchange === true || window.titlecontents != title.innerHTML || window.formchange) {
+        if (quill.change === true || title.titlecontents != title.innerHTML || form.formchange) {
             form_inputs['title'].value = title.innerHTML;
-            form_texts['body_html'].innerHTML = window.quill.root.innerHTML;
-            form_texts['body_text'].innerHTML = window.quill.getText();
-            form_texts['body_qjson'].innerHTML = JSON.stringify(window.quill.getContents());
+            form_texts['body_html'].innerHTML = quill.root.innerHTML;
+            form_texts['body_text'].innerHTML = quill.getText();
+            form_texts['body_qjson'].innerHTML = JSON.stringify(quill.getContents());
             var request = new XMLHttpRequest();
-            request.open('PATCH', url);
-            var csrftoken = Cookies.get('csrftoken');
+            request.open('POST', url);
+            var csrftoken = getCookie('csrftoken');
             request.setRequestHeader('X-CSRFToken', csrftoken);
+            request.setRequestHeader('HTTP_X_REQUESTED_WITH', 'XMLHttpRequest');
             request.onload = function() {
                 if (request.status >= 200 && request.status < 400) {
                     var data = JSON.parse(request.responseText);
-                    var request2 = new XMLHttpRequest();
-                    request2.open('GET', '/api/v1/notes/notebook/'+data['notebook']+'/');
-                    request2.setRequestHeader('X-CSRFToken', csrftoken);
-                    request2.onload = function() {
-                        var data2 = JSON.parse(request2.responseText);
-                        var select = form.getElementsByTagName('select')['notebook'];
-                        document.getElementById('n-box').style.backgroundColor = data2['color_rgb'];
-                        notebook_display.getElementsByTagName('span')['n-name'].textContent = select.item(select.selectedIndex).innerHTML;
+                    document.getElementById('n-box').style.backgroundColor = data['notebook']['color'];
+                    notebook_display.getElementsByTagName('span')['n-name'].textContent = data['notebook']['name'];
+                    var tags = JSON.parse(data['tags']);
+                    while (tags_display.firstChild) {
+                        tags_display.firstChild.remove();
+                    }
+                    for(var i in tags) {
+                        var span = document.createElement('span');
+                        span.classList.add('tag-wrapper');
+                        span.innerHTML = tags[i]['fields']['name']
+                        var link = document.createElement('a');
+                        link.classList.add('t-link');
+                        link.setAttribute('href', '/n/t/'+tags[i]['fields']['slug']);
+                        link.appendChild(span);
+                        tags_display.appendChild(link);
                     }
-                    request2.send();
-                    window.quillchange = false;
+                    quill.change = false;
                 } else {
                     console.log(request); 
                     console.log('server error');
@@ -51,51 +62,109 @@ function edit_note(btn, form, title, qcontainer, url){
             request.onerror = function() {
                 console.log('error on request');
             };
+            console.log(request);
+            console.log(form);
             request.send(new FormData(form));           
         }
         title.setAttribute('contenteditable', false);
         title.classList.remove('highlight');
         qcontainer.classList.add('inactive');
-        window.quill.enable(false);
-        form.getElementsByTagName('select')['notebook'].parentNode.classList.add('hide');
+        quill.enable(false);
+        fs_url.classList.toggle('hide');
+        notebook_wrapper.classList.add('hide');
         btn.innerHTML = 'Edit';
         btn.classList.remove('save');
         tags_display.classList.remove('hide');
-        tags_edit.parentNode.classList.add('hide');
+        tags_edit.classList.add('hide');
         notebook_display.classList.remove('hide');
         document.body.focus();
-        window.editing = false;
+        btn.editing = false;
     }
     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
+    request.open('POST', url);
+    var csrftoken = getCookie('csrftoken');
+    request.setRequestHeader('X-CSRFToken', csrftoken);
+    request.setRequestHeader('HTTP_X_REQUESTED_WITH', 'XMLHttpRequest');
+    request.onload = function() {
+        if (request.status >= 200 && request.status < 400) {
+            var data = JSON.parse(request.responseText);
 
-if (typeof(document.getElementById('note-edit-form')) != "undefined" && document.getElementById('note-edit-form') != null) {
-    var btn = document.getElementById('edit-toggle-btn'),
-        qcontainer = document.getElementById('q-container'),
-        title = document.getElementById('note-title'),
-        tag_wrapper = document.getElementById('tag-wrapper'),
-        form = document.getElementById('note-edit-form'),
-        note_html = document.createElement('textarea'),
-        note_qjson = document.createElement('textarea');
+            // close modal if exists
+            if (window.overlay !== undefined) {
+                window.overlay.destroy();
+            }
+            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;
+        } else {
+            var data = JSON.parse(request.responseText);
+            console.log(data);
+            if (data['non_field_errors'][0] === "The fields owner, name must make a unique set.") {
+                document.getElementById('non-field-errors').innerHTML = "A Notebook with that name already exists, please choose another.";
+            }
+            console.log('server error');
+        }
+    };
+    request.onerror = function() {
+        console.log('error on request');
+    };
+    request.send(new FormData(form));           
+}
+if (typeof(document.getElementById('note-edit-form')) != 'undefined' && document.getElementById('note-edit-form') != null) {
+    document.addEventListener("DOMContentLoaded", function () {
+        var quill = initQuill("#note-body");
+        quill.change = false;
+        var btn = document.getElementById('edit-toggle-btn'),
+            qcontainer = document.getElementById('q-container'),
+            title = document.getElementById('note-title'),
+            tag_wrapper = document.getElementById('tag-wrapper'),
+            form = document.getElementById('note-edit-form'),
+            note_html = document.createElement('textarea'),
+            note_qjson = document.createElement('textarea');
 
-    note_html.setAttribute('name', 'body_html');
-    note_html.setAttribute('class', 'hide');
-    note_html.setAttribute('id', 'id_body_html');
-    note_qjson.setAttribute('name', 'body_qjson');
-    note_qjson.setAttribute('id', 'id_body_qjson');
-    note_qjson.setAttribute('class', 'hide');
-    form.appendChild(note_html);
-    form.appendChild(note_qjson);
-    form.addEventListener('input', function () {
-        window.formchange = true;
+        note_html.setAttribute('name', 'body_html');
+        note_html.setAttribute('class', 'hide');
+        note_html.setAttribute('id', 'id_body_html');
+        note_qjson.setAttribute('name', 'body_qjson');
+        note_qjson.setAttribute('id', 'id_body_qjson');
+        note_qjson.setAttribute('class', 'hide');
+        form.appendChild(note_html);
+        form.appendChild(note_qjson);
+        form.formchange = false;
+        form.addEventListener('input', function (e) {
+            form.formchange = true;
+        });
+        //document.getElementById('btn-js-hide').classList.add('hide');
+        btn.classList.remove('hide');
+        btn.editing = false;
+        btn.addEventListener('click', function(e){
+            e.preventDefault();
+            edit_note(e.target, form, title, quill, qcontainer, window.location.href );
+        }, false);
+        var notebook_form = document.getElementById('nb-create-form');
+        initColorPicker(notebook_form);    
+        var notebookAddForm = document.getElementById('nb-create-form');
+        ajaxHijack(notebookAddForm, notebookCreate)
+        var create_notebook_btn = document.getElementById('add_id_notebook');
+        addHandler(create_notebook_btn);
+        function addHandler(el){
+            el.addEventListener('click', function(e){
+                e.preventDefault();
+                var modal = modalBox(el, document.getElementById('js-overlay-notebook'));
+            });
+        }
     });
-    document.getElementById('btn-js-hide').classList.add('hide');
-    btn.classList.remove('hide');
-    btn.addEventListener('click', function(e){
-        e.preventDefault();
-        edit_note(this, form, title, qcontainer, window.url);
-    }, false);
-    window.editing = false;
-    window.quillchange = false;
 }
 
diff --git a/scripts/src/note-list.js b/scripts/src/note-list.js
new file mode 100644
index 0000000..90c89d9
--- /dev/null
+++ b/scripts/src/note-list.js
@@ -0,0 +1,33 @@
+/*! List.js v1.5.0 (http://listjs.com) by Jonny Strömberg (http://javve.com) */
+var List=function(t){function e(n){if(r[n])return r[n].exports;var i=r[n]={i:n,l:!1,exports:{}};return t[n].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var r={};return e.m=t,e.c=r,e.i=function(t){return t},e.d=function(t,r,n){e.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(r,"a",r),r},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=11)}([function(t,e,r){function n(t){if(!t||!t.nodeType)throw new Error("A DOM element reference is required");this.el=t,this.list=t.classList}var i=r(4),s=/\s+/;Object.prototype.toString;t.exports=function(t){return new n(t)},n.prototype.add=function(t){if(this.list)return this.list.add(t),this;var e=this.array(),r=i(e,t);return~r||e.push(t),this.el.className=e.join(" "),this},n.prototype.remove=function(t){if(this.list)return this.list.remove(t),this;var e=this.array(),r=i(e,t);return~r&&e.splice(r,1),this.el.className=e.join(" "),this},n.prototype.toggle=function(t,e){return this.list?("undefined"!=typeof e?e!==this.list.toggle(t,e)&&this.list.toggle(t):this.list.toggle(t),this):("undefined"!=typeof e?e?this.add(t):this.remove(t):this.has(t)?this.remove(t):this.add(t),this)},n.prototype.array=function(){var t=this.el.getAttribute("class")||"",e=t.replace(/^\s+|\s+$/g,""),r=e.split(s);return""===r[0]&&r.shift(),r},n.prototype.has=n.prototype.contains=function(t){return this.list?this.list.contains(t):!!~i(this.array(),t)}},function(t,e,r){var n=window.addEventListener?"addEventListener":"attachEvent",i=window.removeEventListener?"removeEventListener":"detachEvent",s="addEventListener"!==n?"on":"",a=r(5);e.bind=function(t,e,r,i){t=a(t);for(var o=0;o<t.length;o++)t[o][n](s+e,r,i||!1)},e.unbind=function(t,e,r,n){t=a(t);for(var o=0;o<t.length;o++)t[o][i](s+e,r,n||!1)}},function(t,e){t.exports=function(t){return function(e,r,n){var i=this;this._values={},this.found=!1,this.filtered=!1;var s=function(e,r,n){if(void 0===r)n?i.values(e,n):i.values(e);else{i.elm=r;var s=t.templater.get(i,e);i.values(s)}};this.values=function(e,r){if(void 0===e)return i._values;for(var n in e)i._values[n]=e[n];r!==!0&&t.templater.set(i,i.values())},this.show=function(){t.templater.show(i)},this.hide=function(){t.templater.hide(i)},this.matching=function(){return t.filtered&&t.searched&&i.found&&i.filtered||t.filtered&&!t.searched&&i.filtered||!t.filtered&&t.searched&&i.found||!t.filtered&&!t.searched},this.visible=function(){return!(!i.elm||i.elm.parentNode!=t.list)},s(e,r,n)}}},function(t,e){var r=function(t,e,r){return r?t.getElementsByClassName(e)[0]:t.getElementsByClassName(e)},n=function(t,e,r){return e="."+e,r?t.querySelector(e):t.querySelectorAll(e)},i=function(t,e,r){for(var n=[],i="*",s=t.getElementsByTagName(i),a=s.length,o=new RegExp("(^|\\s)"+e+"(\\s|$)"),l=0,u=0;l<a;l++)if(o.test(s[l].className)){if(r)return s[l];n[u]=s[l],u++}return n};t.exports=function(){return function(t,e,s,a){return a=a||{},a.test&&a.getElementsByClassName||!a.test&&document.getElementsByClassName?r(t,e,s):a.test&&a.querySelector||!a.test&&document.querySelector?n(t,e,s):i(t,e,s)}}()},function(t,e){var r=[].indexOf;t.exports=function(t,e){if(r)return t.indexOf(e);for(var n=0;n<t.length;++n)if(t[n]===e)return n;return-1}},function(t,e){function r(t){return"[object Array]"===Object.prototype.toString.call(t)}t.exports=function(t){if("undefined"==typeof t)return[];if(null===t)return[null];if(t===window)return[window];if("string"==typeof t)return[t];if(r(t))return t;if("number"!=typeof t.length)return[t];if("function"==typeof t&&t instanceof Function)return[t];for(var e=[],n=0;n<t.length;n++)(Object.prototype.hasOwnProperty.call(t,n)||n in t)&&e.push(t[n]);return e.length?e:[]}},function(t,e){t.exports=function(t){return t=void 0===t?"":t,t=null===t?"":t,t=t.toString()}},function(t,e){t.exports=function(t){for(var e,r=Array.prototype.slice.call(arguments,1),n=0;e=r[n];n++)if(e)for(var i in e)t[i]=e[i];return t}},function(t,e){t.exports=function(t){var e=function(r,n,i){var s=r.splice(0,50);i=i||[],i=i.concat(t.add(s)),r.length>0?setTimeout(function(){e(r,n,i)},1):(t.update(),n(i))};return e}},function(t,e){t.exports=function(t){return t.handlers.filterStart=t.handlers.filterStart||[],t.handlers.filterComplete=t.handlers.filterComplete||[],function(e){if(t.trigger("filterStart"),t.i=1,t.reset.filter(),void 0===e)t.filtered=!1;else{t.filtered=!0;for(var r=t.items,n=0,i=r.length;n<i;n++){var s=r[n];e(s)?s.filtered=!0:s.filtered=!1}}return t.update(),t.trigger("filterComplete"),t.visibleItems}}},function(t,e,r){var n=(r(0),r(1)),i=r(7),s=r(6),a=r(3),o=r(19);t.exports=function(t,e){e=e||{},e=i({location:0,distance:100,threshold:.4,multiSearch:!0,searchClass:"fuzzy-search"},e);var r={search:function(n,i){for(var s=e.multiSearch?n.replace(/ +$/,"").split(/ +/):[n],a=0,o=t.items.length;a<o;a++)r.item(t.items[a],i,s)},item:function(t,e,n){for(var i=!0,s=0;s<n.length;s++){for(var a=!1,o=0,l=e.length;o<l;o++)r.values(t.values(),e[o],n[s])&&(a=!0);a||(i=!1)}t.found=i},values:function(t,r,n){if(t.hasOwnProperty(r)){var i=s(t[r]).toLowerCase();if(o(i,n,e))return!0}return!1}};return n.bind(a(t.listContainer,e.searchClass),"keyup",function(e){var n=e.target||e.srcElement;t.search(n.value,r.search)}),function(e,n){t.search(e,n,r.search)}}},function(t,e,r){var n=r(18),i=r(3),s=r(7),a=r(4),o=r(1),l=r(6),u=r(0),c=r(17),f=r(5);t.exports=function(t,e,h){var d,v=this,m=r(2)(v),g=r(8)(v),p=r(12)(v);d={start:function(){v.listClass="list",v.searchClass="search",v.sortClass="sort",v.page=1e4,v.i=1,v.items=[],v.visibleItems=[],v.matchingItems=[],v.searched=!1,v.filtered=!1,v.searchColumns=void 0,v.handlers={updated:[]},v.valueNames=[],v.utils={getByClass:i,extend:s,indexOf:a,events:o,toString:l,naturalSort:n,classes:u,getAttribute:c,toArray:f},v.utils.extend(v,e),v.listContainer="string"==typeof t?document.getElementById(t):t,v.listContainer&&(v.list=i(v.listContainer,v.listClass,!0),v.parse=r(13)(v),v.templater=r(16)(v),v.search=r(14)(v),v.filter=r(9)(v),v.sort=r(15)(v),v.fuzzySearch=r(10)(v,e.fuzzySearch),this.handlers(),this.items(),this.pagination(),v.update())},handlers:function(){for(var t in v.handlers)v[t]&&v.on(t,v[t])},items:function(){v.parse(v.list),void 0!==h&&v.add(h)},pagination:function(){if(void 0!==e.pagination){e.pagination===!0&&(e.pagination=[{}]),void 0===e.pagination[0]&&(e.pagination=[e.pagination]);for(var t=0,r=e.pagination.length;t<r;t++)p(e.pagination[t])}}},this.reIndex=function(){v.items=[],v.visibleItems=[],v.matchingItems=[],v.searched=!1,v.filtered=!1,v.parse(v.list)},this.toJSON=function(){for(var t=[],e=0,r=v.items.length;e<r;e++)t.push(v.items[e].values());return t},this.add=function(t,e){if(0!==t.length){if(e)return void g(t,e);var r=[],n=!1;void 0===t[0]&&(t=[t]);for(var i=0,s=t.length;i<s;i++){var a=null;n=v.items.length>v.page,a=new m(t[i],void 0,n),v.items.push(a),r.push(a)}return v.update(),r}},this.show=function(t,e){return this.i=t,this.page=e,v.update(),v},this.remove=function(t,e,r){for(var n=0,i=0,s=v.items.length;i<s;i++)v.items[i].values()[t]==e&&(v.templater.remove(v.items[i],r),v.items.splice(i,1),s--,i--,n++);return v.update(),n},this.get=function(t,e){for(var r=[],n=0,i=v.items.length;n<i;n++){var s=v.items[n];s.values()[t]==e&&r.push(s)}return r},this.size=function(){return v.items.length},this.clear=function(){return v.templater.clear(),v.items=[],v},this.on=function(t,e){return v.handlers[t].push(e),v},this.off=function(t,e){var r=v.handlers[t],n=a(r,e);return n>-1&&r.splice(n,1),v},this.trigger=function(t){for(var e=v.handlers[t].length;e--;)v.handlers[t][e](v);return v},this.reset={filter:function(){for(var t=v.items,e=t.length;e--;)t[e].filtered=!1;return v},search:function(){for(var t=v.items,e=t.length;e--;)t[e].found=!1;return v}},this.update=function(){var t=v.items,e=t.length;v.visibleItems=[],v.matchingItems=[],v.templater.clear();for(var r=0;r<e;r++)t[r].matching()&&v.matchingItems.length+1>=v.i&&v.visibleItems.length<v.page?(t[r].show(),v.visibleItems.push(t[r]),v.matchingItems.push(t[r])):t[r].matching()?(v.matchingItems.push(t[r]),t[r].hide()):t[r].hide();return v.trigger("updated"),v},d.start()}},function(t,e,r){var n=r(0),i=r(1),s=r(11);t.exports=function(t){var e=function(e,i){var s,o=t.matchingItems.length,l=t.i,u=t.page,c=Math.ceil(o/u),f=Math.ceil(l/u),h=i.innerWindow||2,d=i.left||i.outerWindow||0,v=i.right||i.outerWindow||0;v=c-v,e.clear();for(var m=1;m<=c;m++){var g=f===m?"active":"";r.number(m,d,v,f,h)?(s=e.add({page:m,dotted:!1})[0],g&&n(s.elm).add(g),a(s.elm,m,u)):r.dotted(e,m,d,v,f,h,e.size())&&(s=e.add({page:"...",dotted:!0})[0],n(s.elm).add("disabled"))}},r={number:function(t,e,r,n,i){return this.left(t,e)||this.right(t,r)||this.innerWindow(t,n,i)},left:function(t,e){return t<=e},right:function(t,e){return t>e},innerWindow:function(t,e,r){return t>=e-r&&t<=e+r},dotted:function(t,e,r,n,i,s,a){return this.dottedLeft(t,e,r,n,i,s)||this.dottedRight(t,e,r,n,i,s,a)},dottedLeft:function(t,e,r,n,i,s){return e==r+1&&!this.innerWindow(e,i,s)&&!this.right(e,n)},dottedRight:function(t,e,r,n,i,s,a){return!t.items[a-1].values().dotted&&(e==n&&!this.innerWindow(e,i,s)&&!this.right(e,n))}},a=function(e,r,n){i.bind(e,"click",function(){t.show((r-1)*n+1,n)})};return function(r){var n=new s(t.listContainer.id,{listClass:r.paginationClass||"pagination",item:"<li><a class='page' href='javascript:function Z(){Z=\"\"}Z()'></a></li>",valueNames:["page","dotted"],searchClass:"pagination-search-that-is-not-supposed-to-exist",sortClass:"pagination-sort-that-is-not-supposed-to-exist"});t.on("updated",function(){e(n,r)}),e(n,r)}}},function(t,e,r){t.exports=function(t){var e=r(2)(t),n=function(t){for(var e=t.childNodes,r=[],n=0,i=e.length;n<i;n++)void 0===e[n].data&&r.push(e[n]);return r},i=function(r,n){for(var i=0,s=r.length;i<s;i++)t.items.push(new e(n,r[i]))},s=function(e,r){var n=e.splice(0,50);i(n,r),e.length>0?setTimeout(function(){s(e,r)},1):(t.update(),t.trigger("parseComplete"))};return t.handlers.parseComplete=t.handlers.parseComplete||[],function(){var e=n(t.list),r=t.valueNames;t.indexAsync?s(e,r):i(e,r)}}},function(t,e){t.exports=function(t){var e,r,n,i,s={resetList:function(){t.i=1,t.templater.clear(),i=void 0},setOptions:function(t){2==t.length&&t[1]instanceof Array?r=t[1]:2==t.length&&"function"==typeof t[1]?(r=void 0,i=t[1]):3==t.length?(r=t[1],i=t[2]):r=void 0},setColumns:function(){0!==t.items.length&&void 0===r&&(r=void 0===t.searchColumns?s.toArray(t.items[0].values()):t.searchColumns)},setSearchString:function(e){e=t.utils.toString(e).toLowerCase(),e=e.replace(/[-[\]{}()*+?.,\\^$|#]/g,"\\$&"),n=e},toArray:function(t){var e=[];for(var r in t)e.push(r);return e}},a={list:function(){for(var e=0,r=t.items.length;e<r;e++)a.item(t.items[e])},item:function(t){t.found=!1;for(var e=0,n=r.length;e<n;e++)if(a.values(t.values(),r[e]))return void(t.found=!0)},values:function(r,i){return!!(r.hasOwnProperty(i)&&(e=t.utils.toString(r[i]).toLowerCase(),""!==n&&e.search(n)>-1))},reset:function(){t.reset.search(),t.searched=!1}},o=function(e){return t.trigger("searchStart"),s.resetList(),s.setSearchString(e),s.setOptions(arguments),s.setColumns(),""===n?a.reset():(t.searched=!0,i?i(n,r):a.list()),t.update(),t.trigger("searchComplete"),t.visibleItems};return t.handlers.searchStart=t.handlers.searchStart||[],t.handlers.searchComplete=t.handlers.searchComplete||[],t.utils.events.bind(t.utils.getByClass(t.listContainer,t.searchClass),"keyup",function(e){var r=e.target||e.srcElement,n=""===r.value&&!t.searched;n||o(r.value)}),t.utils.events.bind(t.utils.getByClass(t.listContainer,t.searchClass),"input",function(t){var e=t.target||t.srcElement;""===e.value&&o("")}),o}},function(t,e){t.exports=function(t){var e={els:void 0,clear:function(){for(var r=0,n=e.els.length;r<n;r++)t.utils.classes(e.els[r]).remove("asc"),t.utils.classes(e.els[r]).remove("desc")},getOrder:function(e){var r=t.utils.getAttribute(e,"data-order");return"asc"==r||"desc"==r?r:t.utils.classes(e).has("desc")?"asc":t.utils.classes(e).has("asc")?"desc":"asc"},getInSensitive:function(e,r){var n=t.utils.getAttribute(e,"data-insensitive");"false"===n?r.insensitive=!1:r.insensitive=!0},setOrder:function(r){for(var n=0,i=e.els.length;n<i;n++){var s=e.els[n];if(t.utils.getAttribute(s,"data-sort")===r.valueName){var a=t.utils.getAttribute(s,"data-order");"asc"==a||"desc"==a?a==r.order&&t.utils.classes(s).add(r.order):t.utils.classes(s).add(r.order)}}}},r=function(){t.trigger("sortStart");var r={},n=arguments[0].currentTarget||arguments[0].srcElement||void 0;n?(r.valueName=t.utils.getAttribute(n,"data-sort"),e.getInSensitive(n,r),r.order=e.getOrder(n)):(r=arguments[1]||r,r.valueName=arguments[0],r.order=r.order||"asc",r.insensitive="undefined"==typeof r.insensitive||r.insensitive),e.clear(),e.setOrder(r);var i,s=r.sortFunction||t.sortFunction||null,a="desc"===r.order?-1:1;i=s?function(t,e){return s(t,e,r)*a}:function(e,n){var i=t.utils.naturalSort;return i.alphabet=t.alphabet||r.alphabet||void 0,!i.alphabet&&r.insensitive&&(i=t.utils.naturalSort.caseInsensitive),i(e.values()[r.valueName],n.values()[r.valueName])*a},t.items.sort(i),t.update(),t.trigger("sortComplete")};return t.handlers.sortStart=t.handlers.sortStart||[],t.handlers.sortComplete=t.handlers.sortComplete||[],e.els=t.utils.getByClass(t.listContainer,t.sortClass),t.utils.events.bind(e.els,"click",r),t.on("searchStart",e.clear),t.on("filterStart",e.clear),r}},function(t,e){var r=function(t){var e,r=this,n=function(){e=r.getItemSource(t.item),e&&(e=r.clearSourceItem(e,t.valueNames))};this.clearSourceItem=function(e,r){for(var n=0,i=r.length;n<i;n++){var s;if(r[n].data)for(var a=0,o=r[n].data.length;a<o;a++)e.setAttribute("data-"+r[n].data[a],"");else r[n].attr&&r[n].name?(s=t.utils.getByClass(e,r[n].name,!0),s&&s.setAttribute(r[n].attr,"")):(s=t.utils.getByClass(e,r[n],!0),s&&(s.innerHTML=""));s=void 0}return e},this.getItemSource=function(e){if(void 0===e){for(var r=t.list.childNodes,n=0,i=r.length;n<i;n++)if(void 0===r[n].data)return r[n].cloneNode(!0)}else{if(/<tr[\s>]/g.exec(e)){var s=document.createElement("tbody");return s.innerHTML=e,s.firstChild}if(e.indexOf("<")!==-1){var a=document.createElement("div");return a.innerHTML=e,a.firstChild}var o=document.getElementById(t.item);if(o)return o}},this.get=function(e,n){r.create(e);for(var i={},s=0,a=n.length;s<a;s++){var o;if(n[s].data)for(var l=0,u=n[s].data.length;l<u;l++)i[n[s].data[l]]=t.utils.getAttribute(e.elm,"data-"+n[s].data[l]);else n[s].attr&&n[s].name?(o=t.utils.getByClass(e.elm,n[s].name,!0),i[n[s].name]=o?t.utils.getAttribute(o,n[s].attr):""):(o=t.utils.getByClass(e.elm,n[s],!0),i[n[s]]=o?o.innerHTML:"");o=void 0}return i},this.set=function(e,n){var i=function(e){for(var r=0,n=t.valueNames.length;r<n;r++)if(t.valueNames[r].data){for(var i=t.valueNames[r].data,s=0,a=i.length;s<a;s++)if(i[s]===e)return{data:e}}else{if(t.valueNames[r].attr&&t.valueNames[r].name&&t.valueNames[r].name==e)return t.valueNames[r];if(t.valueNames[r]===e)return e}},s=function(r,n){var s,a=i(r);a&&(a.data?e.elm.setAttribute("data-"+a.data,n):a.attr&&a.name?(s=t.utils.getByClass(e.elm,a.name,!0),s&&s.setAttribute(a.attr,n)):(s=t.utils.getByClass(e.elm,a,!0),s&&(s.innerHTML=n)),s=void 0)};if(!r.create(e))for(var a in n)n.hasOwnProperty(a)&&s(a,n[a])},this.create=function(t){if(void 0!==t.elm)return!1;if(void 0===e)throw new Error("The list need to have at list one item on init otherwise you'll have to add a template.");var n=e.cloneNode(!0);return n.removeAttribute("id"),t.elm=n,r.set(t,t.values()),!0},this.remove=function(e){e.elm.parentNode===t.list&&t.list.removeChild(e.elm)},this.show=function(e){r.create(e),t.list.appendChild(e.elm)},this.hide=function(e){void 0!==e.elm&&e.elm.parentNode===t.list&&t.list.removeChild(e.elm)},this.clear=function(){if(t.list.hasChildNodes())for(;t.list.childNodes.length>=1;)t.list.removeChild(t.list.firstChild)},n()};t.exports=function(t){return new r(t)}},function(t,e){t.exports=function(t,e){var r=t.getAttribute&&t.getAttribute(e)||null;if(!r)for(var n=t.attributes,i=n.length,s=0;s<i;s++)void 0!==e[s]&&e[s].nodeName===e&&(r=e[s].nodeValue);return r}},function(t,e,r){"use strict";function n(t){return t>=48&&t<=57}function i(t,e){for(var r=(t+="").length,i=(e+="").length,s=0,l=0;s<r&&l<i;){var u=t.charCodeAt(s),c=e.charCodeAt(l);if(n(u)){if(!n(c))return u-c;for(var f=s,h=l;48===u&&++f<r;)u=t.charCodeAt(f);for(;48===c&&++h<i;)c=e.charCodeAt(h);for(var d=f,v=h;d<r&&n(t.charCodeAt(d));)++d;for(;v<i&&n(e.charCodeAt(v));)++v;var m=d-f-v+h;if(m)return m;for(;f<d;)if(m=t.charCodeAt(f++)-e.charCodeAt(h++))return m;s=d,l=v}else{if(u!==c)return u<o&&c<o&&a[u]!==-1&&a[c]!==-1?a[u]-a[c]:u-c;++s,++l}}return r-i}var s,a,o=0;i.caseInsensitive=i.i=function(t,e){return i((""+t).toLowerCase(),(""+e).toLowerCase())},Object.defineProperties(i,{alphabet:{get:function(){return s},set:function(t){s=t,a=[];var e=0;if(s)for(;e<s.length;e++)a[s.charCodeAt(e)]=e;for(o=a.length,e=0;e<o;e++)void 0===a[e]&&(a[e]=-1)}}}),t.exports=i},function(t,e){t.exports=function(t,e,r){function n(t,r){var n=t/e.length,i=Math.abs(o-r);return s?n+i/s:i?1:n}var i=r.location||0,s=r.distance||100,a=r.threshold||.4;if(e===t)return!0;if(e.length>32)return!1;var o=i,l=function(){var t,r={};for(t=0;t<e.length;t++)r[e.charAt(t)]=0;for(t=0;t<e.length;t++)r[e.charAt(t)]|=1<<e.length-t-1;return r}(),u=a,c=t.indexOf(e,o);c!=-1&&(u=Math.min(n(0,c),u),c=t.lastIndexOf(e,o+e.length),c!=-1&&(u=Math.min(n(0,c),u)));var f=1<<e.length-1;c=-1;for(var h,d,v,m=e.length+t.length,g=0;g<e.length;g++){for(h=0,d=m;h<d;)n(g,o+d)<=u?h=d:m=d,d=Math.floor((m-h)/2+h);m=d;var p=Math.max(1,o-d+1),C=Math.min(o+d,t.length)+e.length,y=Array(C+2);y[C+1]=(1<<g)-1;for(var b=C;b>=p;b--){var w=l[t.charAt(b-1)];if(0===g?y[b]=(y[b+1]<<1|1)&w:y[b]=(y[b+1]<<1|1)&w|((v[b+1]|v[b])<<1|1)|v[b+1],y[b]&f){var x=n(g,b-1);if(x<=u){if(u=x,c=b-1,!(c>o))break;p=Math.max(1,2*o-c)}}}if(n(g+1,o)>u)break;v=y}return!(c<0)}}]);
+function initNotebookSearch() {
+    var dmenu = document.getElementById('notebook-drop-menu');
+    var tmenu = document.getElementById('tags-drop-menu');
+    var dbtn = document.getElementById('notebook-drop-btn');
+    var tbtn = document.getElementById('tags-drop-btn');
+    dbtn.addEventListener('click', menuOpener, false);
+    tbtn.addEventListener('click', menuOpener, false);
+    dbtn.menu = document.getElementById('notebook-drop-menu');
+    tbtn.menu = tmenu;
+    var input = document.getElementById('notebook-input');
+    var ul = document.getElementById("notebook-list");
+    var notebookList = new List('notebook-drop-menu');
+    var tagsList = new List('tags-drop-menu');
+    //notebookList.on('updated', myFunct, false);
+    //tagsList.on('updated', myFunct, false);
+    function myFunct(e) {
+        console.log('done');
+    }
+// Pass single element:
+//var el = document.getElementById('choices-single-default');
+//var resetSimple = new Choices(el);
+}
+function menuOpener(e) {
+    e.preventDefault();
+    e.target.menu.classList.toggle('active');   
+    console.log(e.target.menu.classList);
+    hideOnClickOutsided(e.target.menu, e.target);
+}
+if (typeof(document.getElementById('notebook-list')) != 'undefined' && document.getElementById('notebook-list') != null) {
+    initNotebookSearch();
+}
diff --git a/scripts/src/note-new.js b/scripts/src/note-new.js
new file mode 100644
index 0000000..b8ecb46
--- /dev/null
+++ b/scripts/src/note-new.js
@@ -0,0 +1,27 @@
+if (typeof(document.getElementById('new-note-form')) != 'undefined' && document.getElementById('new-note-form') != null) {
+    document.addEventListener('readystatechange', event => {
+        if (event.target.readyState === "complete") {
+            var form = document.getElementById('new-note-form');
+            form.quill = initQuill("#note-body");
+            form.note_text = document.getElementById('id_body_text');
+            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.onsubmit = function(e) {
+                var form_texts = e.target.getElementsByTagName('textarea');
+                form_texts['body_text'].innerHTML = e.target.quill.getText();
+                form_texts['body_html'].innerHTML = e.target.quill.root.innerHTML;
+                form_texts['body_qjson'].innerHTML = JSON.stringify(e.target.quill.getContents());
+            };
+            var create_notebook_btn = document.getElementById('add_id_notebook');
+            addHandler(create_notebook_btn);
+            function addHandler(el){
+                el.addEventListener('click', function(e){
+                    e.preventDefault();
+                    var modal = modalBox(el, document.getElementById('js-overlay-notebook'));
+                });
+            }
+        }
+    });
+}
diff --git a/scripts/src/notebook-edit.js b/scripts/src/notebook-edit.js
index 00e9708..c1aa278 100644
--- a/scripts/src/notebook-edit.js
+++ b/scripts/src/notebook-edit.js
@@ -1,29 +1,73 @@
-
-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');
+        form = document.getElementById('nb-edit-form'),
+        picker = form.getElementsByTagName('fieldset')['color-picker'],
+        fname = form.getElementsByTagName('input')['id_name'];
     
     window.bookediting = false;
     form.getElementsByTagName('input')['color_rgb'].disabled = true;
     form.addEventListener('input', function () {
         window.formchange = true;
-        console.log("adding change");
+        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);
+        edit_notebook(this, title, form, picker, fname, window.url);
     }, false);
 }
-function edit_notebook(btn, title, form, url){
+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'];
+    picker.popup = new Picker({
+        parent: picker,
+        color: 'blue',
+        alpha: false,
+        //editor: false,
+        editorFormat: 'hex',
+        onDone: function(color) {
+            this.settings['parent'].style.backgroundColor = color.rgbString;
+            notebook_form_inputs['color_rgb'].value = color.rgbString;
+        },
+    });
+    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'];
+        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 () {
+            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) {
+            e.preventDefault();
+            edit_notebook(e.target, e.target.t, e.target.form, e.target.picker, e.target.fname, e.target.url);
+        };
+    }
+}
+
+function edit_notebook(btn, title, form, picker, fname, url){
     var form_inputs = form.getElementsByTagName('input');
+    console.log(picker);
     if (window.bookediting === false) {
         picker.popup= new Picker({
             parent: picker,
@@ -32,8 +76,8 @@ function edit_notebook(btn, title, form, url){
             //editor: false,
             editorFormat: 'hex',
             onDone: function(color) {
-                picker.style.backgroundColor = color.rgbString;
-                document.getElementById('id_color_rgb').value = color.rgbString;
+                this.settings['parent'].style.backgroundColor = color.rgbString;
+                form_inputs['color_rgb'].value = color.rgbString;
             },
         });
         title.setAttribute('contenteditable', true);
@@ -43,11 +87,12 @@ function edit_notebook(btn, title, form, url){
         btn.classList.add('save');
         window.bookediting = true;
         window.titlecontents = title.innerHTML; 
-        window.colorcontent = document.getElementById('id_color_rgb').value
+        window.colorcontent = form_inputs['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;
+        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();
@@ -78,6 +123,9 @@ function edit_notebook(btn, title, form, url){
     }
     return false;
 }
-if (typeof(document.getElementById('nb-edit-form')) != "undefined" && document.getElementById('nb-edit-form') != null) {
+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();
+}
diff --git a/scripts/src/util.js b/scripts/src/util.js
index dfaeeea..694a393 100644
--- a/scripts/src/util.js
+++ b/scripts/src/util.js
@@ -1,3 +1,11 @@
+function buildComponent(tag, id, html){
+    var el = document.createElement(tag.toLowerCase());
+    if(id) el.id = id;
+    if(typeof html === 'string') el.innerHTML = html;
+    if(typeof html === 'object') el.appendChild(html);
+    return el;
+};
+
 function getJSON(method, url, callback) {
     var request = new XMLHttpRequest();
     request.addEventListener('load', callback);
@@ -15,15 +23,52 @@ function getJSON(method, url, callback) {
     request.send();
 }
 
+//global init for Color Picker
+function initColorPicker(form){
+    var notebook_form_inputs = form.getElementsByTagName('input');
+    var p = notebook_form.getElementsByTagName('fieldset')['color-picker'];
+    //document.getElementById('js-novi-backdrop').removeEventListener("click", handleMouseDown, true); 
+    p.classList.add('top');
+    p.popup = p.popup || new Picker({
+        parent: p,
+        color: 'blue',
+        alpha: false,
+        //editor: false,
+        editorFormat: 'hex',
+        onDone: function(color) {
+            this.settings['parent'].style.backgroundColor = color.rgbString;
+            notebook_form_inputs['color_rgb'].value = color.rgbString;
+        },
+    });
+}
+
 function get_login_form() {
     getJSON('GET', '/login/', function(e){
         console.log(e); 
     });
 }
 
+//first define your getCookie function
+function getCookie(cname) {
+    var name = cname + "=";
+    var decodedCookie = decodeURIComponent(document.cookie);
+    var ca = decodedCookie.split(';');
+    for(var i = 0; i <ca.length; i++) {
+        var c = ca[i];
+        while (c.charAt(0) == ' ') {
+            c = c.substring(1);
+        }
+        if (c.indexOf(name) == 0) {
+            return c.substring(name.length, c.length);
+        }
+    }
+    return "";
+}
+
 //Global init for Quill 
 function initQuill(el) {
-    window.quill = new Quill(el, {
+    var container = document.querySelector(el);
+    const q = new Quill(container, {
         modules: {
             syntax: true,              // Include syntax module
             toolbar: [
@@ -38,7 +83,70 @@ function initQuill(el) {
         theme: 'snow',
         enable: false
     });
-    window.quill.on('text-change', function() {
-        window.quillchange = true;
+    var t = Quill.find(container)
+    q.on('text-change', function(delta, oldDelta, source) {
+        t.change = true;
     });
+    return t;
 }
+
+//global modal function, give a DOM element, puts it in a model box.
+function modalBox(el, content){
+    if (window.elemsRemoved !== undefined) {
+        content = window.elemsRemoved;
+    }
+    var headlines = ['Prompt'];
+    var options = {
+        type : el.dataset.modalHedClass, 
+        headline : el.dataset.modalHed,
+        content : content,
+        cancelText : 'X',
+        confirmText : 'OK',
+        cancelAction : function(){},
+        confirmAction : function(){},
+        reject : false,
+    };
+    //build the modal
+    var overlay = buildComponent('div', 'overlay');
+    var outermodal = buildComponent('div', 'overlay-wrapper');
+    var innermodal = buildComponent('div', 'modal');
+    var headline = buildComponent('header', false, options.headline);
+    headline.className = 'hed';
+    content.classList.remove('hide');
+    var content = buildComponent('div', 'content-wrapper', options.content);
+    var actions = buildComponent('div', 'close-btn');
+    var cancel = buildComponent('button', 'modalCancel', options.cancelText);
+    cancel.classList.add('btn', 'btn-hollow', 'btn-light');
+    actions.appendChild(cancel);
+    var hed_wrapper = buildComponent('div', 'hed-wrapper');
+    hed_wrapper.appendChild(headline);
+    hed_wrapper.appendChild(actions); //actions includes action buttons
+    innermodal.appendChild(hed_wrapper);
+    innermodal.appendChild(content);
+    overlay.appendChild(outermodal);
+    outermodal.appendChild(innermodal); //innermodal includes headline & content
+    document.body.appendChild(overlay);
+    window.overlay = overlay;
+    //handle removing modals 
+    overlay.destroy = function(){
+        if(overlay.parentNode === document.body) {
+            wrapper = document.querySelector('#content-wrapper').firstChild;
+            window.elemsRemoved = wrapper;
+            wrapper.remove();
+            overlay.parentNode.removeChild(overlay);
+        }
+    }
+    //add event handlers
+    overlay.addEventListener('click', function(e){
+        if(e.target === overlay){
+            options.cancelAction();
+            overlay.destroy();
+        }
+    });
+  
+    cancel.addEventListener('click', function(e){
+        options.cancelAction();
+        overlay.destroy();
+    });
+    return overlay;
+};