Resizing the image fixed

assets/css/src/newsletter_editor/components/resize.styl

@@ -48,3 +48,41 @@ $resize-handle-z-index = 2
 
   .mailpoet_resize_handle
     display: inline-block
+
+
+.mailpoet_image_resize_handle_container
+  position: absolute
+  bottom: 0
+  right: 0
+  width: 20px
+  height: 20px
+
+.mailpoet_image_resize_handle
+  position: relative
+  background: $resize-handle-background-color
+  border-radius(3px)
+  display: inline-block
+  width: 20px
+  height: 20px
+  cursor: nwse-resize
+  z-index: $resize-handle-z-index
+
+  .mailpoet_image_resize_handle_text,
+  .mailpoet_image_resize_handle_icon
+    pointer-events: none
+
+.mailpoet_image_resize_handle_icon
+  position: absolute
+  top: 0
+  right: 0
+
+  & > svg
+    width: 100%
+    height: 100%
+    fill: $resize-handle-font-color
+
+.mailpoet_block.mailpoet_image_resize_active > .mailpoet_block_highlight
+  border: 1px dashed $resize-active-color
+
+  .mailpoet_image_resize_handle
+    display: inline-block

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

@@ -11,6 +11,9 @@
     margin: auto
     margin-bottom: 0
 
-  .mailpoet_content a:hover
+  .mailpoet_content 
+    margin: auto
+    
+    a:hover
       cursor: all-scroll
 

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

@@ -17,7 +17,8 @@ define([
       transformationFunction: function(event) { return event.dy; },
       minLength: 0,
       maxLength: Infinity,
-      modelField: 'styles.block.height'
+      modelField: 'styles.block.height',
+      onResize: null
     },
     events: {
       mouseenter: 'showResizeHandle',
@@ -45,6 +46,9 @@ define([
         that.isBeingResized = true;
         that.$el.addClass('mailpoet_resize_active');
       }).on('resizemove', function(event) {
+        if (that.options.onResize) {
+          return that.options.onResize(event, that)
+        }
         var currentLength = parseFloat(that.view.model.get(that.options.modelField)),
           newLength = currentLength + that.options.transformationFunction(event);
 

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

@@ -46,28 +46,31 @@ define([
     behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
       ResizableBehavior: {
         elementSelector: '.mailpoet_image',
-        resizeHandleSelector: '.mailpoet_resize_handle',
+        resizeHandleSelector: '.mailpoet_image_resize_handle',
-        minLength: 36,
+        onResize: function(event, that) {
-        maxLength: 660,
+          var corner = that.$('.mailpoet_image').offset(),
-        modelField: 'width',
+              width  = event.pageX - corner.left
-        transformationFunction: function(event) { return event.dx; }
+          if(width < 36) {
+            width = 36;
+          }
+          if(width > 660) {
+            width = 660;
+          }
+          var height = (that.view.model.get('height') / that.view.model.get('width')) * width;
+          that.view.model.set({ width: width, height: height });
+          that.$('.mailpoet_content').css('width', width + 'px');
+        }
       },
       ShowSettingsBehavior: {
-        ignoreFrom: '.mailpoet_resize_handle'
+        ignoreFrom: '.mailpoet_image_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');

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

@@ -1,13 +1,12 @@
 <div class="mailpoet_tools"></div>
-<div class="mailpoet_content" style="text-align: {{ model.styles.block.textAlign }}">
+<div class="mailpoet_content" style="text-align: {{ model.styles.block.textAlign }}; width: {{model.width}}">
 	<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_image_resize_handle_container">
-		    <div class="mailpoet_resize_handle">
+		    <div class="mailpoet_image_resize_handle">
-		        <span class="mailpoet_resize_handle_text">{{ model.width }}</span>
+		        <span class="mailpoet_image_resize_handle_icon"><%= source('newsletter/templates/svg/block-tools/resize.svg') %></span>
-		        <span class="mailpoet_resize_handle_icon"><%= source('newsletter/templates/svg/block-icons/horizontal-spacer.svg') %></span>
 		    </div>
 		</div>
 	</div>

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

@@ -1,4 +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">
+	 viewBox="0 0 150 150" enable-background="new 0 0 150 150" xml:space="preserve">
-<path d="M20,75L120,0L120,150ZM180,150L180,0L280,75Z"/>
+<path d="M30,30L100,30L30,100ZM120,120L120,50L50,120Z"/>
 </svg>