<?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/subsystems/$systemID-$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/subsystems/$systemID-$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'; ?>