Extract dashboard scripts to file

hydephp · Oct 21, 2023 · f53a85d · f53a85d
1 parent 33684cc
commit f53a85d
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 87 deletions.
diff --git a/packages/realtime-compiler/resources/dashboard.blade.php b/packages/realtime-compiler/resources/dashboard.blade.php
@@ -281,93 +281,7 @@
     <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
-    <script>
-        /**
-         * 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;
-        });
-    </script>
+    <script>{!! $dashboard->getScripts() !!}</script>
 @endif
 </body>
 </html>
diff --git a/packages/realtime-compiler/resources/dashboard.js 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
@@ -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()) {