From 137f4369c2e1194da3bb733193b8636f7ae4c028 Mon Sep 17 00:00:00 2001 From: n-peugnet Date: Sun, 20 Oct 2019 23:21:17 +0200 Subject: include CodeMirror in edit page - add npm prerequisite - add codemirror through npm - add webpack trough npm to build the js bundles - add first codemirror enhenced textarea --- app/view/templates/edit.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/view/templates') diff --git a/app/view/templates/edit.php b/app/view/templates/edit.php index 4c7fc61..28e245f 100644 --- a/app/view/templates/edit.php +++ b/app/view/templates/edit.php @@ -30,7 +30,7 @@ - + stop('page') ?> \ No newline at end of file -- cgit v1.2.3 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 --- .gitignore | 2 +- app/view/templates/layout.php | 5 --- assets/js/edit.js | 93 ------------------------------------------- src/edit.js | 92 ++++++++++++++++++++++++++++++++++++++++++ webpack.config.js | 2 +- 5 files changed, 94 insertions(+), 100 deletions(-) delete mode 100644 assets/js/edit.js create mode 100644 src/edit.js (limited to 'app/view/templates') diff --git a/.gitignore b/.gitignore index 113303e..0eb7349 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ .vscode/* -assets/js/*.bundle.js +*.bundle.js assets/render/* assets/global/* database/* diff --git a/app/view/templates/layout.php b/app/view/templates/layout.php index 3c38be4..91ae378 100644 --- a/app/view/templates/layout.php +++ b/app/view/templates/layout.php @@ -18,11 +18,6 @@ echo ''; } ?> - diff --git a/assets/js/edit.js b/assets/js/edit.js deleted file mode 100644 index 7df75de..0000000 --- a/assets/js/edit.js +++ /dev/null @@ -1,93 +0,0 @@ -import CodeMirror from "codemirror"; -import "codemirror/lib/codemirror.css"; -import "codemirror/mode/markdown/markdown.js"; - -let form; -let unsavedChanges = false; -const pageurl = basepath + pageid; - -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?'; - } -} 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?'; + } +} diff --git a/webpack.config.js b/webpack.config.js index 4e32da0..e18b201 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -8,7 +8,7 @@ module.exports = (env) => { // Constant entry: { - edit: './assets/js/edit.js', + edit: './src/edit.js', }, output: { filename: 'assets/js/[name].bundle.js', -- 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 --- app/view/templates/edittabs.php | 4 +-- assets/css/edit.css | 5 +-- src/edit.js | 68 +++++++++++++++++++++++++++++++++++------ 3 files changed, 64 insertions(+), 13 deletions(-) (limited to 'app/view/templates') diff --git a/app/view/templates/edittabs.php b/app/view/templates/edittabs.php index 0829c48..c890677 100644 --- a/app/view/templates/edittabs.php +++ b/app/view/templates/edittabs.php @@ -13,9 +13,9 @@ foreach ($tablist as $key => $value) { echo '
'; if ($key == $opentab) { - echo ''; + echo ''; } else { - echo ''; + echo ''; } echo '
'; echo ''; diff --git a/assets/css/edit.css b/assets/css/edit.css index 85b1e07..7b881df 100644 --- a/assets/css/edit.css +++ b/assets/css/edit.css @@ -116,7 +116,7 @@ body { left: 0px; width: 100%; height: 100%; - display: none; + visibility: hidden; } .checkboxtab @@ -147,7 +147,7 @@ body { .checkboxtab:checked ~.content { - display: block; + visibility: visible; } @@ -376,6 +376,7 @@ div#thumbnail img { /* Custom CodeMirror CSS */ .CodeMirror { height: 100% !important; + cursor: text; } 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 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 --- app/view/templates/edittopbar.php | 2 +- src/edit.js | 87 ++++++++++++++++++++++----------------- 2 files changed, 50 insertions(+), 39 deletions(-) (limited to 'app/view/templates') diff --git a/app/view/templates/edittopbar.php b/app/view/templates/edittopbar.php index ec1a875..13cef96 100644 --- a/app/view/templates/edittopbar.php +++ b/app/view/templates/edittopbar.php @@ -27,7 +27,7 @@ - + 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