diff options
Diffstat (limited to 'scripts/src/notebook-edit.js')
| -rw-r--r-- | scripts/src/notebook-edit.js | 136 |
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')); } |