Added new confirm-dialog component, both view and logic

resources/js/components/confirm-dialog.js

@@ -0,0 +1,53 @@
+import {onSelect} from "../services/dom";
+
+/**
+ * Custom equivalent of window.confirm() using our popup component.
+ * Is promise based so can be used like so:
+ * `const result = await dialog.show()`
+ * @extends {Component}
+ */
+class ConfirmDialog {
+
+    setup() {
+        this.container = this.$el;
+        this.confirmButton = this.$refs.confirm;
+
+        this.res = null;
+
+        onSelect(this.confirmButton, () => {
+            this.sendResult(true);
+            this.getPopup().hide();
+        });
+    }
+
+    show() {
+        this.getPopup().show(null, () => {
+            this.sendResult(false);
+        });
+
+        return new Promise((res, rej) => {
+           this.res = res;
+        });
+    }
+
+    /**
+     * @returns {Popup}
+     */
+    getPopup() {
+        return this.container.components.popup;
+    }
+
+    /**
+     * @param {Boolean} result
+     */
+    sendResult(result) {
+        if (this.res) {
+            console.log('sending result', result);
+            this.res(result)
+            this.res = null;
+        }
+    }
+
+}
+
+export default ConfirmDialog;

resources/js/components/index.js

@@ -10,6 +10,7 @@ import chapterToggle from "./chapter-toggle.js"
 import codeEditor from "./code-editor.js"
 import codeHighlighter from "./code-highlighter.js"
 import collapsible from "./collapsible.js"
+import confirmDialog from "./confirm-dialog"
 import customCheckbox from "./custom-checkbox.js"
 import detailsHighlighter from "./details-highlighter.js"
 import dropdown from "./dropdown.js"
@@ -26,7 +27,6 @@ import headerMobileToggle from "./header-mobile-toggle.js"
 import homepageControl from "./homepage-control.js"
 import imageManager from "./image-manager.js"
 import imagePicker from "./image-picker.js"
-import index from "./index.js"
 import listSortControl from "./list-sort-control.js"
 import markdownEditor from "./markdown-editor.js"
 import newUserPassword from "./new-user-password.js"
@@ -66,6 +66,7 @@ const componentMapping = {
     "code-editor": codeEditor,
     "code-highlighter": codeHighlighter,
     "collapsible": collapsible,
+    "confirm-dialog": confirmDialog,
     "custom-checkbox": customCheckbox,
     "details-highlighter": detailsHighlighter,
     "dropdown": dropdown,
@@ -82,7 +83,6 @@ const componentMapping = {
     "homepage-control": homepageControl,
     "image-manager": imageManager,
     "image-picker": imagePicker,
-    "index": index,
     "list-sort-control": listSortControl,
     "markdown-editor": markdownEditor,
     "new-user-password": newUserPassword,

resources/js/components/popup.js

@@ -34,7 +34,7 @@ class Popup {
     }
 
     hide(onComplete = null) {
-        fadeOut(this.container, 240, onComplete);
+        fadeOut(this.container, 120, onComplete);
         if (this.onkeyup) {
             window.removeEventListener('keyup', this.onkeyup);
             this.onkeyup = null;
@@ -45,7 +45,7 @@ class Popup {
     }
 
     show(onComplete = null, onHide = null) {
-        fadeIn(this.container, 240, onComplete);
+        fadeIn(this.container, 120, onComplete);
 
         this.onkeyup = (event) => {
             if (event.key === 'Escape') {

resources/sass/_components.scss

@@ -120,6 +120,11 @@
     width: 800px;
     max-width: 90%;
   }
+  &.very-small {
+    margin: 2% auto;
+    width: 600px;
+    max-width: 90%;
+  }
   &:before {
     display: flex;
     align-self: flex-start;

resources/views/common/confirm-dialog.blade.php

@@ -0,0 +1,21 @@
+<div components="popup confirm-dialog"
+     refs="confirm-dialog@popup"
+     class="popup-background">
+    <div class="popup-body very-small" tabindex="-1">
+
+        <div class="popup-header primary-background">
+            <div class="popup-title">{{ $title }}</div>
+            <button refs="popup@hide" type="button" class="popup-header-close">x</button>
+        </div>
+
+        <div class="px-m py-m">
+            {{ $slot }}
+
+            <div class="text-right">
+                <button type="button" class="button outline" refs="popup@hide">{{ trans('common.cancel') }}</button>
+                <button type="button" class="button" refs="confirm-dialog@confirm">{{ trans('common.continue') }}</button>
+            </div>
+        </div>
+
+    </div>
+</div>