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, 5963 insertions, 0 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 new file mode 100644 index 0000000..f11140d --- /dev/null +++ b/dcae_dmaapbc_webapp/src/main/webapp/app/fusion/ase/scripts/dependencies/interact.js @@ -0,0 +1,5963 @@ +/** + * 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 |