TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-04 17:04:59 +03:00
Code Issues Projects Releases Wiki Activity

Fix preview scroll jump when adding/removing images

Browse Source 
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
This commit is contained in:
Kevin Ansfield 2015-10-06 13:14:00 +01:00
parent 1bfd5768bc
commit 746fd237fe
4 changed files with 37 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
core/client/app/assets/lib/uploader.js
View File

@ -259,6 +259,7 @@ export default function (options) {
ui;
ui = new UploadUi($dropzone, settings);
$(this).attr('data-uploaderui', true);
this.uploaderUi = ui;
ui.init();
});

58
core/client/app/components/gh-ed-preview.js
View File

@ -6,38 +6,46 @@ export default Ember.Component.extend({
didInsertElement: function () {
this.set('scrollWrapper', this.$().closest('.entry-preview-content'));
this.adjustScrollPosition(this.get('scrollPosition'));
Ember.run.scheduleOnce('afterRender', this, this.dropzoneHandler);
},
adjustScrollPosition: Ember.observer('scrollPosition', function () {
var scrollWrapper = this.get('scrollWrapper'),
scrollPosition = this.get('scrollPosition');
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');
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());
},
// fire off 'enable' API function from uploadManager
// might need to make sure markdown has been processed first
reInitDropzones: Ember.observer('markdown', function () {
Ember.run.scheduleOnce('afterRender', this, this.dropzoneHandler);
})
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());
}
}
});

4
core/client/app/templates/editor/edit.hbs
View File

@ -47,8 +47,8 @@
</header>
<section class="entry-preview-content js-entry-preview-content">
{{gh-ed-preview classNames="rendered-markdown js-rendered-markdown"
markdown=model.scratch scrollPosition=ghEditor.scrollPosition updateHeight="updateHeight"
uploadStarted="disableEditor" uploadFinished="enableEditor" uploadSuccess="handleImgUpload"}}
markdown=model.scratch scrollPosition=ghEditor.scrollPosition updateHeight="updateHeight"
uploadStarted="disableEditor" uploadFinished="enableEditor" uploadSuccess="handleImgUpload"}}
</section>
</section>
</section>

2
core/test/functional/client/editor_test.js
View File

@ -138,7 +138,7 @@ CasperTest.begin('Image Uploads', 23, function suite(test) {
return document.querySelector('.entry-markdown-content textarea').value;
}, '![some text]()\n', 'Editor value is correct');
test.assertHTMLEquals('<section class=\"js-drop-zone image-uploader\"><span class=\"media\"><span class=\"hidden\">Image Upload</span></span><img class=\"js-upload-target\" style=\"display: none; \" src=\"\"><div class=\"description\">Add image of <strong>some text</strong></div><input class=\"js-fileupload main fileupload\" type=\"file\" name=\"uploadimage\"><div class=\"js-fail failed\" style=\"display: none\">Something went wrong :(</div><button class=\"js-fail btn btn-green\" style=\"display: none\">Try Again</button><a class=\"image-url\" title=\"Add image from URL\"><i class=\"icon-link\"><span class=\"hidden\">URL</span></i></a></section>\n', 'HTML is correct');
test.assertHTMLEquals('<section class=\"js-drop-zone image-uploader\" data-uploaderui=\"true\"><span class=\"media\"><span class=\"hidden\">Image Upload</span></span><img class=\"js-upload-target\" style=\"display: none; \" src=\"\"><div class=\"description\">Add image of <strong>some text</strong></div><input class=\"js-fileupload main fileupload\" type=\"file\" name=\"uploadimage\"><div class=\"js-fail failed\" style=\"display: none\">Something went wrong :(</div><button class=\"js-fail btn btn-green\" style=\"display: none\">Try Again</button><a class=\"image-url\" title=\"Add image from URL\"><i class=\"icon-link\"><span class=\"hidden\">URL</span></i></a></section>\n', 'HTML is correct');
test.assertSelectorHasText(
'.entry-preview .rendered-markdown', 'Add image of some text', 'Alt value is correct'