alert on unsaved changes

explorerhq · Dec 21, 2023 · 702b612 · 702b612
1 parent b0b41f4
commit 702b612
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 13 deletions.
diff --git a/explorer/static/js/src/codemirror-config.js b/explorer/static/js/src/codemirror-config.js
@@ -1,6 +1,6 @@
 import {
     keymap, highlightSpecialChars, drawSelection, highlightActiveLine, dropCursor,
-    lineNumbers, highlightActiveLineGutter
+    lineNumbers, highlightActiveLineGutter, EditorView
 } from "@codemirror/view"
 import {
     defaultHighlightStyle, syntaxHighlighting, indentOnInput, bracketMatching,
@@ -14,6 +14,12 @@ import { Prec } from "@codemirror/state";
 import {sql} from "@codemirror/lang-sql";
 
 
+let updateListenerExtension = EditorView.updateListener.of((update) => {
+  if (update.docChanged) {
+    document.dispatchEvent(new CustomEvent('docChanged', {}));
+  }
+});
+
 const submitEventFromCM = new CustomEvent('submitEventFromCM', {});
 const submitKeymapArr = [
     {
@@ -57,6 +63,7 @@ export const explorerSetup = (() => [
     highlightActiveLine(),
     highlightSelectionMatches(),
     submitKeymap,
+    updateListenerExtension,
     keymap.of([
         ...closeBracketsKeymap,
         ...defaultKeymap,

diff --git a/explorer/static/js/src/explorer.js b/explorer/static/js/src/explorer.js
@@ -35,6 +35,7 @@ export class ExplorerEditor {
         this.$form = $("form");
         this.$snapshotField = $("#id_snapshot");
         this.$paramFields = this.$form.find(".param");
+        this.docChanged = false;
 
         this.$submit = $("#refresh_play_button, #save_button");
         if (!this.$submit.length) {
@@ -47,6 +48,10 @@ export class ExplorerEditor {
             this.$submit.click();
         });
 
+        document.addEventListener('docChanged', (e) => {
+            this.docChanged = true;
+        });
+
         pivotJq($);
 
         this.bind();
@@ -171,6 +176,21 @@ export class ExplorerEditor {
     }
 
     bind() {
+
+        $(window).on("beforeunload", function () {
+            // Only do this if changed-input is on the page and we"re not on the playground page.
+            if (clientRoute === 'query_detail' && this.docChanged) {
+                return "You have unsaved changes to your query.";
+            }
+        }.bind(this));
+
+        // Disable unsaved changes warning when submitting the editor form
+        $(document).on("submit", "#editor", function(event){
+            // disable warning
+            $(window).off("beforeunload");
+        });
+
+
         document.querySelectorAll('.query_favorite_toggle').forEach(function(element) {
             element.addEventListener('click', toggleFavorite);
         });
@@ -322,15 +342,3 @@ export class ExplorerEditor {
 }
 
 // TODO make this work again
-$(window).on("beforeunload", function () {
-    // Only do this if changed-input is on the page and we"re not on the playground page.
-    if ($(".changed-input").length && !$(".playground-form").length) {
-        return "You have unsaved changes to your query.";
-    }
-});
-
-// Disable unsaved changes warning when submitting the editor form
-$(document).on("submit", "#editor", function(event){
-    // disable warning
-    $(window).off("beforeunload");
-});