Add image resize feature

assets/css/src/newsletter_editor/contentBlocks/image.styl

@@ -3,12 +3,12 @@
   img
     vertical-align: bottom
     max-width: 100%
-    width: auto
     height: auto
 
   &.mailpoet_full_image
     padding-left: 0
     padding-right: 0
+    margin: auto
     margin-bottom: 0
 
   .mailpoet_content a:hover

assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js

@@ -14,8 +14,9 @@ define([
     defaults: {
       elementSelector: null,
       resizeHandleSelector: true, // true will use edges of the element itself
-      transformationFunction: function (y) { return y; },
+      transformationFunction: function(event) { return event.dy; },
       minLength: 0,
+      maxLength: Infinity,
       modelField: 'styles.block.height'
     },
     events: {
@@ -45,9 +46,10 @@ define([
         that.$el.addClass('mailpoet_resize_active');
       }).on('resizemove', function (event) {
         var currentLength = parseFloat(that.view.model.get(that.options.modelField)),
-          newLength = currentLength + that.options.transformationFunction(event.dy);
+          newLength = currentLength + that.options.transformationFunction(event);
 
         if (newLength < that.options.minLength) newLength = that.options.minLength;
+        if (newLength > that.options.maxLength) newLength = that.options.maxLength;
 
         that.view.model.set(that.options.modelField, newLength + 'px');
       })

assets/js/src/newsletter_editor/blocks/image.js

@@ -44,11 +44,30 @@ define([
       }, base.BlockView.prototype.templateContext.apply(this));
     },
     behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
-      ShowSettingsBehavior: {}
+      ResizableBehavior: {
+        elementSelector: '.mailpoet_image',
+        resizeHandleSelector: '.mailpoet_resize_handle',
+        minLength: 36,
+        maxLength: 660,
+        modelField: 'width',
+        transformationFunction: function(event) { return event.dx; }
+      },
+      ShowSettingsBehavior: {
+        ignoreFrom: '.mailpoet_resize_handle'
+      }
     }),
+    initialize: function() {
+      base.BlockView.prototype.initialize.apply(this, arguments);
+      this.listenTo(this.model, 'change:width', this.changeWidth);
+    },
+    changeWidth: function() {
+        this.$('.mailpoet_resize_handle_text').text(this.model.get('width'));      
+    },
     onRender: function() {
       this.toolsView = new Module.ImageBlockToolsView({ model: this.model });
       this.showChildView('toolsRegion', this.toolsView);
+      this.$('.mailpoet_resize_handle').css('padding-right', '20px');
+      this.$('.mailpoet_resize_handle').css('cursor', 'ew-resize');
 
       if (this.model.get('fullWidth')) {
         this.$el.addClass('mailpoet_full_image');
@@ -82,9 +101,16 @@ define([
         'change .mailpoet_field_image_full_width': _.partial(this.changeBoolCheckboxField, 'fullWidth'),
         'change .mailpoet_field_image_alignment': _.partial(this.changeField, 'styles.block.textAlign'),
         'click .mailpoet_field_image_select_another_image': 'showMediaManager',
-        'click .mailpoet_done_editing': 'close'
+        'click .mailpoet_done_editing': 'close',
+        'input .mailpoet_field_image_width': _.partial(this.updateValueAndCall, '.mailpoet_field_image_width_input', _.partial(this.changePixelField, 'width').bind(this)),
+        'change .mailpoet_field_image_width': _.partial(this.updateValueAndCall, '.mailpoet_field_image_width_input', _.partial(this.changePixelField, 'width').bind(this)),
+        'input .mailpoet_field_image_width_input': _.partial(this.updateValueAndCall, '.mailpoet_field_image_width', _.partial(this.changePixelField, 'width').bind(this))
       };
     },
+    updateValueAndCall: function(fieldToUpdate, callable, event) {
+      this.$(fieldToUpdate).val(jQuery(event.target).val());
+      callable(event);
+    },
     initialize: function(options) {
       base.BlockSettingsView.prototype.initialize.apply(this, arguments);
 

views/newsletter/templates/blocks/image/block.hbs

@@ -1,3 +1,15 @@
 <div class="mailpoet_tools"></div>
-<div class="mailpoet_content" style="text-align: {{ model.styles.block.textAlign }}"><a href="{{ model.link }}" onClick="return false;"><img src="{{#ifCond model.src '!=' ''}}{{ model.src }}{{ else }}{{ imageMissingSrc }}{{/ifCond}}" alt="{{ model.alt }}" onerror="if(this.src != '{{ imageMissingSrc }}') {this.src = '{{ imageMissingSrc }}'; this.style.width='auto';}"  /></a></div>
+<div class="mailpoet_content" style="text-align: {{ model.styles.block.textAlign }}">
+	<div class="mailpoet_image">
+		<a href="{{ model.link }}" onClick="return false;">
+			<img src="{{#ifCond model.src '!=' ''}}{{ model.src }}{{ else }}{{ imageMissingSrc }}{{/ifCond}}" alt="{{ model.alt }}" onerror="if(this.src != '{{ imageMissingSrc }}') {this.src = '{{ imageMissingSrc }}'; this.style.width='auto';}" width="{{model.width}}" />
+		</a>
+		<div class="mailpoet_resize_handle_container">
+		    <div class="mailpoet_resize_handle">
+		        <span class="mailpoet_resize_handle_text">{{ model.width }}</span>
+		        <span class="mailpoet_resize_handle_icon"><%= source('newsletter/templates/svg/block-icons/horizontal-spacer.svg') %></span>
+		    </div>
+		</div>
+	</div>
+</div>
 <div class="mailpoet_block_highlight"></div>

views/newsletter/templates/blocks/image/settings.hbs

@@ -23,6 +23,15 @@
         </div>
     </label>
 </div>
+<div class="mailpoet_form_field">
+    <label>
+        <div class="mailpoet_form_field_title"><%= __('Width') %></div>
+        <div class="mailpoet_form_field_input_option">
+            <input type="number" name="border-width-input" class="mailpoet_input mailpoet_input_small mailpoet_field_image_width_input" value="{{getNumber model.width}}" min="32" max="660" step="2" /> px
+            <input type="range" min="32" max="660" step="2" name="border-width" class="mailpoet_range mailpoet_range_small mailpoet_field_image_width" value="{{getNumber model.width}}" />
+        </div>
+    </label>
+</div>
 <div class="mailpoet_form_field">
     <div class="mailpoet_form_field_checkbox_option">
         <label>

views/newsletter/templates/svg/block-icons/horizontal-spacer.svg

@@ -0,0 +1,4 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 300 150" enable-background="new 0 0 300 150" xml:space="preserve">
+<path d="M20,75L120,0L120,150ZM180,150L180,0L280,75Z"/>
+</svg>