diff options
Diffstat (limited to 'includes/subsysedit.inc')
| -rw-r--r-- | includes/subsysedit.inc | 143 |
1 files changed, 143 insertions, 0 deletions
diff --git a/includes/subsysedit.inc b/includes/subsysedit.inc new file mode 100644 index 0000000..e9c4b4c --- /dev/null +++ b/includes/subsysedit.inc @@ -0,0 +1,143 @@ +<?php global $system; global $systemCommonName; global $systemID; global $subsystem; global $subsystemData; global $subsystemCommonName; global $subsystemID; $title = "Editing " . $subsystemCommonName . " · " . $systemCommonName; require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/header.inc'; + +?> + +<br> +<div class="container"> + <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/subsysbanner.inc"; ?> + <br> + + <p class="text-muted"> + <span id="editor-save-status">Saved</span> · <span id="editor-size"><?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/subsystems/$systemID-$subsystemID.html") ? strlen(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID-subsystem-$subsystemID.html")) : "0" ?></span> bytes + </p> + + <!--suppress HtmlFormInputWithoutLabel --> + <textarea id="page-editor"> + <?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/subsystems/$systemID-$subsystemID.html") ? file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID-subsystem-$subsystemID.html") : "" ?> + </textarea> + + <script src="/assets/editor/editor.js"></script> + <script> + let editor; + ClassicEditor + .create( document.querySelector( '#page-editor' ), { + toolbar: [ + 'undo', 'redo', '|', 'removeFormat', '|', 'heading', '|', 'fontSize', 'fontColor', 'fontBackgroundColor', 'alignment', '|', 'bold', 'italic', 'underline', 'strikethrough', '|', 'subscript', 'superscript', '|', 'code', '|', 'outdent', 'indent', '|', 'bulletedList', 'numberedList', '|', 'link', 'imageUpload', 'mediaEmbed', 'blockQuote', 'insertTable', 'codeBlock', '|', 'horizontalLine' + ] + } ) + + .then( newEditor => { + editor = newEditor; + } ) + .catch( error => { + console.error( error ); + } ); + </script> + <style> + :root { + --ck-color-base-background: transparent; + } + + .ck-toolbar { + filter: invert(1); + } + + .ck-tooltip__text { + color: white !important; + } + + .ck-dropdown__panel { + background: #ddd !important; + } + + .ck-color-grid__tile { + filter: invert(1); + } + + .ck-balloon-rotator { + background-color: #ccc !important; + } + + .ck-balloon-panel { + filter: invert(1); + } + </style> + <script> + let lastSavedData = editor.getData(); + let lastFetchedData = editor.getData(); + let timeSinceLastModified = 0; + let saving = false; + + async function save() { + let data = editor.getData(); + document.getElementById("editor-save-status").innerHTML = "Saving..."; + document.getElementById("editor-save-status").classList.remove("text-danger"); + document.getElementById("editor-save-status").classList.remove("text-muted"); + document.getElementById("editor-save-status").classList.remove("text-warning"); + document.getElementById("editor-save-status").classList.add("text-primary"); + saving = true; + + try { + await window.fetch("/api/save?system=<?= $systemID ?>&subsystem=<?= $subsystemID ?>", { + method: "POST", + body: JSON.stringify({ content: data }) + }); + document.getElementById("editor-save-status").innerHTML = "Saved"; + document.getElementById("editor-save-status").classList.remove("text-danger"); + document.getElementById("editor-save-status").classList.add("text-muted"); + document.getElementById("editor-save-status").classList.remove("text-warning"); + document.getElementById("editor-save-status").classList.remove("text-primary"); + lastSavedData = data; + saving = false; + } catch (e) { + console.error(e); + document.getElementById("editor-save-status").innerHTML = "Failed to save"; + document.getElementById("editor-save-status").classList.add("text-danger"); + document.getElementById("editor-save-status").classList.remove("text-muted"); + document.getElementById("editor-save-status").classList.remove("text-warning"); + document.getElementById("editor-save-status").classList.remove("text-primary"); + } + } + + document.onclick = async () => { + if (saving) return; + + if (editor.getData() !== lastSavedData) { + await save(); + } + } + + setInterval(async () => { + if (saving) return; + + document.getElementById("editor-size").innerHTML = editor.getData().length; + + if (editor.getData() !== lastSavedData) { + document.getElementById("editor-save-status").innerHTML = "Modified"; + document.getElementById("editor-save-status").classList.remove("text-danger"); + document.getElementById("editor-save-status").classList.remove("text-muted"); + document.getElementById("editor-save-status").classList.add("text-warning"); + document.getElementById("editor-save-status").classList.remove("text-primary"); + + if (editor.getData() !== lastFetchedData) { + lastFetchedData = editor.getData(); + timeSinceLastModified = 0; + } else { + timeSinceLastModified++; + } + + if (timeSinceLastModified > 20) { + await save(); + } + } else { + timeSinceLastModified = 0; + document.getElementById("editor-save-status").innerHTML = "Saved"; + document.getElementById("editor-save-status").classList.add("text-muted"); + document.getElementById("editor-save-status").classList.remove("text-warning"); + document.getElementById("editor-save-status").classList.remove("text-primary"); + } + }, 100) + </script> +</div> + +<?php require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/footer.inc'; ?>
\ No newline at end of file |