Add confirmation modal to avoid bad actions likes

- Trashes all elements - Overwrite all elements
monsieurbiz · Feb 22, 2024 · 392081f · 392081f
1 parent b60c151
commit 392081f
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 21 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -259,16 +259,16 @@ global.MonsieurBizRichEditorManager = class {
       const pasteAllButton = this.container.querySelector('.js-uie-tools-paste-all');
       const trashAllButton = this.container.querySelector('.js-uie-tools-trash-all');
 
-      trashAllButton.addEventListener('click', e => {
-        this.resetUiElements();
+      copyAllButton && copyAllButton.addEventListener('click', e => {
+        this.saveUiElementsToClipboard(e.currentTarget);
       });
 
-      copyAllButton.addEventListener('click', e => {
-        this.saveUiElementsToClipboard();
+      pasteAllButton && pasteAllButton.addEventListener('click', e => {
+        this.pasteUiElementsFromClipboard();
       });
 
-      pasteAllButton.addEventListener('click', e => {
-        this.pasteUiElementsFromClipboard();
+      trashAllButton && trashAllButton.addEventListener('click', e => {
+          this.resetUiElements();
       });
   }
 
@@ -671,13 +671,27 @@ global.MonsieurBizRichEditorManager = class {
   }
 
   resetUiElements() {
-    this.initUiElements([], () => { this.write(); });
+    if (this.uiElements.length === 0) {
+      return;
+    }
+
+    this.loadUiConfirmationModal(() => { this.initUiElements([], () => { this.write(); }) })
+  }
+
+  loadUiConfirmationModal(callback) {
+    const modal = document.querySelector('#monsieurbiz-rich-editor-confirmation-modal');
+    const confirmButton = modal.querySelector('#monsieurbiz-rich-editor-confirmation-button');
+
+    confirmButton.addEventListener('click', () => {
+      callback();
+    })
+
+    $(modal).modal('show');
   }
 
-  saveUiElementsToClipboard() {
+  saveUiElementsToClipboard(button) {
     window.localStorage.setItem('monsieurBizRichEditorElementsClipboard', JSON.stringify(this.uiElements));
 
-    const button = e.currentTarget;
     const originalText = button.dataset.tooltip;
     button.dataset.tooltip = button.dataset.alternateText;
     window.setTimeout(function () {
@@ -687,8 +701,15 @@ global.MonsieurBizRichEditorManager = class {
 
   pasteUiElementsFromClipboard() {
     const clipboard = window.localStorage.getItem('monsieurBizRichEditorElementsClipboard');
-    const pastedUiElement = JSON.parse(clipboard);
-    this.initUiElements(pastedUiElement, () => { this.write(); });
+    if (clipboard !== null) {
+      const pastedUiElement = JSON.parse(clipboard);
+
+      if (this.uiElements.length > 0) {
+        this.loadUiConfirmationModal(() => { this.initUiElements(pastedUiElement, () => { this.write(); })})
+      } else {
+        this.initUiElements(pastedUiElement, () => { this.write(); });
+      }
+    }
   }
 
   saveUiElementToClipboard(uiElement, callback) {
@@ -697,7 +718,6 @@ global.MonsieurBizRichEditorManager = class {
     document.dispatchEvent(new CustomEvent('mbiz:rich-editor:uielement:copied', {}));
   }
 
-
   pasteUiElementFromClipboard(futurePosition) {
     const clipboard = window.localStorage.getItem('monsieurBizRichEditorElementClipboard');
     if (null !== clipboard) {