add clone button in block edior preview item

area17 · Oct 14, 2022 · 30ca715 · 30ca715
1 parent 75b732a
commit 30ca715
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 3 deletions.
diff --git a/frontend/js/components/blocks/BlockEditorModel.js b/frontend/js/components/blocks/BlockEditorModel.js
@@ -1,6 +1,8 @@
-import { BLOCKS } from '@/store/mutations'
 import { mapGetters, mapState } from 'vuex'
 
+import ACTIONS from '@/store/actions'
+import { BLOCKS } from '@/store/mutations'
+
 export default {
   props: {
     block: {
@@ -75,6 +77,14 @@ export default {
         index: this.blockIndex
       })
     },
+    cloneBlock () {
+      this.$store.dispatch(ACTIONS.DUPLICATE_BLOCK, {
+        editorName: this.editorName,
+        futureIndex: this.blockIndex + 1,
+        block: this.block,
+        id: Date.now() + Math.floor(Math.random() * 1000)
+      })
+    },
     setBlockID () {
       return Date.now() + Math.floor(Math.random() * 1000)
     }
@@ -89,7 +99,8 @@ export default {
       isActive: this.isActive,
       remove: this.remove,
       move: this.move,
-      duplicate: this.duplicate
+      duplicate: this.duplicate,
+      cloneBlock: this.cloneBlock
     })
   }
 }
diff --git a/frontend/js/components/editor/EditorPreview.vue b/frontend/js/components/editor/EditorPreview.vue
@@ -18,7 +18,7 @@
           <a17-blockeditor-model :block="savedBlock"
                            :key="savedBlock.id"
                            :editor-name="editorName"
-                           v-slot="{ block, isActive, blockIndex, move, remove, edit, unEdit }">
+                           v-slot="{ block, isActive, blockIndex, move, remove, edit, unEdit, cloneBlock }">
             <a17-editor-block-preview :ref="block.id"
                                       :block="block"
                                       :blockIndex="blockIndex"
@@ -28,6 +28,7 @@
                                       @block:select="_selectBlock(edit, blockIndex)"
                                       @block:unselect="_unselectBlock(unEdit, blockIndex)"
                                       @block:move="move"
+                                      @block:clone="_cloneBlock(cloneBlock, blockIndex)"
                                       @block:delete="_deleteBlock(remove)"
                                       @scroll-to="scrollToActive"/>
           </a17-blockeditor-model>
@@ -149,6 +150,11 @@
         this.unSubscribe()
         this.deleteBlock(fn)
       },
+      _cloneBlock (fn, index) {
+        // Clone block and refresh preview
+        this.cloneBlock(fn)
+        this.getPreview(index + 1)
+      },
       unSubscribe () {
         if (!this._unSubscribeInternal) return
 

diff --git a/frontend/js/components/editor/EditorPreviewBlockItem.vue b/frontend/js/components/editor/EditorPreviewBlockItem.vue
@@ -13,6 +13,11 @@
     </div>
     <div class="editorPreview__header">
       <a17-buttonbar variant="visible">
+        <button type="button"
+                @click="cloneBlock">
+              <span v-svg
+                    symbol="add"></span>
+        </button>
         <a17-dropdown v-if="blocksLength > 1"
                       class="f--small"
                       position="bottom-left"

diff --git a/frontend/js/mixins/blockEditor.js b/frontend/js/mixins/blockEditor.js
@@ -48,6 +48,10 @@ export default {
     moveBlock (index) {
       this.$emit('block:move', index)
     },
+    cloneBlock (fn) {
+      fn()
+      this.$emit('block:clone')
+    },
     deleteBlock (fn) {
       if (this.$root.$refs.warningContentEditor) {
         this.$root.$refs.warningContentEditor.open(() => {

diff --git a/frontend/js/mixins/blockEditorItem.js b/frontend/js/mixins/blockEditorItem.js
@@ -26,6 +26,9 @@ export default {
     moveBlock (index) {
       this.$emit('block:move', index)
     },
+    cloneBlock () {
+      this.$emit('block:clone')
+    },
     toggleBlockDropdown () {
       if (this.blocksLength > 1 && this.$refs.blockDropdown) {
         this.$refs.blockDropdown.toggle()