Ghost/core/client/app/components/gh-ed-preview.js
Kevin Ansfield 746fd237fe Fix preview scroll jump when adding/removing images
closes #5917
- fixes duplication of dropzone event handlers by filtering for an added data-attribute
- avoid running dropzone code if only scrollPosition attr changes
- fix scroll position jump when adding/removing images by only adjusting preview scroll position when editor scroll position changes
2015-10-06 14:47:06 +01:00

52 lines
1.9 KiB
JavaScript

import Ember from 'ember';
import uploader from 'ghost/assets/lib/uploader';
export default Ember.Component.extend({
config: Ember.inject.service(),
didInsertElement: function () {
this.set('scrollWrapper', this.$().closest('.entry-preview-content'));
this.adjustScrollPosition(this.get('scrollPosition'));
Ember.run.scheduleOnce('afterRender', this, this.dropzoneHandler);
},
didReceiveAttrs: function (attrs) {
if (!attrs.oldAttrs) { return; }
if (attrs.newAttrs.scrollPosition && attrs.newAttrs.scrollPosition.value !== attrs.oldAttrs.scrollPosition.value) {
this.adjustScrollPosition(attrs.newAttrs.scrollPosition.value);
}
if (attrs.newAttrs.markdown.value !== attrs.oldAttrs.markdown.value) {
Ember.run.scheduleOnce('afterRender', this, this.dropzoneHandler);
}
},
adjustScrollPosition: function (scrollPosition) {
var scrollWrapper = this.get('scrollWrapper');
if (scrollWrapper) {
scrollWrapper.scrollTop(scrollPosition);
}
},
dropzoneHandler: function () {
var dropzones = $('.js-drop-zone[data-uploaderui!="true"]');
if (dropzones.length) {
uploader.call(dropzones, {
editor: true,
fileStorage: this.get('config.fileStorage')
});
dropzones.on('uploadstart', Ember.run.bind(this, 'sendAction', 'uploadStarted'));
dropzones.on('uploadfailure', Ember.run.bind(this, 'sendAction', 'uploadFinished'));
dropzones.on('uploadsuccess', Ember.run.bind(this, 'sendAction', 'uploadFinished'));
dropzones.on('uploadsuccess', Ember.run.bind(this, 'sendAction', 'uploadSuccess'));
// Set the current height so we can listen
this.sendAction('updateHeight', this.$().height());
}
}
});