Linked up confirmation prompt to editor switching

diff --git a/resources/js/components/confirm-dialog.js b/resources/js/components/confirm-dialog.js
index c6c5d103aafc70026d1d086e87927fcb091389d4..858be1b852be7eb23636113720294a8b878dca27 100644 (file)
--- a/resources/js/components/confirm-dialog.js
+++ b/resources/js/components/confirm-dialog.js
@@ -42,7 +42,6 @@ class ConfirmDialog {
      */
     sendResult(result) {
         if (this.res) {
      */
     sendResult(result) {
         if (this.res) {

-            console.log('sending result', result);

             this.res(result)
             this.res = null;
         }
             this.res(result)
             this.res = null;
         }

diff --git a/resources/js/components/page-editor.js b/resources/js/components/page-editor.js
index dae8071220720d6126c81f77406f88c77af5e2a0..ce123e987b055db94769f7326a8fdf63f841342b 100644 (file)
--- a/resources/js/components/page-editor.js
+++ b/resources/js/components/page-editor.js
@@ -24,6 +24,8 @@ class PageEditor {
         this.draftDisplayIcon = this.$refs.draftDisplayIcon;
         this.changelogInput = this.$refs.changelogInput;
         this.changelogDisplay = this.$refs.changelogDisplay;
         this.draftDisplayIcon = this.$refs.draftDisplayIcon;
         this.changelogInput = this.$refs.changelogInput;
         this.changelogDisplay = this.$refs.changelogDisplay;

+        this.changeEditorButtons = this.$manyRefs.changeEditor;
+        this.switchDialogContainer = this.$refs.switchDialog;

 
         // Translations
         this.draftText = this.$opts.draftText;
 
         // Translations
         this.draftText = this.$opts.draftText;


@@ -72,6 +74,9 @@ class PageEditor {
         // Draft Controls
         onSelect(this.saveDraftButton, this.saveDraft.bind(this));
         onSelect(this.discardDraftButton, this.discardDraft.bind(this));
         // Draft Controls
         onSelect(this.saveDraftButton, this.saveDraft.bind(this));
         onSelect(this.discardDraftButton, this.discardDraft.bind(this));

+
+        // Change editor controls
+        onSelect(this.changeEditorButtons, this.changeEditor.bind(this));

     }
 
     setInitialFocus() {
     }
 
     setInitialFocus() {


@@ -113,17 +118,21 @@ class PageEditor {
             data.markdown = this.editorMarkdown;
         }
 
             data.markdown = this.editorMarkdown;
         }
 

+        let didSave = false;

         try {
             const resp = await window.$http.put(`/ajax/page/${this.pageId}/save-draft`, data);
             if (!this.isNewDraft) {
                 this.toggleDiscardDraftVisibility(true);
             }
         try {
             const resp = await window.$http.put(`/ajax/page/${this.pageId}/save-draft`, data);
             if (!this.isNewDraft) {
                 this.toggleDiscardDraftVisibility(true);
             }

+

             this.draftNotifyChange(`${resp.data.message} ${Dates.utcTimeStampToLocalTime(resp.data.timestamp)}`);
             this.autoSave.last = Date.now();
             if (resp.data.warning && !this.shownWarningsCache.has(resp.data.warning)) {
                 window.$events.emit('warning', resp.data.warning);
                 this.shownWarningsCache.add(resp.data.warning);
             }
             this.draftNotifyChange(`${resp.data.message} ${Dates.utcTimeStampToLocalTime(resp.data.timestamp)}`);
             this.autoSave.last = Date.now();
             if (resp.data.warning && !this.shownWarningsCache.has(resp.data.warning)) {
                 window.$events.emit('warning', resp.data.warning);
                 this.shownWarningsCache.add(resp.data.warning);
             }

+
+            didSave = true;

         } catch (err) {
             // Save the editor content in LocalStorage as a last resort, just in case.
             try {
         } catch (err) {
             // Save the editor content in LocalStorage as a last resort, just in case.
             try {


@@ -134,6 +143,7 @@ class PageEditor {
             window.$events.emit('error', this.autosaveFailText);
         }
 
             window.$events.emit('error', this.autosaveFailText);
         }
 

+        return didSave;

     }
 
     draftNotifyChange(text) {
     }
 
     draftNotifyChange(text) {


@@ -185,6 +195,18 @@ class PageEditor {
         this.discardDraftWrap.classList.toggle('hidden', !show);
     }
 
         this.discardDraftWrap.classList.toggle('hidden', !show);
     }
 

+    async changeEditor(event) {
+        event.preventDefault();
+
+        const link = event.target.closest('a').href;
+        const dialog = this.switchDialogContainer.components['confirm-dialog'];
+        const [saved, confirmed] = await Promise.all([this.saveDraft(), dialog.show()]);
+
+        if (saved && confirmed) {
+            window.location = link;
+        }
+    }
+

 }
 
 export default PageEditor;
\ No newline at end of file
 }
 
 export default PageEditor;
\ No newline at end of file

diff --git a/resources/lang/en/entities.php b/resources/lang/en/entities.php
index 3921828d851de5d681104c731b947914a0d9b41d..85a77e0cb31560a4e919f8d7cc801610aaafbeb0 100644 (file)
--- a/resources/lang/en/entities.php
+++ b/resources/lang/en/entities.php
@@ -197,12 +197,18 @@ return [
     'pages_edit_delete_draft' => 'Delete Draft',
     'pages_edit_discard_draft' => 'Discard Draft',
     'pages_edit_switch_to_markdown' => 'Switch to Markdown Editor',
     'pages_edit_delete_draft' => 'Delete Draft',
     'pages_edit_discard_draft' => 'Discard Draft',
     'pages_edit_switch_to_markdown' => 'Switch to Markdown Editor',

-    'pages_edit_switch_to_markdown_clean' => '(Clean Markdown Content)',
-    'pages_edit_switch_to_markdown_stable' => '(Stable Markdown Content)',
+    'pages_edit_switch_to_markdown_clean' => '(Clean Content)',
+    'pages_edit_switch_to_markdown_stable' => '(Stable Content)',

     'pages_edit_switch_to_wysiwyg' => 'Switch to WYSIWYG Editor',
     'pages_edit_set_changelog' => 'Set Changelog',
     'pages_edit_enter_changelog_desc' => 'Enter a brief description of the changes you\'ve made',
     'pages_edit_enter_changelog' => 'Enter Changelog',
     'pages_edit_switch_to_wysiwyg' => 'Switch to WYSIWYG Editor',
     'pages_edit_set_changelog' => 'Set Changelog',
     'pages_edit_enter_changelog_desc' => 'Enter a brief description of the changes you\'ve made',
     'pages_edit_enter_changelog' => 'Enter Changelog',

+    'pages_editor_switch_title' => 'Switch Editor',
+    'pages_editor_switch_are_you_sure' => 'Are you sure you want to change the editor for this page?',
+    'pages_editor_switch_consider_following' => 'Consider the following when changing editors:',
+    'pages_editor_switch_consideration_a' => 'Once saved, the new editor option will be used by any future editors, including those that may not be able to change editor type themselves.',
+    'pages_editor_switch_consideration_b' => 'This can potentially lead to a loss of detail and syntax in certain circumstances.',
+    'pages_editor_switch_consideration_c' => 'Tag or changelog changes, made since last save, won\'t persist across this change.',

     'pages_save' => 'Save Page',
     'pages_title' => 'Page Title',
     'pages_name' => 'Page Name',
     'pages_save' => 'Save Page',
     'pages_title' => 'Page Title',
     'pages_name' => 'Page Name',

diff --git a/resources/views/common/confirm-dialog.blade.php b/resources/views/common/confirm-dialog.blade.php
index 107d04af1d48c08ee002306c75a881d3893233ab..28587d4e8c0f8e09a4d56b6b47152087006df0cf 100644 (file)
--- a/resources/views/common/confirm-dialog.blade.php
+++ b/resources/views/common/confirm-dialog.blade.php
@@ -1,5 +1,5 @@
 <div components="popup confirm-dialog"
 <div components="popup confirm-dialog"

-     refs="confirm-dialog@popup"
+     refs="confirm-dialog@popup {{ $ref }}"

      class="popup-background">
     <div class="popup-body very-small" tabindex="-1">
 
      class="popup-background">
     <div class="popup-body very-small" tabindex="-1">
 

diff --git a/resources/views/home/default.blade.php b/resources/views/home/default.blade.php
index f6a337e5054d4bd7b978fc08c626253270d278ed..4e14b6744223f705492d33d1b41c4d063f534075 100644 (file)
--- a/resources/views/home/default.blade.php
+++ b/resources/views/home/default.blade.php
@@ -17,6 +17,22 @@
         </div>
     </div>
 
         </div>
     </div>
 

+    @component('common.confirm-dialog', ['title' => 'Destroy Dogs'])
+        <p>Are you sure you want to do this thingy?</p>
+        <ul>
+            <li>This could be bad</li>
+            <li>This could be very bad</li>
+            <li>This might be very bad</li>
+        </ul>
+    @endcomponent
+
+    <script nonce="{{ $cspNonce }}">
+        setTimeout(async () => {
+            const result = await window.components["confirm-dialog"][0].show();
+            console.log({result});
+        }, 1000);
+    </script>
+

     <div class="container" id="home-default">
         <div class="grid third gap-xxl no-row-gap" >
             <div>
     <div class="container" id="home-default">
         <div class="grid third gap-xxl no-row-gap" >
             <div>

diff --git a/resources/views/pages/parts/editor-toolbar.blade.php b/resources/views/pages/parts/editor-toolbar.blade.php
index d7fb76c296e4038b6c850eb0e38c2cd6bdd40031..9bc79476e8e1e7cee59bc1c184e6c67d7176da58 100644 (file)
--- a/resources/views/pages/parts/editor-toolbar.blade.php
+++ b/resources/views/pages/parts/editor-toolbar.blade.php
@@ -36,7 +36,7 @@
                     @if(userCan('editor-change'))
                         <li>
                             @if($editor === 'wysiwyg')
                     @if(userCan('editor-change'))
                         <li>
                             @if($editor === 'wysiwyg')

-                                <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-clean" class="icon-item">
+                                <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-clean" refs="page-editor@changeEditor" class="icon-item">

                                     @icon('swap-horizontal')
                                     <div>
                                         {{ trans('entities.pages_edit_switch_to_markdown') }}
                                     @icon('swap-horizontal')
                                     <div>
                                         {{ trans('entities.pages_edit_switch_to_markdown') }}


@@ -44,7 +44,7 @@
                                         <small>{{ trans('entities.pages_edit_switch_to_markdown_clean') }}</small>
                                     </div>
                                 </a>
                                         <small>{{ trans('entities.pages_edit_switch_to_markdown_clean') }}</small>
                                     </div>
                                 </a>

-                                <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-stable" class="icon-item">
+                                <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-stable" refs="page-editor@changeEditor" class="icon-item">

                                     @icon('swap-horizontal')
                                     <div>
                                         {{ trans('entities.pages_edit_switch_to_markdown') }}
                                     @icon('swap-horizontal')
                                     <div>
                                         {{ trans('entities.pages_edit_switch_to_markdown') }}


@@ -53,7 +53,7 @@
                                     </div>
                                 </a>
                             @else
                                     </div>
                                 </a>
                             @else

-                                <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=wysiwyg" class="icon-item">
+                                <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=wysiwyg" refs="page-editor@changeEditor" class="icon-item">

                                     @icon('swap-horizontal')
                                     <div>{{ trans('entities.pages_edit_switch_to_wysiwyg') }}</div>
                                 </a>
                                     @icon('swap-horizontal')
                                     <div>{{ trans('entities.pages_edit_switch_to_wysiwyg') }}</div>
                                 </a>

diff --git a/resources/views/pages/parts/form.blade.php b/resources/views/pages/parts/form.blade.php
index 2c2ab9b92574dd88a026dbddb30d621cd711c916..cec11462dc464016e7d8eb9c2d671633e2700124 100644 (file)
--- a/resources/views/pages/parts/form.blade.php
+++ b/resources/views/pages/parts/form.blade.php
@@ -40,8 +40,24 @@
 
     </div>
 
 
     </div>
 

+    {{--Mobile Save Button--}}

     <button type="submit"
             id="save-button-mobile"
             title="{{ trans('entities.pages_save') }}"
             class="text-primary text-button hide-over-m page-save-mobile-button">@icon('save')</button>
     <button type="submit"
             id="save-button-mobile"
             title="{{ trans('entities.pages_save') }}"
             class="text-primary text-button hide-over-m page-save-mobile-button">@icon('save')</button>

+
+    {{--Editor Change Dialog--}}
+    @component('common.confirm-dialog', ['title' => trans('entities.pages_editor_switch_title'), 'ref' => 'page-editor@switchDialog'])
+        <p>
+            {{ trans('entities.pages_editor_switch_are_you_sure') }}
+            <br>
+            {{ trans('entities.pages_editor_switch_consider_following') }}
+        </p>
+
+        <ul>
+            <li>{{ trans('entities.pages_editor_switch_consideration_a') }}</li>
+            <li>{{ trans('entities.pages_editor_switch_consideration_b') }}</li>
+            <li>{{ trans('entities.pages_editor_switch_consideration_c') }}</li>
+        </ul>
+    @endcomponent

 </div>
\ No newline at end of file
 </div>
\ No newline at end of file