From 4f7b84194b056b5d6d9acca4cceb2cabc04fd8a5 Mon Sep 17 00:00:00 2001 From: luxagraf Date: Sat, 29 Dec 2018 08:37:39 -0600 Subject: cleaned up JS and made modal handler. --- scripts/src/color-picker.js | 0 scripts/src/lib/overlay.js | 253 ------------------------------------------- scripts/src/main-nav.js | 12 ++ scripts/src/note-edit.js | 181 +++++++++++++++++++++---------- scripts/src/note-list.js | 33 ++++++ scripts/src/note-new.js | 27 +++++ scripts/src/notebook-edit.js | 74 ++++++++++--- scripts/src/util.js | 114 ++++++++++++++++++- 8 files changed, 369 insertions(+), 325 deletions(-) delete mode 100644 scripts/src/color-picker.js delete mode 100644 scripts/src/lib/overlay.js create mode 100644 scripts/src/note-list.js create mode 100644 scripts/src/note-new.js (limited to 'scripts/src') diff --git a/scripts/src/color-picker.js b/scripts/src/color-picker.js deleted file mode 100644 index e69de29..0000000 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;o0?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;nv.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-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=v.i&&v.visibleItems.lengthe},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:"
    • ",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;n0?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-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]/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=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=48&&t<=57}function i(t,e){for(var r=(t+="").length,i=(e+="").length,s=0,l=0;s32)return!1;var o=i,l=function(){var t,r={};for(t=0;t=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