<?php global $system; global $systemCommonName; global $systemID; $title = "Editing " . $systemCommonName; require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/header.php'; function timeAgo($time): string { if (!is_numeric($time)) { $time = strtotime($time); } $periods = ["second", "minute", "hour", "day", "week", "month", "year", "age"]; $lengths = array("60", "60", "24", "7", "4.35", "12", "100"); $now = time(); $difference = $now - $time; if ($difference <= 10 && $difference >= 0) { return $tense = "now"; } elseif ($difference > 0) { $tense = "ago"; } else { $tense = "later"; } for ($j = 0; $difference >= $lengths[$j] && $j < count($lengths)-1; $j++) { $difference /= $lengths[$j]; } $difference = round($difference); $period = $periods[$j] . ($difference >1 ? "s" :''); return "{$difference} {$period} {$tense}"; } ?> <br> <div class="container"> <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/sysbanner.php"; ?> <br> <p class="text-muted"> <span id="editor-save-status">Saved</span> ยท <span id="editor-size"><?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID-disclaimers.html") ? strlen(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID-disclaimers.html")) : "0" ?></span> bytes </p> <!--suppress HtmlFormInputWithoutLabel --> <textarea id="page-editor"> <?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID-disclaimers.html") ? file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID-disclaimers.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 ?>&member=null", { 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.php'; ?>