Fix iOS dnd bug, autoscroll bug and layout bug.

README.md

@@ -48,13 +48,13 @@ npm install muuri
 
 Or download:
 
-- [muuri.js](https://cdn.jsdelivr.net/npm/[email protected].0/dist/muuri.js) - for development (not minified, with comments).
-- [muuri.min.js](https://cdn.jsdelivr.net/npm/[email protected].0/dist/muuri.min.js) - for production (minified, no comments).
+- [muuri.js](https://cdn.jsdelivr.net/npm/[email protected].2/dist/muuri.js) - for development (not minified, with comments).
+- [muuri.min.js](https://cdn.jsdelivr.net/npm/[email protected].2/dist/muuri.min.js) - for production (minified, no comments).
 
 Or link directly:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].0/dist/muuri.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/muuri.min.js"></script>
 ```
 
 <h3><a id="getting-started-2" href="#getting-started-2" aria-hidden="true">#</a> 2. Get Web Animations Polyfill (if needed)</h3>

dist/muuri.js

@@ -1,5 +1,5 @@
 /**
-* Muuri v0.9.1
+* Muuri v0.9.2
 * https://muuri.dev/
 * Copyright (c) 2015-present, Haltu Oy
 * Released under the MIT license
@@ -22,7 +22,7 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
-  (global = global || self, global.Muuri = factory());
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Muuri = factory());
 }(this, (function () { 'use strict';
 
   var GRID_INSTANCES = {};
@@ -2268,6 +2268,10 @@
 
   AutoScroller.prototype.updateItem = function (item) {
     if (this._isDestroyed) return;
+
+    // Make sure the item still exists in the auto-scroller.
+    if (!this._dragDirections[item._id]) return;
+
     this._updateDragDirection(item);
     if (!this._requestOverlapCheck[item._id]) {
       this._requestOverlapCheck[item._id] = this._tickTime;
@@ -2734,6 +2738,7 @@
     }
   }
 
+  var IS_IOS = /iPad|iPhone|iPod/.test(window.navigator.platform);
   var START_PREDICATE_INACTIVE = 0;
   var START_PREDICATE_PENDING = 1;
   var START_PREDICATE_RESOLVED = 2;
@@ -2845,6 +2850,7 @@
     // cancelled anyways right after it has started (e.g. starting drag while
     // the page is scrolling).
     if (
+      !IS_IOS &&
       event.isFirst &&
       event.srcEvent.isTrusted === true &&
       event.srcEvent.defaultPrevented === false &&
@@ -3131,6 +3137,9 @@
       return;
     }
 
+    // Stop auto-scroll.
+    ItemDrag.autoScroller.removeItem(this._item);
+
     // Cancel queued ticks.
     var itemId = this._item._id;
     cancelDragStartTick(itemId);
@@ -3178,7 +3187,7 @@
    */
   ItemDrag.prototype.sort = function (force) {
     var item = this._item;
-    if (item._isActive && this._dragMoveEvent) {
+    if (this._isActive && item._isActive && this._dragMoveEvent) {
       if (force === true) {
         this._handleSort();
       } else {
@@ -3456,6 +3465,8 @@
    * @private
    */
   ItemDrag.prototype._handleSort = function () {
+    if (!this._isActive) return;
+
     var settings = this._getGrid()._settings;
 
     // No sorting when drag sort is disabled. Also, account for the scenario where
@@ -3852,6 +3863,8 @@
    *  ItemDrag.prototype
    */
   ItemDrag.prototype._prepareStart = function () {
+    if (!this._isActive) return;
+
     var item = this._item;
     if (!item._isActive) return;
 
@@ -3891,6 +3904,8 @@
    * @private
    */
   ItemDrag.prototype._applyStart = function () {
+    if (!this._isActive) return;
+
     var item = this._item;
     if (!item._isActive) return;
 
@@ -3972,8 +3987,9 @@
    * @private
    */
   ItemDrag.prototype._prepareMove = function () {
-    var item = this._item;
+    if (!this._isActive) return;
 
+    var item = this._item;
     if (!item._isActive) return;
 
     var settings = this._getGrid()._settings;
@@ -4008,6 +4024,8 @@
    * @private
    */
   ItemDrag.prototype._applyMove = function () {
+    if (!this._isActive) return;
+
     var item = this._item;
     if (!item._isActive) return;
 
@@ -4042,9 +4060,10 @@
    * @private
    */
   ItemDrag.prototype._prepareScroll = function () {
-    var item = this._item;
+    if (!this._isActive) return;
 
     // If item is not active do nothing.
+    var item = this._item;
     if (!item._isActive) return;
 
     var element = item._element;
@@ -4087,6 +4106,8 @@
    * @private
    */
   ItemDrag.prototype._applyScroll = function () {
+    if (!this._isActive) return;
+
     var item = this._item;
     if (!item._isActive) return;
 
@@ -5138,6 +5159,13 @@
       return;
     }
 
+    // Let's make sure an ongoing animation's callback is cancelled before going
+    // further. Without this there's a chance that the animation will finish
+    // before the next tick and mess up our logic.
+    if (this._animation.isAnimating()) {
+      this._animation._animation.onfinish = null;
+    }
+
     // Kick off animation to be started in the next tick.
     this._isActive = true;
     this._animOptions.easing = animEasing;
@@ -5846,6 +5874,13 @@
       return;
     }
 
+    // Let's make sure an ongoing animation's callback is cancelled before going
+    // further. Without this there's a chance that the animation will finish
+    // before the next tick and mess up our logic.
+    if (animation.isAnimating()) {
+      animation._animation.onfinish = null;
+    }
+
     // Start the animation in the next tick (to avoid layout thrashing).
     addVisibilityTick(
       item._id,

dist/muuri.module.js

@@ -1,5 +1,5 @@
 /**
-* Muuri v0.9.1
+* Muuri v0.9.2
 * https://muuri.dev/
 * Copyright (c) 2015-present, Haltu Oy
 * Released under the MIT license
@@ -2262,6 +2262,10 @@ AutoScroller.prototype.addItem = function (item) {
 
 AutoScroller.prototype.updateItem = function (item) {
   if (this._isDestroyed) return;
+
+  // Make sure the item still exists in the auto-scroller.
+  if (!this._dragDirections[item._id]) return;
+
   this._updateDragDirection(item);
   if (!this._requestOverlapCheck[item._id]) {
     this._requestOverlapCheck[item._id] = this._tickTime;
@@ -2728,6 +2732,7 @@ function removeClass(element, className) {
   }
 }
 
+var IS_IOS = /iPad|iPhone|iPod/.test(window.navigator.platform);
 var START_PREDICATE_INACTIVE = 0;
 var START_PREDICATE_PENDING = 1;
 var START_PREDICATE_RESOLVED = 2;
@@ -2839,6 +2844,7 @@ ItemDrag.defaultStartPredicate = function (item, event, options) {
   // cancelled anyways right after it has started (e.g. starting drag while
   // the page is scrolling).
   if (
+    !IS_IOS &&
     event.isFirst &&
     event.srcEvent.isTrusted === true &&
     event.srcEvent.defaultPrevented === false &&
@@ -3125,6 +3131,9 @@ ItemDrag.prototype.stop = function () {
     return;
   }
 
+  // Stop auto-scroll.
+  ItemDrag.autoScroller.removeItem(this._item);
+
   // Cancel queued ticks.
   var itemId = this._item._id;
   cancelDragStartTick(itemId);
@@ -3172,7 +3181,7 @@ ItemDrag.prototype.stop = function () {
  */
 ItemDrag.prototype.sort = function (force) {
   var item = this._item;
-  if (item._isActive && this._dragMoveEvent) {
+  if (this._isActive && item._isActive && this._dragMoveEvent) {
     if (force === true) {
       this._handleSort();
     } else {
@@ -3450,6 +3459,8 @@ ItemDrag.prototype._resetStartPredicate = function () {
  * @private
  */
 ItemDrag.prototype._handleSort = function () {
+  if (!this._isActive) return;
+
   var settings = this._getGrid()._settings;
 
   // No sorting when drag sort is disabled. Also, account for the scenario where
@@ -3846,6 +3857,8 @@ ItemDrag.prototype._onStart = function (event) {
  *  ItemDrag.prototype
  */
 ItemDrag.prototype._prepareStart = function () {
+  if (!this._isActive) return;
+
   var item = this._item;
   if (!item._isActive) return;
 
@@ -3885,6 +3898,8 @@ ItemDrag.prototype._prepareStart = function () {
  * @private
  */
 ItemDrag.prototype._applyStart = function () {
+  if (!this._isActive) return;
+
   var item = this._item;
   if (!item._isActive) return;
 
@@ -3966,8 +3981,9 @@ ItemDrag.prototype._onMove = function (event) {
  * @private
  */
 ItemDrag.prototype._prepareMove = function () {
-  var item = this._item;
+  if (!this._isActive) return;
 
+  var item = this._item;
   if (!item._isActive) return;
 
   var settings = this._getGrid()._settings;
@@ -4002,6 +4018,8 @@ ItemDrag.prototype._prepareMove = function () {
  * @private
  */
 ItemDrag.prototype._applyMove = function () {
+  if (!this._isActive) return;
+
   var item = this._item;
   if (!item._isActive) return;
 
@@ -4036,9 +4054,10 @@ ItemDrag.prototype._onScroll = function (event) {
  * @private
  */
 ItemDrag.prototype._prepareScroll = function () {
-  var item = this._item;
+  if (!this._isActive) return;
 
   // If item is not active do nothing.
+  var item = this._item;
   if (!item._isActive) return;
 
   var element = item._element;
@@ -4081,6 +4100,8 @@ ItemDrag.prototype._prepareScroll = function () {
  * @private
  */
 ItemDrag.prototype._applyScroll = function () {
+  if (!this._isActive) return;
+
   var item = this._item;
   if (!item._isActive) return;
 
@@ -5132,6 +5153,13 @@ ItemLayout.prototype.start = function (instant, onFinish) {
     return;
   }
 
+  // Let's make sure an ongoing animation's callback is cancelled before going
+  // further. Without this there's a chance that the animation will finish
+  // before the next tick and mess up our logic.
+  if (this._animation.isAnimating()) {
+    this._animation._animation.onfinish = null;
+  }
+
   // Kick off animation to be started in the next tick.
   this._isActive = true;
   this._animOptions.easing = animEasing;
@@ -5840,6 +5868,13 @@ ItemVisibility.prototype._startAnimation = function (toVisible, instant, onFinis
     return;
   }
 
+  // Let's make sure an ongoing animation's callback is cancelled before going
+  // further. Without this there's a chance that the animation will finish
+  // before the next tick and mess up our logic.
+  if (animation.isAnimating()) {
+    animation._animation.onfinish = null;
+  }
+
   // Start the animation in the next tick (to avoid layout thrashing).
   addVisibilityTick(
     item._id,