Merge pull request #993 from mailpoet/duplicate-content

Add an option to duplicate content blocks [MAILPOET-968]

assets/js/src/newsletter_editor/blocks/base.js

@@ -52,6 +52,7 @@ define([
     modelEvents: {
       'change': 'render',
       'delete': 'deleteBlock',
+      'duplicate': 'duplicateBlock',
     },
     events: {
       "mouseenter": "showTools",
@@ -142,6 +143,9 @@ define([
         this.model.destroy();
       }.bind(this));
     },
+    duplicateBlock: function() {
+      this.model.collection.add(this.model.toJSON(), {at: this.model.collection.findIndex(this.model)});
+    },
     transitionIn: function() {
       return this._transition('slideDown', 'fadeIn', 'easeOut');
     },
@@ -180,11 +184,13 @@ define([
       "click .mailpoet_delete_block_activate": "showDeletionConfirmation",
       "click .mailpoet_delete_block_cancel": "hideDeletionConfirmation",
       "click .mailpoet_delete_block_confirm": "deleteBlock",
+      "click .mailpoet_duplicate_block": "duplicateBlock",
     },
     // Markers of whether these particular tools will be used for this instance
     tools: {
       settings: true,
       delete: true,
+      duplicate: true,
       move: true,
     },
     getSettingsView: function() { return Module.BlockSettingsView; },
@@ -221,6 +227,11 @@ define([
       this.model.trigger('delete');
       return false;
     },
+    duplicateBlock: function(event) {
+      event.preventDefault();
+      this.model.trigger('duplicate');
+      return false;
+    },
   });
 
   Module.BlockSettingsView = Marionette.View.extend({

assets/js/src/newsletter_editor/blocks/container.js

@@ -161,6 +161,7 @@ define([
         tools: {
           settings: this.renderOptions.depth === 1,
           delete: this.renderOptions.depth === 1,
+          duplicate: true,
           move: this.renderOptions.depth === 1,
           layerSelector: false,
         },

tests/javascript/newsletter_editor/blocks/container.spec.js

@@ -135,6 +135,10 @@ define([
           it('does not have a settings tool', function () {
             expect(view.$('.mailpoet_edit_block')).to.have.length(0);
           });
+
+          it('has a duplication tool', function () {
+            expect(view.$('.mailpoet_duplicate_block')).to.have.length(1);
+          });
         });
 
         describe.skip('on non-root levels', function () {
@@ -164,6 +168,10 @@ define([
           it('has a settings tool', function () {
             expect(view.$('.mailpoet_edit_block')).to.have.length(1);
           });
+
+          it('has a duplication tool', function () {
+            expect(view.$('.mailpoet_duplicate_block')).to.have.length(1);
+          });
         });
 
       });

views/newsletter/templates/blocks/base/toolsGeneric.hbs

@@ -3,7 +3,8 @@
     <%= source('newsletter/templates/svg/block-tools/settings-column.svg') %>
 </a>{{/if}}{{#if tools.settings}}<a href="javascript:;" class="mailpoet_tool mailpoet_edit_block mailpoet_ignore_drag" title="<%= __('Edit settings') %>">
 <%= source('newsletter/templates/svg/block-tools/settings.svg') %>
-</a>{{/if}}{{#if tools.delete}}<div class="mailpoet_delete_block mailpoet_ignore_drag"><a href="javascript:;" class="mailpoet_tool mailpoet_delete_block_activate" title="<%= __('Delete') %>"><%= source('newsletter/templates/svg/block-tools/trash.svg') %></a><a href="javascript:;" class="mailpoet_delete_block_confirm" title="<%= __('Confirm deletion') %>"><%= __('Delete') %></a><a href="javascript:;" class="mailpoet_delete_block_cancel" title="<%= __('Cancel deletion') %>"><%= __('Cancel') %></a></div>{{/if}}{{#if tools.move}}<a href="javascript:;" class="mailpoet_tool mailpoet_move_block" title="<%= __('Drag to move') %>">
+</a>{{/if}}{{#if tools.delete}}<div class="mailpoet_delete_block mailpoet_ignore_drag"><a href="javascript:;" class="mailpoet_tool mailpoet_delete_block_activate" title="<%= __('Delete') %>"><%= source('newsletter/templates/svg/block-tools/trash.svg') %></a><a href="javascript:;" class="mailpoet_delete_block_confirm" title="<%= __('Confirm deletion') %>"><%= __('Delete') %></a><a href="javascript:;" class="mailpoet_delete_block_cancel" title="<%= __('Cancel deletion') %>"><%= __('Cancel') %></a></div>{{/if}}{{#if tools.duplicate}}<a href="javascript:;" class="mailpoet_tool mailpoet_duplicate_block" title="<%= __('Duplicate') %>">
+<%= source('newsletter/templates/svg/block-tools/duplicate.svg') %></a>{{/if}}{{#if tools.move}}<a href="javascript:;" class="mailpoet_tool mailpoet_move_block" title="<%= __('Drag to move') %>">
   <%= source('newsletter/templates/svg/block-tools/move.svg') %>
 </a>{{/if}}
 </div>

views/newsletter/templates/svg/block-tools/duplicate.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg class="mailpoet_tool_icon"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px"
+	 height="611.632px" viewBox="0 93.684 612 611.632" enable-background="new 0 93.684 612 611.632" xml:space="preserve">
+<g id="Layer_1">
+	<g id="Layer_1_copy">
+		<circle fill="#FFFFFF" cx="306" cy="403.5" r="269.5"/>
+		<polygon id="_x3C_Slice_x3E__1_" fill="none" points="0,69.6 612,69.6 614,724.4 2,724.4 		"/>
+		<g id="Layer_3">
+		</g>
+	</g>
+	<g id="Layer_2">
+		<path d="M171.5,536.834"/>
+	</g>
+</g>
+<g id="Layer_3_1_">
+	<g>
+		<path d="M360.207,425.951V303.128c0-3.426-2.789-6.212-6.215-6.212H156.618c-3.426,0-6.212,2.786-6.212,6.212v122.823
+			c0,3.425,2.787,6.212,6.212,6.212h197.374C357.418,432.163,360.207,429.376,360.207,425.951z"/>
+		<path d="M305.816,93.684C136.918,93.684,0,230.602,0,399.5c0,168.896,136.918,305.816,305.816,305.816
+			c168.896,0,305.815-136.919,305.815-305.816C611.633,230.602,474.714,93.684,305.816,93.684z M104.845,425.951V303.128
+			c0-28.547,23.226-51.772,51.773-51.772h197.374c28.548,0,51.772,23.225,51.772,51.772v122.823
+			c0,28.548-23.225,51.772-51.772,51.772H156.618C128.071,477.724,104.845,454.499,104.845,425.951z M499.041,514.872
+			c0,28.548-23.225,51.772-51.772,51.772H231.894c-28.547,0-51.772-23.225-51.772-51.772h45.56c0,3.428,2.787,6.213,6.212,6.213
+			h215.375c3.426,0,6.212-2.785,6.212-6.213v-140.82c0-3.427-2.786-6.212-6.212-6.212v-45.562c28.548,0,51.772,23.226,51.772,51.773
+			V514.872z"/>
+	</g>
+</g>
+</svg>