diff options
| -rw-r--r-- | app/view/templates/edittabs.php | 4 | ||||
| -rw-r--r-- | assets/css/edit.css | 5 | ||||
| -rw-r--r-- | src/edit.js | 68 |
3 files changed, 64 insertions, 13 deletions
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 '<div class="content">'; if ($key == $opentab) { - echo '<textarea name="' . $key . '" id="' . $key . '" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" autofocus >' . $value . '</textarea>'; + echo '<textarea name="' . $key . '" id="edit' . $key . '" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" autofocus >' . $value . '</textarea>'; } else { - echo '<textarea name="' . $key . '" id="' . $key . '" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">' . $value . '</textarea>'; + echo '<textarea name="' . $key . '" id="edit' . $key . '" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">' . $value . '</textarea>'; } echo '</div>'; echo '</div>'; 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; }; @@ -63,6 +103,16 @@ function changeHandler(e) { } /** + * 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 */ |