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