From 2052ceca9567f29ae4ec460cbff2df787e782eea Mon Sep 17 00:00:00 2001
From: Sam <sam.saffron@gmail.com>
Date: Mon, 10 Aug 2015 13:19:01 +1000
Subject: [PATCH] FIX: stop screen from jittering when mobile has images

This fix makes sure we apply reasonable settings to all images while
they are loading, it stops mobile from dancing around on topics that
have images

We no longer use height: auto on mobile!
---
 .../ensure-max-image-dimensions.js.es6        | 22 +++++++++++++++
 .../discourse/views/composer.js.es6           | 16 -----------
 .../javascripts/discourse/views/post.js.es6   | 27 +++++++++++++++++++
 3 files changed, 49 insertions(+), 16 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/initializers/ensure-max-image-dimensions.js.es6

diff --git a/app/assets/javascripts/discourse/initializers/ensure-max-image-dimensions.js.es6 b/app/assets/javascripts/discourse/initializers/ensure-max-image-dimensions.js.es6
new file mode 100644
index 0000000000..d4ed00aed2
--- /dev/null
+++ b/app/assets/javascripts/discourse/initializers/ensure-max-image-dimensions.js.es6
@@ -0,0 +1,22 @@
+export default {
+  name: 'ensure-image-dimensions',
+  initialize: function() {
+    if (!window) { return; }
+
+    // This enforces maximum dimensions of images based on site settings
+    // for mobile we use the window width as a safeguard
+    // This rule should never really be at play unless for some reason images do not have dimensions
+
+    var width = Discourse.SiteSettings.max_image_width;
+    var height = Discourse.SiteSettings.max_image_height;
+
+    if (Discourse.Mobile.mobileView) {
+      width = $(window).width() - 20;
+    }
+
+    const style = 'max-width:' + width + 'px;' +
+                  'max-height:' + height + 'px;';
+
+    $('<style id="image-sizing-hack">#reply-control .wmd-preview img:not(.thumbnail), .cooked img:not(.thumbnail) {' + style + '}</style>').appendTo('head');
+  }
+};
diff --git a/app/assets/javascripts/discourse/views/composer.js.es6 b/app/assets/javascripts/discourse/views/composer.js.es6
index 6c3047ba8f..865daa886e 100644
--- a/app/assets/javascripts/discourse/views/composer.js.es6
+++ b/app/assets/javascripts/discourse/views/composer.js.es6
@@ -130,7 +130,6 @@ const ComposerView = Discourse.View.extend(Ember.Evented, {
       onDrag(sizePx) { self.movePanels.apply(self, [sizePx]); }
     });
     afterTransition($replyControl, resizer);
-    this.ensureMaximumDimensionForImagesInPreview();
     this.set('controller.view', this);
 
     positioningWorkaround(this.$());
@@ -140,21 +139,6 @@ const ComposerView = Discourse.View.extend(Ember.Evented, {
     this.set('controller.view', null);
   }.on('willDestroyElement'),
 
-  ensureMaximumDimensionForImagesInPreview() {
-    // This enforce maximum dimensions of images in the preview according
-    // to the current site settings.
-    // For interactivity, we immediately insert the locally cooked version
-    // of the post into the stream when the user hits reply. We therefore also
-    // need to enforce these rules on the .cooked version.
-    // Meanwhile, the server is busy post-processing the post and generating thumbnails.
-    const style = Discourse.Mobile.mobileView ?
-                'max-width: 100%; height: auto;' :
-                'max-width:' + Discourse.SiteSettings.max_image_width + 'px;' +
-                'max-height:' + Discourse.SiteSettings.max_image_height + 'px;';
-
-    $('<style>#reply-control .wmd-preview img:not(.thumbnail), .cooked img:not(.thumbnail) {' + style + '}</style>').appendTo('head');
-  },
-
   click() {
     this.get('controller').send('openIfDraft');
   },
diff --git a/app/assets/javascripts/discourse/views/post.js.es6 b/app/assets/javascripts/discourse/views/post.js.es6
index 12891e215c..38fb86f0f4 100644
--- a/app/assets/javascripts/discourse/views/post.js.es6
+++ b/app/assets/javascripts/discourse/views/post.js.es6
@@ -282,6 +282,33 @@ const PostView = Discourse.GroupedView.extend(Ember.Evented, {
     this._applySearchHighlight();
   }.on('didInsertElement'),
 
+  _fixImageSizes: function(){
+    var maxWidth;
+    this.$('img:not(.avatar)').each(function(idx,img){
+
+      // deferring work only for posts with images
+      // we got to use screen here, cause nothing is rendered yet.
+      // long term we may want to allow for weird margins that are enforced, instead of hardcoding at 70/20
+      maxWidth = maxWidth || $(window).width() - (Discourse.Mobile.mobileView ? 20 : 70);
+      if (Discourse.SiteSettings.max_image_width < maxWidth) {
+        maxWidth = Discourse.SiteSettings.max_image_width;
+      }
+
+      var aspect = img.height / img.width;
+      if (img.width > maxWidth) {
+        img.width = maxWidth;
+        img.height = parseInt(maxWidth * aspect,10);
+      }
+
+      // very unlikely but lets fix this too
+      if (img.height > Discourse.SiteSettings.max_image_height) {
+        img.height = Discourse.SiteSettings.max_image_height;
+        img.width = parseInt(maxWidth / aspect,10);
+      }
+
+    });
+  }.on('willInsertElement'),
+
   _applySearchHighlight: function() {
     const highlight = this.get('controller.searchHighlight');
     const cooked = this.$('.cooked');