From 2dea7faea0ecd5c39b46262da922a1445fe89628 Mon Sep 17 00:00:00 2001
From: Zoee Silcock <mrzoee@gmail.com>
Date: Thu, 29 Dec 2016 09:47:23 +0100
Subject: [PATCH] Workaround for incorrect frame selection after re-ordering on
 Firefox

This commit is related to the following issue: #363

When a frame is dropped both `mouseup` and `click` events are triggered on Firefox. This is somwhat expected behaviour but other browsers do not trigger the `click` event.

One would expect jquery-ui to work the same across all browsers but when they got a bug report they decided to not change anything:
https://bugzilla.mozilla.org/show_bug.cgi?id=787944

The most comon workaround appears to be to use the `clone` helper in jquery-ui sortable. Unfortunately this doesn't work because the cloned frame doesn't keep the contents of the canvas. This seemed like the cleanest workaround, here are a few others:
http://stackoverflow.com/questions/947195/jquery-ui-sortable-how-can-i-cancel-the-click-event-on-an-item-thats-dragged
---
 src/js/controller/FramesListController.js | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/js/controller/FramesListController.js b/src/js/controller/FramesListController.js
index 0c690db..b76c97f 100644
--- a/src/js/controller/FramesListController.js
+++ b/src/js/controller/FramesListController.js
@@ -15,6 +15,7 @@
 
     this.redrawFlag = true;
     this.regenerateDomFlag = true;
+    this.justDropped = false;
 
     this.cachedFrameProcessor = new pskl.model.frame.CachedFrameProcessor();
     this.cachedFrameProcessor.setFrameProcessor(this.frameToPreviewCanvas_.bind(this));
@@ -104,7 +105,7 @@
       this.container.get(0).removeChild(this.tiles[index]);
       this.tiles.splice(index, 1);
       this.updateScrollerOverflows();
-    } else if (action === ACTION.SELECT) {
+    } else if (action === ACTION.SELECT && !this.justDropped) {
       this.piskelController.setCurrentFrameIndex(index);
     } else if (action === ACTION.NEW_FRAME) {
       this.piskelController.addFrame();
@@ -189,6 +190,7 @@
     $('#preview-list').sortable({
       placeholder: 'preview-tile preview-tile-drop-proxy',
       update: $.proxy(this.onUpdate_, this),
+      stop: $.proxy(this.onSortableStop_, this),
       items: '.preview-tile',
       axis: 'y',
       tolerance: 'pointer'
@@ -211,6 +213,17 @@
     this.flagForRedraw_();
   };
 
+  /**
+   * @private
+   */
+  ns.FramesListController.prototype.onSortableStop_ = function (event, ui) {
+    this.justDropped = true;
+
+    this.resizeTimer = window.setTimeout($.proxy(function() {
+      this.justDropped = false;
+    }, this), 200);
+  };
+
   /**
    * @private
    * TODO(vincz): clean this giant rendering function & remove listeners.