Confirm to leave when there are unsaved changes

spatie · Jul 1, 2020 · 4156305 · 4156305
1 parent b67e414
commit 4156305
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 All notable changes to `laravel-mailcoach-unlayer` will be documented in this file
 
+## 1.1.2 - 2020-07-01
+
+- Confirm to leave when there are unsaved changes
+
 ## 1.1.1 - 2020-06-12
 
 - fix Turbolinks compatibility

diff --git a/resources/views/unlayer.blade.php b/resources/views/unlayer.blade.php
@@ -7,8 +7,10 @@
 
     document.getElementById('unlayer').addEventListener('load', initUnlayer);
 
-    document.addEventListener("turbolinks:before-visit", destroyUnlayer);
+    document.addEventListener('turbolinks:before-visit', confirmBeforeLeaveAndDestroyUnlayer);
     document.addEventListener("turbolinks:load", initUnlayer);
+    window.addEventListener('beforeunload', confirmBeforeLeaveAndDestroyUnlayer);
+
 
     function initUnlayer() {
         if (window.unlayerInitialized) {
@@ -66,17 +68,29 @@ function initUnlayer() {
             unlayer.exportHtml(function(data) {
                 document.getElementById('html').value = data.html;
                 document.getElementById('structured_html').value = JSON.stringify(data.design);
+                document.getElementById('html').dataset.dirty = "";
                 document.querySelector('.layout-main form').submit();
             });
         });
+
+        unlayer.addEventListener('design:updated', function(data) {
+            document.getElementById('html').dataset.dirty = "dirty";
+        });
     }
 
-    function destroyUnlayer() {
+    function confirmBeforeLeaveAndDestroyUnlayer(event) {
+        if (document.getElementById('html').dataset.dirty === "dirty" && ! confirm('Are you sure you want to leave this page? Any unsaved changes will be lost.')) {
+            event.preventDefault();
+            return;
+        }
+
         window.unlayerInitialized = false;
 
-        document.removeEventListener("turbolinks:before-visit", destroyUnlayer);
+        document.removeEventListener('turbolinks:before-visit', confirmBeforeLeaveAndDestroyUnlayer);
         document.removeEventListener("turbolinks:load", initUnlayer);
+        window.removeEventListener('beforeunload', confirmBeforeLeaveAndDestroyUnlayer);
     }
+
 </script>
 <div>
     <div class="form-row max-w-full h-full">