+++ /dev/null
-/**
- * interact.js v1.2.8
- *
- * Copyright (c) 2012-2015 Taye Adeyemi <dev@taye.me>
- * Open source under the MIT License.
- * https://raw.github.com/taye/interact.js/master/LICENSE
- */
-(function (realWindow) {
- 'use strict';
-
- // return early if there's no window to work with (eg. Node.js)
- if (!realWindow) { return; }
-
- var // get wrapped window if using Shadow DOM polyfill
- window = (function () {
- // create a TextNode
- var el = realWindow.document.createTextNode('');
-
- // check if it's wrapped by a polyfill
- if (el.ownerDocument !== realWindow.document
- && typeof realWindow.wrap === 'function'
- && realWindow.wrap(el) === el) {
- // return wrapped window
- return realWindow.wrap(realWindow);
- }
-
- // no Shadow DOM polyfil or native implementation
- return realWindow;
- }()),
-
- document = window.document,
- DocumentFragment = window.DocumentFragment || blank,
- SVGElement = window.SVGElement || blank,
- SVGSVGElement = window.SVGSVGElement || blank,
- SVGElementInstance = window.SVGElementInstance || blank,
- HTMLElement = window.HTMLElement || window.Element,
-
- PointerEvent = (window.PointerEvent || window.MSPointerEvent),
- pEventTypes,
-
- hypot = Math.hypot || function (x, y) { return Math.sqrt(x * x + y * y); },
-
- tmpXY = {}, // reduce object creation in getXY()
-
- documents = [], // all documents being listened to
-
- interactables = [], // all set interactables
- interactions = [], // all interactions
-
- dynamicDrop = false,
-
- // {
- // type: {
- // selectors: ['selector', ...],
- // contexts : [document, ...],
- // listeners: [[listener, useCapture], ...]
- // }
- // }
- delegatedEvents = {},
-
- defaultOptions = {
- base: {
- accept : null,
- actionChecker : null,
- styleCursor : true,
- preventDefault: 'auto',
- origin : { x: 0, y: 0 },
- deltaSource : 'page',
- allowFrom : null,
- ignoreFrom : null,
- _context : document,
- dropChecker : null
- },
-
- drag: {
- enabled: false,
- manualStart: true,
- max: Infinity,
- maxPerElement: 1,
-
- snap: null,
- restrict: null,
- inertia: null,
- autoScroll: null,
-
- axis: 'xy'
- },
-
- drop: {
- enabled: false,
- accept: null,
- overlap: 'pointer'
- },
-
- resize: {
- enabled: false,
- manualStart: false,
- max: Infinity,
- maxPerElement: 1,
-
- snap: null,
- restrict: null,
- inertia: null,
- autoScroll: null,
-
- square: false,
- preserveAspectRatio: false,
- axis: 'xy',
-
- // use default margin
- margin: NaN,
-
- // object with props left, right, top, bottom which are
- // true/false values to resize when the pointer is over that edge,
- // CSS selectors to match the handles for each direction
- // or the Elements for each handle
- edges: null,
-
- // a value of 'none' will limit the resize rect to a minimum of 0x0
- // 'negate' will alow the rect to have negative width/height
- // 'reposition' will keep the width/height positive by swapping
- // the top and bottom edges and/or swapping the left and right edges
- invert: 'none'
- },
-
- gesture: {
- manualStart: false,
- enabled: false,
- max: Infinity,
- maxPerElement: 1,
-
- restrict: null
- },
-
- perAction: {
- manualStart: false,
- max: Infinity,
- maxPerElement: 1,
-
- snap: {
- enabled : false,
- endOnly : false,
- range : Infinity,
- targets : null,
- offsets : null,
-
- relativePoints: null
- },
-
- restrict: {
- enabled: false,
- endOnly: false
- },
-
- autoScroll: {
- enabled : false,
- container : null, // the item that is scrolled (Window or HTMLElement)
- margin : 60,
- speed : 300 // the scroll speed in pixels per second
- },
-
- inertia: {
- enabled : false,
- resistance : 10, // the lambda in exponential decay
- minSpeed : 100, // target speed must be above this for inertia to start
- endSpeed : 10, // the speed at which inertia is slow enough to stop
- allowResume : true, // allow resuming an action in inertia phase
- zeroResumeDelta : true, // if an action is resumed after launch, set dx/dy to 0
- smoothEndDuration: 300 // animate to snap/restrict endOnly if there's no inertia
- }
- },
-
- _holdDuration: 600
- },
-
- // Things related to autoScroll
- autoScroll = {
- interaction: null,
- i: null, // the handle returned by window.setInterval
- x: 0, y: 0, // Direction each pulse is to scroll in
-
- // scroll the window by the values in scroll.x/y
- scroll: function () {
- var options = autoScroll.interaction.target.options[autoScroll.interaction.prepared.name].autoScroll,
- container = options.container || getWindow(autoScroll.interaction.element),
- now = new Date().getTime(),
- // change in time in seconds
- dtx = (now - autoScroll.prevTimeX) / 1000,
- dty = (now - autoScroll.prevTimeY) / 1000,
- vx, vy, sx, sy;
-
- // displacement
- if (options.velocity) {
- vx = options.velocity.x;
- vy = options.velocity.y;
- }
- else {
- vx = vy = options.speed
- }
-
- sx = vx * dtx;
- sy = vy * dty;
-
- if (sx >= 1 || sy >= 1) {
- if (isWindow(container)) {
- container.scrollBy(autoScroll.x * sx, autoScroll.y * sy);
- }
- else if (container) {
- container.scrollLeft += autoScroll.x * sx;
- container.scrollTop += autoScroll.y * sy;
- }
-
- if (sx >=1) autoScroll.prevTimeX = now;
- if (sy >= 1) autoScroll.prevTimeY = now;
- }
-
- if (autoScroll.isScrolling) {
- cancelFrame(autoScroll.i);
- autoScroll.i = reqFrame(autoScroll.scroll);
- }
- },
-
- isScrolling: false,
- prevTimeX: 0,
- prevTimeY: 0,
-
- start: function (interaction) {
- autoScroll.isScrolling = true;
- cancelFrame(autoScroll.i);
-
- autoScroll.interaction = interaction;
- autoScroll.prevTimeX = new Date().getTime();
- autoScroll.prevTimeY = new Date().getTime();
- autoScroll.i = reqFrame(autoScroll.scroll);
- },
-
- stop: function () {
- autoScroll.isScrolling = false;
- cancelFrame(autoScroll.i);
- }
- },
-
- // Does the browser support touch input?
- supportsTouch = (('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch),
-
- // Does the browser support PointerEvents
- // Avoid PointerEvent bugs introduced in Chrome 55
- supportsPointerEvent = PointerEvent && !/Chrome/.test(navigator.userAgent),
-
- // Less Precision with touch input
- margin = supportsTouch || supportsPointerEvent? 20: 10,
-
- pointerMoveTolerance = 1,
-
- // for ignoring browser's simulated mouse events
- prevTouchTime = 0,
-
- // Allow this many interactions to happen simultaneously
- maxInteractions = Infinity,
-
- // Check if is IE9 or older
- actionCursors = (document.all && !window.atob) ? {
- drag : 'move',
- resizex : 'e-resize',
- resizey : 's-resize',
- resizexy: 'se-resize',
-
- resizetop : 'n-resize',
- resizeleft : 'w-resize',
- resizebottom : 's-resize',
- resizeright : 'e-resize',
- resizetopleft : 'se-resize',
- resizebottomright: 'se-resize',
- resizetopright : 'ne-resize',
- resizebottomleft : 'ne-resize',
-
- gesture : ''
- } : {
- drag : 'move',
- resizex : 'ew-resize',
- resizey : 'ns-resize',
- resizexy: 'nwse-resize',
-
- resizetop : 'ns-resize',
- resizeleft : 'ew-resize',
- resizebottom : 'ns-resize',
- resizeright : 'ew-resize',
- resizetopleft : 'nwse-resize',
- resizebottomright: 'nwse-resize',
- resizetopright : 'nesw-resize',
- resizebottomleft : 'nesw-resize',
-
- gesture : ''
- },
-
- actionIsEnabled = {
- drag : true,
- resize : true,
- gesture: true
- },
-
- // because Webkit and Opera still use 'mousewheel' event type
- wheelEvent = 'onmousewheel' in document? 'mousewheel': 'wheel',
-
- eventTypes = [
- 'dragstart',
- 'dragmove',
- 'draginertiastart',
- 'dragend',
- 'dragenter',
- 'dragleave',
- 'dropactivate',
- 'dropdeactivate',
- 'dropmove',
- 'drop',
- 'resizestart',
- 'resizemove',
- 'resizeinertiastart',
- 'resizeend',
- 'gesturestart',
- 'gesturemove',
- 'gestureinertiastart',
- 'gestureend',
-
- 'down',
- 'move',
- 'up',
- 'cancel',
- 'tap',
- 'doubletap',
- 'hold'
- ],
-
- globalEvents = {},
-
- // Opera Mobile must be handled differently
- isOperaMobile = navigator.appName == 'Opera' &&
- supportsTouch &&
- navigator.userAgent.match('Presto'),
-
- // scrolling doesn't change the result of getClientRects on iOS 7
- isIOS7 = (/iP(hone|od|ad)/.test(navigator.platform)
- && /OS 7[^\d]/.test(navigator.appVersion)),
-
- // prefix matchesSelector
- prefixedMatchesSelector = 'matches' in Element.prototype?
- 'matches': 'webkitMatchesSelector' in Element.prototype?
- 'webkitMatchesSelector': 'mozMatchesSelector' in Element.prototype?
- 'mozMatchesSelector': 'oMatchesSelector' in Element.prototype?
- 'oMatchesSelector': 'msMatchesSelector',
-
- // will be polyfill function if browser is IE8
- ie8MatchesSelector,
-
- // native requestAnimationFrame or polyfill
- reqFrame = realWindow.requestAnimationFrame,
- cancelFrame = realWindow.cancelAnimationFrame,
-
- // Events wrapper
- events = (function () {
- var useAttachEvent = ('attachEvent' in window) && !('addEventListener' in window),
- addEvent = useAttachEvent? 'attachEvent': 'addEventListener',
- removeEvent = useAttachEvent? 'detachEvent': 'removeEventListener',
- on = useAttachEvent? 'on': '',
-
- elements = [],
- targets = [],
- attachedListeners = [];
-
- function add (element, type, listener, useCapture) {
- var elementIndex = indexOf(elements, element),
- target = targets[elementIndex];
-
- if (!target) {
- target = {
- events: {},
- typeCount: 0
- };
-
- elementIndex = elements.push(element) - 1;
- targets.push(target);
-
- attachedListeners.push((useAttachEvent ? {
- supplied: [],
- wrapped : [],
- useCount: []
- } : null));
- }
-
- if (!target.events[type]) {
- target.events[type] = [];
- target.typeCount++;
- }
-
- if (!contains(target.events[type], listener)) {
- var ret;
-
- if (useAttachEvent) {
- var listeners = attachedListeners[elementIndex],
- listenerIndex = indexOf(listeners.supplied, listener);
-
- var wrapped = listeners.wrapped[listenerIndex] || function (event) {
- if (!event.immediatePropagationStopped) {
- event.target = event.srcElement;
- event.currentTarget = element;
-
- event.preventDefault = event.preventDefault || preventDef;
- event.stopPropagation = event.stopPropagation || stopProp;
- event.stopImmediatePropagation = event.stopImmediatePropagation || stopImmProp;
-
- if (/mouse|click/.test(event.type)) {
- event.pageX = event.clientX + getWindow(element).document.documentElement.scrollLeft;
- event.pageY = event.clientY + getWindow(element).document.documentElement.scrollTop;
- }
-
- listener(event);
- }
- };
-
- ret = element[addEvent](on + type, wrapped, Boolean(useCapture));
-
- if (listenerIndex === -1) {
- listeners.supplied.push(listener);
- listeners.wrapped.push(wrapped);
- listeners.useCount.push(1);
- }
- else {
- listeners.useCount[listenerIndex]++;
- }
- }
- else {
- ret = element[addEvent](type, listener, useCapture || false);
- }
- target.events[type].push(listener);
-
- return ret;
- }
- }
-
- function remove (element, type, listener, useCapture) {
- var i,
- elementIndex = indexOf(elements, element),
- target = targets[elementIndex],
- listeners,
- listenerIndex,
- wrapped = listener;
-
- if (!target || !target.events) {
- return;
- }
-
- if (useAttachEvent) {
- listeners = attachedListeners[elementIndex];
- listenerIndex = indexOf(listeners.supplied, listener);
- wrapped = listeners.wrapped[listenerIndex];
- }
-
- if (type === 'all') {
- for (type in target.events) {
- if (target.events.hasOwnProperty(type)) {
- remove(element, type, 'all');
- }
- }
- return;
- }
-
- if (target.events[type]) {
- var len = target.events[type].length;
-
- if (listener === 'all') {
- for (i = 0; i < len; i++) {
- remove(element, type, target.events[type][i], Boolean(useCapture));
- }
- return;
- } else {
- for (i = 0; i < len; i++) {
- if (target.events[type][i] === listener) {
- element[removeEvent](on + type, wrapped, useCapture || false);
- target.events[type].splice(i, 1);
-
- if (useAttachEvent && listeners) {
- listeners.useCount[listenerIndex]--;
- if (listeners.useCount[listenerIndex] === 0) {
- listeners.supplied.splice(listenerIndex, 1);
- listeners.wrapped.splice(listenerIndex, 1);
- listeners.useCount.splice(listenerIndex, 1);
- }
- }
-
- break;
- }
- }
- }
-
- if (target.events[type] && target.events[type].length === 0) {
- target.events[type] = null;
- target.typeCount--;
- }
- }
-
- if (!target.typeCount) {
- targets.splice(elementIndex, 1);
- elements.splice(elementIndex, 1);
- attachedListeners.splice(elementIndex, 1);
- }
- }
-
- function preventDef () {
- this.returnValue = false;
- }
-
- function stopProp () {
- this.cancelBubble = true;
- }
-
- function stopImmProp () {
- this.cancelBubble = true;
- this.immediatePropagationStopped = true;
- }
-
- return {
- add: add,
- remove: remove,
- useAttachEvent: useAttachEvent,
-
- _elements: elements,
- _targets: targets,
- _attachedListeners: attachedListeners
- };
- }());
-
- function blank () {}
-
- function isElement (o) {
- if (!o || (typeof o !== 'object')) { return false; }
-
- var _window = getWindow(o) || window;
-
- return (/object|function/.test(typeof _window.Element)
- ? o instanceof _window.Element //DOM2
- : o.nodeType === 1 && typeof o.nodeName === "string");
- }
- function isWindow (thing) { return thing === window || !!(thing && thing.Window) && (thing instanceof thing.Window); }
- function isDocFrag (thing) { return !!thing && thing instanceof DocumentFragment; }
- function isArray (thing) {
- return isObject(thing)
- && (typeof thing.length !== undefined)
- && isFunction(thing.splice);
- }
- function isObject (thing) { return !!thing && (typeof thing === 'object'); }
- function isFunction (thing) { return typeof thing === 'function'; }
- function isNumber (thing) { return typeof thing === 'number' ; }
- function isBool (thing) { return typeof thing === 'boolean' ; }
- function isString (thing) { return typeof thing === 'string' ; }
-
- function trySelector (value) {
- if (!isString(value)) { return false; }
-
- // an exception will be raised if it is invalid
- document.querySelector(value);
- return true;
- }
-
- function extend (dest, source) {
- for (var prop in source) {
- dest[prop] = source[prop];
- }
- return dest;
- }
-
- var prefixedPropREs = {
- webkit: /(Movement[XY]|Radius[XY]|RotationAngle|Force)$/
- };
-
- function pointerExtend (dest, source) {
- for (var prop in source) {
- var deprecated = false;
-
- // skip deprecated prefixed properties
- for (var vendor in prefixedPropREs) {
- if (prop.indexOf(vendor) === 0 && prefixedPropREs[vendor].test(prop)) {
- deprecated = true;
- break;
- }
- }
-
- if (!deprecated) {
- dest[prop] = source[prop];
- }
- }
- return dest;
- }
-
- function copyCoords (dest, src) {
- dest.page = dest.page || {};
- dest.page.x = src.page.x;
- dest.page.y = src.page.y;
-
- dest.client = dest.client || {};
- dest.client.x = src.client.x;
- dest.client.y = src.client.y;
-
- dest.timeStamp = src.timeStamp;
- }
-
- function setEventXY (targetObj, pointers, interaction) {
- var pointer = (pointers.length > 1
- ? pointerAverage(pointers)
- : pointers[0]);
-
- getPageXY(pointer, tmpXY, interaction);
- targetObj.page.x = tmpXY.x;
- targetObj.page.y = tmpXY.y;
-
- getClientXY(pointer, tmpXY, interaction);
- targetObj.client.x = tmpXY.x;
- targetObj.client.y = tmpXY.y;
-
- targetObj.timeStamp = new Date().getTime();
- }
-
- function setEventDeltas (targetObj, prev, cur) {
- targetObj.page.x = cur.page.x - prev.page.x;
- targetObj.page.y = cur.page.y - prev.page.y;
- targetObj.client.x = cur.client.x - prev.client.x;
- targetObj.client.y = cur.client.y - prev.client.y;
- targetObj.timeStamp = new Date().getTime() - prev.timeStamp;
-
- // set pointer velocity
- var dt = Math.max(targetObj.timeStamp / 1000, 0.001);
- targetObj.page.speed = hypot(targetObj.page.x, targetObj.page.y) / dt;
- targetObj.page.vx = targetObj.page.x / dt;
- targetObj.page.vy = targetObj.page.y / dt;
-
- targetObj.client.speed = hypot(targetObj.client.x, targetObj.page.y) / dt;
- targetObj.client.vx = targetObj.client.x / dt;
- targetObj.client.vy = targetObj.client.y / dt;
- }
-
- function isNativePointer (pointer) {
- return (pointer instanceof window.Event
- || (supportsTouch && window.Touch && pointer instanceof window.Touch));
- }
-
- // Get specified X/Y coords for mouse or event.touches[0]
- function getXY (type, pointer, xy) {
- xy = xy || {};
- type = type || 'page';
-
- xy.x = pointer[type + 'X'];
- xy.y = pointer[type + 'Y'];
-
- return xy;
- }
-
- function getPageXY (pointer, page) {
- page = page || {};
-
- // Opera Mobile handles the viewport and scrolling oddly
- if (isOperaMobile && isNativePointer(pointer)) {
- getXY('screen', pointer, page);
-
- page.x += window.scrollX;
- page.y += window.scrollY;
- }
- else {
- getXY('page', pointer, page);
- }
-
- return page;
- }
-
- function getClientXY (pointer, client) {
- client = client || {};
-
- if (isOperaMobile && isNativePointer(pointer)) {
- // Opera Mobile handles the viewport and scrolling oddly
- getXY('screen', pointer, client);
- }
- else {
- getXY('client', pointer, client);
- }
-
- return client;
- }
-
- function getScrollXY (win) {
- win = win || window;
- return {
- x: win.scrollX || win.document.documentElement.scrollLeft,
- y: win.scrollY || win.document.documentElement.scrollTop
- };
- }
-
- function getPointerId (pointer) {
- return isNumber(pointer.pointerId)? pointer.pointerId : pointer.identifier;
- }
-
- function getActualElement (element) {
- return (element instanceof SVGElementInstance
- ? element.correspondingUseElement
- : element);
- }
-
- function getWindow (node) {
- if (isWindow(node)) {
- return node;
- }
-
- var rootNode = (node.ownerDocument || node);
-
- return rootNode.defaultView || rootNode.parentWindow || window;
- }
-
- function getElementClientRect (element) {
- var clientRect = (element instanceof SVGElement
- ? element.getBoundingClientRect()
- : element.getClientRects()[0]);
-
- return clientRect && {
- left : clientRect.left,
- right : clientRect.right,
- top : clientRect.top,
- bottom: clientRect.bottom,
- width : clientRect.width || clientRect.right - clientRect.left,
- height: clientRect.height || clientRect.bottom - clientRect.top
- };
- }
-
- function getElementRect (element) {
- var clientRect = getElementClientRect(element);
-
- if (!isIOS7 && clientRect) {
- var scroll = getScrollXY(getWindow(element));
-
- clientRect.left += scroll.x;
- clientRect.right += scroll.x;
- clientRect.top += scroll.y;
- clientRect.bottom += scroll.y;
- }
-
- return clientRect;
- }
-
- function getTouchPair (event) {
- var touches = [];
-
- // array of touches is supplied
- if (isArray(event)) {
- touches[0] = event[0];
- touches[1] = event[1];
- }
- // an event
- else {
- if (event.type === 'touchend') {
- if (event.touches.length === 1) {
- touches[0] = event.touches[0];
- touches[1] = event.changedTouches[0];
- }
- else if (event.touches.length === 0) {
- touches[0] = event.changedTouches[0];
- touches[1] = event.changedTouches[1];
- }
- }
- else {
- touches[0] = event.touches[0];
- touches[1] = event.touches[1];
- }
- }
-
- return touches;
- }
-
- function pointerAverage (pointers) {
- var average = {
- pageX : 0,
- pageY : 0,
- clientX: 0,
- clientY: 0,
- screenX: 0,
- screenY: 0
- };
- var prop;
-
- for (var i = 0; i < pointers.length; i++) {
- for (prop in average) {
- average[prop] += pointers[i][prop];
- }
- }
- for (prop in average) {
- average[prop] /= pointers.length;
- }
-
- return average;
- }
-
- function touchBBox (event) {
- if (!event.length && !(event.touches && event.touches.length > 1)) {
- return;
- }
-
- var touches = getTouchPair(event),
- minX = Math.min(touches[0].pageX, touches[1].pageX),
- minY = Math.min(touches[0].pageY, touches[1].pageY),
- maxX = Math.max(touches[0].pageX, touches[1].pageX),
- maxY = Math.max(touches[0].pageY, touches[1].pageY);
-
- return {
- x: minX,
- y: minY,
- left: minX,
- top: minY,
- width: maxX - minX,
- height: maxY - minY
- };
- }
-
- function touchDistance (event, deltaSource) {
- deltaSource = deltaSource || defaultOptions.deltaSource;
-
- var sourceX = deltaSource + 'X',
- sourceY = deltaSource + 'Y',
- touches = getTouchPair(event);
-
-
- var dx = touches[0][sourceX] - touches[1][sourceX],
- dy = touches[0][sourceY] - touches[1][sourceY];
-
- return hypot(dx, dy);
- }
-
- function touchAngle (event, prevAngle, deltaSource) {
- deltaSource = deltaSource || defaultOptions.deltaSource;
-
- var sourceX = deltaSource + 'X',
- sourceY = deltaSource + 'Y',
- touches = getTouchPair(event),
- dx = touches[0][sourceX] - touches[1][sourceX],
- dy = touches[0][sourceY] - touches[1][sourceY],
- angle = 180 * Math.atan(dy / dx) / Math.PI;
-
- if (isNumber(prevAngle)) {
- var dr = angle - prevAngle,
- drClamped = dr % 360;
-
- if (drClamped > 315) {
- angle -= 360 + (angle / 360)|0 * 360;
- }
- else if (drClamped > 135) {
- angle -= 180 + (angle / 360)|0 * 360;
- }
- else if (drClamped < -315) {
- angle += 360 + (angle / 360)|0 * 360;
- }
- else if (drClamped < -135) {
- angle += 180 + (angle / 360)|0 * 360;
- }
- }
-
- return angle;
- }
-
- function getOriginXY (interactable, element) {
- var origin = interactable
- ? interactable.options.origin
- : defaultOptions.origin;
-
- if (origin === 'parent') {
- origin = parentElement(element);
- }
- else if (origin === 'self') {
- origin = interactable.getRect(element);
- }
- else if (trySelector(origin)) {
- origin = closest(element, origin) || { x: 0, y: 0 };
- }
-
- if (isFunction(origin)) {
- origin = origin(interactable && element);
- }
-
- if (isElement(origin)) {
- origin = getElementRect(origin);
- }
-
- origin.x = ('x' in origin)? origin.x : origin.left;
- origin.y = ('y' in origin)? origin.y : origin.top;
-
- return origin;
- }
-
- // http://stackoverflow.com/a/5634528/2280888
- function _getQBezierValue(t, p1, p2, p3) {
- var iT = 1 - t;
- return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3;
- }
-
- function getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, position) {
- return {
- x: _getQBezierValue(position, startX, cpX, endX),
- y: _getQBezierValue(position, startY, cpY, endY)
- };
- }
-
- // http://gizma.com/easing/
- function easeOutQuad (t, b, c, d) {
- t /= d;
- return -c * t*(t-2) + b;
- }
-
- function nodeContains (parent, child) {
- while (child) {
- if (child === parent) {
- return true;
- }
-
- child = child.parentNode;
- }
-
- return false;
- }
-
- function closest (child, selector) {
- var parent = parentElement(child);
-
- while (isElement(parent)) {
- if (matchesSelector(parent, selector)) { return parent; }
-
- parent = parentElement(parent);
- }
-
- return null;
- }
-
- function parentElement (node) {
- var parent = node.parentNode;
-
- if (isDocFrag(parent)) {
- // skip past #shado-root fragments
- while ((parent = parent.host) && isDocFrag(parent)) {}
-
- return parent;
- }
-
- return parent;
- }
-
- function inContext (interactable, element) {
- return interactable._context === element.ownerDocument
- || nodeContains(interactable._context, element);
- }
-
- function testIgnore (interactable, interactableElement, element) {
- var ignoreFrom = interactable.options.ignoreFrom;
-
- if (!ignoreFrom || !isElement(element)) { return false; }
-
- if (isString(ignoreFrom)) {
- return matchesUpTo(element, ignoreFrom, interactableElement);
- }
- else if (isElement(ignoreFrom)) {
- return nodeContains(ignoreFrom, element);
- }
-
- return false;
- }
-
- function testAllow (interactable, interactableElement, element) {
- var allowFrom = interactable.options.allowFrom;
-
- if (!allowFrom) { return true; }
-
- if (!isElement(element)) { return false; }
-
- if (isString(allowFrom)) {
- return matchesUpTo(element, allowFrom, interactableElement);
- }
- else if (isElement(allowFrom)) {
- return nodeContains(allowFrom, element);
- }
-
- return false;
- }
-
- function checkAxis (axis, interactable) {
- if (!interactable) { return false; }
-
- var thisAxis = interactable.options.drag.axis;
-
- return (axis === 'xy' || thisAxis === 'xy' || thisAxis === axis);
- }
-
- function checkSnap (interactable, action) {
- var options = interactable.options;
-
- if (/^resize/.test(action)) {
- action = 'resize';
- }
-
- return options[action].snap && options[action].snap.enabled;
- }
-
- function checkRestrict (interactable, action) {
- var options = interactable.options;
-
- if (/^resize/.test(action)) {
- action = 'resize';
- }
-
- return options[action].restrict && options[action].restrict.enabled;
- }
-
- function checkAutoScroll (interactable, action) {
- var options = interactable.options;
-
- if (/^resize/.test(action)) {
- action = 'resize';
- }
-
- return options[action].autoScroll && options[action].autoScroll.enabled;
- }
-
- function withinInteractionLimit (interactable, element, action) {
- var options = interactable.options,
- maxActions = options[action.name].max,
- maxPerElement = options[action.name].maxPerElement,
- activeInteractions = 0,
- targetCount = 0,
- targetElementCount = 0;
-
- for (var i = 0, len = interactions.length; i < len; i++) {
- var interaction = interactions[i],
- otherAction = interaction.prepared.name,
- active = interaction.interacting();
-
- if (!active) { continue; }
-
- activeInteractions++;
-
- if (activeInteractions >= maxInteractions) {
- return false;
- }
-
- if (interaction.target !== interactable) { continue; }
-
- targetCount += (otherAction === action.name)|0;
-
- if (targetCount >= maxActions) {
- return false;
- }
-
- if (interaction.element === element) {
- targetElementCount++;
-
- if (otherAction !== action.name || targetElementCount >= maxPerElement) {
- return false;
- }
- }
- }
-
- return maxInteractions > 0;
- }
-
- // Test for the element that's "above" all other qualifiers
- function indexOfDeepestElement (elements) {
- var dropzone,
- deepestZone = elements[0],
- index = deepestZone? 0: -1,
- parent,
- deepestZoneParents = [],
- dropzoneParents = [],
- child,
- i,
- n;
-
- for (i = 1; i < elements.length; i++) {
- dropzone = elements[i];
-
- // an element might belong to multiple selector dropzones
- if (!dropzone || dropzone === deepestZone) {
- continue;
- }
-
- if (!deepestZone) {
- deepestZone = dropzone;
- index = i;
- continue;
- }
-
- // check if the deepest or current are document.documentElement or document.rootElement
- // - if the current dropzone is, do nothing and continue
- if (dropzone.parentNode === dropzone.ownerDocument) {
- continue;
- }
- // - if deepest is, update with the current dropzone and continue to next
- else if (deepestZone.parentNode === dropzone.ownerDocument) {
- deepestZone = dropzone;
- index = i;
- continue;
- }
-
- if (!deepestZoneParents.length) {
- parent = deepestZone;
- while (parent.parentNode && parent.parentNode !== parent.ownerDocument) {
- deepestZoneParents.unshift(parent);
- parent = parent.parentNode;
- }
- }
-
- // if this element is an svg element and the current deepest is
- // an HTMLElement
- if (deepestZone instanceof HTMLElement
- && dropzone instanceof SVGElement
- && !(dropzone instanceof SVGSVGElement)) {
-
- if (dropzone === deepestZone.parentNode) {
- continue;
- }
-
- parent = dropzone.ownerSVGElement;
- }
- else {
- parent = dropzone;
- }
-
- dropzoneParents = [];
-
- while (parent.parentNode !== parent.ownerDocument) {
- dropzoneParents.unshift(parent);
- parent = parent.parentNode;
- }
-
- n = 0;
-
- // get (position of last common ancestor) + 1
- while (dropzoneParents[n] && dropzoneParents[n] === deepestZoneParents[n]) {
- n++;
- }
-
- var parents = [
- dropzoneParents[n - 1],
- dropzoneParents[n],
- deepestZoneParents[n]
- ];
-
- child = parents[0].lastChild;
-
- while (child) {
- if (child === parents[1]) {
- deepestZone = dropzone;
- index = i;
- deepestZoneParents = [];
-
- break;
- }
- else if (child === parents[2]) {
- break;
- }
-
- child = child.previousSibling;
- }
- }
-
- return index;
- }
-
- function Interaction () {
- this.target = null; // current interactable being interacted with
- this.element = null; // the target element of the interactable
- this.dropTarget = null; // the dropzone a drag target might be dropped into
- this.dropElement = null; // the element at the time of checking
- this.prevDropTarget = null; // the dropzone that was recently dragged away from
- this.prevDropElement = null; // the element at the time of checking
-
- this.prepared = { // action that's ready to be fired on next move event
- name : null,
- axis : null,
- edges: null
- };
-
- this.matches = []; // all selectors that are matched by target element
- this.matchElements = []; // corresponding elements
-
- this.inertiaStatus = {
- active : false,
- smoothEnd : false,
- ending : false,
-
- startEvent: null,
- upCoords: {},
-
- xe: 0, ye: 0,
- sx: 0, sy: 0,
-
- t0: 0,
- vx0: 0, vys: 0,
- duration: 0,
-
- resumeDx: 0,
- resumeDy: 0,
-
- lambda_v0: 0,
- one_ve_v0: 0,
- i : null
- };
-
- if (isFunction(Function.prototype.bind)) {
- this.boundInertiaFrame = this.inertiaFrame.bind(this);
- this.boundSmoothEndFrame = this.smoothEndFrame.bind(this);
- }
- else {
- var that = this;
-
- this.boundInertiaFrame = function () { return that.inertiaFrame(); };
- this.boundSmoothEndFrame = function () { return that.smoothEndFrame(); };
- }
-
- this.activeDrops = {
- dropzones: [], // the dropzones that are mentioned below
- elements : [], // elements of dropzones that accept the target draggable
- rects : [] // the rects of the elements mentioned above
- };
-
- // keep track of added pointers
- this.pointers = [];
- this.pointerIds = [];
- this.downTargets = [];
- this.downTimes = [];
- this.holdTimers = [];
-
- // Previous native pointer move event coordinates
- this.prevCoords = {
- page : { x: 0, y: 0 },
- client : { x: 0, y: 0 },
- timeStamp: 0
- };
- // current native pointer move event coordinates
- this.curCoords = {
- page : { x: 0, y: 0 },
- client : { x: 0, y: 0 },
- timeStamp: 0
- };
-
- // Starting InteractEvent pointer coordinates
- this.startCoords = {
- page : { x: 0, y: 0 },
- client : { x: 0, y: 0 },
- timeStamp: 0
- };
-
- // Change in coordinates and time of the pointer
- this.pointerDelta = {
- page : { x: 0, y: 0, vx: 0, vy: 0, speed: 0 },
- client : { x: 0, y: 0, vx: 0, vy: 0, speed: 0 },
- timeStamp: 0
- };
-
- this.downEvent = null; // pointerdown/mousedown/touchstart event
- this.downPointer = {};
-
- this._eventTarget = null;
- this._curEventTarget = null;
-
- this.prevEvent = null; // previous action event
- this.tapTime = 0; // time of the most recent tap event
- this.prevTap = null;
-
- this.startOffset = { left: 0, right: 0, top: 0, bottom: 0 };
- this.restrictOffset = { left: 0, right: 0, top: 0, bottom: 0 };
- this.snapOffsets = [];
-
- this.gesture = {
- start: { x: 0, y: 0 },
-
- startDistance: 0, // distance between two touches of touchStart
- prevDistance : 0,
- distance : 0,
-
- scale: 1, // gesture.distance / gesture.startDistance
-
- startAngle: 0, // angle of line joining two touches
- prevAngle : 0 // angle of the previous gesture event
- };
-
- this.snapStatus = {
- x : 0, y : 0,
- dx : 0, dy : 0,
- realX : 0, realY : 0,
- snappedX: 0, snappedY: 0,
- targets : [],
- locked : false,
- changed : false
- };
-
- this.restrictStatus = {
- dx : 0, dy : 0,
- restrictedX: 0, restrictedY: 0,
- snap : null,
- restricted : false,
- changed : false
- };
-
- this.restrictStatus.snap = this.snapStatus;
-
- this.pointerIsDown = false;
- this.pointerWasMoved = false;
- this.gesturing = false;
- this.dragging = false;
- this.resizing = false;
- this.resizeAxes = 'xy';
-
- this.mouse = false;
-
- interactions.push(this);
- }
-
- Interaction.prototype = {
- getPageXY : function (pointer, xy) { return getPageXY(pointer, xy, this); },
- getClientXY: function (pointer, xy) { return getClientXY(pointer, xy, this); },
- setEventXY : function (target, ptr) { return setEventXY(target, ptr, this); },
-
- pointerOver: function (pointer, event, eventTarget) {
- if (this.prepared.name || !this.mouse) { return; }
-
- var curMatches = [],
- curMatchElements = [],
- prevTargetElement = this.element;
-
- this.addPointer(pointer);
-
- if (this.target
- && (testIgnore(this.target, this.element, eventTarget)
- || !testAllow(this.target, this.element, eventTarget))) {
- // if the eventTarget should be ignored or shouldn't be allowed
- // clear the previous target
- this.target = null;
- this.element = null;
- this.matches = [];
- this.matchElements = [];
- }
-
- var elementInteractable = interactables.get(eventTarget),
- elementAction = (elementInteractable
- && !testIgnore(elementInteractable, eventTarget, eventTarget)
- && testAllow(elementInteractable, eventTarget, eventTarget)
- && validateAction(
- elementInteractable.getAction(pointer, event, this, eventTarget),
- elementInteractable));
-
- if (elementAction && !withinInteractionLimit(elementInteractable, eventTarget, elementAction)) {
- elementAction = null;
- }
-
- function pushCurMatches (interactable, selector) {
- if (interactable
- && inContext(interactable, eventTarget)
- && !testIgnore(interactable, eventTarget, eventTarget)
- && testAllow(interactable, eventTarget, eventTarget)
- && matchesSelector(eventTarget, selector)) {
-
- curMatches.push(interactable);
- curMatchElements.push(eventTarget);
- }
- }
-
- if (elementAction) {
- this.target = elementInteractable;
- this.element = eventTarget;
- this.matches = [];
- this.matchElements = [];
- }
- else {
- interactables.forEachSelector(pushCurMatches);
-
- if (this.validateSelector(pointer, event, curMatches, curMatchElements)) {
- this.matches = curMatches;
- this.matchElements = curMatchElements;
-
- this.pointerHover(pointer, event, this.matches, this.matchElements);
- events.add(eventTarget,
- supportsPointerEvent? pEventTypes.move : 'mousemove',
- listeners.pointerHover);
- }
- else if (this.target) {
- if (nodeContains(prevTargetElement, eventTarget)) {
- this.pointerHover(pointer, event, this.matches, this.matchElements);
- events.add(this.element,
- supportsPointerEvent? pEventTypes.move : 'mousemove',
- listeners.pointerHover);
- }
- else {
- this.target = null;
- this.element = null;
- this.matches = [];
- this.matchElements = [];
- }
- }
- }
- },
-
- // Check what action would be performed on pointerMove target if a mouse
- // button were pressed and change the cursor accordingly
- pointerHover: function (pointer, event, eventTarget, curEventTarget, matches, matchElements) {
- var target = this.target;
-
- if (!this.prepared.name && this.mouse) {
-
- var action;
-
- // update pointer coords for defaultActionChecker to use
- this.setEventXY(this.curCoords, [pointer]);
-
- if (matches) {
- action = this.validateSelector(pointer, event, matches, matchElements);
- }
- else if (target) {
- action = validateAction(target.getAction(this.pointers[0], event, this, this.element), this.target);
- }
-
- if (target && target.options.styleCursor) {
- if (action) {
- target._doc.documentElement.style.cursor = getActionCursor(action);
- }
- else {
- target._doc.documentElement.style.cursor = '';
- }
- }
- }
- else if (this.prepared.name) {
- this.checkAndPreventDefault(event, target, this.element);
- }
- },
-
- pointerOut: function (pointer, event, eventTarget) {
- if (this.prepared.name) { return; }
-
- // Remove temporary event listeners for selector Interactables
- if (!interactables.get(eventTarget)) {
- events.remove(eventTarget,
- supportsPointerEvent? pEventTypes.move : 'mousemove',
- listeners.pointerHover);
- }
-
- if (this.target && this.target.options.styleCursor && !this.interacting()) {
- this.target._doc.documentElement.style.cursor = '';
- }
- },
-
- selectorDown: function (pointer, event, eventTarget, curEventTarget) {
- var that = this,
- // copy event to be used in timeout for IE8
- eventCopy = events.useAttachEvent? extend({}, event) : event,
- element = eventTarget,
- pointerIndex = this.addPointer(pointer),
- action;
-
- this.holdTimers[pointerIndex] = setTimeout(function () {
- that.pointerHold(events.useAttachEvent? eventCopy : pointer, eventCopy, eventTarget, curEventTarget);
- }, defaultOptions._holdDuration);
-
- this.pointerIsDown = true;
-
- // Check if the down event hits the current inertia target
- if (this.inertiaStatus.active && this.target.selector) {
- // climb up the DOM tree from the event target
- while (isElement(element)) {
-
- // if this element is the current inertia target element
- if (element === this.element
- // and the prospective action is the same as the ongoing one
- && validateAction(this.target.getAction(pointer, event, this, this.element), this.target).name === this.prepared.name) {
-
- // stop inertia so that the next move will be a normal one
- cancelFrame(this.inertiaStatus.i);
- this.inertiaStatus.active = false;
-
- this.collectEventTargets(pointer, event, eventTarget, 'down');
- return;
- }
- element = parentElement(element);
- }
- }
-
- // do nothing if interacting
- if (this.interacting()) {
- this.collectEventTargets(pointer, event, eventTarget, 'down');
- return;
- }
-
- function pushMatches (interactable, selector, context) {
- var elements = ie8MatchesSelector
- ? context.querySelectorAll(selector)
- : undefined;
-
- if (inContext(interactable, element)
- && !testIgnore(interactable, element, eventTarget)
- && testAllow(interactable, element, eventTarget)
- && matchesSelector(element, selector, elements)) {
-
- that.matches.push(interactable);
- that.matchElements.push(element);
- }
- }
-
- // update pointer coords for defaultActionChecker to use
- this.setEventXY(this.curCoords, [pointer]);
- this.downEvent = event;
-
- while (isElement(element) && !action) {
- this.matches = [];
- this.matchElements = [];
-
- interactables.forEachSelector(pushMatches);
-
- action = this.validateSelector(pointer, event, this.matches, this.matchElements);
- element = parentElement(element);
- }
-
- if (action) {
- this.prepared.name = action.name;
- this.prepared.axis = action.axis;
- this.prepared.edges = action.edges;
-
- this.collectEventTargets(pointer, event, eventTarget, 'down');
-
- return this.pointerDown(pointer, event, eventTarget, curEventTarget, action);
- }
- else {
- // do these now since pointerDown isn't being called from here
- this.downTimes[pointerIndex] = new Date().getTime();
- this.downTargets[pointerIndex] = eventTarget;
- pointerExtend(this.downPointer, pointer);
-
- copyCoords(this.prevCoords, this.curCoords);
- this.pointerWasMoved = false;
- }
-
- this.collectEventTargets(pointer, event, eventTarget, 'down');
- },
-
- // Determine action to be performed on next pointerMove and add appropriate
- // style and event Listeners
- pointerDown: function (pointer, event, eventTarget, curEventTarget, forceAction) {
- if (!forceAction && !this.inertiaStatus.active && this.pointerWasMoved && this.prepared.name) {
- this.checkAndPreventDefault(event, this.target, this.element);
-
- return;
- }
-
- this.pointerIsDown = true;
- this.downEvent = event;
-
- var pointerIndex = this.addPointer(pointer),
- action;
-
- // If it is the second touch of a multi-touch gesture, keep the
- // target the same and get a new action if a target was set by the
- // first touch
- if (this.pointerIds.length > 1 && this.target && this.target._element && this.target._element === this.element) {
- var newAction = validateAction(forceAction || this.target.getAction(pointer, event, this, this.element), this.target);
-
- if (withinInteractionLimit(this.target, this.element, newAction)) {
- action = newAction;
- }
-
- this.prepared.name = null;
- }
- // Otherwise, set the target if there is no action prepared
- else if (!this.prepared.name) {
- var interactable = interactables.get(curEventTarget);
-
- if (interactable
- && !testIgnore(interactable, curEventTarget, eventTarget)
- && testAllow(interactable, curEventTarget, eventTarget)
- && (action = validateAction(forceAction || interactable.getAction(pointer, event, this, curEventTarget), interactable, eventTarget))
- && withinInteractionLimit(interactable, curEventTarget, action)) {
- this.target = interactable;
- this.element = curEventTarget;
- }
- }
-
- var target = this.target,
- options = target && target.options;
-
- if (target && (forceAction || !this.prepared.name)) {
- action = action || validateAction(forceAction || target.getAction(pointer, event, this, curEventTarget), target, this.element);
-
- this.setEventXY(this.startCoords, this.pointers);
-
- if (!action) { return; }
-
- if (options.styleCursor) {
- target._doc.documentElement.style.cursor = getActionCursor(action);
- }
-
- this.resizeAxes = action.name === 'resize'? action.axis : null;
-
- if (action === 'gesture' && this.pointerIds.length < 2) {
- action = null;
- }
-
- this.prepared.name = action.name;
- this.prepared.axis = action.axis;
- this.prepared.edges = action.edges;
-
- this.snapStatus.snappedX = this.snapStatus.snappedY =
- this.restrictStatus.restrictedX = this.restrictStatus.restrictedY = NaN;
-
- this.downTimes[pointerIndex] = new Date().getTime();
- this.downTargets[pointerIndex] = eventTarget;
- pointerExtend(this.downPointer, pointer);
-
- copyCoords(this.prevCoords, this.startCoords);
- this.pointerWasMoved = false;
-
- this.checkAndPreventDefault(event, target, this.element);
- }
- // if inertia is active try to resume action
- else if (this.inertiaStatus.active
- && curEventTarget === this.element
- && validateAction(target.getAction(pointer, event, this, this.element), target).name === this.prepared.name) {
-
- cancelFrame(this.inertiaStatus.i);
- this.inertiaStatus.active = false;
-
- this.checkAndPreventDefault(event, target, this.element);
- }
- },
-
- setModifications: function (coords, preEnd) {
- var target = this.target,
- shouldMove = true,
- shouldSnap = checkSnap(target, this.prepared.name) && (!target.options[this.prepared.name].snap.endOnly || preEnd),
- shouldRestrict = checkRestrict(target, this.prepared.name) && (!target.options[this.prepared.name].restrict.endOnly || preEnd);
-
- if (shouldSnap ) { this.setSnapping (coords); } else { this.snapStatus .locked = false; }
- if (shouldRestrict) { this.setRestriction(coords); } else { this.restrictStatus.restricted = false; }
-
- if (shouldSnap && this.snapStatus.locked && !this.snapStatus.changed) {
- shouldMove = shouldRestrict && this.restrictStatus.restricted && this.restrictStatus.changed;
- }
- else if (shouldRestrict && this.restrictStatus.restricted && !this.restrictStatus.changed) {
- shouldMove = false;
- }
-
- return shouldMove;
- },
-
- setStartOffsets: function (action, interactable, element) {
- var rect = interactable.getRect(element),
- origin = getOriginXY(interactable, element),
- snap = interactable.options[this.prepared.name].snap,
- restrict = interactable.options[this.prepared.name].restrict,
- width, height;
-
- if (rect) {
- this.startOffset.left = this.startCoords.page.x - rect.left;
- this.startOffset.top = this.startCoords.page.y - rect.top;
-
- this.startOffset.right = rect.right - this.startCoords.page.x;
- this.startOffset.bottom = rect.bottom - this.startCoords.page.y;
-
- if ('width' in rect) { width = rect.width; }
- else { width = rect.right - rect.left; }
- if ('height' in rect) { height = rect.height; }
- else { height = rect.bottom - rect.top; }
- }
- else {
- this.startOffset.left = this.startOffset.top = this.startOffset.right = this.startOffset.bottom = 0;
- }
-
- this.snapOffsets.splice(0);
-
- var snapOffset = snap && snap.offset === 'startCoords'
- ? {
- x: this.startCoords.page.x - origin.x,
- y: this.startCoords.page.y - origin.y
- }
- : snap && snap.offset || { x: 0, y: 0 };
-
- if (rect && snap && snap.relativePoints && snap.relativePoints.length) {
- for (var i = 0; i < snap.relativePoints.length; i++) {
- this.snapOffsets.push({
- x: this.startOffset.left - (width * snap.relativePoints[i].x) + snapOffset.x,
- y: this.startOffset.top - (height * snap.relativePoints[i].y) + snapOffset.y
- });
- }
- }
- else {
- this.snapOffsets.push(snapOffset);
- }
-
- if (rect && restrict.elementRect) {
- this.restrictOffset.left = this.startOffset.left - (width * restrict.elementRect.left);
- this.restrictOffset.top = this.startOffset.top - (height * restrict.elementRect.top);
-
- this.restrictOffset.right = this.startOffset.right - (width * (1 - restrict.elementRect.right));
- this.restrictOffset.bottom = this.startOffset.bottom - (height * (1 - restrict.elementRect.bottom));
- }
- else {
- this.restrictOffset.left = this.restrictOffset.top = this.restrictOffset.right = this.restrictOffset.bottom = 0;
- }
- },
-
- /*\
- * Interaction.start
- [ method ]
- *
- * Start an action with the given Interactable and Element as tartgets. The
- * action must be enabled for the target Interactable and an appropriate number
- * of pointers must be held down – 1 for drag/resize, 2 for gesture.
- *
- * Use it with `interactable.<action>able({ manualStart: false })` to always
- * [start actions manually](https://github.com/taye/interact.js/issues/114)
- *
- - action (object) The action to be performed - drag, resize, etc.
- - interactable (Interactable) The Interactable to target
- - element (Element) The DOM Element to target
- = (object) interact
- **
- | interact(target)
- | .draggable({
- | // disable the default drag start by down->move
- | manualStart: true
- | })
- | // start dragging after the user holds the pointer down
- | .on('hold', function (event) {
- | var interaction = event.interaction;
- |
- | if (!interaction.interacting()) {
- | interaction.start({ name: 'drag' },
- | event.interactable,
- | event.currentTarget);
- | }
- | });
- \*/
- start: function (action, interactable, element) {
- if (this.interacting()
- || !this.pointerIsDown
- || this.pointerIds.length < (action.name === 'gesture'? 2 : 1)) {
- return;
- }
-
- // if this interaction had been removed after stopping
- // add it back
- if (indexOf(interactions, this) === -1) {
- interactions.push(this);
- }
-
- // set the startCoords if there was no prepared action
- if (!this.prepared.name) {
- this.setEventXY(this.startCoords, this.pointers);
- }
-
- this.prepared.name = action.name;
- this.prepared.axis = action.axis;
- this.prepared.edges = action.edges;
- this.target = interactable;
- this.element = element;
-
- this.setStartOffsets(action.name, interactable, element);
- this.setModifications(this.startCoords.page);
-
- this.prevEvent = this[this.prepared.name + 'Start'](this.downEvent);
- },
-
- pointerMove: function (pointer, event, eventTarget, curEventTarget, preEnd) {
- if (this.inertiaStatus.active) {
- var pageUp = this.inertiaStatus.upCoords.page;
- var clientUp = this.inertiaStatus.upCoords.client;
-
- var inertiaPosition = {
- pageX : pageUp.x + this.inertiaStatus.sx,
- pageY : pageUp.y + this.inertiaStatus.sy,
- clientX: clientUp.x + this.inertiaStatus.sx,
- clientY: clientUp.y + this.inertiaStatus.sy
- };
-
- this.setEventXY(this.curCoords, [inertiaPosition]);
- }
- else {
- this.recordPointer(pointer);
- this.setEventXY(this.curCoords, this.pointers);
- }
-
- var duplicateMove = (this.curCoords.page.x === this.prevCoords.page.x
- && this.curCoords.page.y === this.prevCoords.page.y
- && this.curCoords.client.x === this.prevCoords.client.x
- && this.curCoords.client.y === this.prevCoords.client.y);
-
- var dx, dy,
- pointerIndex = this.mouse? 0 : indexOf(this.pointerIds, getPointerId(pointer));
-
- // register movement greater than pointerMoveTolerance
- if (this.pointerIsDown && !this.pointerWasMoved) {
- dx = this.curCoords.client.x - this.startCoords.client.x;
- dy = this.curCoords.client.y - this.startCoords.client.y;
-
- this.pointerWasMoved = hypot(dx, dy) > pointerMoveTolerance;
- }
-
- if (!duplicateMove && (!this.pointerIsDown || this.pointerWasMoved)) {
- if (this.pointerIsDown) {
- clearTimeout(this.holdTimers[pointerIndex]);
- }
-
- this.collectEventTargets(pointer, event, eventTarget, 'move');
- }
-
- if (!this.pointerIsDown) { return; }
-
- if (duplicateMove && this.pointerWasMoved && !preEnd) {
- this.checkAndPreventDefault(event, this.target, this.element);
- return;
- }
-
- // set pointer coordinate, time changes and speeds
- setEventDeltas(this.pointerDelta, this.prevCoords, this.curCoords);
-
- if (!this.prepared.name) { return; }
-
- if (this.pointerWasMoved
- // ignore movement while inertia is active
- && (!this.inertiaStatus.active || (pointer instanceof InteractEvent && /inertiastart/.test(pointer.type)))) {
-
- // if just starting an action, calculate the pointer speed now
- if (!this.interacting()) {
- setEventDeltas(this.pointerDelta, this.prevCoords, this.curCoords);
-
- // check if a drag is in the correct axis
- if (this.prepared.name === 'drag') {
- var absX = Math.abs(dx),
- absY = Math.abs(dy),
- targetAxis = this.target.options.drag.axis,
- axis = (absX > absY ? 'x' : absX < absY ? 'y' : 'xy');
-
- // if the movement isn't in the axis of the interactable
- if (axis !== 'xy' && targetAxis !== 'xy' && targetAxis !== axis) {
- // cancel the prepared action
- this.prepared.name = null;
-
- // then try to get a drag from another ineractable
-
- var element = eventTarget;
-
- // check element interactables
- while (isElement(element)) {
- var elementInteractable = interactables.get(element);
-
- if (elementInteractable
- && elementInteractable !== this.target
- && !elementInteractable.options.drag.manualStart
- && elementInteractable.getAction(this.downPointer, this.downEvent, this, element).name === 'drag'
- && checkAxis(axis, elementInteractable)) {
-
- this.prepared.name = 'drag';
- this.target = elementInteractable;
- this.element = element;
- break;
- }
-
- element = parentElement(element);
- }
-
- // if there's no drag from element interactables,
- // check the selector interactables
- if (!this.prepared.name) {
- var thisInteraction = this;
-
- var getDraggable = function (interactable, selector, context) {
- var elements = ie8MatchesSelector
- ? context.querySelectorAll(selector)
- : undefined;
-
- if (interactable === thisInteraction.target) { return; }
-
- if (inContext(interactable, eventTarget)
- && !interactable.options.drag.manualStart
- && !testIgnore(interactable, element, eventTarget)
- && testAllow(interactable, element, eventTarget)
- && matchesSelector(element, selector, elements)
- && interactable.getAction(thisInteraction.downPointer, thisInteraction.downEvent, thisInteraction, element).name === 'drag'
- && checkAxis(axis, interactable)
- && withinInteractionLimit(interactable, element, 'drag')) {
-
- return interactable;
- }
- };
-
- element = eventTarget;
-
- while (isElement(element)) {
- var selectorInteractable = interactables.forEachSelector(getDraggable);
-
- if (selectorInteractable) {
- this.prepared.name = 'drag';
- this.target = selectorInteractable;
- this.element = element;
- break;
- }
-
- element = parentElement(element);
- }
- }
- }
- }
- }
-
- var starting = !!this.prepared.name && !this.interacting();
-
- if (starting
- && (this.target.options[this.prepared.name].manualStart
- || !withinInteractionLimit(this.target, this.element, this.prepared))) {
- this.stop(event);
- return;
- }
-
- if (this.prepared.name && this.target) {
- if (starting) {
- this.start(this.prepared, this.target, this.element);
- }
-
- var shouldMove = this.setModifications(this.curCoords.page, preEnd);
-
- // move if snapping or restriction doesn't prevent it
- if (shouldMove || starting) {
- this.prevEvent = this[this.prepared.name + 'Move'](event);
- }
-
- this.checkAndPreventDefault(event, this.target, this.element);
- }
- }
-
- copyCoords(this.prevCoords, this.curCoords);
-
- if (this.dragging || this.resizing) {
- this.autoScrollMove(pointer);
- }
- },
-
- dragStart: function (event) {
- var dragEvent = new InteractEvent(this, event, 'drag', 'start', this.element);
-
- this.dragging = true;
- this.target.fire(dragEvent);
-
- // reset active dropzones
- this.activeDrops.dropzones = [];
- this.activeDrops.elements = [];
- this.activeDrops.rects = [];
-
- if (!this.dynamicDrop) {
- this.setActiveDrops(this.element);
- }
-
- var dropEvents = this.getDropEvents(event, dragEvent);
-
- if (dropEvents.activate) {
- this.fireActiveDrops(dropEvents.activate);
- }
-
- return dragEvent;
- },
-
- dragMove: function (event) {
- var target = this.target,
- dragEvent = new InteractEvent(this, event, 'drag', 'move', this.element),
- draggableElement = this.element,
- drop = this.getDrop(dragEvent, event, draggableElement);
-
- this.dropTarget = drop.dropzone;
- this.dropElement = drop.element;
-
- var dropEvents = this.getDropEvents(event, dragEvent);
-
- target.fire(dragEvent);
-
- if (dropEvents.leave) { this.prevDropTarget.fire(dropEvents.leave); }
- if (dropEvents.enter) { this.dropTarget.fire(dropEvents.enter); }
- if (dropEvents.move ) { this.dropTarget.fire(dropEvents.move ); }
-
- this.prevDropTarget = this.dropTarget;
- this.prevDropElement = this.dropElement;
-
- return dragEvent;
- },
-
- resizeStart: function (event) {
- var resizeEvent = new InteractEvent(this, event, 'resize', 'start', this.element);
-
- if (this.prepared.edges) {
- var startRect = this.target.getRect(this.element);
-
- /*
- * When using the `resizable.square` or `resizable.preserveAspectRatio` options, resizing from one edge
- * will affect another. E.g. with `resizable.square`, resizing to make the right edge larger will make
- * the bottom edge larger by the same amount. We call these 'linked' edges. Any linked edges will depend
- * on the active edges and the edge being interacted with.
- */
- if (this.target.options.resize.square || this.target.options.resize.preserveAspectRatio) {
- var linkedEdges = extend({}, this.prepared.edges);
-
- linkedEdges.top = linkedEdges.top || (linkedEdges.left && !linkedEdges.bottom);
- linkedEdges.left = linkedEdges.left || (linkedEdges.top && !linkedEdges.right );
- linkedEdges.bottom = linkedEdges.bottom || (linkedEdges.right && !linkedEdges.top );
- linkedEdges.right = linkedEdges.right || (linkedEdges.bottom && !linkedEdges.left );
-
- this.prepared._linkedEdges = linkedEdges;
- }
- else {
- this.prepared._linkedEdges = null;
- }
-
- // if using `resizable.preserveAspectRatio` option, record aspect ratio at the start of the resize
- if (this.target.options.resize.preserveAspectRatio) {
- this.resizeStartAspectRatio = startRect.width / startRect.height;
- }
-
- this.resizeRects = {
- start : startRect,
- current : extend({}, startRect),
- restricted: extend({}, startRect),
- previous : extend({}, startRect),
- delta : {
- left: 0, right : 0, width : 0,
- top : 0, bottom: 0, height: 0
- }
- };
-
- resizeEvent.rect = this.resizeRects.restricted;
- resizeEvent.deltaRect = this.resizeRects.delta;
- }
-
- this.target.fire(resizeEvent);
-
- this.resizing = true;
-
- return resizeEvent;
- },
-
- resizeMove: function (event) {
- var resizeEvent = new InteractEvent(this, event, 'resize', 'move', this.element);
-
- var edges = this.prepared.edges,
- invert = this.target.options.resize.invert,
- invertible = invert === 'reposition' || invert === 'negate';
-
- if (edges) {
- var dx = resizeEvent.dx,
- dy = resizeEvent.dy,
-
- start = this.resizeRects.start,
- current = this.resizeRects.current,
- restricted = this.resizeRects.restricted,
- delta = this.resizeRects.delta,
- previous = extend(this.resizeRects.previous, restricted),
-
- originalEdges = edges;
-
- // `resize.preserveAspectRatio` takes precedence over `resize.square`
- if (this.target.options.resize.preserveAspectRatio) {
- var resizeStartAspectRatio = this.resizeStartAspectRatio;
-
- edges = this.prepared._linkedEdges;
-
- if ((originalEdges.left && originalEdges.bottom)
- || (originalEdges.right && originalEdges.top)) {
- dy = -dx / resizeStartAspectRatio;
- }
- else if (originalEdges.left || originalEdges.right) { dy = dx / resizeStartAspectRatio; }
- else if (originalEdges.top || originalEdges.bottom) { dx = dy * resizeStartAspectRatio; }
- }
- else if (this.target.options.resize.square) {
- edges = this.prepared._linkedEdges;
-
- if ((originalEdges.left && originalEdges.bottom)
- || (originalEdges.right && originalEdges.top)) {
- dy = -dx;
- }
- else if (originalEdges.left || originalEdges.right) { dy = dx; }
- else if (originalEdges.top || originalEdges.bottom) { dx = dy; }
- }
-
- // update the 'current' rect without modifications
- if (edges.top ) { current.top += dy; }
- if (edges.bottom) { current.bottom += dy; }
- if (edges.left ) { current.left += dx; }
- if (edges.right ) { current.right += dx; }
-
- if (invertible) {
- // if invertible, copy the current rect
- extend(restricted, current);
-
- if (invert === 'reposition') {
- // swap edge values if necessary to keep width/height positive
- var swap;
-
- if (restricted.top > restricted.bottom) {
- swap = restricted.top;
-
- restricted.top = restricted.bottom;
- restricted.bottom = swap;
- }
- if (restricted.left > restricted.right) {
- swap = restricted.left;
-
- restricted.left = restricted.right;
- restricted.right = swap;
- }
- }
- }
- else {
- // if not invertible, restrict to minimum of 0x0 rect
- restricted.top = Math.min(current.top, start.bottom);
- restricted.bottom = Math.max(current.bottom, start.top);
- restricted.left = Math.min(current.left, start.right);
- restricted.right = Math.max(current.right, start.left);
- }
-
- restricted.width = restricted.right - restricted.left;
- restricted.height = restricted.bottom - restricted.top ;
-
- for (var edge in restricted) {
- delta[edge] = restricted[edge] - previous[edge];
- }
-
- resizeEvent.edges = this.prepared.edges;
- resizeEvent.rect = restricted;
- resizeEvent.deltaRect = delta;
- }
-
- this.target.fire(resizeEvent);
-
- return resizeEvent;
- },
-
- gestureStart: function (event) {
- var gestureEvent = new InteractEvent(this, event, 'gesture', 'start', this.element);
-
- gestureEvent.ds = 0;
-
- this.gesture.startDistance = this.gesture.prevDistance = gestureEvent.distance;
- this.gesture.startAngle = this.gesture.prevAngle = gestureEvent.angle;
- this.gesture.scale = 1;
-
- this.gesturing = true;
-
- this.target.fire(gestureEvent);
-
- return gestureEvent;
- },
-
- gestureMove: function (event) {
- if (!this.pointerIds.length) {
- return this.prevEvent;
- }
-
- var gestureEvent;
-
- gestureEvent = new InteractEvent(this, event, 'gesture', 'move', this.element);
- gestureEvent.ds = gestureEvent.scale - this.gesture.scale;
-
- this.target.fire(gestureEvent);
-
- this.gesture.prevAngle = gestureEvent.angle;
- this.gesture.prevDistance = gestureEvent.distance;
-
- if (gestureEvent.scale !== Infinity &&
- gestureEvent.scale !== null &&
- gestureEvent.scale !== undefined &&
- !isNaN(gestureEvent.scale)) {
-
- this.gesture.scale = gestureEvent.scale;
- }
-
- return gestureEvent;
- },
-
- pointerHold: function (pointer, event, eventTarget) {
- this.collectEventTargets(pointer, event, eventTarget, 'hold');
- },
-
- pointerUp: function (pointer, event, eventTarget, curEventTarget) {
- var pointerIndex = this.mouse? 0 : indexOf(this.pointerIds, getPointerId(pointer));
-
- clearTimeout(this.holdTimers[pointerIndex]);
-
- this.collectEventTargets(pointer, event, eventTarget, 'up' );
- this.collectEventTargets(pointer, event, eventTarget, 'tap');
-
- this.pointerEnd(pointer, event, eventTarget, curEventTarget);
-
- this.removePointer(pointer);
- },
-
- pointerCancel: function (pointer, event, eventTarget, curEventTarget) {
- var pointerIndex = this.mouse? 0 : indexOf(this.pointerIds, getPointerId(pointer));
-
- clearTimeout(this.holdTimers[pointerIndex]);
-
- this.collectEventTargets(pointer, event, eventTarget, 'cancel');
- this.pointerEnd(pointer, event, eventTarget, curEventTarget);
-
- this.removePointer(pointer);
- },
-
- // http://www.quirksmode.org/dom/events/click.html
- // >Events leading to dblclick
- //
- // IE8 doesn't fire down event before dblclick.
- // This workaround tries to fire a tap and doubletap after dblclick
- ie8Dblclick: function (pointer, event, eventTarget) {
- if (this.prevTap
- && event.clientX === this.prevTap.clientX
- && event.clientY === this.prevTap.clientY
- && eventTarget === this.prevTap.target) {
-
- this.downTargets[0] = eventTarget;
- this.downTimes[0] = new Date().getTime();
- this.collectEventTargets(pointer, event, eventTarget, 'tap');
- }
- },
-
- // End interact move events and stop auto-scroll unless inertia is enabled
- pointerEnd: function (pointer, event, eventTarget, curEventTarget) {
- var endEvent,
- target = this.target,
- options = target && target.options,
- inertiaOptions = options && this.prepared.name && options[this.prepared.name].inertia,
- inertiaStatus = this.inertiaStatus;
-
- if (this.interacting()) {
-
- if (inertiaStatus.active && !inertiaStatus.ending) { return; }
-
- var pointerSpeed,
- now = new Date().getTime(),
- inertiaPossible = false,
- inertia = false,
- smoothEnd = false,
- endSnap = checkSnap(target, this.prepared.name) && options[this.prepared.name].snap.endOnly,
- endRestrict = checkRestrict(target, this.prepared.name) && options[this.prepared.name].restrict.endOnly,
- dx = 0,
- dy = 0,
- startEvent;
-
- if (this.dragging) {
- if (options.drag.axis === 'x' ) { pointerSpeed = Math.abs(this.pointerDelta.client.vx); }
- else if (options.drag.axis === 'y' ) { pointerSpeed = Math.abs(this.pointerDelta.client.vy); }
- else /*options.drag.axis === 'xy'*/{ pointerSpeed = this.pointerDelta.client.speed; }
- }
- else {
- pointerSpeed = this.pointerDelta.client.speed;
- }
-
- // check if inertia should be started
- inertiaPossible = (inertiaOptions && inertiaOptions.enabled
- && this.prepared.name !== 'gesture'
- && event !== inertiaStatus.startEvent);
-
- inertia = (inertiaPossible
- && (now - this.curCoords.timeStamp) < 50
- && pointerSpeed > inertiaOptions.minSpeed
- && pointerSpeed > inertiaOptions.endSpeed);
-
- if (inertiaPossible && !inertia && (endSnap || endRestrict)) {
-
- var snapRestrict = {};
-
- snapRestrict.snap = snapRestrict.restrict = snapRestrict;
-
- if (endSnap) {
- this.setSnapping(this.curCoords.page, snapRestrict);
- if (snapRestrict.locked) {
- dx += snapRestrict.dx;
- dy += snapRestrict.dy;
- }
- }
-
- if (endRestrict) {
- this.setRestriction(this.curCoords.page, snapRestrict);
- if (snapRestrict.restricted) {
- dx += snapRestrict.dx;
- dy += snapRestrict.dy;
- }
- }
-
- if (dx || dy) {
- smoothEnd = true;
- }
- }
-
- if (inertia || smoothEnd) {
- copyCoords(inertiaStatus.upCoords, this.curCoords);
-
- this.pointers[0] = inertiaStatus.startEvent = startEvent =
- new InteractEvent(this, event, this.prepared.name, 'inertiastart', this.element);
-
- inertiaStatus.t0 = now;
-
- target.fire(inertiaStatus.startEvent);
-
- if (inertia) {
- inertiaStatus.vx0 = this.pointerDelta.client.vx;
- inertiaStatus.vy0 = this.pointerDelta.client.vy;
- inertiaStatus.v0 = pointerSpeed;
-
- this.calcInertia(inertiaStatus);
-
- var page = extend({}, this.curCoords.page),
- origin = getOriginXY(target, this.element),
- statusObject;
-
- page.x = page.x + inertiaStatus.xe - origin.x;
- page.y = page.y + inertiaStatus.ye - origin.y;
-
- statusObject = {
- useStatusXY: true,
- x: page.x,
- y: page.y,
- dx: 0,
- dy: 0,
- snap: null
- };
-
- statusObject.snap = statusObject;
-
- dx = dy = 0;
-
- if (endSnap) {
- var snap = this.setSnapping(this.curCoords.page, statusObject);
-
- if (snap.locked) {
- dx += snap.dx;
- dy += snap.dy;
- }
- }
-
- if (endRestrict) {
- var restrict = this.setRestriction(this.curCoords.page, statusObject);
-
- if (restrict.restricted) {
- dx += restrict.dx;
- dy += restrict.dy;
- }
- }
-
- inertiaStatus.modifiedXe += dx;
- inertiaStatus.modifiedYe += dy;
-
- inertiaStatus.i = reqFrame(this.boundInertiaFrame);
- }
- else {
- inertiaStatus.smoothEnd = true;
- inertiaStatus.xe = dx;
- inertiaStatus.ye = dy;
-
- inertiaStatus.sx = inertiaStatus.sy = 0;
-
- inertiaStatus.i = reqFrame(this.boundSmoothEndFrame);
- }
-
- inertiaStatus.active = true;
- return;
- }
-
- if (endSnap || endRestrict) {
- // fire a move event at the snapped coordinates
- this.pointerMove(pointer, event, eventTarget, curEventTarget, true);
- }
- }
-
- if (this.dragging) {
- endEvent = new InteractEvent(this, event, 'drag', 'end', this.element);
-
- var draggableElement = this.element,
- drop = this.getDrop(endEvent, event, draggableElement);
-
- this.dropTarget = drop.dropzone;
- this.dropElement = drop.element;
-
- var dropEvents = this.getDropEvents(event, endEvent);
-
- if (dropEvents.leave) { this.prevDropTarget.fire(dropEvents.leave); }
- if (dropEvents.enter) { this.dropTarget.fire(dropEvents.enter); }
- if (dropEvents.drop ) { this.dropTarget.fire(dropEvents.drop ); }
- if (dropEvents.deactivate) {
- this.fireActiveDrops(dropEvents.deactivate);
- }
-
- target.fire(endEvent);
- }
- else if (this.resizing) {
- endEvent = new InteractEvent(this, event, 'resize', 'end', this.element);
- target.fire(endEvent);
- }
- else if (this.gesturing) {
- endEvent = new InteractEvent(this, event, 'gesture', 'end', this.element);
- target.fire(endEvent);
- }
-
- this.stop(event);
- },
-
- collectDrops: function (element) {
- var drops = [],
- elements = [],
- i;
-
- element = element || this.element;
-
- // collect all dropzones and their elements which qualify for a drop
- for (i = 0; i < interactables.length; i++) {
- if (!interactables[i].options.drop.enabled) { continue; }
-
- var current = interactables[i],
- accept = current.options.drop.accept;
-
- // test the draggable element against the dropzone's accept setting
- if ((isElement(accept) && accept !== element)
- || (isString(accept)
- && !matchesSelector(element, accept))) {
-
- continue;
- }
-
- // query for new elements if necessary
- var dropElements = current.selector? current._context.querySelectorAll(current.selector) : [current._element];
-
- for (var j = 0, len = dropElements.length; j < len; j++) {
- var currentElement = dropElements[j];
-
- if (currentElement === element) {
- continue;
- }
-
- drops.push(current);
- elements.push(currentElement);
- }
- }
-
- return {
- dropzones: drops,
- elements: elements
- };
- },
-
- fireActiveDrops: function (event) {
- var i,
- current,
- currentElement,
- prevElement;
-
- // loop through all active dropzones and trigger event
- for (i = 0; i < this.activeDrops.dropzones.length; i++) {
- current = this.activeDrops.dropzones[i];
- currentElement = this.activeDrops.elements [i];
-
- // prevent trigger of duplicate events on same element
- if (currentElement !== prevElement) {
- // set current element as event target
- event.target = currentElement;
- current.fire(event);
- }
- prevElement = currentElement;
- }
- },
-
- // Collect a new set of possible drops and save them in activeDrops.
- // setActiveDrops should always be called when a drag has just started or a
- // drag event happens while dynamicDrop is true
- setActiveDrops: function (dragElement) {
- // get dropzones and their elements that could receive the draggable
- var possibleDrops = this.collectDrops(dragElement, true);
-
- this.activeDrops.dropzones = possibleDrops.dropzones;
- this.activeDrops.elements = possibleDrops.elements;
- this.activeDrops.rects = [];
-
- for (var i = 0; i < this.activeDrops.dropzones.length; i++) {
- this.activeDrops.rects[i] = this.activeDrops.dropzones[i].getRect(this.activeDrops.elements[i]);
- }
- },
-
- getDrop: function (dragEvent, event, dragElement) {
- var validDrops = [];
-
- if (dynamicDrop) {
- this.setActiveDrops(dragElement);
- }
-
- // collect all dropzones and their elements which qualify for a drop
- for (var j = 0; j < this.activeDrops.dropzones.length; j++) {
- var current = this.activeDrops.dropzones[j],
- currentElement = this.activeDrops.elements [j],
- rect = this.activeDrops.rects [j];
-
- validDrops.push(current.dropCheck(dragEvent, event, this.target, dragElement, currentElement, rect)
- ? currentElement
- : null);
- }
-
- // get the most appropriate dropzone based on DOM depth and order
- var dropIndex = indexOfDeepestElement(validDrops),
- dropzone = this.activeDrops.dropzones[dropIndex] || null,
- element = this.activeDrops.elements [dropIndex] || null;
-
- return {
- dropzone: dropzone,
- element: element
- };
- },
-
- getDropEvents: function (pointerEvent, dragEvent) {
- var dropEvents = {
- enter : null,
- leave : null,
- activate : null,
- deactivate: null,
- move : null,
- drop : null
- };
-
- if (this.dropElement !== this.prevDropElement) {
- // if there was a prevDropTarget, create a dragleave event
- if (this.prevDropTarget) {
- dropEvents.leave = {
- target : this.prevDropElement,
- dropzone : this.prevDropTarget,
- relatedTarget: dragEvent.target,
- draggable : dragEvent.interactable,
- dragEvent : dragEvent,
- interaction : this,
- timeStamp : dragEvent.timeStamp,
- type : 'dragleave'
- };
-
- dragEvent.dragLeave = this.prevDropElement;
- dragEvent.prevDropzone = this.prevDropTarget;
- }
- // if the dropTarget is not null, create a dragenter event
- if (this.dropTarget) {
- dropEvents.enter = {
- target : this.dropElement,
- dropzone : this.dropTarget,
- relatedTarget: dragEvent.target,
- draggable : dragEvent.interactable,
- dragEvent : dragEvent,
- interaction : this,
- timeStamp : dragEvent.timeStamp,
- type : 'dragenter'
- };
-
- dragEvent.dragEnter = this.dropElement;
- dragEvent.dropzone = this.dropTarget;
- }
- }
-
- if (dragEvent.type === 'dragend' && this.dropTarget) {
- dropEvents.drop = {
- target : this.dropElement,
- dropzone : this.dropTarget,
- relatedTarget: dragEvent.target,
- draggable : dragEvent.interactable,
- dragEvent : dragEvent,
- interaction : this,
- timeStamp : dragEvent.timeStamp,
- type : 'drop'
- };
-
- dragEvent.dropzone = this.dropTarget;
- }
- if (dragEvent.type === 'dragstart') {
- dropEvents.activate = {
- target : null,
- dropzone : null,
- relatedTarget: dragEvent.target,
- draggable : dragEvent.interactable,
- dragEvent : dragEvent,
- interaction : this,
- timeStamp : dragEvent.timeStamp,
- type : 'dropactivate'
- };
- }
- if (dragEvent.type === 'dragend') {
- dropEvents.deactivate = {
- target : null,
- dropzone : null,
- relatedTarget: dragEvent.target,
- draggable : dragEvent.interactable,
- dragEvent : dragEvent,
- interaction : this,
- timeStamp : dragEvent.timeStamp,
- type : 'dropdeactivate'
- };
- }
- if (dragEvent.type === 'dragmove' && this.dropTarget) {
- dropEvents.move = {
- target : this.dropElement,
- dropzone : this.dropTarget,
- relatedTarget: dragEvent.target,
- draggable : dragEvent.interactable,
- dragEvent : dragEvent,
- interaction : this,
- dragmove : dragEvent,
- timeStamp : dragEvent.timeStamp,
- type : 'dropmove'
- };
- dragEvent.dropzone = this.dropTarget;
- }
-
- return dropEvents;
- },
-
- currentAction: function () {
- return (this.dragging && 'drag') || (this.resizing && 'resize') || (this.gesturing && 'gesture') || null;
- },
-
- interacting: function () {
- return this.dragging || this.resizing || this.gesturing;
- },
-
- clearTargets: function () {
- this.target = this.element = null;
-
- this.dropTarget = this.dropElement = this.prevDropTarget = this.prevDropElement = null;
- },
-
- stop: function (event) {
- if (this.interacting()) {
- autoScroll.stop();
- this.matches = [];
- this.matchElements = [];
-
- var target = this.target;
-
- if (target.options.styleCursor) {
- target._doc.documentElement.style.cursor = '';
- }
-
- // prevent Default only if were previously interacting
- if (event && isFunction(event.preventDefault)) {
- this.checkAndPreventDefault(event, target, this.element);
- }
-
- if (this.dragging) {
- this.activeDrops.dropzones = this.activeDrops.elements = this.activeDrops.rects = null;
- }
- }
-
- this.clearTargets();
-
- this.pointerIsDown = this.snapStatus.locked = this.dragging = this.resizing = this.gesturing = false;
- this.prepared.name = this.prevEvent = null;
- this.inertiaStatus.resumeDx = this.inertiaStatus.resumeDy = 0;
-
- // remove pointers if their ID isn't in this.pointerIds
- for (var i = 0; i < this.pointers.length; i++) {
- if (indexOf(this.pointerIds, getPointerId(this.pointers[i])) === -1) {
- this.pointers.splice(i, 1);
- }
- }
- },
-
- inertiaFrame: function () {
- var inertiaStatus = this.inertiaStatus,
- options = this.target.options[this.prepared.name].inertia,
- lambda = options.resistance,
- t = new Date().getTime() / 1000 - inertiaStatus.t0;
-
- if (t < inertiaStatus.te) {
-
- var progress = 1 - (Math.exp(-lambda * t) - inertiaStatus.lambda_v0) / inertiaStatus.one_ve_v0;
-
- if (inertiaStatus.modifiedXe === inertiaStatus.xe && inertiaStatus.modifiedYe === inertiaStatus.ye) {
- inertiaStatus.sx = inertiaStatus.xe * progress;
- inertiaStatus.sy = inertiaStatus.ye * progress;
- }
- else {
- var quadPoint = getQuadraticCurvePoint(
- 0, 0,
- inertiaStatus.xe, inertiaStatus.ye,
- inertiaStatus.modifiedXe, inertiaStatus.modifiedYe,
- progress);
-
- inertiaStatus.sx = quadPoint.x;
- inertiaStatus.sy = quadPoint.y;
- }
-
- this.pointerMove(inertiaStatus.startEvent, inertiaStatus.startEvent);
-
- inertiaStatus.i = reqFrame(this.boundInertiaFrame);
- }
- else {
- inertiaStatus.ending = true;
-
- inertiaStatus.sx = inertiaStatus.modifiedXe;
- inertiaStatus.sy = inertiaStatus.modifiedYe;
-
- this.pointerMove(inertiaStatus.startEvent, inertiaStatus.startEvent);
- this.pointerEnd(inertiaStatus.startEvent, inertiaStatus.startEvent);
-
- inertiaStatus.active = inertiaStatus.ending = false;
- }
- },
-
- smoothEndFrame: function () {
- var inertiaStatus = this.inertiaStatus,
- t = new Date().getTime() - inertiaStatus.t0,
- duration = this.target.options[this.prepared.name].inertia.smoothEndDuration;
-
- if (t < duration) {
- inertiaStatus.sx = easeOutQuad(t, 0, inertiaStatus.xe, duration);
- inertiaStatus.sy = easeOutQuad(t, 0, inertiaStatus.ye, duration);
-
- this.pointerMove(inertiaStatus.startEvent, inertiaStatus.startEvent);
-
- inertiaStatus.i = reqFrame(this.boundSmoothEndFrame);
- }
- else {
- inertiaStatus.ending = true;
-
- inertiaStatus.sx = inertiaStatus.xe;
- inertiaStatus.sy = inertiaStatus.ye;
-
- this.pointerMove(inertiaStatus.startEvent, inertiaStatus.startEvent);
- this.pointerEnd(inertiaStatus.startEvent, inertiaStatus.startEvent);
-
- inertiaStatus.smoothEnd =
- inertiaStatus.active = inertiaStatus.ending = false;
- }
- },
-
- addPointer: function (pointer) {
- var id = getPointerId(pointer),
- index = this.mouse? 0 : indexOf(this.pointerIds, id);
-
- if (index === -1) {
- index = this.pointerIds.length;
- }
-
- this.pointerIds[index] = id;
- this.pointers[index] = pointer;
-
- return index;
- },
-
- removePointer: function (pointer) {
- var id = getPointerId(pointer),
- index = this.mouse? 0 : indexOf(this.pointerIds, id);
-
- if (index === -1) { return; }
-
- this.pointers .splice(index, 1);
- this.pointerIds .splice(index, 1);
- this.downTargets.splice(index, 1);
- this.downTimes .splice(index, 1);
- this.holdTimers .splice(index, 1);
- },
-
- recordPointer: function (pointer) {
- var index = this.mouse? 0: indexOf(this.pointerIds, getPointerId(pointer));
-
- if (index === -1) { return; }
-
- this.pointers[index] = pointer;
- },
-
- collectEventTargets: function (pointer, event, eventTarget, eventType) {
- var pointerIndex = this.mouse? 0 : indexOf(this.pointerIds, getPointerId(pointer));
-
- // do not fire a tap event if the pointer was moved before being lifted
- if (eventType === 'tap' && (this.pointerWasMoved
- // or if the pointerup target is different to the pointerdown target
- || !(this.downTargets[pointerIndex] && this.downTargets[pointerIndex] === eventTarget))) {
- return;
- }
-
- var targets = [],
- elements = [],
- element = eventTarget;
-
- function collectSelectors (interactable, selector, context) {
- var els = ie8MatchesSelector
- ? context.querySelectorAll(selector)
- : undefined;
-
- if (interactable._iEvents[eventType]
- && isElement(element)
- && inContext(interactable, element)
- && !testIgnore(interactable, element, eventTarget)
- && testAllow(interactable, element, eventTarget)
- && matchesSelector(element, selector, els)) {
-
- targets.push(interactable);
- elements.push(element);
- }
- }
-
- while (element) {
- if (interact.isSet(element) && interact(element)._iEvents[eventType]) {
- targets.push(interact(element));
- elements.push(element);
- }
-
- interactables.forEachSelector(collectSelectors);
-
- element = parentElement(element);
- }
-
- // create the tap event even if there are no listeners so that
- // doubletap can still be created and fired
- if (targets.length || eventType === 'tap') {
- this.firePointers(pointer, event, eventTarget, targets, elements, eventType);
- }
- },
-
- firePointers: function (pointer, event, eventTarget, targets, elements, eventType) {
- var pointerIndex = this.mouse? 0 : indexOf(this.pointerIds, getPointerId(pointer)),
- pointerEvent = {},
- i,
- // for tap events
- interval, createNewDoubleTap;
-
- // if it's a doubletap then the event properties would have been
- // copied from the tap event and provided as the pointer argument
- if (eventType === 'doubletap') {
- pointerEvent = pointer;
- }
- else {
- pointerExtend(pointerEvent, event);
- if (event !== pointer) {
- pointerExtend(pointerEvent, pointer);
- }
-
- pointerEvent.preventDefault = preventOriginalDefault;
- pointerEvent.stopPropagation = InteractEvent.prototype.stopPropagation;
- pointerEvent.stopImmediatePropagation = InteractEvent.prototype.stopImmediatePropagation;
- pointerEvent.interaction = this;
-
- pointerEvent.timeStamp = new Date().getTime();
- pointerEvent.originalEvent = event;
- pointerEvent.originalPointer = pointer;
- pointerEvent.type = eventType;
- pointerEvent.pointerId = getPointerId(pointer);
- pointerEvent.pointerType = this.mouse? 'mouse' : !supportsPointerEvent? 'touch'
- : isString(pointer.pointerType)
- ? pointer.pointerType
- : [,,'touch', 'pen', 'mouse'][pointer.pointerType];
- }
-
- if (eventType === 'tap') {
- pointerEvent.dt = pointerEvent.timeStamp - this.downTimes[pointerIndex];
-
- interval = pointerEvent.timeStamp - this.tapTime;
- createNewDoubleTap = !!(this.prevTap && this.prevTap.type !== 'doubletap'
- && this.prevTap.target === pointerEvent.target
- && interval < 500);
-
- pointerEvent.double = createNewDoubleTap;
-
- this.tapTime = pointerEvent.timeStamp;
- }
-
- for (i = 0; i < targets.length; i++) {
- pointerEvent.currentTarget = elements[i];
- pointerEvent.interactable = targets[i];
- targets[i].fire(pointerEvent);
-
- if (pointerEvent.immediatePropagationStopped
- ||(pointerEvent.propagationStopped && elements[i + 1] !== pointerEvent.currentTarget)) {
- break;
- }
- }
-
- if (createNewDoubleTap) {
- var doubleTap = {};
-
- extend(doubleTap, pointerEvent);
-
- doubleTap.dt = interval;
- doubleTap.type = 'doubletap';
-
- this.collectEventTargets(doubleTap, event, eventTarget, 'doubletap');
-
- this.prevTap = doubleTap;
- }
- else if (eventType === 'tap') {
- this.prevTap = pointerEvent;
- }
- },
-
- validateSelector: function (pointer, event, matches, matchElements) {
- for (var i = 0, len = matches.length; i < len; i++) {
- var match = matches[i],
- matchElement = matchElements[i],
- action = validateAction(match.getAction(pointer, event, this, matchElement), match);
-
- if (action && withinInteractionLimit(match, matchElement, action)) {
- this.target = match;
- this.element = matchElement;
-
- return action;
- }
- }
- },
-
- setSnapping: function (pageCoords, status) {
- var snap = this.target.options[this.prepared.name].snap,
- targets = [],
- target,
- page,
- i;
-
- status = status || this.snapStatus;
-
- if (status.useStatusXY) {
- page = { x: status.x, y: status.y };
- }
- else {
- var origin = getOriginXY(this.target, this.element);
-
- page = extend({}, pageCoords);
-
- page.x -= origin.x;
- page.y -= origin.y;
- }
-
- status.realX = page.x;
- status.realY = page.y;
-
- page.x = page.x - this.inertiaStatus.resumeDx;
- page.y = page.y - this.inertiaStatus.resumeDy;
-
- var len = snap.targets? snap.targets.length : 0;
-
- for (var relIndex = 0; relIndex < this.snapOffsets.length; relIndex++) {
- var relative = {
- x: page.x - this.snapOffsets[relIndex].x,
- y: page.y - this.snapOffsets[relIndex].y
- };
-
- for (i = 0; i < len; i++) {
- if (isFunction(snap.targets[i])) {
- target = snap.targets[i](relative.x, relative.y, this);
- }
- else {
- target = snap.targets[i];
- }
-
- if (!target) { continue; }
-
- targets.push({
- x: isNumber(target.x) ? (target.x + this.snapOffsets[relIndex].x) : relative.x,
- y: isNumber(target.y) ? (target.y + this.snapOffsets[relIndex].y) : relative.y,
-
- range: isNumber(target.range)? target.range: snap.range
- });
- }
- }
-
- var closest = {
- target: null,
- inRange: false,
- distance: 0,
- range: 0,
- dx: 0,
- dy: 0
- };
-
- for (i = 0, len = targets.length; i < len; i++) {
- target = targets[i];
-
- var range = target.range,
- dx = target.x - page.x,
- dy = target.y - page.y,
- distance = hypot(dx, dy),
- inRange = distance <= range;
-
- // Infinite targets count as being out of range
- // compared to non infinite ones that are in range
- if (range === Infinity && closest.inRange && closest.range !== Infinity) {
- inRange = false;
- }
-
- if (!closest.target || (inRange
- // is the closest target in range?
- ? (closest.inRange && range !== Infinity
- // the pointer is relatively deeper in this target
- ? distance / range < closest.distance / closest.range
- // this target has Infinite range and the closest doesn't
- : (range === Infinity && closest.range !== Infinity)
- // OR this target is closer that the previous closest
- || distance < closest.distance)
- // The other is not in range and the pointer is closer to this target
- : (!closest.inRange && distance < closest.distance))) {
-
- if (range === Infinity) {
- inRange = true;
- }
-
- closest.target = target;
- closest.distance = distance;
- closest.range = range;
- closest.inRange = inRange;
- closest.dx = dx;
- closest.dy = dy;
-
- status.range = range;
- }
- }
-
- var snapChanged;
-
- if (closest.target) {
- snapChanged = (status.snappedX !== closest.target.x || status.snappedY !== closest.target.y);
-
- status.snappedX = closest.target.x;
- status.snappedY = closest.target.y;
- }
- else {
- snapChanged = true;
-
- status.snappedX = NaN;
- status.snappedY = NaN;
- }
-
- status.dx = closest.dx;
- status.dy = closest.dy;
-
- status.changed = (snapChanged || (closest.inRange && !status.locked));
- status.locked = closest.inRange;
-
- return status;
- },
-
- setRestriction: function (pageCoords, status) {
- var target = this.target,
- restrict = target && target.options[this.prepared.name].restrict,
- restriction = restrict && restrict.restriction,
- page;
-
- if (!restriction) {
- return status;
- }
-
- status = status || this.restrictStatus;
-
- page = status.useStatusXY
- ? page = { x: status.x, y: status.y }
- : page = extend({}, pageCoords);
-
- if (status.snap && status.snap.locked) {
- page.x += status.snap.dx || 0;
- page.y += status.snap.dy || 0;
- }
-
- page.x -= this.inertiaStatus.resumeDx;
- page.y -= this.inertiaStatus.resumeDy;
-
- status.dx = 0;
- status.dy = 0;
- status.restricted = false;
-
- var rect, restrictedX, restrictedY;
-
- if (isString(restriction)) {
- if (restriction === 'parent') {
- restriction = parentElement(this.element);
- }
- else if (restriction === 'self') {
- restriction = target.getRect(this.element);
- }
- else {
- restriction = closest(this.element, restriction);
- }
-
- if (!restriction) { return status; }
- }
-
- if (isFunction(restriction)) {
- restriction = restriction(page.x, page.y, this.element);
- }
-
- if (isElement(restriction)) {
- restriction = getElementRect(restriction);
- }
-
- rect = restriction;
-
- if (!restriction) {
- restrictedX = page.x;
- restrictedY = page.y;
- }
- // object is assumed to have
- // x, y, width, height or
- // left, top, right, bottom
- else if ('x' in restriction && 'y' in restriction) {
- restrictedX = Math.max(Math.min(rect.x + rect.width - this.restrictOffset.right , page.x), rect.x + this.restrictOffset.left);
- restrictedY = Math.max(Math.min(rect.y + rect.height - this.restrictOffset.bottom, page.y), rect.y + this.restrictOffset.top );
- }
- else {
- restrictedX = Math.max(Math.min(rect.right - this.restrictOffset.right , page.x), rect.left + this.restrictOffset.left);
- restrictedY = Math.max(Math.min(rect.bottom - this.restrictOffset.bottom, page.y), rect.top + this.restrictOffset.top );
- }
-
- status.dx = restrictedX - page.x;
- status.dy = restrictedY - page.y;
-
- status.changed = status.restrictedX !== restrictedX || status.restrictedY !== restrictedY;
- status.restricted = !!(status.dx || status.dy);
-
- status.restrictedX = restrictedX;
- status.restrictedY = restrictedY;
-
- return status;
- },
-
- checkAndPreventDefault: function (event, interactable, element) {
- if (!(interactable = interactable || this.target)) { return; }
-
- var options = interactable.options,
- prevent = options.preventDefault;
-
- if (prevent === 'auto' && element && !/^(input|select|textarea)$/i.test(event.target.nodeName)) {
- // do not preventDefault on pointerdown if the prepared action is a drag
- // and dragging can only start from a certain direction - this allows
- // a touch to pan the viewport if a drag isn't in the right direction
- if (/down|start/i.test(event.type)
- && this.prepared.name === 'drag' && options.drag.axis !== 'xy') {
-
- return;
- }
-
- // with manualStart, only preventDefault while interacting
- if (options[this.prepared.name] && options[this.prepared.name].manualStart
- && !this.interacting()) {
- return;
- }
-
- event.preventDefault();
- return;
- }
-
- if (prevent === 'always') {
- event.preventDefault();
- return;
- }
- },
-
- calcInertia: function (status) {
- var inertiaOptions = this.target.options[this.prepared.name].inertia,
- lambda = inertiaOptions.resistance,
- inertiaDur = -Math.log(inertiaOptions.endSpeed / status.v0) / lambda;
-
- status.x0 = this.prevEvent.pageX;
- status.y0 = this.prevEvent.pageY;
- status.t0 = status.startEvent.timeStamp / 1000;
- status.sx = status.sy = 0;
-
- status.modifiedXe = status.xe = (status.vx0 - inertiaDur) / lambda;
- status.modifiedYe = status.ye = (status.vy0 - inertiaDur) / lambda;
- status.te = inertiaDur;
-
- status.lambda_v0 = lambda / status.v0;
- status.one_ve_v0 = 1 - inertiaOptions.endSpeed / status.v0;
- },
-
- autoScrollMove: function (pointer) {
- if (!(this.interacting()
- && checkAutoScroll(this.target, this.prepared.name))) {
- return;
- }
-
- if (this.inertiaStatus.active) {
- autoScroll.x = autoScroll.y = 0;
- return;
- }
-
- var top,
- right,
- bottom,
- left,
- options = this.target.options[this.prepared.name].autoScroll,
- container = options.container || getWindow(this.element);
-
- if (isWindow(container)) {
- left = pointer.clientX < autoScroll.margin;
- top = pointer.clientY < autoScroll.margin;
- right = pointer.clientX > container.innerWidth - autoScroll.margin;
- bottom = pointer.clientY > container.innerHeight - autoScroll.margin;
- }
- else {
- var rect = getElementClientRect(container);
-
- left = pointer.clientX < rect.left + autoScroll.margin;
- top = pointer.clientY < rect.top + autoScroll.margin;
- right = pointer.clientX > rect.right - autoScroll.margin;
- bottom = pointer.clientY > rect.bottom - autoScroll.margin;
- }
-
- autoScroll.x = (right ? 1: left? -1: 0);
- autoScroll.y = (bottom? 1: top? -1: 0);
-
- if (!autoScroll.isScrolling) {
- // set the autoScroll properties to those of the target
- autoScroll.margin = options.margin;
- autoScroll.speed = options.speed;
-
- autoScroll.start(this);
- }
- },
-
- _updateEventTargets: function (target, currentTarget) {
- this._eventTarget = target;
- this._curEventTarget = currentTarget;
- }
-
- };
-
- function getInteractionFromPointer (pointer, eventType, eventTarget) {
- var i = 0, len = interactions.length,
- mouseEvent = (/mouse/i.test(pointer.pointerType || eventType)
- // MSPointerEvent.MSPOINTER_TYPE_MOUSE
- || pointer.pointerType === 4),
- interaction;
-
- var id = getPointerId(pointer);
-
- // try to resume inertia with a new pointer
- if (/down|start/i.test(eventType)) {
- for (i = 0; i < len; i++) {
- interaction = interactions[i];
-
- var element = eventTarget;
-
- if (interaction.inertiaStatus.active && interaction.target.options[interaction.prepared.name].inertia.allowResume
- && (interaction.mouse === mouseEvent)) {
- while (element) {
- // if the element is the interaction element
- if (element === interaction.element) {
- return interaction;
- }
- element = parentElement(element);
- }
- }
- }
- }
-
- // if it's a mouse interaction
- if (mouseEvent || !(supportsTouch || supportsPointerEvent)) {
-
- // find a mouse interaction that's not in inertia phase
- for (i = 0; i < len; i++) {
- if (interactions[i].mouse && !interactions[i].inertiaStatus.active) {
- return interactions[i];
- }
- }
-
- // find any interaction specifically for mouse.
- // if the eventType is a mousedown, and inertia is active
- // ignore the interaction
- for (i = 0; i < len; i++) {
- if (interactions[i].mouse && !(/down/.test(eventType) && interactions[i].inertiaStatus.active)) {
- return interaction;
- }
- }
-
- // create a new interaction for mouse
- interaction = new Interaction();
- interaction.mouse = true;
-
- return interaction;
- }
-
- // get interaction that has this pointer
- for (i = 0; i < len; i++) {
- if (contains(interactions[i].pointerIds, id)) {
- return interactions[i];
- }
- }
-
- // at this stage, a pointerUp should not return an interaction
- if (/up|end|out/i.test(eventType)) {
- return null;
- }
-
- // get first idle interaction
- for (i = 0; i < len; i++) {
- interaction = interactions[i];
-
- if ((!interaction.prepared.name || (interaction.target.options.gesture.enabled))
- && !interaction.interacting()
- && !(!mouseEvent && interaction.mouse)) {
-
- return interaction;
- }
- }
-
- return new Interaction();
- }
-
- function doOnInteractions (method) {
- return (function (event) {
- var interaction,
- eventTarget = getActualElement(event.path
- ? event.path[0]
- : event.target),
- curEventTarget = getActualElement(event.currentTarget),
- i;
-
- if (supportsTouch && /touch/.test(event.type)) {
- prevTouchTime = new Date().getTime();
-
- for (i = 0; i < event.changedTouches.length; i++) {
- var pointer = event.changedTouches[i];
-
- interaction = getInteractionFromPointer(pointer, event.type, eventTarget);
-
- if (!interaction) { continue; }
-
- interaction._updateEventTargets(eventTarget, curEventTarget);
-
- interaction[method](pointer, event, eventTarget, curEventTarget);
- }
- }
- else {
- if (!supportsPointerEvent && /mouse/.test(event.type)) {
- // ignore mouse events while touch interactions are active
- for (i = 0; i < interactions.length; i++) {
- if (!interactions[i].mouse && interactions[i].pointerIsDown) {
- return;
- }
- }
-
- // try to ignore mouse events that are simulated by the browser
- // after a touch event
- if (new Date().getTime() - prevTouchTime < 500) {
- return;
- }
- }
-
- interaction = getInteractionFromPointer(event, event.type, eventTarget);
-
- if (!interaction) { return; }
-
- interaction._updateEventTargets(eventTarget, curEventTarget);
-
- interaction[method](event, event, eventTarget, curEventTarget);
- }
- });
- }
-
- function InteractEvent (interaction, event, action, phase, element, related) {
- var client,
- page,
- target = interaction.target,
- snapStatus = interaction.snapStatus,
- restrictStatus = interaction.restrictStatus,
- pointers = interaction.pointers,
- deltaSource = (target && target.options || defaultOptions).deltaSource,
- sourceX = deltaSource + 'X',
- sourceY = deltaSource + 'Y',
- options = target? target.options: defaultOptions,
- origin = getOriginXY(target, element),
- starting = phase === 'start',
- ending = phase === 'end',
- coords = starting? interaction.startCoords : interaction.curCoords;
-
- element = element || interaction.element;
-
- page = extend({}, coords.page);
- client = extend({}, coords.client);
-
- page.x -= origin.x;
- page.y -= origin.y;
-
- client.x -= origin.x;
- client.y -= origin.y;
-
- var relativePoints = options[action].snap && options[action].snap.relativePoints ;
-
- if (checkSnap(target, action) && !(starting && relativePoints && relativePoints.length)) {
- this.snap = {
- range : snapStatus.range,
- locked : snapStatus.locked,
- x : snapStatus.snappedX,
- y : snapStatus.snappedY,
- realX : snapStatus.realX,
- realY : snapStatus.realY,
- dx : snapStatus.dx,
- dy : snapStatus.dy
- };
-
- if (snapStatus.locked) {
- page.x += snapStatus.dx;
- page.y += snapStatus.dy;
- client.x += snapStatus.dx;
- client.y += snapStatus.dy;
- }
- }
-
- if (checkRestrict(target, action) && !(starting && options[action].restrict.elementRect) && restrictStatus.restricted) {
- page.x += restrictStatus.dx;
- page.y += restrictStatus.dy;
- client.x += restrictStatus.dx;
- client.y += restrictStatus.dy;
-
- this.restrict = {
- dx: restrictStatus.dx,
- dy: restrictStatus.dy
- };
- }
-
- this.pageX = page.x;
- this.pageY = page.y;
- this.clientX = client.x;
- this.clientY = client.y;
-
- this.x0 = interaction.startCoords.page.x - origin.x;
- this.y0 = interaction.startCoords.page.y - origin.y;
- this.clientX0 = interaction.startCoords.client.x - origin.x;
- this.clientY0 = interaction.startCoords.client.y - origin.y;
- this.ctrlKey = event.ctrlKey;
- this.altKey = event.altKey;
- this.shiftKey = event.shiftKey;
- this.metaKey = event.metaKey;
- this.button = event.button;
- this.buttons = event.buttons;
- this.target = element;
- this.t0 = interaction.downTimes[0];
- this.type = action + (phase || '');
-
- this.interaction = interaction;
- this.interactable = target;
-
- var inertiaStatus = interaction.inertiaStatus;
-
- if (inertiaStatus.active) {
- this.detail = 'inertia';
- }
-
- if (related) {
- this.relatedTarget = related;
- }
-
- // end event dx, dy is difference between start and end points
- if (ending) {
- if (deltaSource === 'client') {
- this.dx = client.x - interaction.startCoords.client.x;
- this.dy = client.y - interaction.startCoords.client.y;
- }
- else {
- this.dx = page.x - interaction.startCoords.page.x;
- this.dy = page.y - interaction.startCoords.page.y;
- }
- }
- else if (starting) {
- this.dx = 0;
- this.dy = 0;
- }
- // copy properties from previousmove if starting inertia
- else if (phase === 'inertiastart') {
- this.dx = interaction.prevEvent.dx;
- this.dy = interaction.prevEvent.dy;
- }
- else {
- if (deltaSource === 'client') {
- this.dx = client.x - interaction.prevEvent.clientX;
- this.dy = client.y - interaction.prevEvent.clientY;
- }
- else {
- this.dx = page.x - interaction.prevEvent.pageX;
- this.dy = page.y - interaction.prevEvent.pageY;
- }
- }
- if (interaction.prevEvent && interaction.prevEvent.detail === 'inertia'
- && !inertiaStatus.active
- && options[action].inertia && options[action].inertia.zeroResumeDelta) {
-
- inertiaStatus.resumeDx += this.dx;
- inertiaStatus.resumeDy += this.dy;
-
- this.dx = this.dy = 0;
- }
-
- if (action === 'resize' && interaction.resizeAxes) {
- if (options.resize.square) {
- if (interaction.resizeAxes === 'y') {
- this.dx = this.dy;
- }
- else {
- this.dy = this.dx;
- }
- this.axes = 'xy';
- }
- else {
- this.axes = interaction.resizeAxes;
-
- if (interaction.resizeAxes === 'x') {
- this.dy = 0;
- }
- else if (interaction.resizeAxes === 'y') {
- this.dx = 0;
- }
- }
- }
- else if (action === 'gesture') {
- this.touches = [pointers[0], pointers[1]];
-
- if (starting) {
- this.distance = touchDistance(pointers, deltaSource);
- this.box = touchBBox(pointers);
- this.scale = 1;
- this.ds = 0;
- this.angle = touchAngle(pointers, undefined, deltaSource);
- this.da = 0;
- }
- else if (ending || event instanceof InteractEvent) {
- this.distance = interaction.prevEvent.distance;
- this.box = interaction.prevEvent.box;
- this.scale = interaction.prevEvent.scale;
- this.ds = this.scale - 1;
- this.angle = interaction.prevEvent.angle;
- this.da = this.angle - interaction.gesture.startAngle;
- }
- else {
- this.distance = touchDistance(pointers, deltaSource);
- this.box = touchBBox(pointers);
- this.scale = this.distance / interaction.gesture.startDistance;
- this.angle = touchAngle(pointers, interaction.gesture.prevAngle, deltaSource);
-
- this.ds = this.scale - interaction.gesture.prevScale;
- this.da = this.angle - interaction.gesture.prevAngle;
- }
- }
-
- if (starting) {
- this.timeStamp = interaction.downTimes[0];
- this.dt = 0;
- this.duration = 0;
- this.speed = 0;
- this.velocityX = 0;
- this.velocityY = 0;
- }
- else if (phase === 'inertiastart') {
- this.timeStamp = interaction.prevEvent.timeStamp;
- this.dt = interaction.prevEvent.dt;
- this.duration = interaction.prevEvent.duration;
- this.speed = interaction.prevEvent.speed;
- this.velocityX = interaction.prevEvent.velocityX;
- this.velocityY = interaction.prevEvent.velocityY;
- }
- else {
- this.timeStamp = new Date().getTime();
- this.dt = this.timeStamp - interaction.prevEvent.timeStamp;
- this.duration = this.timeStamp - interaction.downTimes[0];
-
- if (event instanceof InteractEvent) {
- var dx = this[sourceX] - interaction.prevEvent[sourceX],
- dy = this[sourceY] - interaction.prevEvent[sourceY],
- dt = this.dt / 1000;
-
- this.speed = hypot(dx, dy) / dt;
- this.velocityX = dx / dt;
- this.velocityY = dy / dt;
- }
- // if normal move or end event, use previous user event coords
- else {
- // speed and velocity in pixels per second
- this.speed = interaction.pointerDelta[deltaSource].speed;
- this.velocityX = interaction.pointerDelta[deltaSource].vx;
- this.velocityY = interaction.pointerDelta[deltaSource].vy;
- }
- }
-
- if ((ending || phase === 'inertiastart')
- && interaction.prevEvent.speed > 600 && this.timeStamp - interaction.prevEvent.timeStamp < 150) {
-
- var angle = 180 * Math.atan2(interaction.prevEvent.velocityY, interaction.prevEvent.velocityX) / Math.PI,
- overlap = 22.5;
-
- if (angle < 0) {
- angle += 360;
- }
-
- var left = 135 - overlap <= angle && angle < 225 + overlap,
- up = 225 - overlap <= angle && angle < 315 + overlap,
-
- right = !left && (315 - overlap <= angle || angle < 45 + overlap),
- down = !up && 45 - overlap <= angle && angle < 135 + overlap;
-
- this.swipe = {
- up : up,
- down : down,
- left : left,
- right: right,
- angle: angle,
- speed: interaction.prevEvent.speed,
- velocity: {
- x: interaction.prevEvent.velocityX,
- y: interaction.prevEvent.velocityY
- }
- };
- }
- }
-
- InteractEvent.prototype = {
- preventDefault: blank,
- stopImmediatePropagation: function () {
- this.immediatePropagationStopped = this.propagationStopped = true;
- },
- stopPropagation: function () {
- this.propagationStopped = true;
- }
- };
-
- function preventOriginalDefault () {
- this.originalEvent.preventDefault();
- }
-
- function getActionCursor (action) {
- var cursor = '';
-
- if (action.name === 'drag') {
- cursor = actionCursors.drag;
- }
- if (action.name === 'resize') {
- if (action.axis) {
- cursor = actionCursors[action.name + action.axis];
- }
- else if (action.edges) {
- var cursorKey = 'resize',
- edgeNames = ['top', 'bottom', 'left', 'right'];
-
- for (var i = 0; i < 4; i++) {
- if (action.edges[edgeNames[i]]) {
- cursorKey += edgeNames[i];
- }
- }
-
- cursor = actionCursors[cursorKey];
- }
- }
-
- return cursor;
- }
-
- function checkResizeEdge (name, value, page, element, interactableElement, rect, margin) {
- // false, '', undefined, null
- if (!value) { return false; }
-
- // true value, use pointer coords and element rect
- if (value === true) {
- // if dimensions are negative, "switch" edges
- var width = isNumber(rect.width)? rect.width : rect.right - rect.left,
- height = isNumber(rect.height)? rect.height : rect.bottom - rect.top;
-
- if (width < 0) {
- if (name === 'left' ) { name = 'right'; }
- else if (name === 'right') { name = 'left' ; }
- }
- if (height < 0) {
- if (name === 'top' ) { name = 'bottom'; }
- else if (name === 'bottom') { name = 'top' ; }
- }
-
- if (name === 'left' ) { return page.x < ((width >= 0? rect.left: rect.right ) + margin); }
- if (name === 'top' ) { return page.y < ((height >= 0? rect.top : rect.bottom) + margin); }
-
- if (name === 'right' ) { return page.x > ((width >= 0? rect.right : rect.left) - margin); }
- if (name === 'bottom') { return page.y > ((height >= 0? rect.bottom: rect.top ) - margin); }
- }
-
- // the remaining checks require an element
- if (!isElement(element)) { return false; }
-
- return isElement(value)
- // the value is an element to use as a resize handle
- ? value === element
- // otherwise check if element matches value as selector
- : matchesUpTo(element, value, interactableElement);
- }
-
- function defaultActionChecker (pointer, interaction, element) {
- var rect = this.getRect(element),
- shouldResize = false,
- action = null,
- resizeAxes = null,
- resizeEdges,
- page = extend({}, interaction.curCoords.page),
- options = this.options;
-
- if (!rect) { return null; }
-
- if (actionIsEnabled.resize && options.resize.enabled) {
- var resizeOptions = options.resize;
-
- resizeEdges = {
- left: false, right: false, top: false, bottom: false
- };
-
- // if using resize.edges
- if (isObject(resizeOptions.edges)) {
- for (var edge in resizeEdges) {
- resizeEdges[edge] = checkResizeEdge(edge,
- resizeOptions.edges[edge],
- page,
- interaction._eventTarget,
- element,
- rect,
- resizeOptions.margin || margin);
- }
-
- resizeEdges.left = resizeEdges.left && !resizeEdges.right;
- resizeEdges.top = resizeEdges.top && !resizeEdges.bottom;
-
- shouldResize = resizeEdges.left || resizeEdges.right || resizeEdges.top || resizeEdges.bottom;
- }
- else {
- var right = options.resize.axis !== 'y' && page.x > (rect.right - margin),
- bottom = options.resize.axis !== 'x' && page.y > (rect.bottom - margin);
-
- shouldResize = right || bottom;
- resizeAxes = (right? 'x' : '') + (bottom? 'y' : '');
- }
- }
-
- action = shouldResize
- ? 'resize'
- : actionIsEnabled.drag && options.drag.enabled
- ? 'drag'
- : null;
-
- if (actionIsEnabled.gesture
- && interaction.pointerIds.length >=2
- && !(interaction.dragging || interaction.resizing)) {
- action = 'gesture';
- }
-
- if (action) {
- return {
- name: action,
- axis: resizeAxes,
- edges: resizeEdges
- };
- }
-
- return null;
- }
-
- // Check if action is enabled globally and the current target supports it
- // If so, return the validated action. Otherwise, return null
- function validateAction (action, interactable) {
- if (!isObject(action)) { return null; }
-
- var actionName = action.name,
- options = interactable.options;
-
- if (( (actionName === 'resize' && options.resize.enabled )
- || (actionName === 'drag' && options.drag.enabled )
- || (actionName === 'gesture' && options.gesture.enabled))
- && actionIsEnabled[actionName]) {
-
- if (actionName === 'resize' || actionName === 'resizeyx') {
- actionName = 'resizexy';
- }
-
- return action;
- }
- return null;
- }
-
- var listeners = {},
- interactionListeners = [
- 'dragStart', 'dragMove', 'resizeStart', 'resizeMove', 'gestureStart', 'gestureMove',
- 'pointerOver', 'pointerOut', 'pointerHover', 'selectorDown',
- 'pointerDown', 'pointerMove', 'pointerUp', 'pointerCancel', 'pointerEnd',
- 'addPointer', 'removePointer', 'recordPointer', 'autoScrollMove'
- ];
-
- for (var i = 0, len = interactionListeners.length; i < len; i++) {
- var name = interactionListeners[i];
-
- listeners[name] = doOnInteractions(name);
- }
-
- // bound to the interactable context when a DOM event
- // listener is added to a selector interactable
- function delegateListener (event, useCapture) {
- var fakeEvent = {},
- delegated = delegatedEvents[event.type],
- eventTarget = getActualElement(event.path
- ? event.path[0]
- : event.target),
- element = eventTarget;
-
- useCapture = useCapture? true: false;
-
- // duplicate the event so that currentTarget can be changed
- for (var prop in event) {
- fakeEvent[prop] = event[prop];
- }
-
- fakeEvent.originalEvent = event;
- fakeEvent.preventDefault = preventOriginalDefault;
-
- // climb up document tree looking for selector matches
- while (isElement(element)) {
- for (var i = 0; i < delegated.selectors.length; i++) {
- var selector = delegated.selectors[i],
- context = delegated.contexts[i];
-
- if (matchesSelector(element, selector)
- && nodeContains(context, eventTarget)
- && nodeContains(context, element)) {
-
- var listeners = delegated.listeners[i];
-
- fakeEvent.currentTarget = element;
-
- for (var j = 0; j < listeners.length; j++) {
- if (listeners[j][1] === useCapture) {
- listeners[j][0](fakeEvent);
- }
- }
- }
- }
-
- element = parentElement(element);
- }
- }
-
- function delegateUseCapture (event) {
- return delegateListener.call(this, event, true);
- }
-
- interactables.indexOfElement = function indexOfElement (element, context) {
- context = context || document;
-
- for (var i = 0; i < this.length; i++) {
- var interactable = this[i];
-
- if ((interactable.selector === element
- && (interactable._context === context))
- || (!interactable.selector && interactable._element === element)) {
-
- return i;
- }
- }
- return -1;
- };
-
- interactables.get = function interactableGet (element, options) {
- return this[this.indexOfElement(element, options && options.context)];
- };
-
- interactables.forEachSelector = function (callback) {
- for (var i = 0; i < this.length; i++) {
- var interactable = this[i];
-
- if (!interactable.selector) {
- continue;
- }
-
- var ret = callback(interactable, interactable.selector, interactable._context, i, this);
-
- if (ret !== undefined) {
- return ret;
- }
- }
- };
-
- /*\
- * interact
- [ method ]
- *
- * The methods of this variable can be used to set elements as
- * interactables and also to change various default settings.
- *
- * Calling it as a function and passing an element or a valid CSS selector
- * string returns an Interactable object which has various methods to
- * configure it.
- *
- - element (Element | string) The HTML or SVG Element to interact with or CSS selector
- = (object) An @Interactable
- *
- > Usage
- | interact(document.getElementById('draggable')).draggable(true);
- |
- | var rectables = interact('rect');
- | rectables
- | .gesturable(true)
- | .on('gesturemove', function (event) {
- | // something cool...
- | })
- | .autoScroll(true);
- \*/
- function interact (element, options) {
- return interactables.get(element, options) || new Interactable(element, options);
- }
-
- /*\
- * Interactable
- [ property ]
- **
- * Object type returned by @interact
- \*/
- function Interactable (element, options) {
- this._element = element;
- this._iEvents = this._iEvents || {};
-
- var _window;
-
- if (trySelector(element)) {
- this.selector = element;
-
- var context = options && options.context;
-
- _window = context? getWindow(context) : window;
-
- if (context && (_window.Node
- ? context instanceof _window.Node
- : (isElement(context) || context === _window.document))) {
-
- this._context = context;
- }
- }
- else {
- _window = getWindow(element);
-
- if (isElement(element, _window)) {
-
- if (supportsPointerEvent) {
- events.add(this._element, pEventTypes.down, listeners.pointerDown );
- events.add(this._element, pEventTypes.move, listeners.pointerHover);
- }
- else {
- events.add(this._element, 'mousedown' , listeners.pointerDown );
- events.add(this._element, 'mousemove' , listeners.pointerHover);
- events.add(this._element, 'touchstart', listeners.pointerDown );
- events.add(this._element, 'touchmove' , listeners.pointerHover);
- }
- }
- }
-
- this._doc = _window.document;
-
- if (!contains(documents, this._doc)) {
- listenToDocument(this._doc);
- }
-
- interactables.push(this);
-
- this.set(options);
- }
-
- Interactable.prototype = {
- setOnEvents: function (action, phases) {
- if (action === 'drop') {
- if (isFunction(phases.ondrop) ) { this.ondrop = phases.ondrop ; }
- if (isFunction(phases.ondropactivate) ) { this.ondropactivate = phases.ondropactivate ; }
- if (isFunction(phases.ondropdeactivate)) { this.ondropdeactivate = phases.ondropdeactivate; }
- if (isFunction(phases.ondragenter) ) { this.ondragenter = phases.ondragenter ; }
- if (isFunction(phases.ondragleave) ) { this.ondragleave = phases.ondragleave ; }
- if (isFunction(phases.ondropmove) ) { this.ondropmove = phases.ondropmove ; }
- }
- else {
- action = 'on' + action;
-
- if (isFunction(phases.onstart) ) { this[action + 'start' ] = phases.onstart ; }
- if (isFunction(phases.onmove) ) { this[action + 'move' ] = phases.onmove ; }
- if (isFunction(phases.onend) ) { this[action + 'end' ] = phases.onend ; }
- if (isFunction(phases.oninertiastart)) { this[action + 'inertiastart' ] = phases.oninertiastart ; }
- }
-
- return this;
- },
-
- /*\
- * Interactable.draggable
- [ method ]
- *
- * Gets or sets whether drag actions can be performed on the
- * Interactable
- *
- = (boolean) Indicates if this can be the target of drag events
- | var isDraggable = interact('ul li').draggable();
- * or
- - options (boolean | object) #optional true/false or An object with event listeners to be fired on drag events (object makes the Interactable draggable)
- = (object) This Interactable
- | interact(element).draggable({
- | onstart: function (event) {},
- | onmove : function (event) {},
- | onend : function (event) {},
- |
- | // the axis in which the first movement must be
- | // for the drag sequence to start
- | // 'xy' by default - any direction
- | axis: 'x' || 'y' || 'xy',
- |
- | // max number of drags that can happen concurrently
- | // with elements of this Interactable. Infinity by default
- | max: Infinity,
- |
- | // max number of drags that can target the same element+Interactable
- | // 1 by default
- | maxPerElement: 2
- | });
- \*/
- draggable: function (options) {
- if (isObject(options)) {
- this.options.drag.enabled = options.enabled === false? false: true;
- this.setPerAction('drag', options);
- this.setOnEvents('drag', options);
-
- if (/^x$|^y$|^xy$/.test(options.axis)) {
- this.options.drag.axis = options.axis;
- }
- else if (options.axis === null) {
- delete this.options.drag.axis;
- }
-
- return this;
- }
-
- if (isBool(options)) {
- this.options.drag.enabled = options;
-
- return this;
- }
-
- return this.options.drag;
- },
-
- setPerAction: function (action, options) {
- // for all the default per-action options
- for (var option in options) {
- // if this option exists for this action
- if (option in defaultOptions[action]) {
- // if the option in the options arg is an object value
- if (isObject(options[option])) {
- // duplicate the object
- this.options[action][option] = extend(this.options[action][option] || {}, options[option]);
-
- if (isObject(defaultOptions.perAction[option]) && 'enabled' in defaultOptions.perAction[option]) {
- this.options[action][option].enabled = options[option].enabled === false? false : true;
- }
- }
- else if (isBool(options[option]) && isObject(defaultOptions.perAction[option])) {
- this.options[action][option].enabled = options[option];
- }
- else if (options[option] !== undefined) {
- // or if it's not undefined, do a plain assignment
- this.options[action][option] = options[option];
- }
- }
- }
- },
-
- /*\
- * Interactable.dropzone
- [ method ]
- *
- * Returns or sets whether elements can be dropped onto this
- * Interactable to trigger drop events
- *
- * Dropzones can receive the following events:
- * - `dropactivate` and `dropdeactivate` when an acceptable drag starts and ends
- * - `dragenter` and `dragleave` when a draggable enters and leaves the dropzone
- * - `dragmove` when a draggable that has entered the dropzone is moved
- * - `drop` when a draggable is dropped into this dropzone
- *
- * Use the `accept` option to allow only elements that match the given CSS selector or element.
- *
- * Use the `overlap` option to set how drops are checked for. The allowed values are:
- * - `'pointer'`, the pointer must be over the dropzone (default)
- * - `'center'`, the draggable element's center must be over the dropzone
- * - a number from 0-1 which is the `(intersection area) / (draggable area)`.
- * e.g. `0.5` for drop to happen when half of the area of the
- * draggable is over the dropzone
- *
- - options (boolean | object | null) #optional The new value to be set.
- | interact('.drop').dropzone({
- | accept: '.can-drop' || document.getElementById('single-drop'),
- | overlap: 'pointer' || 'center' || zeroToOne
- | }
- = (boolean | object) The current setting or this Interactable
- \*/
- dropzone: function (options) {
- if (isObject(options)) {
- this.options.drop.enabled = options.enabled === false? false: true;
- this.setOnEvents('drop', options);
-
- if (/^(pointer|center)$/.test(options.overlap)) {
- this.options.drop.overlap = options.overlap;
- }
- else if (isNumber(options.overlap)) {
- this.options.drop.overlap = Math.max(Math.min(1, options.overlap), 0);
- }
- if ('accept' in options) {
- this.options.drop.accept = options.accept;
- }
- if ('checker' in options) {
- this.options.drop.checker = options.checker;
- }
-
- return this;
- }
-
- if (isBool(options)) {
- this.options.drop.enabled = options;
-
- return this;
- }
-
- return this.options.drop;
- },
-
- dropCheck: function (dragEvent, event, draggable, draggableElement, dropElement, rect) {
- var dropped = false;
-
- // if the dropzone has no rect (eg. display: none)
- // call the custom dropChecker or just return false
- if (!(rect = rect || this.getRect(dropElement))) {
- return (this.options.drop.checker
- ? this.options.drop.checker(dragEvent, event, dropped, this, dropElement, draggable, draggableElement)
- : false);
- }
-
- var dropOverlap = this.options.drop.overlap;
-
- if (dropOverlap === 'pointer') {
- var page = getPageXY(dragEvent),
- origin = getOriginXY(draggable, draggableElement),
- horizontal,
- vertical;
-
- page.x += origin.x;
- page.y += origin.y;
-
- horizontal = (page.x > rect.left) && (page.x < rect.right);
- vertical = (page.y > rect.top ) && (page.y < rect.bottom);
-
- dropped = horizontal && vertical;
- }
-
- var dragRect = draggable.getRect(draggableElement);
-
- if (dropOverlap === 'center') {
- var cx = dragRect.left + dragRect.width / 2,
- cy = dragRect.top + dragRect.height / 2;
-
- dropped = cx >= rect.left && cx <= rect.right && cy >= rect.top && cy <= rect.bottom;
- }
-
- if (isNumber(dropOverlap)) {
- var overlapArea = (Math.max(0, Math.min(rect.right , dragRect.right ) - Math.max(rect.left, dragRect.left))
- * Math.max(0, Math.min(rect.bottom, dragRect.bottom) - Math.max(rect.top , dragRect.top ))),
- overlapRatio = overlapArea / (dragRect.width * dragRect.height);
-
- dropped = overlapRatio >= dropOverlap;
- }
-
- if (this.options.drop.checker) {
- dropped = this.options.drop.checker(dragEvent, event, dropped, this, dropElement, draggable, draggableElement);
- }
-
- return dropped;
- },
-
- /*\
- * Interactable.dropChecker
- [ method ]
- *
- * DEPRECATED. Use interactable.dropzone({ checker: function... }) instead.
- *
- * Gets or sets the function used to check if a dragged element is
- * over this Interactable.
- *
- - checker (function) #optional The function that will be called when checking for a drop
- = (Function | Interactable) The checker function or this Interactable
- *
- * The checker function takes the following arguments:
- *
- - dragEvent (InteractEvent) The related dragmove or dragend event
- - event (TouchEvent | PointerEvent | MouseEvent) The user move/up/end Event related to the dragEvent
- - dropped (boolean) The value from the default drop checker
- - dropzone (Interactable) The dropzone interactable
- - dropElement (Element) The dropzone element
- - draggable (Interactable) The Interactable being dragged
- - draggableElement (Element) The actual element that's being dragged
- *
- > Usage:
- | interact(target)
- | .dropChecker(function(dragEvent, // related dragmove or dragend event
- | event, // TouchEvent/PointerEvent/MouseEvent
- | dropped, // bool result of the default checker
- | dropzone, // dropzone Interactable
- | dropElement, // dropzone elemnt
- | draggable, // draggable Interactable
- | draggableElement) {// draggable element
- |
- | return dropped && event.target.hasAttribute('allow-drop');
- | }
- \*/
- dropChecker: function (checker) {
- if (isFunction(checker)) {
- this.options.drop.checker = checker;
-
- return this;
- }
- if (checker === null) {
- delete this.options.getRect;
-
- return this;
- }
-
- return this.options.drop.checker;
- },
-
- /*\
- * Interactable.accept
- [ method ]
- *
- * Deprecated. add an `accept` property to the options object passed to
- * @Interactable.dropzone instead.
- *
- * Gets or sets the Element or CSS selector match that this
- * Interactable accepts if it is a dropzone.
- *
- - newValue (Element | string | null) #optional
- * If it is an Element, then only that element can be dropped into this dropzone.
- * If it is a string, the element being dragged must match it as a selector.
- * If it is null, the accept options is cleared - it accepts any element.
- *
- = (string | Element | null | Interactable) The current accept option if given `undefined` or this Interactable
- \*/
- accept: function (newValue) {
- if (isElement(newValue)) {
- this.options.drop.accept = newValue;
-
- return this;
- }
-
- // test if it is a valid CSS selector
- if (trySelector(newValue)) {
- this.options.drop.accept = newValue;
-
- return this;
- }
-
- if (newValue === null) {
- delete this.options.drop.accept;
-
- return this;
- }
-
- return this.options.drop.accept;
- },
-
- /*\
- * Interactable.resizable
- [ method ]
- *
- * Gets or sets whether resize actions can be performed on the
- * Interactable
- *
- = (boolean) Indicates if this can be the target of resize elements
- | var isResizeable = interact('input[type=text]').resizable();
- * or
- - options (boolean | object) #optional true/false or An object with event listeners to be fired on resize events (object makes the Interactable resizable)
- = (object) This Interactable
- | interact(element).resizable({
- | onstart: function (event) {},
- | onmove : function (event) {},
- | onend : function (event) {},
- |
- | edges: {
- | top : true, // Use pointer coords to check for resize.
- | left : false, // Disable resizing from left edge.
- | bottom: '.resize-s',// Resize if pointer target matches selector
- | right : handleEl // Resize if pointer target is the given Element
- | },
- |
- | // Width and height can be adjusted independently. When `true`, width and
- | // height are adjusted at a 1:1 ratio.
- | square: false,
- |
- | // Width and height can be adjusted independently. When `true`, width and
- | // height maintain the aspect ratio they had when resizing started.
- | preserveAspectRatio: false,
- |
- | // a value of 'none' will limit the resize rect to a minimum of 0x0
- | // 'negate' will allow the rect to have negative width/height
- | // 'reposition' will keep the width/height positive by swapping
- | // the top and bottom edges and/or swapping the left and right edges
- | invert: 'none' || 'negate' || 'reposition'
- |
- | // limit multiple resizes.
- | // See the explanation in the @Interactable.draggable example
- | max: Infinity,
- | maxPerElement: 1,
- | });
- \*/
- resizable: function (options) {
- if (isObject(options)) {
- this.options.resize.enabled = options.enabled === false? false: true;
- this.setPerAction('resize', options);
- this.setOnEvents('resize', options);
-
- if (/^x$|^y$|^xy$/.test(options.axis)) {
- this.options.resize.axis = options.axis;
- }
- else if (options.axis === null) {
- this.options.resize.axis = defaultOptions.resize.axis;
- }
-
- if (isBool(options.preserveAspectRatio)) {
- this.options.resize.preserveAspectRatio = options.preserveAspectRatio;
- }
- else if (isBool(options.square)) {
- this.options.resize.square = options.square;
- }
-
- return this;
- }
- if (isBool(options)) {
- this.options.resize.enabled = options;
-
- return this;
- }
- return this.options.resize;
- },
-
- /*\
- * Interactable.squareResize
- [ method ]
- *
- * Deprecated. Add a `square: true || false` property to @Interactable.resizable instead
- *
- * Gets or sets whether resizing is forced 1:1 aspect
- *
- = (boolean) Current setting
- *
- * or
- *
- - newValue (boolean) #optional
- = (object) this Interactable
- \*/
- squareResize: function (newValue) {
- if (isBool(newValue)) {
- this.options.resize.square = newValue;
-
- return this;
- }
-
- if (newValue === null) {
- delete this.options.resize.square;
-
- return this;
- }
-
- return this.options.resize.square;
- },
-
- /*\
- * Interactable.gesturable
- [ method ]
- *
- * Gets or sets whether multitouch gestures can be performed on the
- * Interactable's element
- *
- = (boolean) Indicates if this can be the target of gesture events
- | var isGestureable = interact(element).gesturable();
- * or
- - options (boolean | object) #optional true/false or An object with event listeners to be fired on gesture events (makes the Interactable gesturable)
- = (object) this Interactable
- | interact(element).gesturable({
- | onstart: function (event) {},
- | onmove : function (event) {},
- | onend : function (event) {},
- |
- | // limit multiple gestures.
- | // See the explanation in @Interactable.draggable example
- | max: Infinity,
- | maxPerElement: 1,
- | });
- \*/
- gesturable: function (options) {
- if (isObject(options)) {
- this.options.gesture.enabled = options.enabled === false? false: true;
- this.setPerAction('gesture', options);
- this.setOnEvents('gesture', options);
-
- return this;
- }
-
- if (isBool(options)) {
- this.options.gesture.enabled = options;
-
- return this;
- }
-
- return this.options.gesture;
- },
-
- /*\
- * Interactable.autoScroll
- [ method ]
- **
- * Deprecated. Add an `autoscroll` property to the options object
- * passed to @Interactable.draggable or @Interactable.resizable instead.
- *
- * Returns or sets whether dragging and resizing near the edges of the
- * window/container trigger autoScroll for this Interactable
- *
- = (object) Object with autoScroll properties
- *
- * or
- *
- - options (object | boolean) #optional
- * options can be:
- * - an object with margin, distance and interval properties,
- * - true or false to enable or disable autoScroll or
- = (Interactable) this Interactable
- \*/
- autoScroll: function (options) {
- if (isObject(options)) {
- options = extend({ actions: ['drag', 'resize']}, options);
- }
- else if (isBool(options)) {
- options = { actions: ['drag', 'resize'], enabled: options };
- }
-
- return this.setOptions('autoScroll', options);
- },
-
- /*\
- * Interactable.snap
- [ method ]
- **
- * Deprecated. Add a `snap` property to the options object passed
- * to @Interactable.draggable or @Interactable.resizable instead.
- *
- * Returns or sets if and how action coordinates are snapped. By
- * default, snapping is relative to the pointer coordinates. You can
- * change this by setting the
- * [`elementOrigin`](https://github.com/taye/interact.js/pull/72).
- **
- = (boolean | object) `false` if snap is disabled; object with snap properties if snap is enabled
- **
- * or
- **
- - options (object | boolean | null) #optional
- = (Interactable) this Interactable
- > Usage
- | interact(document.querySelector('#thing')).snap({
- | targets: [
- | // snap to this specific point
- | {
- | x: 100,
- | y: 100,
- | range: 25
- | },
- | // give this function the x and y page coords and snap to the object returned
- | function (x, y) {
- | return {
- | x: x,
- | y: (75 + 50 * Math.sin(x * 0.04)),
- | range: 40
- | };
- | },
- | // create a function that snaps to a grid
- | interact.createSnapGrid({
- | x: 50,
- | y: 50,
- | range: 10, // optional
- | offset: { x: 5, y: 10 } // optional
- | })
- | ],
- | // do not snap during normal movement.
- | // Instead, trigger only one snapped move event
- | // immediately before the end event.
- | endOnly: true,
- |
- | relativePoints: [
- | { x: 0, y: 0 }, // snap relative to the top left of the element
- | { x: 1, y: 1 }, // and also to the bottom right
- | ],
- |
- | // offset the snap target coordinates
- | // can be an object with x/y or 'startCoords'
- | offset: { x: 50, y: 50 }
- | }
- | });
- \*/
- snap: function (options) {
- var ret = this.setOptions('snap', options);
-
- if (ret === this) { return this; }
-
- return ret.drag;
- },
-
- setOptions: function (option, options) {
- var actions = options && isArray(options.actions)
- ? options.actions
- : ['drag'];
-
- var i;
-
- if (isObject(options) || isBool(options)) {
- for (i = 0; i < actions.length; i++) {
- var action = /resize/.test(actions[i])? 'resize' : actions[i];
-
- if (!isObject(this.options[action])) { continue; }
-
- var thisOption = this.options[action][option];
-
- if (isObject(options)) {
- extend(thisOption, options);
- thisOption.enabled = options.enabled === false? false: true;
-
- if (option === 'snap') {
- if (thisOption.mode === 'grid') {
- thisOption.targets = [
- interact.createSnapGrid(extend({
- offset: thisOption.gridOffset || { x: 0, y: 0 }
- }, thisOption.grid || {}))
- ];
- }
- else if (thisOption.mode === 'anchor') {
- thisOption.targets = thisOption.anchors;
- }
- else if (thisOption.mode === 'path') {
- thisOption.targets = thisOption.paths;
- }
-
- if ('elementOrigin' in options) {
- thisOption.relativePoints = [options.elementOrigin];
- }
- }
- }
- else if (isBool(options)) {
- thisOption.enabled = options;
- }
- }
-
- return this;
- }
-
- var ret = {},
- allActions = ['drag', 'resize', 'gesture'];
-
- for (i = 0; i < allActions.length; i++) {
- if (option in defaultOptions[allActions[i]]) {
- ret[allActions[i]] = this.options[allActions[i]][option];
- }
- }
-
- return ret;
- },
-
-
- /*\
- * Interactable.inertia
- [ method ]
- **
- * Deprecated. Add an `inertia` property to the options object passed
- * to @Interactable.draggable or @Interactable.resizable instead.
- *
- * Returns or sets if and how events continue to run after the pointer is released
- **
- = (boolean | object) `false` if inertia is disabled; `object` with inertia properties if inertia is enabled
- **
- * or
- **
- - options (object | boolean | null) #optional
- = (Interactable) this Interactable
- > Usage
- | // enable and use default settings
- | interact(element).inertia(true);
- |
- | // enable and use custom settings
- | interact(element).inertia({
- | // value greater than 0
- | // high values slow the object down more quickly
- | resistance : 16,
- |
- | // the minimum launch speed (pixels per second) that results in inertia start
- | minSpeed : 200,
- |
- | // inertia will stop when the object slows down to this speed
- | endSpeed : 20,
- |
- | // boolean; should actions be resumed when the pointer goes down during inertia
- | allowResume : true,
- |
- | // boolean; should the jump when resuming from inertia be ignored in event.dx/dy
- | zeroResumeDelta: false,
- |
- | // if snap/restrict are set to be endOnly and inertia is enabled, releasing
- | // the pointer without triggering inertia will animate from the release
- | // point to the snaped/restricted point in the given amount of time (ms)
- | smoothEndDuration: 300,
- |
- | // an array of action types that can have inertia (no gesture)
- | actions : ['drag', 'resize']
- | });
- |
- | // reset custom settings and use all defaults
- | interact(element).inertia(null);
- \*/
- inertia: function (options) {
- var ret = this.setOptions('inertia', options);
-
- if (ret === this) { return this; }
-
- return ret.drag;
- },
-
- getAction: function (pointer, event, interaction, element) {
- var action = this.defaultActionChecker(pointer, interaction, element);
-
- if (this.options.actionChecker) {
- return this.options.actionChecker(pointer, event, action, this, element, interaction);
- }
-
- return action;
- },
-
- defaultActionChecker: defaultActionChecker,
-
- /*\
- * Interactable.actionChecker
- [ method ]
- *
- * Gets or sets the function used to check action to be performed on
- * pointerDown
- *
- - checker (function | null) #optional A function which takes a pointer event, defaultAction string, interactable, element and interaction as parameters and returns an object with name property 'drag' 'resize' or 'gesture' and optionally an `edges` object with boolean 'top', 'left', 'bottom' and right props.
- = (Function | Interactable) The checker function or this Interactable
- *
- | interact('.resize-drag')
- | .resizable(true)
- | .draggable(true)
- | .actionChecker(function (pointer, event, action, interactable, element, interaction) {
- |
- | if (interact.matchesSelector(event.target, '.drag-handle') {
- | // force drag with handle target
- | action.name = drag;
- | }
- | else {
- | // resize from the top and right edges
- | action.name = 'resize';
- | action.edges = { top: true, right: true };
- | }
- |
- | return action;
- | });
- \*/
- actionChecker: function (checker) {
- if (isFunction(checker)) {
- this.options.actionChecker = checker;
-
- return this;
- }
-
- if (checker === null) {
- delete this.options.actionChecker;
-
- return this;
- }
-
- return this.options.actionChecker;
- },
-
- /*\
- * Interactable.getRect
- [ method ]
- *
- * The default function to get an Interactables bounding rect. Can be
- * overridden using @Interactable.rectChecker.
- *
- - element (Element) #optional The element to measure.
- = (object) The object's bounding rectangle.
- o {
- o top : 0,
- o left : 0,
- o bottom: 0,
- o right : 0,
- o width : 0,
- o height: 0
- o }
- \*/
- getRect: function rectCheck (element) {
- element = element || this._element;
-
- if (this.selector && !(isElement(element))) {
- element = this._context.querySelector(this.selector);
- }
-
- return getElementRect(element);
- },
-
- /*\
- * Interactable.rectChecker
- [ method ]
- *
- * Returns or sets the function used to calculate the interactable's
- * element's rectangle
- *
- - checker (function) #optional A function which returns this Interactable's bounding rectangle. See @Interactable.getRect
- = (function | object) The checker function or this Interactable
- \*/
- rectChecker: function (checker) {
- if (isFunction(checker)) {
- this.getRect = checker;
-
- return this;
- }
-
- if (checker === null) {
- delete this.options.getRect;
-
- return this;
- }
-
- return this.getRect;
- },
-
- /*\
- * Interactable.styleCursor
- [ method ]
- *
- * Returns or sets whether the action that would be performed when the
- * mouse on the element are checked on `mousemove` so that the cursor
- * may be styled appropriately
- *
- - newValue (boolean) #optional
- = (boolean | Interactable) The current setting or this Interactable
- \*/
- styleCursor: function (newValue) {
- if (isBool(newValue)) {
- this.options.styleCursor = newValue;
-
- return this;
- }
-
- if (newValue === null) {
- delete this.options.styleCursor;
-
- return this;
- }
-
- return this.options.styleCursor;
- },
-
- /*\
- * Interactable.preventDefault
- [ method ]
- *
- * Returns or sets whether to prevent the browser's default behaviour
- * in response to pointer events. Can be set to:
- * - `'always'` to always prevent
- * - `'never'` to never prevent
- * - `'auto'` to let interact.js try to determine what would be best
- *
- - newValue (string) #optional `true`, `false` or `'auto'`
- = (string | Interactable) The current setting or this Interactable
- \*/
- preventDefault: function (newValue) {
- if (/^(always|never|auto)$/.test(newValue)) {
- this.options.preventDefault = newValue;
- return this;
- }
-
- if (isBool(newValue)) {
- this.options.preventDefault = newValue? 'always' : 'never';
- return this;
- }
-
- return this.options.preventDefault;
- },
-
- /*\
- * Interactable.origin
- [ method ]
- *
- * Gets or sets the origin of the Interactable's element. The x and y
- * of the origin will be subtracted from action event coordinates.
- *
- - origin (object | string) #optional An object eg. { x: 0, y: 0 } or string 'parent', 'self' or any CSS selector
- * OR
- - origin (Element) #optional An HTML or SVG Element whose rect will be used
- **
- = (object) The current origin or this Interactable
- \*/
- origin: function (newValue) {
- if (trySelector(newValue)) {
- this.options.origin = newValue;
- return this;
- }
- else if (isObject(newValue)) {
- this.options.origin = newValue;
- return this;
- }
-
- return this.options.origin;
- },
-
- /*\
- * Interactable.deltaSource
- [ method ]
- *
- * Returns or sets the mouse coordinate types used to calculate the
- * movement of the pointer.
- *
- - newValue (string) #optional Use 'client' if you will be scrolling while interacting; Use 'page' if you want autoScroll to work
- = (string | object) The current deltaSource or this Interactable
- \*/
- deltaSource: function (newValue) {
- if (newValue === 'page' || newValue === 'client') {
- this.options.deltaSource = newValue;
-
- return this;
- }
-
- return this.options.deltaSource;
- },
-
- /*\
- * Interactable.restrict
- [ method ]
- **
- * Deprecated. Add a `restrict` property to the options object passed to
- * @Interactable.draggable, @Interactable.resizable or @Interactable.gesturable instead.
- *
- * Returns or sets the rectangles within which actions on this
- * interactable (after snap calculations) are restricted. By default,
- * restricting is relative to the pointer coordinates. You can change
- * this by setting the
- * [`elementRect`](https://github.com/taye/interact.js/pull/72).
- **
- - options (object) #optional an object with keys drag, resize, and/or gesture whose values are rects, Elements, CSS selectors, or 'parent' or 'self'
- = (object) The current restrictions object or this Interactable
- **
- | interact(element).restrict({
- | // the rect will be `interact.getElementRect(element.parentNode)`
- | drag: element.parentNode,
- |
- | // x and y are relative to the the interactable's origin
- | resize: { x: 100, y: 100, width: 200, height: 200 }
- | })
- |
- | interact('.draggable').restrict({
- | // the rect will be the selected element's parent
- | drag: 'parent',
- |
- | // do not restrict during normal movement.
- | // Instead, trigger only one restricted move event
- | // immediately before the end event.
- | endOnly: true,
- |
- | // https://github.com/taye/interact.js/pull/72#issue-41813493
- | elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
- | });
- \*/
- restrict: function (options) {
- if (!isObject(options)) {
- return this.setOptions('restrict', options);
- }
-
- var actions = ['drag', 'resize', 'gesture'],
- ret;
-
- for (var i = 0; i < actions.length; i++) {
- var action = actions[i];
-
- if (action in options) {
- var perAction = extend({
- actions: [action],
- restriction: options[action]
- }, options);
-
- ret = this.setOptions('restrict', perAction);
- }
- }
-
- return ret;
- },
-
- /*\
- * Interactable.context
- [ method ]
- *
- * Gets the selector context Node of the Interactable. The default is `window.document`.
- *
- = (Node) The context Node of this Interactable
- **
- \*/
- context: function () {
- return this._context;
- },
-
- _context: document,
-
- /*\
- * Interactable.ignoreFrom
- [ method ]
- *
- * If the target of the `mousedown`, `pointerdown` or `touchstart`
- * event or any of it's parents match the given CSS selector or
- * Element, no drag/resize/gesture is started.
- *
- - newValue (string | Element | null) #optional a CSS selector string, an Element or `null` to not ignore any elements
- = (string | Element | object) The current ignoreFrom value or this Interactable
- **
- | interact(element, { ignoreFrom: document.getElementById('no-action') });
- | // or
- | interact(element).ignoreFrom('input, textarea, a');
- \*/
- ignoreFrom: function (newValue) {
- if (trySelector(newValue)) { // CSS selector to match event.target
- this.options.ignoreFrom = newValue;
- return this;
- }
-
- if (isElement(newValue)) { // specific element
- this.options.ignoreFrom = newValue;
- return this;
- }
-
- return this.options.ignoreFrom;
- },
-
- /*\
- * Interactable.allowFrom
- [ method ]
- *
- * A drag/resize/gesture is started only If the target of the
- * `mousedown`, `pointerdown` or `touchstart` event or any of it's
- * parents match the given CSS selector or Element.
- *
- - newValue (string | Element | null) #optional a CSS selector string, an Element or `null` to allow from any element
- = (string | Element | object) The current allowFrom value or this Interactable
- **
- | interact(element, { allowFrom: document.getElementById('drag-handle') });
- | // or
- | interact(element).allowFrom('.handle');
- \*/
- allowFrom: function (newValue) {
- if (trySelector(newValue)) { // CSS selector to match event.target
- this.options.allowFrom = newValue;
- return this;
- }
-
- if (isElement(newValue)) { // specific element
- this.options.allowFrom = newValue;
- return this;
- }
-
- return this.options.allowFrom;
- },
-
- /*\
- * Interactable.element
- [ method ]
- *
- * If this is not a selector Interactable, it returns the element this
- * interactable represents
- *
- = (Element) HTML / SVG Element
- \*/
- element: function () {
- return this._element;
- },
-
- /*\
- * Interactable.fire
- [ method ]
- *
- * Calls listeners for the given InteractEvent type bound globally
- * and directly to this Interactable
- *
- - iEvent (InteractEvent) The InteractEvent object to be fired on this Interactable
- = (Interactable) this Interactable
- \*/
- fire: function (iEvent) {
- if (!(iEvent && iEvent.type) || !contains(eventTypes, iEvent.type)) {
- return this;
- }
-
- var listeners,
- i,
- len,
- onEvent = 'on' + iEvent.type,
- funcName = '';
-
- // Interactable#on() listeners
- if (iEvent.type in this._iEvents) {
- listeners = this._iEvents[iEvent.type];
-
- for (i = 0, len = listeners.length; i < len && !iEvent.immediatePropagationStopped; i++) {
- funcName = listeners[i].name;
- listeners[i](iEvent);
- }
- }
-
- // interactable.onevent listener
- if (isFunction(this[onEvent])) {
- funcName = this[onEvent].name;
- this[onEvent](iEvent);
- }
-
- // interact.on() listeners
- if (iEvent.type in globalEvents && (listeners = globalEvents[iEvent.type])) {
-
- for (i = 0, len = listeners.length; i < len && !iEvent.immediatePropagationStopped; i++) {
- funcName = listeners[i].name;
- listeners[i](iEvent);
- }
- }
-
- return this;
- },
-
- /*\
- * Interactable.on
- [ method ]
- *
- * Binds a listener for an InteractEvent or DOM event.
- *
- - eventType (string | array | object) The types of events to listen for
- - listener (function) The function to be called on the given event(s)
- - useCapture (boolean) #optional useCapture flag for addEventListener
- = (object) This Interactable
- \*/
- on: function (eventType, listener, useCapture) {
- var i;
-
- if (isString(eventType) && eventType.search(' ') !== -1) {
- eventType = eventType.trim().split(/ +/);
- }
-
- if (isArray(eventType)) {
- for (i = 0; i < eventType.length; i++) {
- this.on(eventType[i], listener, useCapture);
- }
-
- return this;
- }
-
- if (isObject(eventType)) {
- for (var prop in eventType) {
- this.on(prop, eventType[prop], listener);
- }
-
- return this;
- }
-
- if (eventType === 'wheel') {
- eventType = wheelEvent;
- }
-
- // convert to boolean
- useCapture = useCapture? true: false;
-
- if (contains(eventTypes, eventType)) {
- // if this type of event was never bound to this Interactable
- if (!(eventType in this._iEvents)) {
- this._iEvents[eventType] = [listener];
- }
- else {
- this._iEvents[eventType].push(listener);
- }
- }
- // delegated event for selector
- else if (this.selector) {
- if (!delegatedEvents[eventType]) {
- delegatedEvents[eventType] = {
- selectors: [],
- contexts : [],
- listeners: []
- };
-
- // add delegate listener functions
- for (i = 0; i < documents.length; i++) {
- events.add(documents[i], eventType, delegateListener);
- events.add(documents[i], eventType, delegateUseCapture, true);
- }
- }
-
- var delegated = delegatedEvents[eventType],
- index;
-
- for (index = delegated.selectors.length - 1; index >= 0; index--) {
- if (delegated.selectors[index] === this.selector
- && delegated.contexts[index] === this._context) {
- break;
- }
- }
-
- if (index === -1) {
- index = delegated.selectors.length;
-
- delegated.selectors.push(this.selector);
- delegated.contexts .push(this._context);
- delegated.listeners.push([]);
- }
-
- // keep listener and useCapture flag
- delegated.listeners[index].push([listener, useCapture]);
- }
- else {
- events.add(this._element, eventType, listener, useCapture);
- }
-
- return this;
- },
-
- /*\
- * Interactable.off
- [ method ]
- *
- * Removes an InteractEvent or DOM event listener
- *
- - eventType (string | array | object) The types of events that were listened for
- - listener (function) The listener function to be removed
- - useCapture (boolean) #optional useCapture flag for removeEventListener
- = (object) This Interactable
- \*/
- off: function (eventType, listener, useCapture) {
- var i;
-
- if (isString(eventType) && eventType.search(' ') !== -1) {
- eventType = eventType.trim().split(/ +/);
- }
-
- if (isArray(eventType)) {
- for (i = 0; i < eventType.length; i++) {
- this.off(eventType[i], listener, useCapture);
- }
-
- return this;
- }
-
- if (isObject(eventType)) {
- for (var prop in eventType) {
- this.off(prop, eventType[prop], listener);
- }
-
- return this;
- }
-
- var eventList,
- index = -1;
-
- // convert to boolean
- useCapture = useCapture? true: false;
-
- if (eventType === 'wheel') {
- eventType = wheelEvent;
- }
-
- // if it is an action event type
- if (contains(eventTypes, eventType)) {
- eventList = this._iEvents[eventType];
-
- if (eventList && (index = indexOf(eventList, listener)) !== -1) {
- this._iEvents[eventType].splice(index, 1);
- }
- }
- // delegated event
- else if (this.selector) {
- var delegated = delegatedEvents[eventType],
- matchFound = false;
-
- if (!delegated) { return this; }
-
- // count from last index of delegated to 0
- for (index = delegated.selectors.length - 1; index >= 0; index--) {
- // look for matching selector and context Node
- if (delegated.selectors[index] === this.selector
- && delegated.contexts[index] === this._context) {
-
- var listeners = delegated.listeners[index];
-
- // each item of the listeners array is an array: [function, useCaptureFlag]
- for (i = listeners.length - 1; i >= 0; i--) {
- var fn = listeners[i][0],
- useCap = listeners[i][1];
-
- // check if the listener functions and useCapture flags match
- if (fn === listener && useCap === useCapture) {
- // remove the listener from the array of listeners
- listeners.splice(i, 1);
-
- // if all listeners for this interactable have been removed
- // remove the interactable from the delegated arrays
- if (!listeners.length) {
- delegated.selectors.splice(index, 1);
- delegated.contexts .splice(index, 1);
- delegated.listeners.splice(index, 1);
-
- // remove delegate function from context
- events.remove(this._context, eventType, delegateListener);
- events.remove(this._context, eventType, delegateUseCapture, true);
-
- // remove the arrays if they are empty
- if (!delegated.selectors.length) {
- delegatedEvents[eventType] = null;
- }
- }
-
- // only remove one listener
- matchFound = true;
- break;
- }
- }
-
- if (matchFound) { break; }
- }
- }
- }
- // remove listener from this Interatable's element
- else {
- events.remove(this._element, eventType, listener, useCapture);
- }
-
- return this;
- },
-
- /*\
- * Interactable.set
- [ method ]
- *
- * Reset the options of this Interactable
- - options (object) The new settings to apply
- = (object) This Interactable
- \*/
- set: function (options) {
- if (!isObject(options)) {
- options = {};
- }
-
- this.options = extend({}, defaultOptions.base);
-
- var i,
- actions = ['drag', 'drop', 'resize', 'gesture'],
- methods = ['draggable', 'dropzone', 'resizable', 'gesturable'],
- perActions = extend(extend({}, defaultOptions.perAction), options[action] || {});
-
- for (i = 0; i < actions.length; i++) {
- var action = actions[i];
-
- this.options[action] = extend({}, defaultOptions[action]);
-
- this.setPerAction(action, perActions);
-
- this[methods[i]](options[action]);
- }
-
- var settings = [
- 'accept', 'actionChecker', 'allowFrom', 'deltaSource',
- 'dropChecker', 'ignoreFrom', 'origin', 'preventDefault',
- 'rectChecker', 'styleCursor'
- ];
-
- for (i = 0, len = settings.length; i < len; i++) {
- var setting = settings[i];
-
- this.options[setting] = defaultOptions.base[setting];
-
- if (setting in options) {
- this[setting](options[setting]);
- }
- }
-
- return this;
- },
-
- /*\
- * Interactable.unset
- [ method ]
- *
- * Remove this interactable from the list of interactables and remove
- * it's drag, drop, resize and gesture capabilities
- *
- = (object) @interact
- \*/
- unset: function () {
- events.remove(this._element, 'all');
-
- if (!isString(this.selector)) {
- events.remove(this, 'all');
- if (this.options.styleCursor) {
- this._element.style.cursor = '';
- }
- }
- else {
- // remove delegated events
- for (var type in delegatedEvents) {
- var delegated = delegatedEvents[type];
-
- for (var i = 0; i < delegated.selectors.length; i++) {
- if (delegated.selectors[i] === this.selector
- && delegated.contexts[i] === this._context) {
-
- delegated.selectors.splice(i, 1);
- delegated.contexts .splice(i, 1);
- delegated.listeners.splice(i, 1);
-
- // remove the arrays if they are empty
- if (!delegated.selectors.length) {
- delegatedEvents[type] = null;
- }
- }
-
- events.remove(this._context, type, delegateListener);
- events.remove(this._context, type, delegateUseCapture, true);
-
- break;
- }
- }
- }
-
- this.dropzone(false);
-
- interactables.splice(indexOf(interactables, this), 1);
-
- return interact;
- }
- };
-
- function warnOnce (method, message) {
- var warned = false;
-
- return function () {
- if (!warned) {
- window.console.warn(message);
- warned = true;
- }
-
- return method.apply(this, arguments);
- };
- }
-
- Interactable.prototype.snap = warnOnce(Interactable.prototype.snap,
- 'Interactable#snap is deprecated. See the new documentation for snapping at http://interactjs.io/docs/snapping');
- Interactable.prototype.restrict = warnOnce(Interactable.prototype.restrict,
- 'Interactable#restrict is deprecated. See the new documentation for resticting at http://interactjs.io/docs/restriction');
- Interactable.prototype.inertia = warnOnce(Interactable.prototype.inertia,
- 'Interactable#inertia is deprecated. See the new documentation for inertia at http://interactjs.io/docs/inertia');
- Interactable.prototype.autoScroll = warnOnce(Interactable.prototype.autoScroll,
- 'Interactable#autoScroll is deprecated. See the new documentation for autoScroll at http://interactjs.io/docs/#autoscroll');
- Interactable.prototype.squareResize = warnOnce(Interactable.prototype.squareResize,
- 'Interactable#squareResize is deprecated. See http://interactjs.io/docs/#resize-square');
-
- Interactable.prototype.accept = warnOnce(Interactable.prototype.accept,
- 'Interactable#accept is deprecated. use Interactable#dropzone({ accept: target }) instead');
- Interactable.prototype.dropChecker = warnOnce(Interactable.prototype.dropChecker,
- 'Interactable#dropChecker is deprecated. use Interactable#dropzone({ dropChecker: checkerFunction }) instead');
- Interactable.prototype.context = warnOnce(Interactable.prototype.context,
- 'Interactable#context as a method is deprecated. It will soon be a DOM Node instead');
-
- /*\
- * interact.isSet
- [ method ]
- *
- * Check if an element has been set
- - element (Element) The Element being searched for
- = (boolean) Indicates if the element or CSS selector was previously passed to interact
- \*/
- interact.isSet = function(element, options) {
- return interactables.indexOfElement(element, options && options.context) !== -1;
- };
-
- /*\
- * interact.on
- [ method ]
- *
- * Adds a global listener for an InteractEvent or adds a DOM event to
- * `document`
- *
- - type (string | array | object) The types of events to listen for
- - listener (function) The function to be called on the given event(s)
- - useCapture (boolean) #optional useCapture flag for addEventListener
- = (object) interact
- \*/
- interact.on = function (type, listener, useCapture) {
- if (isString(type) && type.search(' ') !== -1) {
- type = type.trim().split(/ +/);
- }
-
- if (isArray(type)) {
- for (var i = 0; i < type.length; i++) {
- interact.on(type[i], listener, useCapture);
- }
-
- return interact;
- }
-
- if (isObject(type)) {
- for (var prop in type) {
- interact.on(prop, type[prop], listener);
- }
-
- return interact;
- }
-
- // if it is an InteractEvent type, add listener to globalEvents
- if (contains(eventTypes, type)) {
- // if this type of event was never bound
- if (!globalEvents[type]) {
- globalEvents[type] = [listener];
- }
- else {
- globalEvents[type].push(listener);
- }
- }
- // If non InteractEvent type, addEventListener to document
- else {
- events.add(document, type, listener, useCapture);
- }
-
- return interact;
- };
-
- /*\
- * interact.off
- [ method ]
- *
- * Removes a global InteractEvent listener or DOM event from `document`
- *
- - type (string | array | object) The types of events that were listened for
- - listener (function) The listener function to be removed
- - useCapture (boolean) #optional useCapture flag for removeEventListener
- = (object) interact
- \*/
- interact.off = function (type, listener, useCapture) {
- if (isString(type) && type.search(' ') !== -1) {
- type = type.trim().split(/ +/);
- }
-
- if (isArray(type)) {
- for (var i = 0; i < type.length; i++) {
- interact.off(type[i], listener, useCapture);
- }
-
- return interact;
- }
-
- if (isObject(type)) {
- for (var prop in type) {
- interact.off(prop, type[prop], listener);
- }
-
- return interact;
- }
-
- if (!contains(eventTypes, type)) {
- events.remove(document, type, listener, useCapture);
- }
- else {
- var index;
-
- if (type in globalEvents
- && (index = indexOf(globalEvents[type], listener)) !== -1) {
- globalEvents[type].splice(index, 1);
- }
- }
-
- return interact;
- };
-
- /*\
- * interact.enableDragging
- [ method ]
- *
- * Deprecated.
- *
- * Returns or sets whether dragging is enabled for any Interactables
- *
- - newValue (boolean) #optional `true` to allow the action; `false` to disable action for all Interactables
- = (boolean | object) The current setting or interact
- \*/
- interact.enableDragging = warnOnce(function (newValue) {
- if (newValue !== null && newValue !== undefined) {
- actionIsEnabled.drag = newValue;
-
- return interact;
- }
- return actionIsEnabled.drag;
- }, 'interact.enableDragging is deprecated and will soon be removed.');
-
- /*\
- * interact.enableResizing
- [ method ]
- *
- * Deprecated.
- *
- * Returns or sets whether resizing is enabled for any Interactables
- *
- - newValue (boolean) #optional `true` to allow the action; `false` to disable action for all Interactables
- = (boolean | object) The current setting or interact
- \*/
- interact.enableResizing = warnOnce(function (newValue) {
- if (newValue !== null && newValue !== undefined) {
- actionIsEnabled.resize = newValue;
-
- return interact;
- }
- return actionIsEnabled.resize;
- }, 'interact.enableResizing is deprecated and will soon be removed.');
-
- /*\
- * interact.enableGesturing
- [ method ]
- *
- * Deprecated.
- *
- * Returns or sets whether gesturing is enabled for any Interactables
- *
- - newValue (boolean) #optional `true` to allow the action; `false` to disable action for all Interactables
- = (boolean | object) The current setting or interact
- \*/
- interact.enableGesturing = warnOnce(function (newValue) {
- if (newValue !== null && newValue !== undefined) {
- actionIsEnabled.gesture = newValue;
-
- return interact;
- }
- return actionIsEnabled.gesture;
- }, 'interact.enableGesturing is deprecated and will soon be removed.');
-
- interact.eventTypes = eventTypes;
-
- /*\
- * interact.debug
- [ method ]
- *
- * Returns debugging data
- = (object) An object with properties that outline the current state and expose internal functions and variables
- \*/
- interact.debug = function () {
- var interaction = interactions[0] || new Interaction();
-
- return {
- interactions : interactions,
- target : interaction.target,
- dragging : interaction.dragging,
- resizing : interaction.resizing,
- gesturing : interaction.gesturing,
- prepared : interaction.prepared,
- matches : interaction.matches,
- matchElements : interaction.matchElements,
-
- prevCoords : interaction.prevCoords,
- startCoords : interaction.startCoords,
-
- pointerIds : interaction.pointerIds,
- pointers : interaction.pointers,
- addPointer : listeners.addPointer,
- removePointer : listeners.removePointer,
- recordPointer : listeners.recordPointer,
-
- snap : interaction.snapStatus,
- restrict : interaction.restrictStatus,
- inertia : interaction.inertiaStatus,
-
- downTime : interaction.downTimes[0],
- downEvent : interaction.downEvent,
- downPointer : interaction.downPointer,
- prevEvent : interaction.prevEvent,
-
- Interactable : Interactable,
- interactables : interactables,
- pointerIsDown : interaction.pointerIsDown,
- defaultOptions : defaultOptions,
- defaultActionChecker : defaultActionChecker,
-
- actionCursors : actionCursors,
- dragMove : listeners.dragMove,
- resizeMove : listeners.resizeMove,
- gestureMove : listeners.gestureMove,
- pointerUp : listeners.pointerUp,
- pointerDown : listeners.pointerDown,
- pointerMove : listeners.pointerMove,
- pointerHover : listeners.pointerHover,
-
- eventTypes : eventTypes,
-
- events : events,
- globalEvents : globalEvents,
- delegatedEvents : delegatedEvents,
-
- prefixedPropREs : prefixedPropREs
- };
- };
-
- // expose the functions used to calculate multi-touch properties
- interact.getPointerAverage = pointerAverage;
- interact.getTouchBBox = touchBBox;
- interact.getTouchDistance = touchDistance;
- interact.getTouchAngle = touchAngle;
-
- interact.getElementRect = getElementRect;
- interact.getElementClientRect = getElementClientRect;
- interact.matchesSelector = matchesSelector;
- interact.closest = closest;
-
- /*\
- * interact.margin
- [ method ]
- *
- * Deprecated. Use `interact(target).resizable({ margin: number });` instead.
- * Returns or sets the margin for autocheck resizing used in
- * @Interactable.getAction. That is the distance from the bottom and right
- * edges of an element clicking in which will start resizing
- *
- - newValue (number) #optional
- = (number | interact) The current margin value or interact
- \*/
- interact.margin = warnOnce(function (newvalue) {
- if (isNumber(newvalue)) {
- margin = newvalue;
-
- return interact;
- }
- return margin;
- },
- 'interact.margin is deprecated. Use interact(target).resizable({ margin: number }); instead.') ;
-
- /*\
- * interact.supportsTouch
- [ method ]
- *
- = (boolean) Whether or not the browser supports touch input
- \*/
- interact.supportsTouch = function () {
- return supportsTouch;
- };
-
- /*\
- * interact.supportsPointerEvent
- [ method ]
- *
- = (boolean) Whether or not the browser supports PointerEvents
- \*/
- interact.supportsPointerEvent = function () {
- return supportsPointerEvent;
- };
-
- /*\
- * interact.stop
- [ method ]
- *
- * Cancels all interactions (end events are not fired)
- *
- - event (Event) An event on which to call preventDefault()
- = (object) interact
- \*/
- interact.stop = function (event) {
- for (var i = interactions.length - 1; i >= 0; i--) {
- interactions[i].stop(event);
- }
-
- return interact;
- };
-
- /*\
- * interact.dynamicDrop
- [ method ]
- *
- * Returns or sets whether the dimensions of dropzone elements are
- * calculated on every dragmove or only on dragstart for the default
- * dropChecker
- *
- - newValue (boolean) #optional True to check on each move. False to check only before start
- = (boolean | interact) The current setting or interact
- \*/
- interact.dynamicDrop = function (newValue) {
- if (isBool(newValue)) {
- //if (dragging && dynamicDrop !== newValue && !newValue) {
- //calcRects(dropzones);
- //}
-
- dynamicDrop = newValue;
-
- return interact;
- }
- return dynamicDrop;
- };
-
- /*\
- * interact.pointerMoveTolerance
- [ method ]
- * Returns or sets the distance the pointer must be moved before an action
- * sequence occurs. This also affects tolerance for tap events.
- *
- - newValue (number) #optional The movement from the start position must be greater than this value
- = (number | Interactable) The current setting or interact
- \*/
- interact.pointerMoveTolerance = function (newValue) {
- if (isNumber(newValue)) {
- pointerMoveTolerance = newValue;
-
- return this;
- }
-
- return pointerMoveTolerance;
- };
-
- /*\
- * interact.maxInteractions
- [ method ]
- **
- * Returns or sets the maximum number of concurrent interactions allowed.
- * By default only 1 interaction is allowed at a time (for backwards
- * compatibility). To allow multiple interactions on the same Interactables
- * and elements, you need to enable it in the draggable, resizable and
- * gesturable `'max'` and `'maxPerElement'` options.
- **
- - newValue (number) #optional Any number. newValue <= 0 means no interactions.
- \*/
- interact.maxInteractions = function (newValue) {
- if (isNumber(newValue)) {
- maxInteractions = newValue;
-
- return this;
- }
-
- return maxInteractions;
- };
-
- interact.createSnapGrid = function (grid) {
- return function (x, y) {
- var offsetX = 0,
- offsetY = 0;
-
- if (isObject(grid.offset)) {
- offsetX = grid.offset.x;
- offsetY = grid.offset.y;
- }
-
- var gridx = Math.round((x - offsetX) / grid.x),
- gridy = Math.round((y - offsetY) / grid.y),
-
- newX = gridx * grid.x + offsetX,
- newY = gridy * grid.y + offsetY;
-
- return {
- x: newX,
- y: newY,
- range: grid.range
- };
- };
- };
-
- function endAllInteractions (event) {
- for (var i = 0; i < interactions.length; i++) {
- interactions[i].pointerEnd(event, event);
- }
- }
-
- function listenToDocument (doc) {
- if (contains(documents, doc)) { return; }
-
- var win = doc.defaultView || doc.parentWindow;
-
- // add delegate event listener
- for (var eventType in delegatedEvents) {
- events.add(doc, eventType, delegateListener);
- events.add(doc, eventType, delegateUseCapture, true);
- }
-
- if (supportsPointerEvent) {
- if (PointerEvent === win.MSPointerEvent) {
- pEventTypes = {
- up: 'MSPointerUp', down: 'MSPointerDown', over: 'mouseover',
- out: 'mouseout', move: 'MSPointerMove', cancel: 'MSPointerCancel' };
- }
- else {
- pEventTypes = {
- up: 'pointerup', down: 'pointerdown', over: 'pointerover',
- out: 'pointerout', move: 'pointermove', cancel: 'pointercancel' };
- }
-
- events.add(doc, pEventTypes.down , listeners.selectorDown );
- events.add(doc, pEventTypes.move , listeners.pointerMove );
- events.add(doc, pEventTypes.over , listeners.pointerOver );
- events.add(doc, pEventTypes.out , listeners.pointerOut );
- events.add(doc, pEventTypes.up , listeners.pointerUp );
- events.add(doc, pEventTypes.cancel, listeners.pointerCancel);
-
- // autoscroll
- events.add(doc, pEventTypes.move, listeners.autoScrollMove);
- }
- else {
- events.add(doc, 'mousedown', listeners.selectorDown);
- events.add(doc, 'mousemove', listeners.pointerMove );
- events.add(doc, 'mouseup' , listeners.pointerUp );
- events.add(doc, 'mouseover', listeners.pointerOver );
- events.add(doc, 'mouseout' , listeners.pointerOut );
-
- events.add(doc, 'touchstart' , listeners.selectorDown );
- events.add(doc, 'touchmove' , listeners.pointerMove );
- events.add(doc, 'touchend' , listeners.pointerUp );
- events.add(doc, 'touchcancel', listeners.pointerCancel);
-
- // autoscroll
- events.add(doc, 'mousemove', listeners.autoScrollMove);
- events.add(doc, 'touchmove', listeners.autoScrollMove);
- }
-
- events.add(win, 'blur', endAllInteractions);
-
- try {
- if (win.frameElement) {
- var parentDoc = win.frameElement.ownerDocument,
- parentWindow = parentDoc.defaultView;
-
- events.add(parentDoc , 'mouseup' , listeners.pointerEnd);
- events.add(parentDoc , 'touchend' , listeners.pointerEnd);
- events.add(parentDoc , 'touchcancel' , listeners.pointerEnd);
- events.add(parentDoc , 'pointerup' , listeners.pointerEnd);
- events.add(parentDoc , 'MSPointerUp' , listeners.pointerEnd);
- events.add(parentWindow, 'blur' , endAllInteractions );
- }
- }
- catch (error) {
- interact.windowParentError = error;
- }
-
- // prevent native HTML5 drag on interact.js target elements
- events.add(doc, 'dragstart', function (event) {
- for (var i = 0; i < interactions.length; i++) {
- var interaction = interactions[i];
-
- if (interaction.element
- && (interaction.element === event.target
- || nodeContains(interaction.element, event.target))) {
-
- interaction.checkAndPreventDefault(event, interaction.target, interaction.element);
- return;
- }
- }
- });
-
- if (events.useAttachEvent) {
- // For IE's lack of Event#preventDefault
- events.add(doc, 'selectstart', function (event) {
- var interaction = interactions[0];
-
- if (interaction.currentAction()) {
- interaction.checkAndPreventDefault(event);
- }
- });
-
- // For IE's bad dblclick event sequence
- events.add(doc, 'dblclick', doOnInteractions('ie8Dblclick'));
- }
-
- documents.push(doc);
- }
-
- listenToDocument(document);
-
- function indexOf (array, target) {
- for (var i = 0, len = array.length; i < len; i++) {
- if (array[i] === target) {
- return i;
- }
- }
-
- return -1;
- }
-
- function contains (array, target) {
- return indexOf(array, target) !== -1;
- }
-
- function matchesSelector (element, selector, nodeList) {
- if (ie8MatchesSelector) {
- return ie8MatchesSelector(element, selector, nodeList);
- }
-
- // remove /deep/ from selectors if shadowDOM polyfill is used
- if (window !== realWindow) {
- selector = selector.replace(/\/deep\//g, ' ');
- }
-
- return element[prefixedMatchesSelector](selector);
- }
-
- function matchesUpTo (element, selector, limit) {
- while (isElement(element)) {
- if (matchesSelector(element, selector)) {
- return true;
- }
-
- element = parentElement(element);
-
- if (element === limit) {
- return matchesSelector(element, selector);
- }
- }
-
- return false;
- }
-
- // For IE8's lack of an Element#matchesSelector
- // taken from http://tanalin.com/en/blog/2012/12/matches-selector-ie8/ and modified
- if (!(prefixedMatchesSelector in Element.prototype) || !isFunction(Element.prototype[prefixedMatchesSelector])) {
- ie8MatchesSelector = function (element, selector, elems) {
- elems = elems || element.parentNode.querySelectorAll(selector);
-
- for (var i = 0, len = elems.length; i < len; i++) {
- if (elems[i] === element) {
- return true;
- }
- }
-
- return false;
- };
- }
-
- // requestAnimationFrame polyfill
- (function() {
- var lastTime = 0,
- vendors = ['ms', 'moz', 'webkit', 'o'];
-
- for(var x = 0; x < vendors.length && !realWindow.requestAnimationFrame; ++x) {
- reqFrame = realWindow[vendors[x]+'RequestAnimationFrame'];
- cancelFrame = realWindow[vendors[x]+'CancelAnimationFrame'] || realWindow[vendors[x]+'CancelRequestAnimationFrame'];
- }
-
- if (!reqFrame) {
- reqFrame = function(callback) {
- var currTime = new Date().getTime(),
- timeToCall = Math.max(0, 16 - (currTime - lastTime)),
- id = setTimeout(function() { callback(currTime + timeToCall); },
- timeToCall);
- lastTime = currTime + timeToCall;
- return id;
- };
- }
-
- if (!cancelFrame) {
- cancelFrame = function(id) {
- clearTimeout(id);
- };
- }
- }());
-
- /* global exports: true, module, define */
-
- // http://documentcloud.github.io/underscore/docs/underscore.html#section-11
- if (typeof exports !== 'undefined') {
- if (typeof module !== 'undefined' && module.exports) {
- exports = module.exports = interact;
- }
- exports.interact = interact;
- }
- // AMD
- else if (typeof define === 'function' && define.amd) {
- define('interact', function() {
- return interact;
- });
- }
- else {
- realWindow.interact = interact;
- }
-
-} (typeof window === 'undefined'? undefined : window));
projects / fluidbook-html5.git / commitdiff