From 20c936d13b976f09a21dd33ccb53d7c858754a0f Mon Sep 17 00:00:00 2001
From: Amine Ben hammou <amine@mailpoet.com>
Date: Thu, 14 Sep 2017 14:58:46 +0000
Subject: [PATCH] limitting width with CSS

---
 .../contentBlocks/image.styl                  |  2 ++
 .../js/src/newsletter_editor/blocks/image.js  | 25 +++----------------
 .../templates/blocks/image/settings.hbs       |  8 +++---
 3 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/assets/css/src/newsletter_editor/contentBlocks/image.styl b/assets/css/src/newsletter_editor/contentBlocks/image.styl
index 4e04938379..a2eb91effd 100644
--- a/assets/css/src/newsletter_editor/contentBlocks/image.styl
+++ b/assets/css/src/newsletter_editor/contentBlocks/image.styl
@@ -13,6 +13,8 @@
 
   .mailpoet_content 
     margin: auto
+    max-width: 100%
+    min-width: 36px
     
     a:hover
       cursor: all-scroll
diff --git a/assets/js/src/newsletter_editor/blocks/image.js b/assets/js/src/newsletter_editor/blocks/image.js
index 5183974e63..fc6cbcd5fd 100644
--- a/assets/js/src/newsletter_editor/blocks/image.js
+++ b/assets/js/src/newsletter_editor/blocks/image.js
@@ -25,8 +25,6 @@ define([
         fullWidth: true, // true | false
         width: '64px',
         height: '64px',
-        maxWidth: false,
-        minWidth: '36px',
         styles: {
           block: {
             textAlign: 'center'
@@ -51,40 +49,23 @@ define([
         resizeHandleSelector: '.mailpoet_image_resize_handle',
         onResize: function(event) {
           var corner = this.$('.mailpoet_image').offset(),
-            width    = event.pageX - corner.left,
-            minWidth = parseInt(this.view.model.get('minWidth')),
-            maxWidth = parseInt(this.view.model.get('maxWidth'));
-
-          width = Math.min(maxWidth, Math.max(minWidth, width));
-          var height = (this.view.model.get('height') / this.view.model.get('width')) * width;
-          this.view.model.set({ width: width, height: height });
+            width    = event.pageX - corner.left;
+          this.view.model.set('width', width + 'px');
         }
       },
       ShowSettingsBehavior: {
         ignoreFrom: '.mailpoet_image_resize_handle'
       }
     }),
-    onDomRefresh: function() {
-      var maxWidth = Math.min(660, this.$el.width());
-      this.model.set('maxWidth', maxWidth + 'px');      
-    },
     onRender: function() {
       this.toolsView = new Module.ImageBlockToolsView({ model: this.model });
       this.showChildView('toolsRegion', this.toolsView);
-
-      var maxWidth = parseInt(this.model.get('maxWidth')),
-        minWidth   = parseInt(this.model.get('minWidth')),
-        width      = parseInt(this.model.get('width'));
-
-      width = Math.min(maxWidth, Math.max(minWidth, width));
-      this.model.set('width', width + 'px');
-      this.$('.mailpoet_content').css('width', width + 'px');
-
       if (this.model.get('fullWidth')) {
         this.$el.addClass('mailpoet_full_image');
       } else {
         this.$el.removeClass('mailpoet_full_image');
       }
+      this.$('.mailpoet_content').css('width', this.model.get('width'));
     }
   });
 
diff --git a/views/newsletter/templates/blocks/image/settings.hbs b/views/newsletter/templates/blocks/image/settings.hbs
index e7915e7d3f..c7bf39d1c4 100644
--- a/views/newsletter/templates/blocks/image/settings.hbs
+++ b/views/newsletter/templates/blocks/image/settings.hbs
@@ -32,8 +32,8 @@
                 name="image-width-input" 
                 type="number" 
                 value="{{getNumber model.width}}" 
-                min="{{getNumber model.minWidth}}"
-                max="{{getNumber model.maxWidth}}"
+                min="36"
+                max="660"
                 step="2" 
             /> px
             <input 
@@ -41,8 +41,8 @@
                 name="image-width" 
                 type="range" 
                 value="{{getNumber model.width}}" 
-                min="{{getNumber model.minWidth}}"
-                max="{{getNumber model.maxWidth}}"
+                min="36"
+                max="660"
                 step="2" 
             />
         </div>