diff options
author | RaindropsSys <contact@minteck.org> | 2023-03-12 19:16:53 +0100 |
---|---|---|
committer | RaindropsSys <contact@minteck.org> | 2023-03-12 19:16:53 +0100 |
commit | eb89b15c0f044673c1206a418a21d0baba1a675e (patch) | |
tree | 39ac31a576d8b8392cbd9baf8d67621bf2cefa86 /includes/fragments/sysedit.inc | |
parent | 5385f0ed8fbb4325203a222a75e6700ffb519349 (diff) | |
download | pluralconnect-eb89b15c0f044673c1206a418a21d0baba1a675e.tar.gz pluralconnect-eb89b15c0f044673c1206a418a21d0baba1a675e.tar.bz2 pluralconnect-eb89b15c0f044673c1206a418a21d0baba1a675e.zip |
Updated 104 files, added 3 files, deleted 4 files and renamed 36 files (automated)
Diffstat (limited to 'includes/fragments/sysedit.inc')
-rw-r--r-- | includes/fragments/sysedit.inc | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/includes/fragments/sysedit.inc b/includes/fragments/sysedit.inc new file mode 100644 index 0000000..1b341b0 --- /dev/null +++ b/includes/fragments/sysedit.inc @@ -0,0 +1,153 @@ +<?php global $system; global $systemCommonName; global $systemID; $title = "Editing " . $systemCommonName; require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/components/header.inc'; + +?> + +<div id="system-banner-container" style="width: 100%;height: 65vh;position: fixed;background-image: url('<?= getAsset($systemID, null, "banners") ?>');background-size: cover;background-position: center; top: 0;"> + <div id="system-banner-inner" style="height: 100%;width: 100%;background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);"></div> +</div> + +<br> +<div class="container"> + <div class="container"> + + <div id="system-page" style="background-color: rgba(26,26,26,0.8);border-radius: 10px;padding:20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);margin-top:30vh;"> + <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/components/sysbanner.inc"; ?> + <br> + + <p class="text-muted"> + <span id="editor-save-status">Saved</span> ยท <span id="editor-size"><?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID/content.html") ? strlen(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID/content.html")) : "0" ?></span> bytes + </p> + + <!--suppress HtmlFormInputWithoutLabel --> + <textarea id="page-editor"> + <?= file_exists($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID/content.html") ? file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID/content.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> + </div> + <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/components/sysbanner.inc"; ?> +</div> + +<?php require_once $_SERVER['DOCUMENT_ROOT'] . '/includes/components/footer.inc'; ?>
\ No newline at end of file |