diff --git a/packages/realtime-compiler/resources/dashboard.blade.php b/packages/realtime-compiler/resources/dashboard.blade.php index 117db116736..72551cfa27d 100644 --- a/packages/realtime-compiler/resources/dashboard.blade.php +++ b/packages/realtime-compiler/resources/dashboard.blade.php @@ -281,93 +281,7 @@ - + @endif diff --git a/packages/realtime-compiler/resources/dashboard.js b/packages/realtime-compiler/resources/dashboard.js new file mode 100644 index 00000000000..3ea5dc49b97 --- /dev/null +++ b/packages/realtime-compiler/resources/dashboard.js @@ -0,0 +1,85 @@ +/** + * Progressive enhancement when JavaScript is enabled to intercept form requests + * and instead handle them with an asynchronous Fetch instead of refreshing the page. + * + * @param {Element} form + * @param {?callback} okHandler + * @param {?callback} errorHandler + * @param {?callback} beforeCallHandler + * @param {?callback} afterCallHandler + */ +function registerAsyncForm(form, okHandler = null, errorHandler = null, beforeCallHandler = null, afterCallHandler = null) { + form.addEventListener("submit", function (event) { + // Disable default form submit + event.preventDefault(); + + if (beforeCallHandler) { + beforeCallHandler(); + } + + fetch("", { + method: "POST", + body: new FormData(event.target), + headers: new Headers({ + "X-RC-Handler": "Async", + }), + }).then(response => { + if (response.ok) { + if (okHandler) { + okHandler(response); + } + } else { + if (errorHandler) { + errorHandler(response); + } else { + console.error("Fetch request failed."); + } + } + }).catch(error => { + // Handle any network-related errors + console.error("Network error:", error); + }); + + if (afterCallHandler) { + afterCallHandler(); + } + }); +} + +document.querySelectorAll(".openInEditorForm").forEach(form => { + registerAsyncForm(form); +}); + +let createPageModal = null; + +document.addEventListener('DOMContentLoaded', function () { + createPageModal = new bootstrap.Modal('#createPageModal'); +}); + +const createPageForm = document.getElementById("createPageForm"); +const createPageFormSubmit = document.getElementById("createPageButton"); +const createPageFormError = document.getElementById("createPageFormError"); +const createPageFormErrorContents = document.getElementById("createPageFormErrorContents"); + +registerAsyncForm(createPageForm, async function (response) { + let data = await response.json(); + createPageModal.hide(); + Swal.fire({ + title: 'Page created!', + text: data.body, + icon: 'success', + timer: 3000, + timerProgressBar: true, + }) + createPageForm.reset() +}, async function (response) { + let data = await response.json(); + createPageFormError.style.display = 'block'; + createPageFormErrorContents.innerText = data.error; +}, function () { + createPageFormSubmit.disabled = true; + createPageFormError.style.display = 'none'; + createPageFormErrorContents.innerText = ''; +}, function () { + createPageFormSubmit.disabled = false; +}); diff --git a/packages/realtime-compiler/src/Http/DashboardController.php b/packages/realtime-compiler/src/Http/DashboardController.php index ca1fd76cf29..6c70ca4c513 100644 --- a/packages/realtime-compiler/src/Http/DashboardController.php +++ b/packages/realtime-compiler/src/Http/DashboardController.php @@ -178,6 +178,11 @@ public function enableEditor(): bool return config('hyde.server.editor', true); } + public function getScripts(): string + { + return file_get_contents(__DIR__.'/../../resources/dashboard.js'); + } + protected function openInEditor(HydePage $page): void { if ($this->enableEditor()) {