Merge pull request #212 from kgonella/feature/copy-paste-all-contents

Add toolbox on top of each richeditor widget
monsieurbiz · May 25, 2024 · 7655fbe · 7655fbe
2 parents 1830e2e + 9eba035
commit 7655fbe
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 10 deletions.
diff --git a/assets/css/app.scss b/assets/css/app.scss
@@ -209,6 +209,10 @@ html.is-disabled body {
     align-items: center !important;
 }
 
+.uie-flex-cross-right {
+    justify-content: flex-end !important;
+}
+
 .uie-flex-main-between {
     justify-content: space-between !important;
 }

diff --git a/assets/js/app.js b/assets/js/app.js
@@ -218,6 +218,8 @@ global.MonsieurBizRichEditorManager = class {
     initInterface() {
         this.initUiElementsInterface();
         this.initUiPanelsInterface();
+        this.initUiToolsInterface();
+
         document.dispatchEvent(new CustomEvent('mbiz:rich-editor:init-interface-complete', {
             'detail': {'editorManager': this}
         }));
@@ -226,6 +228,30 @@ global.MonsieurBizRichEditorManager = class {
                 action.classList.remove('disabled');
             }.bind(this));
         }.bind(this));
+
+        document.addEventListener('mbiz:rich-editor:uielements:copied', function (e) {
+            this.container.querySelectorAll('.js-uie-tools-paste-all').forEach(function (action) {
+                action.removeAttribute('disabled');
+            }.bind(this));
+        }.bind(this));
+    }
+
+    initUiToolsInterface() {
+        const copyAllButton = this.container.querySelector('.js-uie-tools-copy-all');
+        const pasteAllButton = this.container.querySelector('.js-uie-tools-paste-all');
+        const trashAllButton = this.container.querySelector('.js-uie-tools-trash-all');
+
+        copyAllButton && copyAllButton.addEventListener('click', e => {
+            this.saveUiElementsToClipboard(e.currentTarget);
+        });
+
+        pasteAllButton && pasteAllButton.addEventListener('click', e => {
+            this.pasteUiElementsFromClipboard();
+        });
+
+        trashAllButton && trashAllButton.addEventListener('click', e => {
+            this.resetUiElements();
+        });
     }
 
     initUiPanelsInterface() {
@@ -300,7 +326,7 @@ global.MonsieurBizRichEditorManager = class {
             );
         });
         // Disabled?
