sortablejs 1.15.1 → 1.15.3

package/modular/sortable.esm.js

@@ -1,5 +1,5 @@
 /**!
- * Sortable 1.15.1
+ * Sortable 1.15.3
  * @author	RubaXa   <trash@rubaxa.org>
  * @author	owenm    <owen23355@gmail.com>
  * @license MIT
@@ -128,7 +128,7 @@ function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-var version = "1.15.1";
+var version = "1.15.3";
 
 function userAgent(pattern) {
   if (typeof window !== 'undefined' && window.navigator) {
@@ -329,26 +329,6 @@ function getRect(el, relativeToContainingBlock, relativeToNonStaticParent, undoS
   };
 }
 
-/**
- * Returns the content rect of the element (bounding rect minus border and padding)
- * @param {HTMLElement} el 
- */
-function getContentRect(el) {
-  var rect = getRect(el);
-  var paddingLeft = parseInt(css(el, 'padding-left')),
-    paddingTop = parseInt(css(el, 'padding-top')),
-    paddingRight = parseInt(css(el, 'padding-right')),
-    paddingBottom = parseInt(css(el, 'padding-bottom'));
-  rect.top += paddingTop + parseInt(css(el, 'border-top-width'));
-  rect.left += paddingLeft + parseInt(css(el, 'border-left-width'));
-  // Client Width/Height includes padding only
-  rect.width = el.clientWidth - paddingLeft - paddingRight;
-  rect.height = el.clientHeight - paddingTop - paddingBottom;
-  rect.bottom = rect.top + rect.height;
-  rect.right = rect.left + rect.width;
-  return rect;
-}
-
 /**
  * Checks if a side of an element is scrolled past a side of its parents
  * @param  {HTMLElement}  el           The element who's side being scrolled out of view is in question
@@ -555,6 +535,23 @@ function unsetRect(el) {
   css(el, 'width', '');
   css(el, 'height', '');
 }
+function getChildContainingRectFromElement(container, options, ghostEl) {
+  var rect = {};
+  Array.from(container.children).forEach(function (child) {
+    var _rect$left, _rect$top, _rect$right, _rect$bottom;
+    if (!closest(child, options.draggable, container, false) || child.animated || child === ghostEl) return;
+    var childRect = getRect(child);
+    rect.left = Math.min((_rect$left = rect.left) !== null && _rect$left !== void 0 ? _rect$left : Infinity, childRect.left);
+    rect.top = Math.min((_rect$top = rect.top) !== null && _rect$top !== void 0 ? _rect$top : Infinity, childRect.top);
+    rect.right = Math.max((_rect$right = rect.right) !== null && _rect$right !== void 0 ? _rect$right : -Infinity, childRect.right);
+    rect.bottom = Math.max((_rect$bottom = rect.bottom) !== null && _rect$bottom !== void 0 ? _rect$bottom : -Infinity, childRect.bottom);
+  });
+  rect.width = rect.right - rect.left;
+  rect.height = rect.bottom - rect.top;
+  rect.x = rect.left;
+  rect.y = rect.top;
+  return rect;
+}
 var expando = 'Sortable' + new Date().getTime();
 
 function AnimationStateManager() {
@@ -1464,7 +1461,7 @@ Sortable.prototype = /** @lends Sortable.prototype */{
           }
           target = parent; // store last element
         }
-        /* jshint boss:true */ while (parent = parent.parentNode);
+        /* jshint boss:true */ while (parent = getParentOrHost(parent));
       }
       _unhideGhostForTarget();
     }
