diff options
Diffstat (limited to 'dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/dependencies/interact.js')
| -rw-r--r-- | dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/dependencies/interact.js | 5963 |
1 files changed, 0 insertions, 5963 deletions
diff --git a/dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/dependencies/interact.js b/dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/dependencies/interact.js deleted file mode 100644 index f11140d..0000000 --- a/dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/dependencies/interact.js +++ /dev/null @@ -1,5963 +0,0 @@ -/** - * interact.js v1.2.4 - * - * 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'; - - 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, - axis: 'xy', - - // 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 - dt = (now - autoScroll.prevTime) / 1000, - // displacement - s = options.speed * dt; - - if (s >= 1) { - if (isWindow(container)) { - container.scrollBy(autoScroll.x * s, autoScroll.y * s); - } - else if (container) { - container.scrollLeft += autoScroll.x * s; - container.scrollTop += autoScroll.y * s; - } - - autoScroll.prevTime = now; - } - - if (autoScroll.isScrolling) { - cancelFrame(autoScroll.i); - autoScroll.i = reqFrame(autoScroll.scroll); - } - }, - - edgeMove: function (event) { - var interaction, - target, - doAutoscroll = false; - - for (var i = 0; i < interactions.length; i++) { - interaction = interactions[i]; - - if (interaction.interacting() - && checkAutoScroll(interaction.target, interaction.prepared.name)) { - - target = interaction.target; - doAutoscroll = true; - break; - } - } - - if (!doAutoscroll) { return; } - - var top, - right, - bottom, - left, - options = target.options[interaction.prepared.name].autoScroll, - container = options.container || getWindow(interaction.element); - - if (isWindow(container)) { - left = event.clientX < autoScroll.margin; - top = event.clientY < autoScroll.margin; - right = event.clientX > container.innerWidth - autoScroll.margin; - bottom = event.clientY > container.innerHeight - autoScroll.margin; - } - else { - var rect = getElementRect(container); - - left = event.clientX < rect.left + autoScroll.margin; - top = event.clientY < rect.top + autoScroll.margin; - right = event.clientX > rect.right - autoScroll.margin; - bottom = event.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(interaction); - } - }, - - isScrolling: false, - prevTime: 0, - - start: function (interaction) { - autoScroll.isScrolling = true; - cancelFrame(autoScroll.i); - - autoScroll.interaction = interaction; - autoScroll.prevTime = 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 - supportsPointerEvent = !!PointerEvent, - - // 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 - // getBoundingClientRect/getClientRects on iOS <=7 but it does on iOS 8 - isIOS7orLower = (/iP(hone|od|ad)/.test(navigator.platform) - && /OS [1-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)); - } - } 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); - elements.splice(elementIndex); - attachedListeners.splice(elementIndex); - } - } - - 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 && 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; - } - - 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, pointer, interaction) { - if (!pointer) { - if (interaction.pointerIds.length > 1) { - pointer = touchAverage(interaction.pointers); - } - else { - pointer = interaction.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; - } - - // 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, interaction) { - page = page || {}; - - if (pointer instanceof InteractEvent) { - if (/inertiastart/.test(pointer.type)) { - interaction = interaction || pointer.interaction; - - extend(page, interaction.inertiaStatus.upCoords.page); - - page.x += interaction.inertiaStatus.sx; - page.y += interaction.inertiaStatus.sy; - } - else { - page.x = pointer.pageX; - page.y = pointer.pageY; - } - } - // Opera Mobile handles the viewport and scrolling oddly - else if (isOperaMobile) { - getXY('screen', pointer, page); - - page.x += window.scrollX; - page.y += window.scrollY; - } - else { - getXY('page', pointer, page); - } - - return page; - } - - function getClientXY (pointer, client, interaction) { - client = client || {}; - - if (pointer instanceof InteractEvent) { - if (/inertiastart/.test(pointer.type)) { - extend(client, interaction.inertiaStatus.upCoords.client); - - client.x += interaction.inertiaStatus.sx; - client.y += interaction.inertiaStatus.sy; - } - else { - client.x = pointer.clientX; - client.y = pointer.clientY; - } - } - else { - // Opera Mobile handles the viewport and scrolling oddly - getXY(isOperaMobile? 'screen': '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 getElementRect (element) { - var scroll = isIOS7orLower - ? { x: 0, y: 0 } - : getScrollXY(getWindow(element)), - clientRect = (element instanceof SVGElement)? - element.getBoundingClientRect(): - element.getClientRects()[0]; - - return clientRect && { - left : clientRect.left + scroll.x, - right : clientRect.right + scroll.x, - top : clientRect.top + scroll.y, - bottom: clientRect.bottom + scroll.y, - width : clientRect.width || clientRect.right - clientRect.left, - height: clientRect.heigh || clientRect.bottom - clientRect.top - }; - } - - 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 touchAverage (event) { - var touches = getTouchPair(event); - - return { - pageX: (touches[0].pageX + touches[1].pageX) / 2, - pageY: (touches[0].pageY + touches[1].pageY) / 2, - clientX: (touches[0].clientX + touches[1].clientX) / 2, - clientY: (touches[0].clientY + touches[1].clientY) / 2 - }; - } - - 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, - - 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, 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, curMatches, curMatchElements)) { - this.matches = curMatches; - this.matchElements = curMatchElements; - - this.pointerHover(pointer, event, this.matches, this.matchElements); - events.add(eventTarget, - PointerEvent? 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, - PointerEvent? 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, matches, matchElements); - } - else if (target) { - action = validateAction(target.getAction(this.pointers[0], 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, - PointerEvent? 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, 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); - - while (isElement(element) && !action) { - this.matches = []; - this.matchElements = []; - - interactables.forEachSelector(pushMatches); - - action = this.validateSelector(pointer, 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; - this.downEvent = event; - extend(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; - - var pointerIndex = this.addPointer(pointer), - action; - - // If it is the second touch of a multi-touch gesture, keep the target - // the same if a target was set by the first touch - // Otherwise, set the target if there is no action prepared - if ((this.pointerIds.length < 2 && !this.target) || !this.prepared.name) { - - var interactable = interactables.get(curEventTarget); - - if (interactable - && !testIgnore(interactable, curEventTarget, eventTarget) - && testAllow(interactable, curEventTarget, eventTarget) - && (action = validateAction(forceAction || interactable.getAction(pointer, this, curEventTarget), interactable, eventTarget)) - && withinInteractionLimit(interactable, curEventTarget, action)) { - this.target = interactable; - this.element = curEventTarget; - } - } - - var target = this.target, - options = target && target.options; - - if (target && !this.interacting()) { - action = action || validateAction(forceAction || target.getAction(pointer, this, curEventTarget), target, this.element); - - this.setEventXY(this.startCoords); - - 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; - this.downEvent = event; - extend(this.downPointer, pointer); - - this.setEventXY(this.prevCoords); - 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, 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); - } - - 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) { - this.recordPointer(pointer); - - this.setEventXY(this.curCoords, (pointer instanceof InteractEvent) - ? this.inertiaStatus.startEvent - : undefined); - - 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, 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 getDraggable = function (interactable, selector, context) { - var elements = ie8MatchesSelector - ? context.querySelectorAll(selector) - : undefined; - - if (interactable === this.target) { return; } - - if (inContext(interactable, eventTarget) - && !interactable.options.drag.manualStart - && !testIgnore(interactable, element, eventTarget) - && testAllow(interactable, element, eventTarget) - && matchesSelector(element, selector, elements) - && interactable.getAction(this.downPointer, this, 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(); - 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) { - autoScroll.edgeMove(event); - } - }, - - 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, 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); - - if (this.target.options.resize.square) { - var squareEdges = extend({}, this.prepared.edges); - - squareEdges.top = squareEdges.top || (squareEdges.left && !squareEdges.bottom); - squareEdges.left = squareEdges.left || (squareEdges.top && !squareEdges.right ); - squareEdges.bottom = squareEdges.bottom || (squareEdges.right && !squareEdges.top ); - squareEdges.right = squareEdges.right || (squareEdges.bottom && !squareEdges.left ); - - this.prepared._squareEdges = squareEdges; - } - else { - this.prepared._squareEdges = null; - } - - 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); - - if (this.target.options.resize.square) { - var originalEdges = edges; - - edges = this.prepared._squareEdges; - - 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) { - window.negativeWidth = true; - swap = restricted.left; - window.prevNegativeWidth = window.negativeWidth; - window.negtiveWidth = true; - restricted.left = restricted.right; - restricted.right = swap; - } - else { - window.prevNegativeWidth = window.negativeWidth; - window.negativeWidth = false; - } - - } - } - 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) { 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, 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 (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(this.pointers[0], 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' - }; - } - 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 () { - if (this.target && !this.target.selector) { - 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); - } - } - - // delete interaction if it's not the only one - if (interactions.length > 1) { - interactions.splice(indexOf(interactions, this), 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.sx = inertiaStatus.modifiedXe; - inertiaStatus.sy = inertiaStatus.modifiedYe; - - this.pointerMove(inertiaStatus.startEvent, inertiaStatus.startEvent); - - inertiaStatus.active = false; - this.pointerEnd(inertiaStatus.startEvent, inertiaStatus.startEvent); - } - }, - - 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.sx = inertiaStatus.xe; - inertiaStatus.sy = inertiaStatus.ye; - - this.pointerMove(inertiaStatus.startEvent, inertiaStatus.startEvent); - - inertiaStatus.active = false; - inertiaStatus.smoothEnd = false; - - this.pointerEnd(inertiaStatus.startEvent, inertiaStatus.startEvent); - } - }, - - 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; } - - if (!this.interacting()) { - 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) { - // Do not update pointers while inertia is active. - // The inertia start event should be this.pointers[0] - if (this.inertiaStatus.active) { return; } - - 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(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 { - extend(pointerEvent, event); - if (event !== pointer) { - extend(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.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, matches, matchElements) { - for (var i = 0, len = matches.length; i < len; i++) { - var match = matches[i], - matchElement = matchElements[i], - action = validateAction(match.getAction(pointer, 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$|^textarea$/i.test(element.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; - }, - - _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) { - // update the interaction's pointer - if (interaction.pointers[0]) { - interaction.removePointer(interaction.pointers[0]); - } - interaction.addPointer(pointer); - - 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)) { - - interaction.addPointer(pointer); - - 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; - this.y0 = interaction.startCoords.page.y; - this.clientX0 = interaction.startCoords.client.x; - this.clientY0 = interaction.startCoords.client.y; - this.ctrlKey = event.ctrlKey; - this.altKey = event.altKey; - this.shiftKey = event.shiftKey; - this.metaKey = event.metaKey; - this.button = event.button; - 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) { - // 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); - } - - 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', - ]; - - 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 (PointerEvent) { - 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); - this.accept(options.accept); - - 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); - } - - return this; - } - - if (isBool(options)) { - this.options.drop.enabled = options; - - return this; - } - - return this.options.drop; - }, - - dropCheck: function (pointer, 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.dropChecker - ? this.options.dropChecker(pointer, dropped, this, dropElement, draggable, draggableElement) - : false); - } - - var dropOverlap = this.options.drop.overlap; - - if (dropOverlap === 'pointer') { - var page = getPageXY(pointer), - 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.dropChecker) { - dropped = this.options.dropChecker(pointer, dropped, this, dropElement, draggable, draggableElement); - } - - return dropped; - }, - - /*\ - * Interactable.dropChecker - [ method ] - * - * Gets or sets the function used to check if a dragged element is - * over this Interactable. See @Interactable.dropCheck. - * - - checker (function) #optional - * The checker is a function which takes a mouseUp/touchEnd event as a - * parameter and returns true or false to indicate if the the current - * draggable can be dropped into this Interactable - * - - checker (function) The function that will be called when checking for a drop - * The checker function takes the following arguments: - * - - pointer (MouseEvent | PointerEvent | Touch) The pointer/event that ends a drag - - dropped (boolean) The value from the default drop check - - 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 - * - = (Function | Interactable) The checker function or this Interactable - \*/ - dropChecker: function (checker) { - if (isFunction(checker)) { - this.options.dropChecker = checker; - - return this; - } - if (checker === null) { - delete this.options.getRect; - - return this; - } - - return this.options.dropChecker; - }, - - /*\ - * 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 - | }, - | - | // 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.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, interaction, element) { - var action = this.defaultActionChecker(pointer, interaction, element); - - if (this.options.actionChecker) { - return this.options.actionChecker(pointer, 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-horiz').actionChecker(function (defaultAction, interactable) { - | return { - | // resize from the top and right edges - | name: 'resize', - | edges: { top: true, right: true } - | }; - | }); - \*/ - 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 Interactablw - \*/ - 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' - ]; - - 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, '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'); - - /*\ - * 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, - - events : events, - globalEvents : globalEvents, - delegatedEvents : delegatedEvents - }; - }; - - // expose the functions used to calculate multi-touch properties - interact.getTouchAverage = touchAverage; - interact.getTouchBBox = touchBBox; - interact.getTouchDistance = touchDistance; - interact.getTouchAngle = touchAngle; - - interact.getElementRect = getElementRect; - interact.matchesSelector = matchesSelector; - interact.closest = closest; - - /*\ - * interact.margin - [ method ] - * - * 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 = function (newvalue) { - if (isNumber(newvalue)) { - margin = newvalue; - - return interact; - } - return margin; - }; - - /*\ - * 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 - }; - }; - }; - - /////////////////////////// - interact.createLifelineSnapGrid = function () { - - return function (x, y) { - - var firstRun = true; - getLifelines(); //Returns lifelineX[] - for (i = 0; i<lifelineX.length; i++){ - var lifelineCorrected = lifelineX[i][0]-12; - - var delta = Math.abs(lifelineCorrected-rightX); - if (firstRun == true) { - var snapToMe = lifelineCorrected //Corrected lifeline assigned as snap value - firstRun = false; - var snapDelta = delta; //stores delta for the snap value - } - else { - if (delta < snapDelta) { - snapToMe = lifelineCorrected; //Corrected lifeline assigned as snap value - var snapDelta = delta; //stores delta for the snap value - } - } - } - //console.log(snapToMe); - if (snapToMe - rightX<0){ //Right of lifeline - var oldWide = $("#"+currentArrow).width(); - var newWide = oldWide-snapDelta; - //console.log(oldWide); - //console.log(newWide); - $("#"+currentArrow).width(newWide); - } - if (snapToMe - rightX>0){ //Left of lifeline - var oldWide = $("#"+currentArrow).width(); - var newWide = oldWide+snapDelta; - //console.log(oldWide); - //console.log(newWide); - $("#"+currentArrow).width(newWide); - } - - - - - - /////// - var firstRun = true; - for (i = 0; i<lifelineX.length; i++){ - var lifelineCorrected = lifelineX[i][0]; //-12 - - var delta = Math.abs(lifelineCorrected-leftX); - if (firstRun == true) { - var snapToMe = lifelineCorrected //Corrected lifeline assigned as snap value - firstRun = false; - var snapDelta = delta; //stores delta for the snap value - var newX = lifelineCorrected - } - else { - if (delta < snapDelta) { - snapToMe = lifelineCorrected; //Corrected lifeline assigned as snap value - var snapDelta = delta; //stores delta for the snap value - newX = lifelineCorrected - } - } - } - //console.log(snapToMe); - if (snapToMe - leftX<0){ //Right of lifeline - var oldWide = $("#"+currentArrow).width(); - var newWide = oldWide+snapDelta; - //console.log(oldWide); - //console.log(newWide); - $("#"+currentArrow).width(newWide); - - document.getElementById(currentArrow).style.webkitTransform = document.getElementById(currentArrow).style.transform = - 'translate(' + newX + 'px,' + currentY + 'px)'; - - document.getElementById(currentArrow).setAttribute('data_x', newX); - } - if (snapToMe - leftX>0){ //Left of lifeline - var oldWide = $("#"+currentArrow).width(); - var newWide = oldWide-snapDelta; - //console.log(oldWide); - //console.log(newWide); - $("#"+currentArrow).width(newWide); - - document.getElementById(currentArrow).style.webkitTransform = document.getElementById(currentArrow).style.transform = - 'translate(' + newX + 'px,' + currentY + 'px)'; - - document.getElementById(currentArrow).setAttribute('data_x', newX); - } - ////// - - - - window.resized = true; - - return { - }; - }; - }; - - //////////////////MY CUSTOM FUNCTION/////////////// Kevin G, AT&T - interact.createHorizontalSnapGrid = 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: grid.y, - 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 (PointerEvent) { - 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, autoScroll.edgeMove); - } - 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', autoScroll.edgeMove); - events.add(doc, 'touchmove', autoScroll.edgeMove); - } - - 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; - } - - 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; - } - -} (window));
\ No newline at end of file |