diff options
Diffstat (limited to 'scripts/src/note-edit.js')
| -rw-r--r-- | scripts/src/note-edit.js | 181 |
1 files changed, 125 insertions, 56 deletions
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; } |