@@ -2247,15 +2244,15 @@ function _unsilent() {
 }
 function _ghostIsFirst(evt, vertical, sortable) {
   var firstElRect = getRect(getChild(sortable.el, 0, sortable.options, true));
-  var sortableContentRect = getContentRect(sortable.el);
+  var childContainingRect = getChildContainingRectFromElement(sortable.el, sortable.options, ghostEl);
   var spacer = 10;
-  return vertical ? evt.clientX < sortableContentRect.left - spacer || evt.clientY < firstElRect.top && evt.clientX < firstElRect.right : evt.clientY < sortableContentRect.top - spacer || evt.clientY < firstElRect.bottom && evt.clientX < firstElRect.left;
+  return vertical ? evt.clientX < childContainingRect.left - spacer || evt.clientY < firstElRect.top && evt.clientX < firstElRect.right : evt.clientY < childContainingRect.top - spacer || evt.clientY < firstElRect.bottom && evt.clientX < firstElRect.left;
 }
 function _ghostIsLast(evt, vertical, sortable) {
   var lastElRect = getRect(lastChild(sortable.el, sortable.options.draggable));
-  var sortableContentRect = getContentRect(sortable.el);
+  var childContainingRect = getChildContainingRectFromElement(sortable.el, sortable.options, ghostEl);
   var spacer = 10;
-  return vertical ? evt.clientX > sortableContentRect.right + spacer || evt.clientY > lastElRect.bottom && evt.clientX > lastElRect.left : evt.clientY > sortableContentRect.bottom + spacer || evt.clientX > lastElRect.right && evt.clientY > lastElRect.top;
+  return vertical ? evt.clientX > childContainingRect.right + spacer || evt.clientY > lastElRect.bottom && evt.clientX > lastElRect.left : evt.clientY > childContainingRect.bottom + spacer || evt.clientX > lastElRect.right && evt.clientY > lastElRect.top;
 }
 function _getSwapDirection(evt, target, targetRect, vertical, swapThreshold, invertedSwapThreshold, invertSwap, isLastTarget) {
   var mouseOnAxis = vertical ? evt.clientY : evt.clientX,
@@ -2370,7 +2367,8 @@ Sortable.utils = {
   nextTick: _nextTick,
   cancelNextTick: _cancelNextTick,
   detectDirection: _detectDirection,
-  getChild: getChild
+  getChild: getChild,
+  expando: expando
 };
 
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sortablejs",
 	"exportName": "Sortable",
-	"version": "1.15.1",
+	"version": "1.15.3",
 	"devDependencies": {
 		"@babel/core": "^7.4.4",
 		"@babel/plugin-transform-object-assign": "^7.2.0",
@@ -39,7 +39,8 @@
 	"files": [
 		"Sortable.js",
 		"Sortable.min.js",
-		"modular/"
+		"modular/",
+		"src/"
 	],
 	"keywords": [
 		"sortable",

package/src/Animation.js

@@ -0,0 +1,175 @@
+import { getRect, css, matrix, isRectEqual, indexOfObject } from './utils.js';
+import Sortable from './Sortable.js';
+
+export default function AnimationStateManager() {
+	let animationStates = [],
+		animationCallbackId;
+
+	return {
+		captureAnimationState() {
+			animationStates = [];
+			if (!this.options.animation) return;
+			let children = [].slice.call(this.el.children);
+
+			children.forEach(child => {
+				if (css(child, 'display') === 'none' || child === Sortable.ghost) return;
+				animationStates.push({
+					target: child,
+					rect: getRect(child)
+				});
+				let fromRect = { ...animationStates[animationStates.length - 1].rect };
+
+				// If animating: compensate for current animation
+				if (child.thisAnimationDuration) {
+					let childMatrix = matrix(child, true);
+					if (childMatrix) {
+						fromRect.top -= childMatrix.f;
+						fromRect.left -= childMatrix.e;
+					}
+				}
+
+				child.fromRect = fromRect;
+			});
+		},
+
+		addAnimationState(state) {
+			animationStates.push(state);
+		},
+
+		removeAnimationState(target) {
+			animationStates.splice(indexOfObject(animationStates, { target }), 1);
+		},
+
+		animateAll(callback) {
+			if (!this.options.animation) {
+				clearTimeout(animationCallbackId);
+				if (typeof(callback) === 'function') callback();
+				return;
+			}
+
+			let animating = false,
+				animationTime = 0;
+
+			animationStates.forEach((state) => {
+				let time = 0,
+					animatingThis = false,
+					target = state.target,
+					fromRect = target.fromRect,
+					toRect = getRect(target),
+					prevFromRect = target.prevFromRect,
+					prevToRect = target.prevToRect,
+					animatingRect = state.rect,
+					targetMatrix = matrix(target, true);
+
+
+				if (targetMatrix) {
+					// Compensate for current animation
+					toRect.top -= targetMatrix.f;
+					toRect.left -= targetMatrix.e;
+				}
+
+				target.toRect = toRect;
+
+				if (target.thisAnimationDuration) {
+					// Could also check if animatingRect is between fromRect and toRect
+					if (
+						isRectEqual(prevFromRect, toRect) &&
+						!isRectEqual(fromRect, toRect) &&
+						// Make sure animatingRect is on line between toRect & fromRect
+						(animatingRect.top - toRect.top) /
+						(animatingRect.left - toRect.left) ===
+						(fromRect.top - toRect.top) /
+						(fromRect.left - toRect.left)
+					) {
+						// If returning to same place as started from animation and on same axis
+						time = calculateRealTime(animatingRect, prevFromRect, prevToRect, this.options);
+					}
+				}
+
+				// if fromRect != toRect: animate
+				if (!isRectEqual(toRect, fromRect)) {
+					target.prevFromRect = fromRect;
+					target.prevToRect = toRect;
+
+					if (!time) {
+						time = this.options.animation;
+					}
+					this.animate(
+						target,
+						animatingRect,
+						toRect,
+						time
+					);
+				}
+
+				if (time) {
+					animating = true;
+					animationTime = Math.max(animationTime, time);
+					clearTimeout(target.animationResetTimer);
+					target.animationResetTimer = setTimeout(function() {
+						target.animationTime = 0;
+						target.prevFromRect = null;
+						target.fromRect = null;
+						target.prevToRect = null;
+						target.thisAnimationDuration = null;
+					}, time);
+					target.thisAnimationDuration = time;
+				}
+			});
+
+
+			clearTimeout(animationCallbackId);
+			if (!animating) {
+				if (typeof(callback) === 'function') callback();
+			} else {
+				animationCallbackId = setTimeout(function() {
+					if (typeof(callback) === 'function') callback();
+				}, animationTime);
+			}
+			animationStates = [];
+		},
+
+		animate(target, currentRect, toRect, duration) {
+			if (duration) {
+				css(target, 'transition', '');
+				css(target, 'transform', '');
+				let elMatrix = matrix(this.el),
+					scaleX = elMatrix && elMatrix.a,
+					scaleY = elMatrix && elMatrix.d,
+					translateX = (currentRect.left - toRect.left) / (scaleX || 1),
+					translateY = (currentRect.top - toRect.top) / (scaleY || 1);
+
+				target.animatingX = !!translateX;
+				target.animatingY = !!translateY;
+
+				css(target, 'transform', 'translate3d(' + translateX + 'px,' + translateY + 'px,0)');
+
+				this.forRepaintDummy = repaint(target); // repaint
+
+				css(target, 'transition', 'transform ' + duration + 'ms' + (this.options.easing ? ' ' + this.options.easing : ''));
+				css(target, 'transform', 'translate3d(0,0,0)');
+				(typeof target.animated === 'number') && clearTimeout(target.animated);
+				target.animated = setTimeout(function () {
+					css(target, 'transition', '');
+					css(target, 'transform', '');
+					target.animated = false;
+
+					target.animatingX = false;
+					target.animatingY = false;
+				}, duration);
+			}
+		}
+	};
+}
+
+function repaint(target) {
+	return target.offsetWidth;
+}
+
+
+function calculateRealTime(animatingRect, fromRect, toRect, options) {
+	return (
+		Math.sqrt(Math.pow(fromRect.top - animatingRect.top, 2) + Math.pow(fromRect.left - animatingRect.left, 2)) /
+		Math.sqrt(Math.pow(fromRect.top - toRect.top, 2) + Math.pow(fromRect.left - toRect.left, 2))
+	) * options.animation;
+}

package/src/BrowserInfo.js

@@ -0,0 +1,12 @@
+function userAgent(pattern) {
+	if (typeof window !== 'undefined' && window.navigator) {
+		return !!/*@__PURE__*/navigator.userAgent.match(pattern);
+	}
+}
+
+export const IE11OrLess = userAgent(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i);
+export const Edge = userAgent(/Edge/i);
+export const FireFox = userAgent(/firefox/i);
+export const Safari = userAgent(/safari/i) && !userAgent(/chrome/i) && !userAgent(/android/i);
+export const IOS = userAgent(/iP(ad|od|hone)/i);
+export const ChromeForAndroid = userAgent(/chrome/i) && userAgent(/android/i);

package/src/EventDispatcher.js

@@ -0,0 +1,57 @@
+import { IE11OrLess, Edge } from './BrowserInfo.js';
+import { expando } from './utils.js';
+import PluginManager from './PluginManager.js';
+
+export default function dispatchEvent(
+	{
+		sortable, rootEl, name,
+		targetEl, cloneEl, toEl, fromEl,
+		oldIndex, newIndex,
+		oldDraggableIndex, newDraggableIndex,
+		originalEvent, putSortable, extraEventProperties
+	}
+) {
+	sortable = (sortable || (rootEl && rootEl[expando]));
+	if (!sortable) return;
+
+	let evt,
+		options = sortable.options,
+		onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1);
+	// Support for new CustomEvent feature
+	if (window.CustomEvent && !IE11OrLess && !Edge) {
+		evt = new CustomEvent(name, {
+			bubbles: true,
+			cancelable: true
+		});
+	} else {
+		evt = document.createEvent('Event');
+		evt.initEvent(name, true, true);
+	}
+
+	evt.to = toEl || rootEl;
+	evt.from = fromEl || rootEl;
+	evt.item = targetEl || rootEl;
+	evt.clone = cloneEl;
+
+	evt.oldIndex = oldIndex;
+	evt.newIndex = newIndex;
+
+	evt.oldDraggableIndex = oldDraggableIndex;
+	evt.newDraggableIndex = newDraggableIndex;
+
+	evt.originalEvent = originalEvent;
+	evt.pullMode = putSortable ? putSortable.lastPutMode : undefined;
+
+	let allEventProperties = { ...extraEventProperties, ...PluginManager.getEventProperties(name, sortable) };
+	for (let option in allEventProperties) {
+		evt[option] = allEventProperties[option];
+	}
+
+	if (rootEl) {
+		rootEl.dispatchEvent(evt);
+	}
+
+	if (options[onName]) {
+		options[onName].call(sortable, evt);
+	}
+}

package/src/PluginManager.js

@@ -0,0 +1,94 @@
+let plugins = [];
+
+const defaults = {
+	initializeByDefault: true
+};
+
+export default {
+	mount(plugin) {
+		// Set default static properties
+		for (let option in defaults) {
+			if (defaults.hasOwnProperty(option) && !(option in plugin)) {
+				plugin[option] = defaults[option];
+			}
+		}
+
+		plugins.forEach(p => {
+			if (p.pluginName === plugin.pluginName) {
+				throw (`Sortable: Cannot mount plugin ${ plugin.pluginName } more than once`);
+			}
+		});
+
+		plugins.push(plugin);
+	},
+	pluginEvent(eventName, sortable, evt) {
+		this.eventCanceled = false;
+		evt.cancel = () => {
+			this.eventCanceled = true;
+		};
+		const eventNameGlobal = eventName + 'Global';
+		plugins.forEach(plugin => {
+			if (!sortable[plugin.pluginName]) return;
+			// Fire global events if it exists in this sortable
+			if (
+				sortable[plugin.pluginName][eventNameGlobal]
+			) {
+				sortable[plugin.pluginName][eventNameGlobal]({ sortable, ...evt });
+			}
+
+			// Only fire plugin event if plugin is enabled in this sortable,
+			// and plugin has event defined
+			if (
+				sortable.options[plugin.pluginName] &&
+				sortable[plugin.pluginName][eventName]
+			) {
+				sortable[plugin.pluginName][eventName]({ sortable, ...evt });
+			}
+		});
+	},
+	initializePlugins(sortable, el, defaults, options) {
+		plugins.forEach(plugin => {
+			const pluginName = plugin.pluginName;
+			if (!sortable.options[pluginName] && !plugin.initializeByDefault) return;
+
+			let initialized = new plugin(sortable, el, sortable.options);
+			initialized.sortable = sortable;
+			initialized.options = sortable.options;
+			sortable[pluginName] = initialized;
+
+			// Add default options from plugin
+			Object.assign(defaults, initialized.defaults);
+		});
+
+		for (let option in sortable.options) {
+			if (!sortable.options.hasOwnProperty(option)) continue;
+			let modified = this.modifyOption(sortable, option, sortable.options[option]);
+			if (typeof(modified) !== 'undefined') {
+				sortable.options[option] = modified;
+			}
+		}
+	},
+	getEventProperties(name, sortable) {
+		let eventProperties = {};
+		plugins.forEach(plugin => {
+			if (typeof(plugin.eventProperties) !== 'function') return;
+			Object.assign(eventProperties, plugin.eventProperties.call(sortable[plugin.pluginName], name));
+		});
+
+		return eventProperties;
+	},
+	modifyOption(sortable, name, value) {
+		let modifiedValue;
+		plugins.forEach(plugin => {
+			// Plugin must exist on the Sortable
+			if (!sortable[plugin.pluginName]) return;
+
+			// If static option listener exists for this option, call in the context of the Sortable's instance of this plugin
+			if (plugin.optionListeners && typeof(plugin.optionListeners[name]) === 'function') {
+				modifiedValue = plugin.optionListeners[name].call(sortable[plugin.pluginName], value);
+			}
+		});
+
+		return modifiedValue;
+	}
+};