From 4212d48fe2420927ce34da40c078d97100a6536b Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 6 Oct 2015 13:14:00 +0100
Subject: [PATCH] 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
---
 ghost/admin/app/assets/lib/uploader.js      |  1 +
 ghost/admin/app/components/gh-ed-preview.js | 58 ++++++++++++---------
 ghost/admin/app/templates/editor/edit.hbs   |  4 +-
 3 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/ghost/admin/app/assets/lib/uploader.js b/ghost/admin/app/assets/lib/uploader.js
index c17c9a47c9..e2f38a80df 100644
--- a/ghost/admin/app/assets/lib/uploader.js
+++ b/ghost/admin/app/assets/lib/uploader.js
@@ -259,6 +259,7 @@ export default function (options) {
             ui;
 
         ui = new UploadUi($dropzone, settings);
+        $(this).attr('data-uploaderui', true);
         this.uploaderUi = ui;
         ui.init();
     });
diff --git a/ghost/admin/app/components/gh-ed-preview.js b/ghost/admin/app/components/gh-ed-preview.js
index 2a252f5b0a..fcd6ad07fd 100644
--- a/ghost/admin/app/components/gh-ed-preview.js
+++ b/ghost/admin/app/components/gh-ed-preview.js
@@ -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());
+        }
+    }
 });
diff --git a/ghost/admin/app/templates/editor/edit.hbs b/ghost/admin/app/templates/editor/edit.hbs
index 8c9d927c13..8a20dc5560 100644
--- a/ghost/admin/app/templates/editor/edit.hbs
+++ b/ghost/admin/app/templates/editor/edit.hbs
@@ -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>