-        if (!this.isClipboardEmpty()) {
+        if (!this.isClipboardEmpty('monsieurBizRichEditorElementClipboard')) {
             actions.querySelector('.js-uie-paste').classList.remove('disabled');
         }
 
@@ -617,19 +643,65 @@ global.MonsieurBizRichEditorManager = class {
         req.send(data);
     }
 
-    isClipboardEmpty() {
-        const clipboard = window.localStorage.getItem('monsieurBizRichEditorClipboard');
+    isClipboardEmpty(clipboardKey) {
+        const clipboard = window.localStorage.getItem(clipboardKey);
         return null === clipboard || '' === clipboard;
     }
 
+    resetUiElements() {
+        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');
+
+        const clonedConfirmButtom = confirmButton.cloneNode(true);
+        confirmButton.parentNode.replaceChild(clonedConfirmButtom, confirmButton);
+        clonedConfirmButtom.addEventListener('click', () => {
+            callback();
+        })
+
+        $(modal).modal('show');
+    }
+
+    saveUiElementsToClipboard(button) {
+        window.localStorage.setItem('monsieurBizRichEditorElementsClipboard', JSON.stringify(this.uiElements));
+
+        const originalText = button.dataset.tooltip;
+        button.dataset.tooltip = button.dataset.alternateText;
+        window.setTimeout(function () {
+            button.dataset.tooltip = originalText;
+        }, 1000);
+
+      document.dispatchEvent(new CustomEvent('mbiz:rich-editor:uielements:copied', {}));
+    }
+
+    pasteUiElementsFromClipboard() {
+        const clipboard = window.localStorage.getItem('monsieurBizRichEditorElementsClipboard');
+        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) {
-        window.localStorage.setItem('monsieurBizRichEditorClipboard', JSON.stringify(uiElement));
+        window.localStorage.setItem('monsieurBizRichEditorElementClipboard', JSON.stringify(uiElement));
         callback();
         document.dispatchEvent(new CustomEvent('mbiz:rich-editor:uielement:copied', {}));
     }
 
     pasteUiElementFromClipboard(futurePosition) {
-        const clipboard = window.localStorage.getItem('monsieurBizRichEditorClipboard');
+        const clipboard = window.localStorage.getItem('monsieurBizRichEditorElementClipboard');
         if (null !== clipboard) {
             const pastedUiElement = JSON.parse(clipboard);
             const manager = this;

diff --git a/src/Resources/public/css/rich-editor.css b/src/Resources/public/css/rich-editor.css
diff --git a/src/Resources/public/js/rich-editor.js b/src/Resources/public/js/rich-editor.js
diff --git a/src/Resources/translations/messages.en.yml b/src/Resources/translations/messages.en.yml
@@ -126,6 +126,9 @@ monsieurbiz_richeditor_plugin:
       justify: 'Justify'
     clipboard: 'Clipboard'
     paste_from_clipboard: 'Paste from clipboard'
+    paste_all_from_clipboard: 'Paste all elements'
+    copy_all_from_clipboard: 'Copy all elements'
+    trash_all: 'Remove all elements'
     copied: 'Copied!'
     copy: 'Copy'
   action:

diff --git a/src/Resources/translations/messages.fr.yml b/src/Resources/translations/messages.fr.yml
@@ -126,6 +126,9 @@ monsieurbiz_richeditor_plugin:
       justify: 'Justifié'
     clipboard: 'Presse-papier'
     paste_from_clipboard: 'Coller depuis le presse-papier'
+    paste_all_from_clipboard: 'Coller tous les éléments'
+    copy_all_from_clipboard: 'Copier tous les éléments'
+    trash_all: 'Supprimer tous les éléments'
     copied: 'Copié !'
     copy: 'Copier'
   action:

diff --git a/src/Resources/views/Admin/app.html.twig b/src/Resources/views/Admin/app.html.twig
@@ -1,6 +1,46 @@
 {% include '@SyliusUi/_javascripts.html.twig' with {'path': 'bundles/monsieurbizsyliusricheditorplugin/js/rich-editor.js'} %}
 {% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'bundles/monsieurbizsyliusricheditorplugin/css/rich-editor.css'} %}
 
+<div class="ui small basic modal" id="monsieurbiz-rich-editor-confirmation-modal">
+    <div class="ui icon header">
+        <i class="warning sign icon"></i>
+        {{ 'sylius.ui.confirm_your_action'|trans }}
+    </div>
+    <div class="content">
+        <p>{{ 'sylius.ui.are_your_sure_you_want_to_perform_this_action'|trans }}</p>
+    </div>
+    <div class="actions">
+        <div class="ui red basic cancel inverted button">
+            <i class="remove icon"></i>
+            {{ 'sylius.ui.no_label'|trans }}
+        </div>
+        <div class="ui green ok inverted button" id="monsieurbiz-rich-editor-confirmation-button">
+            <i class="checkmark icon"></i>
+            {{ 'sylius.ui.yes_label'|trans }}
+        </div>
+    </div>
+</div>
+
+<div class="ui small basic modal" id="monsieurbiz-rich-editor-confirmation-modal">
+    <div class="ui icon header">
+        <i class="warning sign icon"></i>
+        {{ 'sylius.ui.confirm_your_action'|trans }}
+    </div>
+    <div class="content">
+        <p>{{ 'sylius.ui.are_your_sure_you_want_to_perform_this_action'|trans }}</p>
+    </div>
+    <div class="actions">
+        <div class="ui red basic cancel inverted button">
+            <i class="remove icon"></i>
+            {{ 'sylius.ui.no_label'|trans }}
+        </div>
+        <div class="ui green ok inverted button" id="monsieurbiz-rich-editor-confirmation-button">
+            <i class="checkmark icon"></i>
+            {{ 'sylius.ui.yes_label'|trans }}
+        </div>
+    </div>
+</div>
+
 <script id="monsieurbiz-rich-editor-actions" type="x-tmpl-mustache">
 {% verbatim %}
 <div class="ui horizontal divider">
@@ -52,12 +92,23 @@
 </script>
 
 <script id="monsieurbiz-rich-editor-ui-elements-container" type="x-tmpl-mustache">
-{% verbatim %}
-    <div class="ui container">
+    <div class="ui">
+        <div class="uie-flex uie-flex-cross-right">
+            <div class="ui buttons">
+                <button class="ui icon button js-uie-tools-copy-all" type="button" data-alternate-text="{{ 'monsieurbiz_richeditor_plugin.form.copied'|trans }}" data-tooltip="{{ "monsieurbiz_richeditor_plugin.form.copy_all_from_clipboard"|trans }}">
+                    <i class="copy icon"></i>
+                </button>
+                <button class="ui icon button js-uie-tools-paste-all" type="button" disabled data-tooltip="{{ "monsieurbiz_richeditor_plugin.form.paste_all_from_clipboard"|trans }}">
+                    <i class="paste icon"></i>
+                </button>
+                 <button class="ui icon button js-uie-tools-trash-all" type="button" data-tooltip="{{ "monsieurbiz_richeditor_plugin.form.trash_all"|trans }}">
+                    <i class="trash icon"></i>
+                </button>
+            </div>
+        </div>
         <div class="ui segment js-uie-container">
         </div>
     </div>
-{% endverbatim %}
 </script>
 
 <script id="monsieurbiz-rich-editor-ui-element-card" type="x-tmpl-mustache">