From 9250000af69b5c0ddc73537ec40573df68283dcc Mon Sep 17 00:00:00 2001 From: n-peugnet Date: Mon, 21 Oct 2019 19:44:52 +0200 Subject: move js sources to /src/ & remove old worker stuff --- src/edit.js | 92 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 src/edit.js (limited to 'src/edit.js') diff --git a/src/edit.js b/src/edit.js new file mode 100644 index 0000000..ac2fe58 --- /dev/null +++ b/src/edit.js @@ -0,0 +1,92 @@ +import CodeMirror from "codemirror"; +import "codemirror/lib/codemirror.css"; +import "codemirror/mode/markdown/markdown.js"; + +let form; +let unsavedChanges = false; + +let myCodeMirror = CodeMirror.fromTextArea(document.getElementById('main'), { + mode: 'markdown', + lineNumbers: true, +}); + +window.onload = () => { + form = document.getElementById('update'); + let inputs = form.elements; + for (let i = 0; i < inputs.length; i++) { + inputs[i].oninput = changeHandler; + } + + form.addEventListener("submit", function (event) { + event.preventDefault(); + submitHandler(this); + }); + window.onkeydown = keyboardHandler; + window.onbeforeunload = confirmExit; +}; + +/** + * Manage a keyboardEvent + * @param {KeyboardEvent} e + */ +function keyboardHandler(e) { + if (e.composed) { + if (e.ctrlKey) { + switch (e.key) { + // ctrl + s + case 's': + submitHandler(form); + break; + // ctrl + d + case 'd': + url = document.getElementById('update').getAttribute('href'); + window.open(url); + break; + default: + return true; + } + e.preventDefault(); + return false; + } + } +} + +/** + * Manage change event + * @param {InputEvent} e + */ +function changeHandler(e) { + if(e.target.classList.contains("toggle")||e.target.classList.contains("checkboxtab")) { + return; + } + unsavedChanges = true; +} + +/** + * Manage submit event + * @param {HTMLFormElement} form + */ +function submitHandler(form) { + var xhr = new XMLHttpRequest(); + var fd = new FormData(form); + + xhr.addEventListener("load", function(event) { + unsavedChanges = false; + alert("updated"); + }); + xhr.addEventListener("error", function(event) { + alert('Error while trying to update.'); + }); + xhr.open(form.method, form.action); + xhr.send(fd); +} + +/** + * Manage a beforeUnloadEvent + * @param {BeforeUnloadEvent} e + */ +function confirmExit(e) { + if (unsavedChanges) { + return 'You have unsaved changes, do you really want to leave this page?'; + } +} -- cgit v1.2.3 From 088b5ce3a8bd61b2031ae57be7d48973a38ee16f Mon Sep 17 00:00:00 2001 From: n-peugnet Date: Mon, 21 Oct 2019 21:47:24 +0200 Subject: add all other highlited editors --- src/edit.js | 68 +++++++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 59 insertions(+), 9 deletions(-) (limited to 'src/edit.js') diff --git a/src/edit.js b/src/edit.js index ac2fe58..2fd31c6 100644 --- a/src/edit.js +++ b/src/edit.js @@ -1,26 +1,66 @@ import CodeMirror from "codemirror"; import "codemirror/lib/codemirror.css"; -import "codemirror/mode/markdown/markdown.js"; +import "codemirror/mode/markdown/markdown"; +import "codemirror/mode/css/css" +import "codemirror/mode/htmlmixed/htmlmixed" +import "codemirror/mode/javascript/javascript" let form; let unsavedChanges = false; - -let myCodeMirror = CodeMirror.fromTextArea(document.getElementById('main'), { - mode: 'markdown', - lineNumbers: true, -}); +const inputEvent = new InputEvent('input'); window.onload = () => { form = document.getElementById('update'); let inputs = form.elements; - for (let i = 0; i < inputs.length; i++) { - inputs[i].oninput = changeHandler; + for (const input of inputs) { + input.oninput = changeHandler; } form.addEventListener("submit", function (event) { event.preventDefault(); submitHandler(this); - }); + }); + + CodeMirror.fromTextArea(document.getElementById('editmain'), { + mode: 'markdown', + lineNumbers: true, + }).on('change', cmChangeHandler); + + CodeMirror.fromTextArea(document.getElementById('editcss'), { + mode: 'css', + lineNumbers: true, + }).on('change', cmChangeHandler); + + CodeMirror.fromTextArea(document.getElementById('editheader'), { + mode: 'markdown', + lineNumbers: true, + }).on('change', cmChangeHandler); + + CodeMirror.fromTextArea(document.getElementById('editnav'), { + mode: 'markdown', + lineNumbers: true, + }).on('change', cmChangeHandler); + + CodeMirror.fromTextArea(document.getElementById('editaside'), { + mode: 'markdown', + lineNumbers: true, + }).on('change', cmChangeHandler); + + CodeMirror.fromTextArea(document.getElementById('editfooter'), { + mode: 'markdown', + lineNumbers: true, + }).on('change', cmChangeHandler); + + CodeMirror.fromTextArea(document.getElementById('editbody'), { + mode: 'htmlmixed', + lineNumbers: true, + }).on('change', cmChangeHandler); + + CodeMirror.fromTextArea(document.getElementById('editjavascript'), { + mode: 'javascript', + lineNumbers: true, + }).on('change', cmChangeHandler); + window.onkeydown = keyboardHandler; window.onbeforeunload = confirmExit; }; @@ -62,6 +102,16 @@ function changeHandler(e) { unsavedChanges = true; } +/** + * Manage CodeMirror editor change event + * @param {CodeMirror.EditorFromTextArea} cm the CodeMirror instance + */ +function cmChangeHandler(cm){ + let textArea = cm.getTextArea(); + textArea.value = cm.getValue(); + textArea.dispatchEvent(inputEvent); +} + /** * Manage submit event * @param {HTMLFormElement} form -- cgit v1.2.3 From 772b6e789037673a6776c29f05d5e8144844733a Mon Sep 17 00:00:00 2001 From: n-peugnet Date: Mon, 21 Oct 2019 22:16:52 +0200 Subject: fix for ctrl + d shortcut --- src/edit.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/edit.js') diff --git a/src/edit.js b/src/edit.js index 2fd31c6..ba83488 100644 --- a/src/edit.js +++ b/src/edit.js @@ -21,6 +21,8 @@ window.onload = () => { submitHandler(this); }); + delete CodeMirror.keyMap['default']["Ctrl-D"]; + CodeMirror.fromTextArea(document.getElementById('editmain'), { mode: 'markdown', lineNumbers: true, @@ -79,7 +81,7 @@ function keyboardHandler(e) { break; // ctrl + d case 'd': - url = document.getElementById('update').getAttribute('href'); + const url = document.getElementById('update').getAttribute('href'); window.open(url); break; default: -- cgit v1.2.3 From 016dc180d41c28c8fb0883b09a55b69cb060a0c1 Mon Sep 17 00:00:00 2001 From: n-peugnet Date: Mon, 21 Oct 2019 23:06:56 +0200 Subject: make font-size input work with codemirror --- src/edit.js | 87 ++++++++++++++++++++++++++++++++++--------------------------- 1 file changed, 49 insertions(+), 38 deletions(-) (limited to 'src/edit.js') diff --git a/src/edit.js b/src/edit.js index ba83488..6843fff 100644 --- a/src/edit.js +++ b/src/edit.js @@ -6,6 +6,7 @@ import "codemirror/mode/htmlmixed/htmlmixed" import "codemirror/mode/javascript/javascript" let form; +let editors = []; let unsavedChanges = false; const inputEvent = new InputEvent('input'); @@ -23,45 +24,47 @@ window.onload = () => { delete CodeMirror.keyMap['default']["Ctrl-D"]; - CodeMirror.fromTextArea(document.getElementById('editmain'), { - mode: 'markdown', - lineNumbers: true, - }).on('change', cmChangeHandler); - - CodeMirror.fromTextArea(document.getElementById('editcss'), { - mode: 'css', - lineNumbers: true, - }).on('change', cmChangeHandler); - - CodeMirror.fromTextArea(document.getElementById('editheader'), { - mode: 'markdown', - lineNumbers: true, - }).on('change', cmChangeHandler); - - CodeMirror.fromTextArea(document.getElementById('editnav'), { - mode: 'markdown', - lineNumbers: true, - }).on('change', cmChangeHandler); - - CodeMirror.fromTextArea(document.getElementById('editaside'), { - mode: 'markdown', - lineNumbers: true, - }).on('change', cmChangeHandler); - - CodeMirror.fromTextArea(document.getElementById('editfooter'), { - mode: 'markdown', - lineNumbers: true, - }).on('change', cmChangeHandler); - - CodeMirror.fromTextArea(document.getElementById('editbody'), { - mode: 'htmlmixed', - lineNumbers: true, - }).on('change', cmChangeHandler); + editors = [ + CodeMirror.fromTextArea(document.getElementById('editmain'), { + mode: 'markdown', + lineNumbers: true, + }), + CodeMirror.fromTextArea(document.getElementById('editcss'), { + mode: 'css', + lineNumbers: true, + }), + CodeMirror.fromTextArea(document.getElementById('editheader'), { + mode: 'markdown', + lineNumbers: true, + }), + CodeMirror.fromTextArea(document.getElementById('editnav'), { + mode: 'markdown', + lineNumbers: true, + }), + CodeMirror.fromTextArea(document.getElementById('editaside'), { + mode: 'markdown', + lineNumbers: true, + }), + CodeMirror.fromTextArea(document.getElementById('editfooter'), { + mode: 'markdown', + lineNumbers: true, + }), + CodeMirror.fromTextArea(document.getElementById('editbody'), { + mode: 'htmlmixed', + lineNumbers: true, + }), + CodeMirror.fromTextArea(document.getElementById('editjavascript'), { + mode: 'javascript', + lineNumbers: true, + }), + ]; + for (const editor of editors) { + editor.on('change', cmChangeHandler); + } - CodeMirror.fromTextArea(document.getElementById('editjavascript'), { - mode: 'javascript', - lineNumbers: true, - }).on('change', cmChangeHandler); + const fontSizeInput = document.getElementById('editfontsize'); + fontSizeInput.addEventListener('change', fontSizeChangeHandler) + fontSizeInput.dispatchEvent(new Event('change')); window.onkeydown = keyboardHandler; window.onbeforeunload = confirmExit; @@ -114,6 +117,14 @@ function cmChangeHandler(cm){ textArea.dispatchEvent(inputEvent); } +function fontSizeChangeHandler(e) { + for (const editor of editors) { + const element = editor.getWrapperElement(); + element.style.fontSize = `${e.target.value}px`; + editor.refresh(); + } +} + /** * Manage submit event * @param {HTMLFormElement} form -- cgit v1.2.3