Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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!
This commit is contained in:
Sam 2015-08-10 13:19:01 +10:00
parent 3eeb765f00
commit 2052ceca95
3 changed files with 49 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/assets/javascripts/discourse/initializers/ensure-max-image-dimensions.js.es6 Normal file
View File

@ -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');
}
};

16
app/assets/javascripts/discourse/views/composer.js.es6
View File

@ -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');
},

27
app/assets/javascripts/discourse/views/post.js.es6
View File

@ -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');