From 09893c4eff7ef6572e6e2e8817aeb55771eba9bb Mon Sep 17 00:00:00 2001
From: Edward Betts <edward@4angle.com>
Date: Wed, 15 Feb 2017 14:59:18 +0000
Subject: [PATCH] add xanadoc viewer
---
sourcing/edl.py | 138 +
sourcing/parse.py | 173 +-
sourcing/static/css/xanadoc.css | 106 +
sourcing/static/js/interact.js | 5976 ++++++++++++++++++++++++++
sourcing/static/js/viewer.js | 397 ++
sourcing/templates/head.html | 1 +
sourcing/templates/view.html | 3 +
sourcing/templates/view/xanadoc.html | 53 +
sourcing/url.py | 45 +
sourcing/view.py | 35 +-
10 files changed, 6748 insertions(+), 179 deletions(-)
create mode 100644 sourcing/edl.py
create mode 100644 sourcing/static/css/xanadoc.css
create mode 100644 sourcing/static/js/interact.js
create mode 100644 sourcing/static/js/viewer.js
create mode 100644 sourcing/templates/view/xanadoc.html
create mode 100644 sourcing/url.py
diff --git a/sourcing/edl.py b/sourcing/edl.py
new file mode 100644
index 0000000..6a28075
--- /dev/null
+++ b/sourcing/edl.py
@@ -0,0 +1,138 @@
+from .url import get_url, get_text
+from .parse import get_span, parse_span, parse_link, parse_sourcedoc_facet, xanadoc_span_html, span_html, get_urls
+from collections import defaultdict
+from html import escape
+
+import re
+
+re_comment = re.compile(r'#.*')
+re_xanalink = re.compile('xanalink: +([^ ]+) *$')
+max_sourcedoc_size = 600000
+
+def fulfil_edl(edl):
+ text = {}
+ for url, start, length in parse_edl(edl):
+ if url not in text:
+ text[url] = get_text(url)
+
+ yield get_span(text, url, start, length)
+
+def parse_edl(edl_text):
+ edl = {
+ 'spans': [],
+ 'links': [],
+ }
+ for line in edl_text.splitlines():
+ line = re_comment.sub('', line).strip()
+ if not line:
+ continue
+ span_pointer = parse_span(line)
+ if span_pointer:
+ edl['spans'].append(span_pointer)
+ continue
+ m = re_xanalink.match(line)
+ if m:
+ link_url = m.group(1)
+ edl['links'].append({
+ 'url': link_url,
+ 'text': get_url(link_url),
+ })
+ continue
+
+ return edl
+
+def fulfil_edl_with_sources(edl_text):
+ edl = parse_edl(edl_text)
+ spans = edl['spans']
+
+ hide_transclusions = set()
+
+ two_facet_links = []
+
+ link_num = 0
+ for link in edl['links']:
+ link_detail = parse_link(link['text'])
+ if link_detail['type'] == 'HideTransclusions':
+ hide_transclusions.add(parse_sourcedoc_facet(link_detail['facets'][0]))
+ elif len(link_detail['facets']) == 2:
+ two_facet_links.append((link_num, [parse_span(span[0]) for span in link_detail['facets']]))
+ link_num += 1
+
+ source = [get_text(url) for url in get_urls(spans)]
+
+ source_text = {s['url']: s['text'] for s in source}
+
+ source_doc_links = defaultdict(list)
+
+ for link_num, facets in two_facet_links:
+ for span in facets:
+ url, start, length = span
+ source_doc_links[url].append((start, length, link_num, 'link'))
+ if url in source_text:
+ continue
+
+ s = get_text(url)
+ source.append(s)
+ source_text[s['url']] = s['text']
+
+ for s in source_doc_links.values():
+ s.sort()
+
+ spans = list(enumerate(spans))
+
+ doc_spans = []
+ for num, (url, start, length) in spans:
+ highlight = url not in hide_transclusions
+ span_text = source_text[url] # [start:start + length]
+ new_text = ''
+ pos = start
+ for link_start, link_len, link_num, span_type in source_doc_links[url]:
+ link_end = link_start + link_len
+ if link_start >= start + length:
+ break
+ if link_end < start:
+ continue
+ open_tag = '<span class="xanadoclink link" id="xanalink{}">'.format(link_num)
+ link_span = (open_tag +
+ escape(span_text[link_start:link_end]) +
+ '</span>')
+ new_text += escape(span_text[pos:link_start]) + link_span
+ pos = link_end
+ new_text += escape(span_text[pos:start + length])
+ cur = xanadoc_span_html(num, new_text, url, start, length, highlight=highlight)
+ doc_spans.append(cur)
+
+ doc = ''.join(doc_spans)
+
+ for s in source:
+ text = s.pop('text')
+ if s['length'] > max_sourcedoc_size:
+ # print('{} > {}'.format(s['length'], max_sourcedoc_size))
+ continue
+ if s['url'] in hide_transclusions:
+ continue
+ source_spans = [(start, length, num, 'transclusion') for num, (url, start, length) in spans if url == s['url']]
+ source_spans += source_doc_links[s['url']]
+ source_spans.sort()
+
+ new_text = ''
+ pos = 0
+
+ for start, length, num, span_type in source_spans:
+ end = start + length
+ new_text += (escape(text[pos:start]) +
+ span_html(span_type, num) +
+ escape(text[start:end]) +
+ '</span>')
+ pos = end
+ new_text += escape(text[pos:])
+ new_text = new_text.replace('\n', '<br/>\n')
+
+ s['text'] = new_text
+
+ return {
+ 'source': source,
+ 'doc': doc.replace('\n', '<br/>\n'),
+ 'span_count': len(spans),
+ 'link_count': len(two_facet_links),
+ }
diff --git a/sourcing/parse.py b/sourcing/parse.py
index 7cda3c3..f2f258a 100644
--- a/sourcing/parse.py
+++ b/sourcing/parse.py
@@ -1,87 +1,22 @@
import re
-import requests
import os.path
-import random
from html import escape
-from collections import defaultdict
-re_comment = re.compile(r'#.*')
re_span_pointer = re.compile(r'span: (.*),start=(\d+),length=(\d+)')
re_xanalink = re.compile('xanalink: +([^ ]+) *$')
re_facet = re.compile('^facet\d* *=\s*(.*)\s*$')
-
-re_colon_slash = re.compile('[/:]+')
+re_comment = re.compile(r'#.*')
project_dir = os.path.dirname(os.path.dirname(__file__))
-cache_location = os.path.join(project_dir, 'cache')
-
-max_sourcedoc_size = 600000
xnb_per_char = 150000
-censor_urls = {'http://hyperland.com/xuCambDemo/J.Ineffable.txt',
- 'http://royalty.pub/Ineffable/17/32/Trovato'}
-
-def censor_text(text):
- return ''.join(chr(random.randint(9728, 9983)) if c.isalnum() else c
- for c in text)
-
-def get_url(url):
- filename = os.path.join(cache_location, url_filename(url))
-
- if os.path.exists(filename):
- content = open(filename, 'rb').read()
- else:
- content = requests.get(url).content
- open(filename, 'wb').write(content)
-
- return content.decode(errors='replace')
-
-def get_text(url):
- # assume UTF-8
-
- text = get_url(url)
- if url in censor_urls:
- text = censor_text(text)
-
- heading = url.rsplit('/', 1)[-1]
- return {
- 'url': url,
- 'text': text,
- 'heading': heading,
- 'length': len(text),
- }
-
def parse_span(line):
m = re_span_pointer.match(line)
if not m:
return None
return (m.group(1), int(m.group(2)), int(m.group(3)))
-def parse_edl(edl_text):
- edl = {
- 'spans': [],
- 'links': [],
- }
- for line in edl_text.splitlines():
- line = re_comment.sub('', line).strip()
- if not line:
- continue
- span_pointer = parse_span(line)
- if span_pointer:
- edl['spans'].append(span_pointer)
- continue
- m = re_xanalink.match(line)
- if m:
- link_url = m.group(1)
- edl['links'].append({
- 'url': link_url,
- 'text': get_url(link_url),
- })
- continue
-
- return edl
-
def get_span(text, url, start, length):
return {
'url': url,
@@ -90,20 +25,9 @@ def get_span(text, url, start, length):
'text': text[url][start:start + length]
}
-def fulfil_edl(edl):
- text = {}
- for url, start, length in parse_edl(edl):
- if url not in text:
- text[url] = get_text(url)
-
- yield get_span(text, url, start, length)
-
def get_urls(spans):
return {i[0] for i in spans}
-def url_filename(url):
- return re_colon_slash.sub('_', url)
-
def find_min_max(spans, source):
text_min, text_max = {}, {}
for url, start, length in spans:
@@ -175,99 +99,4 @@ def parse_link(link_text):
legs.append(line.strip())
return {'type': link_type, 'facets': facets}
-def fulfil_edl_with_sources(edl_text):
- edl = parse_edl(edl_text)
- spans = edl['spans']
- hide_transclusions = set()
-
- two_facet_links = []
-
- link_num = 0
- for link in edl['links']:
- link_detail = parse_link(link['text'])
- if link_detail['type'] == 'HideTransclusions':
- hide_transclusions.add(parse_sourcedoc_facet(link_detail['facets'][0]))
- elif len(link_detail['facets']) == 2:
- two_facet_links.append((link_num, [parse_span(span[0]) for span in link_detail['facets']]))
- link_num += 1
-
- source = [get_text(url) for url in get_urls(spans)]
-
- source_text = {s['url']: s['text'] for s in source}
-
- source_doc_links = defaultdict(list)
-
- for link_num, facets in two_facet_links:
- for span in facets:
- url, start, length = span
- source_doc_links[url].append((start, length, link_num, 'link'))
- if url in source_text:
- continue
-
- s = get_text(url)
- source.append(s)
- source_text[s['url']] = s['text']
-
- for s in source_doc_links.values():
- s.sort()
-
- spans = list(enumerate(spans))
-
- doc_spans = []
- for num, (url, start, length) in spans:
- highlight = url not in hide_transclusions
- span_text = source_text[url] # [start:start + length]
- censor = url in censor_urls
- new_text = ''
- pos = start
- for link_start, link_len, link_num, span_type in source_doc_links[url]:
- link_end = link_start + link_len
- if link_start >= start + length:
- break
- if link_end < start:
- continue
- open_tag = '<span class="xanadoclink link" id="xanalink{}">'.format(link_num)
- link_span = (open_tag +
- escape(span_text[link_start:link_end]) +
- '</span>')
- new_text += escape(span_text[pos:link_start]) + link_span
- pos = link_end
- new_text += escape(span_text[pos:start + length])
- cur = xanadoc_span_html(num, new_text, url, start, length, highlight=highlight, censor=censor)
- doc_spans.append(cur)
-
- doc = ''.join(doc_spans)
-
- for s in source:
- text = s.pop('text')
- if s['length'] > max_sourcedoc_size:
- # print('{} > {}'.format(s['length'], max_sourcedoc_size))
- continue
- if s['url'] in hide_transclusions:
- continue
- source_spans = [(start, length, num, 'transclusion') for num, (url, start, length) in spans if url == s['url']]
- source_spans += source_doc_links[s['url']]
- source_spans.sort()
-
- new_text = ''
- pos = 0
-
- for start, length, num, span_type in source_spans:
- end = start + length
- new_text += (escape(text[pos:start]) +
- span_html(span_type, num) +
- escape(text[start:end]) +
- '</span>')
- pos = end
- new_text += escape(text[pos:])
- new_text = new_text.replace('\n', '<br/>\n')
-
- s['text'] = new_text
-
- return {
- 'source': source,
- 'doc': doc.replace('\n', '<br/>\n'),
- 'span_count': len(spans),
- 'link_count': len(two_facet_links),
- }
diff --git a/sourcing/static/css/xanadoc.css b/sourcing/static/css/xanadoc.css
new file mode 100644
index 0000000..e18a17f
--- /dev/null
+++ b/sourcing/static/css/xanadoc.css
@@ -0,0 +1,106 @@
+.document {
+ padding: 5px;
+ margin: 10px;
+ background-color: #eee;
+ width: 400px;
+ height: 400px;
+ border: 1px black solid;
+ position: fixed;
+/* transform: scale(2); */
+}
+
+.sourcedoc {
+ background-color: #ffe;
+}
+
+.xanadoc {
+ background-color: #eef;
+}
+
+.scale {
+ transform: scale(2);
+}
+
+#edlform {
+ padding: 5px;
+ margin: 10px;
+ width: 400px;
+ background-color: #eee;
+ border: 1px black solid;
+ position: fixed;
+ left: 20px;
+ top: 20px;
+}
+
+.heading {
+ background-color: #888;
+ color: white;
+ margin-left: -5px;
+ margin-right: -5px;
+ margin-top: -5px;
+ padding: 5px;
+}
+
+.wrapper {
+ position: absolute;
+ top: 30px;
+ bottom: 0px;
+}
+
+.body {
+ text-align: justify;
+ overflow-y: auto;
+ box-sizing: border-box;
+ height: 100%;
+}
+
+.transclusion {
+ border: solid #FF901A 3px;
+ padding: 1px;
+}
+
+.link {
+ border: solid #33BDFF 3px;
+ padding: 1px;
+}
+
+.hovertransclusion {
+ background-color: #FF901A;
+ padding: 2px;
+}
+
+.hoverlink {
+ background-color: #33BDFF;
+ padding: 2px;
+}
+
+polygon {
+ fill:white;
+ fill-opacity: 0;
+ pointer-events: auto;
+ stroke-width: 3;
+}
+
+polygon.bridge { stroke:#FF901A; }
+polygon.linkbridge { stroke:#33BDFF; }
+polygon.hoverbridge {
+ fill:#FF901A;
+ fill-opacity: 0.75;
+}
+polygon.hoverlinkbridge {
+ fill:#33BDFF;
+ fill-opacity: 0.75;
+}
+
+html, body { margin:0; padding:0; overflow:hidden; }
+svg {
+ position:fixed; top:0; bottom:0; left:0; right:0;
+ z-index: 100000;
+ pointer-events: none;
+}
+
+.paylink {
+ background-color: #33BDFF;
+ color: black;
+ padding: 2px;
+}
diff --git a/sourcing/static/js/interact.js b/sourcing/static/js/interact.js
new file mode 100644
index 0000000..ffbd05d
--- /dev/null
+++ b/sourcing/static/js/interact.js
@@ -0,0 +1,5976 @@
+/**
+ * interact.js v1.2.6
+ *
+ * Copyright (c) 2012-2015 Taye Adeyemi <dev@taye.me>
+ * Open source under the MIT License.
+ * https://raw.github.com/taye/interact.js/master/LICENSE
+ */
+(function (realWindow) {
+ 'use strict';
+
+ // return early if there's no window to work with (eg. Node.js)
+ if (!realWindow) { return; }
+
+ var // get wrapped window if using Shadow DOM polyfill
+ window = (function () {
+ // create a TextNode
+ var el = realWindow.document.createTextNode('');
+
+ // check if it's wrapped by a polyfill
+ if (el.ownerDocument !== realWindow.document
+ && typeof realWindow.wrap === 'function'
+ && realWindow.wrap(el) === el) {
+ // return wrapped window
+ return realWindow.wrap(realWindow);
+ }
+
+ // no Shadow DOM polyfil or native implementation
+ return realWindow;
+ }()),
+
+ document = window.document,
+ DocumentFragment = window.DocumentFragment || blank,
+ SVGElement = window.SVGElement || blank,
+ SVGSVGElement = window.SVGSVGElement || blank,
+ SVGElementInstance = window.SVGElementInstance || blank,
+ HTMLElement = window.HTMLElement || window.Element,
+
+ PointerEvent = (window.PointerEvent || window.MSPointerEvent),
+ pEventTypes,
+
+ hypot = Math.hypot || function (x, y) { return Math.sqrt(x * x + y * y); },
+
+ tmpXY = {}, // reduce object creation in getXY()
+
+ documents = [], // all documents being listened to
+
+ interactables = [], // all set interactables
+ interactions = [], // all interactions
+
+ dynamicDrop = false,
+
+ // {
+ // type: {
+ // selectors: ['selector', ...],
+ // contexts : [document, ...],
+ // listeners: [[listener, useCapture], ...]
+ // }
+ // }
+ delegatedEvents = {},
+
+ defaultOptions = {
+ base: {
+ accept : null,
+ actionChecker : null,
+ styleCursor : true,
+ preventDefault: 'auto',
+ origin : { x: 0, y: 0 },
+ deltaSource : 'page',
+ allowFrom : null,
+ ignoreFrom : null,
+ _context : document,
+ dropChecker : null
+ },
+
+ drag: {
+ enabled: false,
+ manualStart: true,
+ max: Infinity,
+ maxPerElement: 1,
+
+ snap: null,
+ restrict: null,
+ inertia: null,
+ autoScroll: null,
+
+ axis: 'xy'
+ },
+
+ drop: {
+ enabled: false,
+ accept: null,
+ overlap: 'pointer'
+ },
+
+ resize: {
+ enabled: false,
+ manualStart: false,
+ max: Infinity,
+ maxPerElement: 1,
+
+ snap: null,
+ restrict: null,
+ inertia: null,
+ autoScroll: null,
+
+ square: false,
+ preserveAspectRatio: false,
+ axis: 'xy',
+
+ // use default margin
+ margin: NaN,
+
+ // object with props left, right, top, bottom which are
+ // true/false values to resize when the pointer is over that edge,
+ // CSS selectors to match the handles for each direction
+ // or the Elements for each handle
+ edges: null,
+
+ // a value of 'none' will limit the resize rect to a minimum of 0x0
+ // 'negate' will alow the rect to have negative width/height
+ // 'reposition' will keep the width/height positive by swapping
+ // the top and bottom edges and/or swapping the left and right edges
+ invert: 'none'
+ },
+
+ gesture: {
+ manualStart: false,
+ enabled: false,
+ max: Infinity,
+ maxPerElement: 1,
+
+ restrict: null
+ },
+
+ perAction: {
+ manualStart: false,
+ max: Infinity,
+ maxPerElement: 1,
+
+ snap: {
+ enabled : false,
+ endOnly : false,
+ range : Infinity,
+ targets : null,
+ offsets : null,
+
+ relativePoints: null
+ },
+
+ restrict: {
+ enabled: false,
+ endOnly: false
+ },
+
+ autoScroll: {
+ enabled : false,
+ container : null, // the item that is scrolled (Window or HTMLElement)
+ margin : 60,
+ speed : 300 // the scroll speed in pixels per second
+ },
+
+ inertia: {
+ enabled : false,
+ resistance : 10, // the lambda in exponential decay
+ minSpeed : 100, // target speed must be above this for inertia to start
+ endSpeed : 10, // the speed at which inertia is slow enough to stop
+ allowResume : true, // allow resuming an action in inertia phase
+ zeroResumeDelta : true, // if an action is resumed after launch, set dx/dy to 0
+ smoothEndDuration: 300 // animate to snap/restrict endOnly if there's no inertia
+ }
+ },
+
+ _holdDuration: 600
+ },
+
+ // Things related to autoScroll
+ autoScroll = {
+ interaction: null,
+ i: null, // the handle returned by window.setInterval
+ x: 0, y: 0, // Direction each pulse is to scroll in
+
+ // scroll the window by the values in scroll.x/y
+ scroll: function () {
+ var options = autoScroll.interaction.target.options[autoScroll.interaction.prepared.name].autoScroll,
+ container = options.container || getWindow(autoScroll.interaction.element),
+ now = new Date().getTime(),
+ // change in time in seconds
+ dtx = (now - autoScroll.prevTimeX) / 1000,
+ dty = (now - autoScroll.prevTimeY) / 1000,
+ vx, vy, sx, sy;
+
+ // displacement
+ if (options.velocity) {
+ vx = options.velocity.x;
+ vy = options.velocity.y;
+ }
+ else {
+ vx = vy = options.speed
+ }
+
+ sx = vx * dtx;
+ sy = vy * dty;
+
+ if (sx >= 1 || sy >= 1) {
+ if (isWindow(container)) {
+ container.scrollBy(autoScroll.x * sx, autoScroll.y * sy);
+ }
+ else if (container) {
+ container.scrollLeft += autoScroll.x * sx;
+ container.scrollTop += autoScroll.y * sy;
+ }
+
+ if (sx >=1) autoScroll.prevTimeX = now;
+ if (sy >= 1) autoScroll.prevTimeY = now;
+ }
+
+ if (autoScroll.isScrolling) {
+ cancelFrame(autoScroll.i);
+ autoScroll.i = reqFrame(autoScroll.scroll);
+ }
+ },
+
+ isScrolling: false,
+ prevTimeX: 0,
+ prevTimeY: 0,
+
+ start: function (interaction) {
+ autoScroll.isScrolling = true;
+ cancelFrame(autoScroll.i);
+
+ autoScroll.interaction = interaction;
+ autoScroll.prevTimeX = new Date().getTime();
+ autoScroll.prevTimeY = new Date().getTime();
+ autoScroll.i = reqFrame(autoScroll.scroll);
+ },
+
+ stop: function () {
+ autoScroll.isScrolling = false;
+ cancelFrame(autoScroll.i);
+ }
+ },
+
+ // Does the browser support touch input?
+ supportsTouch = (('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch),
+
+ // Does the browser support PointerEvents
+ supportsPointerEvent = !!PointerEvent,
+
+ // Less Precision with touch input
+ margin = supportsTouch || supportsPointerEvent? 20: 10,
+
+ pointerMoveTolerance = 1,
+
+ // for ignoring browser's simulated mouse events
+ prevTouchTime = 0,
+
+ // Allow this many interactions to happen simultaneously
+ maxInteractions = Infinity,
+
+ // Check if is IE9 or older
+ actionCursors = (document.all && !window.atob) ? {
+ drag : 'move',
+ resizex : 'e-resize',
+ resizey : 's-resize',
+ resizexy: 'se-resize',
+
+ resizetop : 'n-resize',
+ resizeleft : 'w-resize',
+ resizebottom : 's-resize',
+ resizeright : 'e-resize',
+ resizetopleft : 'se-resize',
+ resizebottomright: 'se-resize',
+ resizetopright : 'ne-resize',
+ resizebottomleft : 'ne-resize',
+
+ gesture : ''
+ } : {
+ drag : 'move',
+ resizex : 'ew-resize',
+ resizey : 'ns-resize',
+ resizexy: 'nwse-resize',
+
+ resizetop : 'ns-resize',
+ resizeleft : 'ew-resize',
+ resizebottom : 'ns-resize',
+ resizeright : 'ew-resize',
+ resizetopleft : 'nwse-resize',
+ resizebottomright: 'nwse-resize',
+ resizetopright : 'nesw-resize',
+ resizebottomleft : 'nesw-resize',
+
+ gesture : ''
+ },
+
+ actionIsEnabled = {
+ drag : true,
+ resize : true,
+ gesture: true
+ },
+
+ // because Webkit and Opera still use 'mousewheel' event type
+ wheelEvent = 'onmousewheel' in document? 'mousewheel': 'wheel',
+
+ eventTypes = [
+ 'dragstart',
+ 'dragmove',
+ 'draginertiastart',
+ 'dragend',
+ 'dragenter',
+ 'dragleave',
+ 'dropactivate',
+ 'dropdeactivate',
+ 'dropmove',
+ 'drop',
+ 'resizestart',
+ 'resizemove',
+ 'resizeinertiastart',
+ 'resizeend',
+ 'gesturestart',
+ 'gesturemove',
+ 'gestureinertiastart',
+ 'gestureend',
+
+ 'down',
+ 'move',
+ 'up',
+ 'cancel',
+ 'tap',
+ 'doubletap',
+ 'hold'
+ ],
+
+ globalEvents = {},
+
+ // Opera Mobile must be handled differently
+ isOperaMobile = navigator.appName == 'Opera' &&
+ supportsTouch &&
+ navigator.userAgent.match('Presto'),
+
+ // scrolling doesn't change the result of getClientRects on iOS 7
+ isIOS7 = (/iP(hone|od|ad)/.test(navigator.platform)
+ && /OS 7[^\d]/.test(navigator.appVersion)),
+
+ // prefix matchesSelector
+ prefixedMatchesSelector = 'matches' in Element.prototype?
+ 'matches': 'webkitMatchesSelector' in Element.prototype?
+ 'webkitMatchesSelector': 'mozMatchesSelector' in Element.prototype?
+ 'mozMatchesSelector': 'oMatchesSelector' in Element.prototype?
+ 'oMatchesSelector': 'msMatchesSelector',
+
+ // will be polyfill function if browser is IE8
+ ie8MatchesSelector,
+
+ // native requestAnimationFrame or polyfill
+ reqFrame = realWindow.requestAnimationFrame,
+ cancelFrame = realWindow.cancelAnimationFrame,
+
+ // Events wrapper
+ events = (function () {
+ var useAttachEvent = ('attachEvent' in window) && !('addEventListener' in window),
+ addEvent = useAttachEvent? 'attachEvent': 'addEventListener',
+ removeEvent = useAttachEvent? 'detachEvent': 'removeEventListener',
+ on = useAttachEvent? 'on': '',
+
+ elements = [],
+ targets = [],
+ attachedListeners = [];
+
+ function add (element, type, listener, useCapture) {
+ var elementIndex = indexOf(elements, element),
+ target = targets[elementIndex];
+
+ if (!target) {
+ target = {
+ events: {},
+ typeCount: 0
+ };
+
+ elementIndex = elements.push(element) - 1;
+ targets.push(target);
+
+ attachedListeners.push((useAttachEvent ? {
+ supplied: [],
+ wrapped : [],
+ useCount: []
+ } : null));
+ }
+
+ if (!target.events[type]) {
+ target.events[type] = [];
+ target.typeCount++;
+ }
+
+ if (!contains(target.events[type], listener)) {
+ var ret;
+
+ if (useAttachEvent) {
+ var listeners = attachedListeners[elementIndex],
+ listenerIndex = indexOf(listeners.supplied, listener);
+
+ var wrapped = listeners.wrapped[listenerIndex] || function (event) {
+ if (!event.immediatePropagationStopped) {
+ event.target = event.srcElement;
+ event.currentTarget = element;
+
+ event.preventDefault = event.preventDefault || preventDef;
+ event.stopPropagation = event.stopPropagation || stopProp;
+ event.stopImmediatePropagation = event.stopImmediatePropagation || stopImmProp;
+
+ if (/mouse|click/.test(event.type)) {
+ event.pageX = event.clientX + getWindow(element).document.documentElement.scrollLeft;
+ event.pageY = event.clientY + getWindow(element).document.documentElement.scrollTop;
+ }
+
+ listener(event);
+ }
+ };
+
+ ret = element[addEvent](on + type, wrapped, Boolean(useCapture));
+
+ if (listenerIndex === -1) {
+ listeners.supplied.push(listener);
+ listeners.wrapped.push(wrapped);
+ listeners.useCount.push(1);
+ }
+ else {
+ listeners.useCount[listenerIndex]++;
+ }
+ }
+ else {
+ ret = element[addEvent](type, listener, useCapture || false);
+ }
+ target.events[type].push(listener);
+
+ return ret;
+ }
+ }
+
+ function remove (element, type, listener, useCapture) {
+ var i,
+ elementIndex = indexOf(elements, element),
+ target = targets[elementIndex],
+ listeners,
+ listenerIndex,
+ wrapped = listener;
+
+ if (!target || !target.events) {
+ return;
+ }
+
+ if (useAttachEvent) {
+ listeners = attachedListeners[elementIndex];
+ listenerIndex = indexOf(listeners.supplied, listener);
+ wrapped = listeners.wrapped[listenerIndex];
+ }
+
+ if (type === 'all') {
+ for (type in target.events) {
+ if (target.events.hasOwnProperty(type)) {
+ remove(element, type, 'all');
+ }
+ }
+ return;
+ }
+
+ if (target.events[type]) {
+ var len = target.events[type].length;
+
+ if (listener === 'all') {
+ for (i = 0; i < len; i++) {
+ remove(element, type, target.events[type][i], Boolean(useCapture));
+ }
+ return;
+ } else {
+ for (i = 0; i < len; i++) {
+ if (target.events[type][i] === listener) {
+ element[removeEvent](on + type, wrapped, useCapture || false);
+ target.events[type].splice(i, 1);
+
+ if (useAttachEvent && listeners) {
+ listeners.useCount[listenerIndex]--;
+ if (listeners.useCount[listenerIndex] === 0) {
+ listeners.supplied.splice(listenerIndex, 1);
+ listeners.wrapped.splice(listenerIndex, 1);
+ listeners.useCount.splice(listenerIndex, 1);
+ }
+ }
+
+ break;
+ }
+ }
+ }
+
+ if (target.events[type] && target.events[type].length === 0) {
+ target.events[type] = null;
+ target.typeCount--;
+ }
+ }
+
+ if (!target.typeCount) {
+ targets.splice(elementIndex, 1);
+ elements.splice(elementIndex, 1);
+ attachedListeners.splice(elementIndex, 1);
+ }
+ }
+
+ function preventDef () {
+ this.returnValue = false;
+ }
+
+ function stopProp () {
+ this.cancelBubble = true;
+ }
+
+ function stopImmProp () {
+ this.cancelBubble = true;
+ this.immediatePropagationStopped = true;
+ }
+
+ return {
+ add: add,
+ remove: remove,
+ useAttachEvent: useAttachEvent,
+
+ _elements: elements,
+ _targets: targets,
+ _attachedListeners: attachedListeners
+ };
+ }());
+
+ function blank () {}
+
+ function isElement (o) {
+ if (!o || (typeof o !== 'object')) { return false; }
+
+ var _window = getWindow(o) || window;
+
+ return (/object|function/.test(typeof _window.Element)
+ ? o instanceof _window.Element //DOM2
+ : o.nodeType === 1 && typeof o.nodeName === "string");
+ }
+ function isWindow (thing) { return thing === window || !!(thing && thing.Window) && (thing instanceof thing.Window); }
+ function isDocFrag (thing) { return !!thing && thing instanceof DocumentFragment; }
+ function isArray (thing) {
+ return isObject(thing)
+ && (typeof thing.length !== undefined)
+ && isFunction(thing.splice);
+ }
+ function isObject (thing) { return !!thing && (typeof thing === 'object'); }
+ function isFunction (thing) { return typeof thing === 'function'; }
+ function isNumber (thing) { return typeof thing === 'number' ; }
+ function isBool (thing) { return typeof thing === 'boolean' ; }
+ function isString (thing) { return typeof thing === 'string' ; }
+
+ function trySelector (value) {
+ if (!isString(value)) { return false; }
+
+ // an exception will be raised if it is invalid
+ document.querySelector(value);
+ return true;
+ }
+
+ function extend (dest, source) {
+ for (var prop in source) {
+ dest[prop] = source[prop];
+ }
+ return dest;
+ }
+
+ var prefixedPropREs = {
+ webkit: /(Movement[XY]|Radius[XY]|RotationAngle|Force)$/
+ };
+
+ function pointerExtend (dest, source) {
+ for (var prop in source) {
+ var deprecated = false;
+
+ // skip deprecated prefixed properties
+ for (var vendor in prefixedPropREs) {
+ if (prop.indexOf(vendor) === 0 && prefixedPropREs[vendor].test(prop)) {
+ deprecated = true;
+ break;
+ }
+ }
+
+ if (!deprecated) {
+ dest[prop] = source[prop];
+ }
+ }
+ return dest;
+ }
+
+ function copyCoords (dest, src) {
+ dest.page = dest.page || {};
+ dest.page.x = src.page.x;
+ dest.page.y = src.page.y;
+
+ dest.client = dest.client || {};
+ dest.client.x = src.client.x;
+ dest.client.y = src.client.y;
+
+ dest.timeStamp = src.timeStamp;
+ }
+
+ function setEventXY (targetObj, pointers, interaction) {
+ var pointer = (pointers.length > 1
+ ? pointerAverage(pointers)
+ : pointers[0]);
+
+ getPageXY(pointer, tmpXY, interaction);
+ targetObj.page.x = tmpXY.x;
+ targetObj.page.y = tmpXY.y;
+
+ getClientXY(pointer, tmpXY, interaction);
+ targetObj.client.x = tmpXY.x;
+ targetObj.client.y = tmpXY.y;
+
+ targetObj.timeStamp = new Date().getTime();
+ }
+
+ function setEventDeltas (targetObj, prev, cur) {
+ targetObj.page.x = cur.page.x - prev.page.x;
+ targetObj.page.y = cur.page.y - prev.page.y;
+ targetObj.client.x = cur.client.x - prev.client.x;
+ targetObj.client.y = cur.client.y - prev.client.y;
+ targetObj.timeStamp = new Date().getTime() - prev.timeStamp;
+
+ // set pointer velocity
+ var dt = Math.max(targetObj.timeStamp / 1000, 0.001);
+ targetObj.page.speed = hypot(targetObj.page.x, targetObj.page.y) / dt;
+ targetObj.page.vx = targetObj.page.x / dt;
+ targetObj.page.vy = targetObj.page.y / dt;
+
+ targetObj.client.speed = hypot(targetObj.client.x, targetObj.page.y) / dt;
+ targetObj.client.vx = targetObj.client.x / dt;
+ targetObj.client.vy = targetObj.client.y / dt;
+ }
+
+ function isNativePointer (pointer) {
+ return (pointer instanceof window.Event
+ || (supportsTouch && window.Touch && pointer instanceof window.Touch));
+ }
+
+ // Get specified X/Y coords for mouse or event.touches[0]
+ function getXY (type, pointer, xy) {
+ xy = xy || {};
+ type = type || 'page';
+
+ xy.x = pointer[type + 'X'];
+ xy.y = pointer[type + 'Y'];
+
+ return xy;
+ }
+
+ function getPageXY (pointer, page) {
+ page = page || {};
+
+ // Opera Mobile handles the viewport and scrolling oddly
+ if (isOperaMobile && isNativePointer(pointer)) {
+ getXY('screen', pointer, page);
+
+ page.x += window.scrollX;
+ page.y += window.scrollY;
+ }
+ else {
+ getXY('page', pointer, page);
+ }
+
+ return page;
+ }
+
+ function getClientXY (pointer, client) {
+ client = client || {};
+
+ if (isOperaMobile && isNativePointer(pointer)) {
+ // Opera Mobile handles the viewport and scrolling oddly
+ getXY('screen', pointer, client);
+ }
+ else {
+ getXY('client', pointer, client);
+ }
+
+ return client;
+ }
+
+ function getScrollXY (win) {
+ win = win || window;
+ return {
+ x: win.scrollX || win.document.documentElement.scrollLeft,
+ y: win.scrollY || win.document.documentElement.scrollTop
+ };
+ }
+
+ function getPointerId (pointer) {
+ return isNumber(pointer.pointerId)? pointer.pointerId : pointer.identifier;
+ }
+
+ function getActualElement (element) {
+ return (element instanceof SVGElementInstance
+ ? element.correspondingUseElement
+ : element);
+ }
+
+ function getWindow (node) {
+ if (isWindow(node)) {
+ return node;
+ }
+
+ var rootNode = (node.ownerDocument || node);
+
+ return rootNode.defaultView || rootNode.parentWindow || window;
+ }
+
+ function getElementClientRect (element) {
+ var clientRect = (element instanceof SVGElement
+ ? element.getBoundingClientRect()
+ : element.getClientRects()[0]);
+
+ return clientRect && {
+ left : clientRect.left,
+ right : clientRect.right,
+ top : clientRect.top,
+ bottom: clientRect.bottom,
+ width : clientRect.width || clientRect.right - clientRect.left,
+ height: clientRect.height || clientRect.bottom - clientRect.top
+ };
+ }
+
+ function getElementRect (element) {
+ var clientRect = getElementClientRect(element);
+
+ if (!isIOS7 && clientRect) {
+ var scroll = getScrollXY(getWindow(element));
+
+ clientRect.left += scroll.x;
+ clientRect.right += scroll.x;
+ clientRect.top += scroll.y;
+ clientRect.bottom += scroll.y;
+ }
+
+ return clientRect;
+ }
+
+ function getTouchPair (event) {
+ var touches = [];
+
+ // array of touches is supplied
+ if (isArray(event)) {
+ touches[0] = event[0];
+ touches[1] = event[1];
+ }
+ // an event
+ else {
+ if (event.type === 'touchend') {
+ if (event.touches.length === 1) {
+ touches[0] = event.touches[0];
+ touches[1] = event.changedTouches[0];
+ }
+ else if (event.touches.length === 0) {
+ touches[0] = event.changedTouches[0];
+ touches[1] = event.changedTouches[1];
+ }
+ }
+ else {
+ touches[0] = event.touches[0];
+ touches[1] = event.touches[1];
+ }
+ }
+
+ return touches;
+ }
+
+ function pointerAverage (pointers) {
+ var average = {
+ pageX : 0,
+ pageY : 0,
+ clientX: 0,
+ clientY: 0,
+ screenX: 0,
+ screenY: 0
+ };
+ var prop;
+
+ for (var i = 0; i < pointers.length; i++) {
+ for (prop in average) {
+ average[prop] += pointers[i][prop];
+ }
+ }
+ for (prop in average) {
+ average[prop] /= pointers.length;
+ }
+
+ return average;
+ }
+
+ function touchBBox (event) {
+ if (!event.length && !(event.touches && event.touches.length > 1)) {
+ return;
+ }
+
+ var touches = getTouchPair(event),
+ minX = Math.min(touches[0].pageX, touches[1].pageX),
+ minY = Math.min(touches[0].pageY, touches[1].pageY),
+ maxX = Math.max(touches[0].pageX, touches[1].pageX),
+ maxY = Math.max(touches[0].pageY, touches[1].pageY);
+
+ return {
+ x: minX,
+ y: minY,
+ left: minX,
+ top: minY,
+ width: maxX - minX,
+ height: maxY - minY
+ };
+ }
+
+ function touchDistance (event, deltaSource) {
+ deltaSource = deltaSource || defaultOptions.deltaSource;
+
+ var sourceX = deltaSource + 'X',
+ sourceY = deltaSource + 'Y',
+ touches = getTouchPair(event);
+
+
+ var dx = touches[0][sourceX] - touches[1][sourceX],
+ dy = touches[0][sourceY] - touches[1][sourceY];
+
+ return hypot(dx, dy);
+ }
+
+ function touchAngle (event, prevAngle, deltaSource) {
+ deltaSource = deltaSource || defaultOptions.deltaSource;
+
+ var sourceX = deltaSource + 'X',
+ sourceY = deltaSource + 'Y',
+ touches = getTouchPair(event),
+ dx = touches[0][sourceX] - touches[1][sourceX],
+ dy = touches[0][sourceY] - touches[1][sourceY],
+ angle = 180 * Math.atan(dy / dx) / Math.PI;
+
+ if (isNumber(prevAngle)) {
+ var dr = angle - prevAngle,
+ drClamped = dr % 360;
+
+ if (drClamped > 315) {
+ angle -= 360 + (angle / 360)|0 * 360;
+ }
+ else if (drClamped > 135) {
+ angle -= 180 + (angle / 360)|0 * 360;
+ }
+ else if (drClamped < -315) {
+ angle += 360 + (angle / 360)|0 * 360;
+ }
+ else if (drClamped < -135) {
+ angle += 180 + (angle / 360)|0 * 360;
+ }
+ }
+
+ return angle;
+ }
+
+ function getOriginXY (interactable, element) {
+ var origin = interactable
+ ? interactable.options.origin
+ : defaultOptions.origin;
+
+ if (origin === 'parent') {
+ origin = parentElement(element);
+ }
+ else if (origin === 'self') {
+ origin = interactable.getRect(element);
+ }
+ else if (trySelector(origin)) {
+ origin = closest(element, origin) || { x: 0, y: 0 };
+ }
+
+ if (isFunction(origin)) {
+ origin = origin(interactable && element);
+ }
+
+ if (isElement(origin)) {
+ origin = getElementRect(origin);
+ }
+
+ origin.x = ('x' in origin)? origin.x : origin.left;
+ origin.y = ('y' in origin)? origin.y : origin.top;
+
+ return origin;
+ }
+
+ // http://stackoverflow.com/a/5634528/2280888
+ function _getQBezierValue(t, p1, p2, p3) {
+ var iT = 1 - t;
+ return iT * iT * p1 + 2 * iT * t * p2 + t * t * p3;
+ }
+
+ function getQuadraticCurvePoint(startX, startY, cpX, cpY, endX, endY, position) {
+ return {
+ x: _getQBezierValue(position, startX, cpX, endX),
+ y: _getQBezierValue(position, startY, cpY, endY)
+ };
+ }
+
+ // http://gizma.com/easing/
+ function easeOutQuad (t, b, c, d) {
+ t /= d;
+ return -c * t*(t-2) + b;
+ }
+
+ function nodeContains (parent, child) {
+ while (child) {
+ if (child === parent) {
+ return true;
+ }
+
+ child = child.parentNode;
+ }
+
+ return false;
+ }
+
+ function closest (child, selector) {
+ var parent = parentElement(child);
+
+ while (isElement(parent)) {
+ if (matchesSelector(parent, selector)) { return parent; }
+
+ parent = parentElement(parent);
+ }
+
+ return null;
+ }
+
+ function parentElement (node) {
+ var parent = node.parentNode;
+
+ if (isDocFrag(parent)) {
+ // skip past #shado-root fragments
+ while ((parent = parent.host) && isDocFrag(parent)) {}
+
+ return parent;
+ }
+
+ return parent;
+ }
+
+ function inContext (interactable, element) {
+ return interactable._context === element.ownerDocument
+ || nodeContains(interactable._context, element);
+ }
+
+ function testIgnore (interactable, interactableElement, element) {
+ var ignoreFrom = interactable.options.ignoreFrom;
+
+ if (!ignoreFrom || !isElement(element)) { return false; }
+
+ if (isString(ignoreFrom)) {
+ return matchesUpTo(element, ignoreFrom, interactableElement);
+ }
+ else if (isElement(ignoreFrom)) {
+ return nodeContains(ignoreFrom, element);
+ }
+
+ return false;
+ }
+
+ function testAllow (interactable, interactableElement, element) {
+ var allowFrom = interactable.options.allowFrom;
+
+ if (!allowFrom) { return true; }
+
+ if (!isElement(element)) { return false; }
+
+ if (isString(allowFrom)) {
+ return matchesUpTo(element, allowFrom, interactableElement);
+ }
+ else if (isElement(allowFrom)) {
+ return nodeContains(allowFrom, element);
+ }
+
+ return false;
+ }
+
+ function checkAxis (axis, interactable) {
+ if (!interactable) { return false; }
+
+ var thisAxis = interactable.options.drag.axis;
+
+ return (axis === 'xy' || thisAxis === 'xy' || thisAxis === axis);
+ }
+
+ function checkSnap (interactable, action) {
+ var options = interactable.options;
+
+ if (/^resize/.test(action)) {
+ action = 'resize';
+ }
+
+ return options[action].snap && options[action].snap.enabled;
+ }
+
+ function checkRestrict (interactable, action) {
+ var options = interactable.options;
+
+ if (/^resize/.test(action)) {
+ action = 'resize';
+ }
+
+ return options[action].restrict && options[action].restrict.enabled;
+ }
+
+ function checkAutoScroll (interactable, action) {
+ var options = interactable.options;
+
+ if (/^resize/.test(action)) {
+ action = 'resize';
+ }
+
+ return options[action].autoScroll && options[action].autoScroll.enabled;
+ }
+
+ function withinInteractionLimit (interactable, element, action) {
+ var options = interactable.options,
+ maxActions = options[action.name].max,
+ maxPerElement = options[action.name].maxPerElement,
+ activeInteractions = 0,
+ targetCount = 0,
+ targetElementCount = 0;
+
+ for (var i = 0, len = interactions.length; i < len; i++) {
+ var interaction = interactions[i],
+ otherAction = interaction.prepared.name,
+ active = interaction.interacting();
+
+ if (!active) { continue; }
+
+ activeInteractions++;
+
+ if (activeInteractions >= maxInteractions) {
+ return false;
+ }
+
+ if (interaction.target !== interactable) { continue; }
+
+ targetCount += (otherAction === action.name)|0;
+
+ if (targetCount >= maxActions) {
+ return false;
+ }
+
+ if (interaction.element === element) {
+ targetElementCount++;
+
+ if (otherAction !== action.name || targetElementCount >= maxPerElement) {
+ return false;
+ }
+ }
+ }
+
+ return maxInteractions > 0;
+ }
+
+ // Test for the element that's "above" all other qualifiers
+ function indexOfDeepestElement (elements) {
+ var dropzone,
+ deepestZone = elements[0],
+ index = deepestZone? 0: -1,
+ parent,
+ deepestZoneParents = [],
+ dropzoneParents = [],
+ child,
+ i,
+ n;
+
+ for (i = 1; i < elements.length; i++) {
+ dropzone = elements[i];
+
+ // an element might belong to multiple selector dropzones
+ if (!dropzone || dropzone === deepestZone) {
+ continue;
+ }
+
+ if (!deepestZone) {
+ deepestZone = dropzone;
+ index = i;
+ continue;
+ }
+
+ // check if the deepest or current are document.documentElement or document.rootElement
+ // - if the current dropzone is, do nothing and continue
+ if (dropzone.parentNode === dropzone.ownerDocument) {
+ continue;
+ }
+ // - if deepest is, update with the current dropzone and continue to next
+ else if (deepestZone.parentNode === dropzone.ownerDocument) {
+ deepestZone = dropzone;
+ index = i;
+ continue;
+ }
+
+ if (!deepestZoneParents.length) {
+ parent = deepestZone;
+ while (parent.parentNode && parent.parentNode !== parent.ownerDocument) {
+ deepestZoneParents.unshift(parent);
+ parent = parent.parentNode;
+ }
+ }
+
+ // if this element is an svg element and the current deepest is
+ // an HTMLElement
+ if (deepestZone instanceof HTMLElement
+ && dropzone instanceof SVGElement
+ && !(dropzone instanceof SVGSVGElement)) {
+
+ if (dropzone === deepestZone.parentNode) {
+ continue;
+ }
+
+ parent = dropzone.ownerSVGElement;
+ }
+ else {
+ parent = dropzone;
+ }
+
+ dropzoneParents = [];
+
+ while (parent.parentNode !== parent.ownerDocument) {
+ dropzoneParents.unshift(parent);
+ parent = parent.parentNode;
+ }
+
+ n = 0;
+
+ // get (position of last common ancestor) + 1
+ while (dropzoneParents[n] && dropzoneParents[n] === deepestZoneParents[n]) {
+ n++;
+ }
+
+ var parents = [
+ dropzoneParents[n - 1],
+ dropzoneParents[n],
+ deepestZoneParents[n]
+ ];
+
+ child = parents[0].lastChild;
+
+ while (child) {
+ if (child === parents[1]) {
+ deepestZone = dropzone;
+ index = i;
+ deepestZoneParents = [];
+
+ break;
+ }
+ else if (child === parents[2]) {
+ break;
+ }
+
+ child = child.previousSibling;
+ }
+ }
+
+ return index;
+ }
+
+ function Interaction () {
+ this.target = null; // current interactable being interacted with
+ this.element = null; // the target element of the interactable
+ this.dropTarget = null; // the dropzone a drag target might be dropped into
+ this.dropElement = null; // the element at the time of checking
+ this.prevDropTarget = null; // the dropzone that was recently dragged away from
+ this.prevDropElement = null; // the element at the time of checking
+
+ this.prepared = { // action that's ready to be fired on next move event
+ name : null,
+ axis : null,
+ edges: null
+ };
+
+ this.matches = []; // all selectors that are matched by target element
+ this.matchElements = []; // corresponding elements
+
+ this.inertiaStatus = {
+ active : false,
+ smoothEnd : false,
+ ending : false,
+
+ startEvent: null,
+ upCoords: {},
+
+ xe: 0, ye: 0,
+ sx: 0, sy: 0,
+
+ t0: 0,
+ vx0: 0, vys: 0,
+ duration: 0,
+
+ resumeDx: 0,
+ resumeDy: 0,
+
+ lambda_v0: 0,
+ one_ve_v0: 0,
+ i : null
+ };
+
+ if (isFunction(Function.prototype.bind)) {
+ this.boundInertiaFrame = this.inertiaFrame.bind(this);
+ this.boundSmoothEndFrame = this.smoothEndFrame.bind(this);
+ }
+ else {
+ var that = this;
+
+ this.boundInertiaFrame = function () { return that.inertiaFrame(); };
+ this.boundSmoothEndFrame = function () { return that.smoothEndFrame(); };
+ }
+
+ this.activeDrops = {
+ dropzones: [], // the dropzones that are mentioned below
+ elements : [], // elements of dropzones that accept the target draggable
+ rects : [] // the rects of the elements mentioned above
+ };
+
+ // keep track of added pointers
+ this.pointers = [];
+ this.pointerIds = [];
+ this.downTargets = [];
+ this.downTimes = [];
+ this.holdTimers = [];
+
+ // Previous native pointer move event coordinates
+ this.prevCoords = {
+ page : { x: 0, y: 0 },
+ client : { x: 0, y: 0 },
+ timeStamp: 0
+ };
+ // current native pointer move event coordinates
+ this.curCoords = {
+ page : { x: 0, y: 0 },
+ client : { x: 0, y: 0 },
+ timeStamp: 0
+ };
+
+ // Starting InteractEvent pointer coordinates
+ this.startCoords = {
+ page : { x: 0, y: 0 },
+ client : { x: 0, y: 0 },
+ timeStamp: 0
+ };
+
+ // Change in coordinates and time of the pointer
+ this.pointerDelta = {
+ page : { x: 0, y: 0, vx: 0, vy: 0, speed: 0 },
+ client : { x: 0, y: 0, vx: 0, vy: 0, speed: 0 },
+ timeStamp: 0
+ };
+
+ this.downEvent = null; // pointerdown/mousedown/touchstart event
+ this.downPointer = {};
+
+ this._eventTarget = null;
+ this._curEventTarget = null;
+
+ this.prevEvent = null; // previous action event
+ this.tapTime = 0; // time of the most recent tap event
+ this.prevTap = null;
+
+ this.startOffset = { left: 0, right: 0, top: 0, bottom: 0 };
+ this.restrictOffset = { left: 0, right: 0, top: 0, bottom: 0 };
+ this.snapOffsets = [];
+
+ this.gesture = {
+ start: { x: 0, y: 0 },
+
+ startDistance: 0, // distance between two touches of touchStart
+ prevDistance : 0,
+ distance : 0,
+
+ scale: 1, // gesture.distance / gesture.startDistance
+
+ startAngle: 0, // angle of line joining two touches
+ prevAngle : 0 // angle of the previous gesture event
+ };
+
+ this.snapStatus = {
+ x : 0, y : 0,
+ dx : 0, dy : 0,
+ realX : 0, realY : 0,
+ snappedX: 0, snappedY: 0,
+ targets : [],
+ locked : false,
+ changed : false
+ };
+
+ this.restrictStatus = {
+ dx : 0, dy : 0,
+ restrictedX: 0, restrictedY: 0,
+ snap : null,
+ restricted : false,
+ changed : false
+ };
+
+ this.restrictStatus.snap = this.snapStatus;
+
+ this.pointerIsDown = false;
+ this.pointerWasMoved = false;
+ this.gesturing = false;
+ this.dragging = false;
+ this.resizing = false;
+ this.resizeAxes = 'xy';
+
+ this.mouse = false;
+
+ interactions.push(this);
+ }
+
+ Interaction.prototype = {
+ getPageXY : function (pointer, xy) { return getPageXY(pointer, xy, this); },
+ getClientXY: function (pointer, xy) { return getClientXY(pointer, xy, this); },
+ setEventXY : function (target, ptr) { return setEventXY(target, ptr, this); },
+
+ pointerOver: function (pointer, event, eventTarget) {
+ if (this.prepared.name || !this.mouse) { return; }
+
+ var curMatches = [],
+ curMatchElements = [],
+ prevTargetElement = this.element;
+
+ this.addPointer(pointer);
+
+ if (this.target
+ && (testIgnore(this.target, this.element, eventTarget)
+ || !testAllow(this.target, this.element, eventTarget))) {
+ // if the eventTarget should be ignored or shouldn't be allowed
+ // clear the previous target
+ this.target = null;
+ this.element = null;
+ this.matches = [];
+ this.matchElements = [];
+ }
+
+ var elementInteractable = interactables.get(eventTarget),
+ elementAction = (elementInteractable
+ && !testIgnore(elementInteractable, eventTarget, eventTarget)
+ && testAllow(elementInteractable, eventTarget, eventTarget)
+ && validateAction(
+ elementInteractable.getAction(pointer, event, this, eventTarget),
+ elementInteractable));
+
+ if (elementAction && !withinInteractionLimit(elementInteractable, eventTarget, elementAction)) {
+ elementAction = null;
+ }
+
+ function pushCurMatches (interactable, selector) {
+ if (interactable
+ && inContext(interactable, eventTarget)
+ && !testIgnore(interactable, eventTarget, eventTarget)
+ && testAllow(interactable, eventTarget, eventTarget)
+ && matchesSelector(eventTarget, selector)) {
+
+ curMatches.push(interactable);
+ curMatchElements.push(eventTarget);
+ }
+ }
+
+ if (elementAction) {
+ this.target = elementInteractable;
+ this.element = eventTarget;
+ this.matches = [];
+ this.matchElements = [];
+ }
+ else {
+ interactables.forEachSelector(pushCurMatches);
+
+ if (this.validateSelector(pointer, event, curMatches, curMatchElements)) {
+ this.matches = curMatches;
+ this.matchElements = curMatchElements;
+
+ this.pointerHover(pointer, event, this.matches, this.matchElements);
+ events.add(eventTarget,
+ PointerEvent? pEventTypes.move : 'mousemove',
+ listeners.pointerHover);
+ }
+ else if (this.target) {
+ if (nodeContains(prevTargetElement, eventTarget)) {
+ this.pointerHover(pointer, event, this.matches, this.matchElements);
+ events.add(this.element,
+ PointerEvent? pEventTypes.move : 'mousemove',
+ listeners.pointerHover);
+ }
+ else {
+ this.target = null;
+ this.element = null;
+ this.matches = [];
+ this.matchElements = [];
+ }
+ }
+ }
+ },
+
+ // Check what action would be performed on pointerMove target if a mouse
+ // button were pressed and change the cursor accordingly
+ pointerHover: function (pointer, event, eventTarget, curEventTarget, matches, matchElements) {
+ var target = this.target;
+
+ if (!this.prepared.name && this.mouse) {
+
+ var action;
+
+ // update pointer coords for defaultActionChecker to use
+ this.setEventXY(this.curCoords, [pointer]);
+
+ if (matches) {
+ action = this.validateSelector(pointer, 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,
+ PointerEvent? pEventTypes.move : 'mousemove',
+ listeners.pointerHover);
+ }
+
+ if (this.target && this.target.options.styleCursor && !this.interacting()) {
+ this.target._doc.documentElement.style.cursor = '';
+ }
+ },
+
+ selectorDown: function (pointer, event, eventTarget, curEventTarget) {
+ var that = this,
+ // copy event to be used in timeout for IE8
+ eventCopy = events.useAttachEvent? extend({}, event) : event,
+ element = eventTarget,
+ pointerIndex = this.addPointer(pointer),
+ action;
+
+ this.holdTimers[pointerIndex] = setTimeout(function () {
+ that.pointerHold(events.useAttachEvent? eventCopy : pointer, eventCopy, eventTarget, curEventTarget);
+ }, defaultOptions._holdDuration);
+
+ this.pointerIsDown = true;
+
+ // Check if the down event hits the current inertia target
+ if (this.inertiaStatus.active && this.target.selector) {
+ // climb up the DOM tree from the event target
+ while (isElement(element)) {
+
+ // if this element is the current inertia target element
+ if (element === this.element
+ // and the prospective action is the same as the ongoing one
+ && validateAction(this.target.getAction(pointer, event, this, this.element), this.target).name === this.prepared.name) {
+
+ // stop inertia so that the next move will be a normal one
+ cancelFrame(this.inertiaStatus.i);
+ this.inertiaStatus.active = false;
+
+ this.collectEventTargets(pointer, event, eventTarget, 'down');
+ return;
+ }
+ element = parentElement(element);
+ }
+ }
+
+ // do nothing if interacting
+ if (this.interacting()) {
+ this.collectEventTargets(pointer, event, eventTarget, 'down');
+ return;
+ }
+
+ function pushMatches (interactable, selector, context) {
+ var elements = ie8MatchesSelector
+ ? context.querySelectorAll(selector)
+ : undefined;
+
+ if (inContext(interactable, element)
+ && !testIgnore(interactable, element, eventTarget)
+ && testAllow(interactable, element, eventTarget)
+ && matchesSelector(element, selector, elements)) {
+
+ that.matches.push(interactable);
+ that.matchElements.push(element);
+ }
+ }
+
+ // update pointer coords for defaultActionChecker to use
+ this.setEventXY(this.curCoords, [pointer]);
+ this.downEvent = event;
+
+ while (isElement(element) && !action) {
+ this.matches = [];
+ this.matchElements = [];
+
+ interactables.forEachSelector(pushMatches);
+
+ action = this.validateSelector(pointer, event, this.matches, this.matchElements);
+ element = parentElement(element);
+ }
+
+ if (action) {
+ this.prepared.name = action.name;
+ this.prepared.axis = action.axis;
+ this.prepared.edges = action.edges;
+
+ this.collectEventTargets(pointer, event, eventTarget, 'down');
+
+ return this.pointerDown(pointer, event, eventTarget, curEventTarget, action);
+ }
+ else {
+ // do these now since pointerDown isn't being called from here
+ this.downTimes[pointerIndex] = new Date().getTime();
+ this.downTargets[pointerIndex] = eventTarget;
+ pointerExtend(this.downPointer, pointer);
+
+ copyCoords(this.prevCoords, this.curCoords);
+ this.pointerWasMoved = false;
+ }
+
+ this.collectEventTargets(pointer, event, eventTarget, 'down');
+ },
+
+ // Determine action to be performed on next pointerMove and add appropriate
+ // style and event Listeners
+ pointerDown: function (pointer, event, eventTarget, curEventTarget, forceAction) {
+ if (!forceAction && !this.inertiaStatus.active && this.pointerWasMoved && this.prepared.name) {
+ this.checkAndPreventDefault(event, this.target, this.element);
+
+ return;
+ }
+
+ this.pointerIsDown = true;
+ this.downEvent = event;
+
+ var pointerIndex = this.addPointer(pointer),
+ action;
+
+ // If it is the second touch of a multi-touch gesture, keep the
+ // target the same and get a new action if a target was set by the
+ // first touch
+ if (this.pointerIds.length > 1 && this.target._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.prepared.name = action.name;
+ this.prepared.axis = action.axis;
+ this.prepared.edges = action.edges;
+ this.target = interactable;
+ this.element = element;
+
+ this.setStartOffsets(action.name, interactable, element);
+ this.setModifications(this.startCoords.page);
+
+ this.prevEvent = this[this.prepared.name + 'Start'](this.downEvent);
+ },
+
+ pointerMove: function (pointer, event, eventTarget, curEventTarget, preEnd) {
+ if (this.inertiaStatus.active) {
+ var pageUp = this.inertiaStatus.upCoords.page;
+ var clientUp = this.inertiaStatus.upCoords.client;
+
+ var inertiaPosition = {
+ pageX : pageUp.x + this.inertiaStatus.sx,
+ pageY : pageUp.y + this.inertiaStatus.sy,
+ clientX: clientUp.x + this.inertiaStatus.sx,
+ clientY: clientUp.y + this.inertiaStatus.sy
+ };
+
+ this.setEventXY(this.curCoords, [inertiaPosition]);
+ }
+ else {
+ this.recordPointer(pointer);
+ this.setEventXY(this.curCoords, this.pointers);
+ }
+
+ var duplicateMove = (this.curCoords.page.x === this.prevCoords.page.x
+ && this.curCoords.page.y === this.prevCoords.page.y
+ && this.curCoords.client.x === this.prevCoords.client.x
+ && this.curCoords.client.y === this.prevCoords.client.y);
+
+ var dx, dy,
+ pointerIndex = this.mouse? 0 : indexOf(this.pointerIds, getPointerId(pointer));
+
+ // register movement greater than pointerMoveTolerance
+ if (this.pointerIsDown && !this.pointerWasMoved) {
+ dx = this.curCoords.client.x - this.startCoords.client.x;
+ dy = this.curCoords.client.y - this.startCoords.client.y;
+
+ this.pointerWasMoved = hypot(dx, dy) > pointerMoveTolerance;
+ }
+
+ if (!duplicateMove && (!this.pointerIsDown || this.pointerWasMoved)) {
+ if (this.pointerIsDown) {
+ clearTimeout(this.holdTimers[pointerIndex]);
+ }
+
+ this.collectEventTargets(pointer, event, eventTarget, 'move');
+ }
+
+ if (!this.pointerIsDown) { return; }
+
+ if (duplicateMove && this.pointerWasMoved && !preEnd) {
+ this.checkAndPreventDefault(event, this.target, this.element);
+ return;
+ }
+
+ // set pointer coordinate, time changes and speeds
+ setEventDeltas(this.pointerDelta, this.prevCoords, this.curCoords);
+
+ if (!this.prepared.name) { return; }
+
+ if (this.pointerWasMoved
+ // ignore movement while inertia is active
+ && (!this.inertiaStatus.active || (pointer instanceof InteractEvent && /inertiastart/.test(pointer.type)))) {
+
+ // if just starting an action, calculate the pointer speed now
+ if (!this.interacting()) {
+ setEventDeltas(this.pointerDelta, this.prevCoords, this.curCoords);
+
+ // check if a drag is in the correct axis
+ if (this.prepared.name === 'drag') {
+ var absX = Math.abs(dx),
+ absY = Math.abs(dy),
+ targetAxis = this.target.options.drag.axis,
+ axis = (absX > absY ? 'x' : absX < absY ? 'y' : 'xy');
+
+ // if the movement isn't in the axis of the interactable
+ if (axis !== 'xy' && targetAxis !== 'xy' && targetAxis !== axis) {
+ // cancel the prepared action
+ this.prepared.name = null;
+
+ // then try to get a drag from another ineractable
+
+ var element = eventTarget;
+
+ // check element interactables
+ while (isElement(element)) {
+ var elementInteractable = interactables.get(element);
+
+ if (elementInteractable
+ && elementInteractable !== this.target
+ && !elementInteractable.options.drag.manualStart
+ && elementInteractable.getAction(this.downPointer, this.downEvent, this, element).name === 'drag'
+ && checkAxis(axis, elementInteractable)) {
+
+ this.prepared.name = 'drag';
+ this.target = elementInteractable;
+ this.element = element;
+ break;
+ }
+
+ element = parentElement(element);
+ }
+
+ // if there's no drag from element interactables,
+ // check the selector interactables
+ if (!this.prepared.name) {
+ var thisInteraction = this;
+
+ var getDraggable = function (interactable, selector, context) {
+ var elements = ie8MatchesSelector
+ ? context.querySelectorAll(selector)
+ : undefined;
+
+ if (interactable === thisInteraction.target) { return; }
+
+ if (inContext(interactable, eventTarget)
+ && !interactable.options.drag.manualStart
+ && !testIgnore(interactable, element, eventTarget)
+ && testAllow(interactable, element, eventTarget)
+ && matchesSelector(element, selector, elements)
+ && interactable.getAction(thisInteraction.downPointer, thisInteraction.downEvent, thisInteraction, element).name === 'drag'
+ && checkAxis(axis, interactable)
+ && withinInteractionLimit(interactable, element, 'drag')) {
+
+ return interactable;
+ }
+ };
+
+ element = eventTarget;
+
+ while (isElement(element)) {
+ var selectorInteractable = interactables.forEachSelector(getDraggable);
+
+ if (selectorInteractable) {
+ this.prepared.name = 'drag';
+ this.target = selectorInteractable;
+ this.element = element;
+ break;
+ }
+
+ element = parentElement(element);
+ }
+ }
+ }
+ }
+ }
+
+ var starting = !!this.prepared.name && !this.interacting();
+
+ if (starting
+ && (this.target.options[this.prepared.name].manualStart
+ || !withinInteractionLimit(this.target, this.element, this.prepared))) {
+ this.stop(event);
+ return;
+ }
+
+ if (this.prepared.name && this.target) {
+ if (starting) {
+ this.start(this.prepared, this.target, this.element);
+ }
+
+ var shouldMove = this.setModifications(this.curCoords.page, preEnd);
+
+ // move if snapping or restriction doesn't prevent it
+ if (shouldMove || starting) {
+ this.prevEvent = this[this.prepared.name + 'Move'](event);
+ }
+
+ this.checkAndPreventDefault(event, this.target, this.element);
+ }
+ }
+
+ copyCoords(this.prevCoords, this.curCoords);
+
+ if (this.dragging || this.resizing) {
+ this.autoScrollMove(pointer);
+ }
+ },
+
+ dragStart: function (event) {
+ var dragEvent = new InteractEvent(this, event, 'drag', 'start', this.element);
+
+ this.dragging = true;
+ this.target.fire(dragEvent);
+
+ // reset active dropzones
+ this.activeDrops.dropzones = [];
+ this.activeDrops.elements = [];
+ this.activeDrops.rects = [];
+
+ if (!this.dynamicDrop) {
+ this.setActiveDrops(this.element);
+ }
+
+ var dropEvents = this.getDropEvents(event, dragEvent);
+
+ if (dropEvents.activate) {
+ this.fireActiveDrops(dropEvents.activate);
+ }
+
+ return dragEvent;
+ },
+
+ dragMove: function (event) {
+ var target = this.target,
+ dragEvent = new InteractEvent(this, event, 'drag', 'move', this.element),
+ draggableElement = this.element,
+ drop = this.getDrop(dragEvent, event, draggableElement);
+
+ this.dropTarget = drop.dropzone;
+ this.dropElement = drop.element;
+
+ var dropEvents = this.getDropEvents(event, dragEvent);
+
+ target.fire(dragEvent);
+
+ if (dropEvents.leave) { this.prevDropTarget.fire(dropEvents.leave); }
+ if (dropEvents.enter) { this.dropTarget.fire(dropEvents.enter); }
+ if (dropEvents.move ) { this.dropTarget.fire(dropEvents.move ); }
+
+ this.prevDropTarget = this.dropTarget;
+ this.prevDropElement = this.dropElement;
+
+ return dragEvent;
+ },
+
+ resizeStart: function (event) {
+ var resizeEvent = new InteractEvent(this, event, 'resize', 'start', this.element);
+
+ if (this.prepared.edges) {
+ var startRect = this.target.getRect(this.element);
+
+ /*
+ * When using the `resizable.square` or `resizable.preserveAspectRatio` options, resizing from one edge
+ * will affect another. E.g. with `resizable.square`, resizing to make the right edge larger will make
+ * the bottom edge larger by the same amount. We call these 'linked' edges. Any linked edges will depend
+ * on the active edges and the edge being interacted with.
+ */
+ if (this.target.options.resize.square || this.target.options.resize.preserveAspectRatio) {
+ var linkedEdges = extend({}, this.prepared.edges);
+
+ linkedEdges.top = linkedEdges.top || (linkedEdges.left && !linkedEdges.bottom);
+ linkedEdges.left = linkedEdges.left || (linkedEdges.top && !linkedEdges.right );
+ linkedEdges.bottom = linkedEdges.bottom || (linkedEdges.right && !linkedEdges.top );
+ linkedEdges.right = linkedEdges.right || (linkedEdges.bottom && !linkedEdges.left );
+
+ this.prepared._linkedEdges = linkedEdges;
+ }
+ else {
+ this.prepared._linkedEdges = null;
+ }
+
+ // if using `resizable.preserveAspectRatio` option, record aspect ratio at the start of the resize
+ if (this.target.options.resize.preserveAspectRatio) {
+ this.resizeStartAspectRatio = startRect.width / startRect.height;
+ }
+
+ this.resizeRects = {
+ start : startRect,
+ current : extend({}, startRect),
+ restricted: extend({}, startRect),
+ previous : extend({}, startRect),
+ delta : {
+ left: 0, right : 0, width : 0,
+ top : 0, bottom: 0, height: 0
+ }
+ };
+
+ resizeEvent.rect = this.resizeRects.restricted;
+ resizeEvent.deltaRect = this.resizeRects.delta;
+ }
+
+ this.target.fire(resizeEvent);
+
+ this.resizing = true;
+
+ return resizeEvent;
+ },
+
+ resizeMove: function (event) {
+ var resizeEvent = new InteractEvent(this, event, 'resize', 'move', this.element);
+
+ var edges = this.prepared.edges,
+ invert = this.target.options.resize.invert,
+ invertible = invert === 'reposition' || invert === 'negate';
+
+ if (edges) {
+ var dx = resizeEvent.dx,
+ dy = resizeEvent.dy,
+
+ start = this.resizeRects.start,
+ current = this.resizeRects.current,
+ restricted = this.resizeRects.restricted,
+ delta = this.resizeRects.delta,
+ previous = extend(this.resizeRects.previous, restricted),
+
+ originalEdges = edges;
+
+ // `resize.preserveAspectRatio` takes precedence over `resize.square`
+ if (this.target.options.resize.preserveAspectRatio) {
+ var resizeStartAspectRatio = this.resizeStartAspectRatio;
+
+ edges = this.prepared._linkedEdges;
+
+ if ((originalEdges.left && originalEdges.bottom)
+ || (originalEdges.right && originalEdges.top)) {
+ dy = -dx / resizeStartAspectRatio;
+ }
+ else if (originalEdges.left || originalEdges.right) { dy = dx / resizeStartAspectRatio; }
+ else if (originalEdges.top || originalEdges.bottom) { dx = dy * resizeStartAspectRatio; }
+ }
+ else if (this.target.options.resize.square) {
+ edges = this.prepared._linkedEdges;
+
+ if ((originalEdges.left && originalEdges.bottom)
+ || (originalEdges.right && originalEdges.top)) {
+ dy = -dx;
+ }
+ else if (originalEdges.left || originalEdges.right) { dy = dx; }
+ else if (originalEdges.top || originalEdges.bottom) { dx = dy; }
+ }
+
+ // update the 'current' rect without modifications
+ if (edges.top ) { current.top += dy; }
+ if (edges.bottom) { current.bottom += dy; }
+ if (edges.left ) { current.left += dx; }
+ if (edges.right ) { current.right += dx; }
+
+ if (invertible) {
+ // if invertible, copy the current rect
+ extend(restricted, current);
+
+ if (invert === 'reposition') {
+ // swap edge values if necessary to keep width/height positive
+ var swap;
+
+ if (restricted.top > restricted.bottom) {
+ swap = restricted.top;
+
+ restricted.top = restricted.bottom;
+ restricted.bottom = swap;
+ }
+ if (restricted.left > restricted.right) {
+ swap = restricted.left;
+
+ restricted.left = restricted.right;
+ restricted.right = swap;
+ }
+ }
+ }
+ else {
+ // if not invertible, restrict to minimum of 0x0 rect
+ restricted.top = Math.min(current.top, start.bottom);
+ restricted.bottom = Math.max(current.bottom, start.top);
+ restricted.left = Math.min(current.left, start.right);
+ restricted.right = Math.max(current.right, start.left);
+ }
+
+ restricted.width = restricted.right - restricted.left;
+ restricted.height = restricted.bottom - restricted.top ;
+
+ for (var edge in restricted) {
+ delta[edge] = restricted[edge] - previous[edge];
+ }
+
+ resizeEvent.edges = this.prepared.edges;
+ resizeEvent.rect = restricted;
+ resizeEvent.deltaRect = delta;
+ }
+
+ this.target.fire(resizeEvent);
+
+ return resizeEvent;
+ },
+
+ gestureStart: function (event) {
+ var gestureEvent = new InteractEvent(this, event, 'gesture', 'start', this.element);
+
+ gestureEvent.ds = 0;
+
+ this.gesture.startDistance = this.gesture.prevDistance = gestureEvent.distance;
+ this.gesture.startAngle = this.gesture.prevAngle = gestureEvent.angle;
+ this.gesture.scale = 1;
+
+ this.gesturing = true;
+
+ this.target.fire(gestureEvent);
+
+ return gestureEvent;
+ },
+
+ gestureMove: function (event) {
+ if (!this.pointerIds.length) {
+ return this.prevEvent;
+ }
+
+ var gestureEvent;
+
+ gestureEvent = new InteractEvent(this, event, 'gesture', 'move', this.element);
+ gestureEvent.ds = gestureEvent.scale - this.gesture.scale;
+
+ this.target.fire(gestureEvent);
+
+ this.gesture.prevAngle = gestureEvent.angle;
+ this.gesture.prevDistance = gestureEvent.distance;
+
+ if (gestureEvent.scale !== Infinity &&
+ gestureEvent.scale !== null &&
+ gestureEvent.scale !== undefined &&
+ !isNaN(gestureEvent.scale)) {
+
+ this.gesture.scale = gestureEvent.scale;
+ }
+
+ return gestureEvent;
+ },
+
+ pointerHold: function (pointer, event, eventTarget) {
+ this.collectEventTargets(pointer, event, eventTarget, 'hold');
+ },
+
+ pointerUp: function (pointer, event, eventTarget, curEventTarget) {
+ var pointerIndex = this.mouse? 0 : indexOf(this.pointerIds, getPointerId(pointer));
+
+ clearTimeout(this.holdTimers[pointerIndex]);
+
+ this.collectEventTargets(pointer, event, eventTarget, 'up' );
+ this.collectEventTargets(pointer, event, eventTarget, 'tap');
+
+ this.pointerEnd(pointer, event, eventTarget, curEventTarget);
+
+ this.removePointer(pointer);
+ },
+
+ pointerCancel: function (pointer, event, eventTarget, curEventTarget) {
+ var pointerIndex = this.mouse? 0 : indexOf(this.pointerIds, getPointerId(pointer));
+
+ clearTimeout(this.holdTimers[pointerIndex]);
+
+ this.collectEventTargets(pointer, event, eventTarget, 'cancel');
+ this.pointerEnd(pointer, event, eventTarget, curEventTarget);
+
+ this.removePointer(pointer);
+ },
+
+ // http://www.quirksmode.org/dom/events/click.html
+ // >Events leading to dblclick
+ //
+ // IE8 doesn't fire down event before dblclick.
+ // This workaround tries to fire a tap and doubletap after dblclick
+ ie8Dblclick: function (pointer, event, eventTarget) {
+ if (this.prevTap
+ && event.clientX === this.prevTap.clientX
+ && event.clientY === this.prevTap.clientY
+ && eventTarget === this.prevTap.target) {
+
+ this.downTargets[0] = eventTarget;
+ this.downTimes[0] = new Date().getTime();
+ this.collectEventTargets(pointer, event, eventTarget, 'tap');
+ }
+ },
+
+ // End interact move events and stop auto-scroll unless inertia is enabled
+ pointerEnd: function (pointer, event, eventTarget, curEventTarget) {
+ var endEvent,
+ target = this.target,
+ options = target && target.options,
+ inertiaOptions = options && this.prepared.name && options[this.prepared.name].inertia,
+ inertiaStatus = this.inertiaStatus;
+
+ if (this.interacting()) {
+
+ if (inertiaStatus.active && !inertiaStatus.ending) { return; }
+
+ var pointerSpeed,
+ now = new Date().getTime(),
+ inertiaPossible = false,
+ inertia = false,
+ smoothEnd = false,
+ endSnap = checkSnap(target, this.prepared.name) && options[this.prepared.name].snap.endOnly,
+ endRestrict = checkRestrict(target, this.prepared.name) && options[this.prepared.name].restrict.endOnly,
+ dx = 0,
+ dy = 0,
+ startEvent;
+
+ if (this.dragging) {
+ if (options.drag.axis === 'x' ) { pointerSpeed = Math.abs(this.pointerDelta.client.vx); }
+ else if (options.drag.axis === 'y' ) { pointerSpeed = Math.abs(this.pointerDelta.client.vy); }
+ else /*options.drag.axis === 'xy'*/{ pointerSpeed = this.pointerDelta.client.speed; }
+ }
+ else {
+ pointerSpeed = this.pointerDelta.client.speed;
+ }
+
+ // check if inertia should be started
+ inertiaPossible = (inertiaOptions && inertiaOptions.enabled
+ && this.prepared.name !== 'gesture'
+ && event !== inertiaStatus.startEvent);
+
+ inertia = (inertiaPossible
+ && (now - this.curCoords.timeStamp) < 50
+ && pointerSpeed > inertiaOptions.minSpeed
+ && pointerSpeed > inertiaOptions.endSpeed);
+
+ if (inertiaPossible && !inertia && (endSnap || endRestrict)) {
+
+ var snapRestrict = {};
+
+ snapRestrict.snap = snapRestrict.restrict = snapRestrict;
+
+ if (endSnap) {
+ this.setSnapping(this.curCoords.page, snapRestrict);
+ if (snapRestrict.locked) {
+ dx += snapRestrict.dx;
+ dy += snapRestrict.dy;
+ }
+ }
+
+ if (endRestrict) {
+ this.setRestriction(this.curCoords.page, snapRestrict);
+ if (snapRestrict.restricted) {
+ dx += snapRestrict.dx;
+ dy += snapRestrict.dy;
+ }
+ }
+
+ if (dx || dy) {
+ smoothEnd = true;
+ }
+ }
+
+ if (inertia || smoothEnd) {
+ copyCoords(inertiaStatus.upCoords, this.curCoords);
+
+ this.pointers[0] = inertiaStatus.startEvent = startEvent =
+ new InteractEvent(this, event, this.prepared.name, 'inertiastart', this.element);
+
+ inertiaStatus.t0 = now;
+
+ target.fire(inertiaStatus.startEvent);
+
+ if (inertia) {
+ inertiaStatus.vx0 = this.pointerDelta.client.vx;
+ inertiaStatus.vy0 = this.pointerDelta.client.vy;
+ inertiaStatus.v0 = pointerSpeed;
+
+ this.calcInertia(inertiaStatus);
+
+ var page = extend({}, this.curCoords.page),
+ origin = getOriginXY(target, this.element),
+ statusObject;
+
+ page.x = page.x + inertiaStatus.xe - origin.x;
+ page.y = page.y + inertiaStatus.ye - origin.y;
+
+ statusObject = {
+ useStatusXY: true,
+ x: page.x,
+ y: page.y,
+ dx: 0,
+ dy: 0,
+ snap: null
+ };
+
+ statusObject.snap = statusObject;
+
+ dx = dy = 0;
+
+ if (endSnap) {
+ var snap = this.setSnapping(this.curCoords.page, statusObject);
+
+ if (snap.locked) {
+ dx += snap.dx;
+ dy += snap.dy;
+ }
+ }
+
+ if (endRestrict) {
+ var restrict = this.setRestriction(this.curCoords.page, statusObject);
+
+ if (restrict.restricted) {
+ dx += restrict.dx;
+ dy += restrict.dy;
+ }
+ }
+
+ inertiaStatus.modifiedXe += dx;
+ inertiaStatus.modifiedYe += dy;
+
+ inertiaStatus.i = reqFrame(this.boundInertiaFrame);
+ }
+ else {
+ inertiaStatus.smoothEnd = true;
+ inertiaStatus.xe = dx;
+ inertiaStatus.ye = dy;
+
+ inertiaStatus.sx = inertiaStatus.sy = 0;
+
+ inertiaStatus.i = reqFrame(this.boundSmoothEndFrame);
+ }
+
+ inertiaStatus.active = true;
+ return;
+ }
+
+ if (endSnap || endRestrict) {
+ // fire a move event at the snapped coordinates
+ this.pointerMove(pointer, event, eventTarget, curEventTarget, true);
+ }
+ }
+
+ if (this.dragging) {
+ endEvent = new InteractEvent(this, event, 'drag', 'end', this.element);
+
+ var draggableElement = this.element,
+ drop = this.getDrop(endEvent, event, draggableElement);
+
+ this.dropTarget = drop.dropzone;
+ this.dropElement = drop.element;
+
+ var dropEvents = this.getDropEvents(event, endEvent);
+
+ if (dropEvents.leave) { this.prevDropTarget.fire(dropEvents.leave); }
+ if (dropEvents.enter) { this.dropTarget.fire(dropEvents.enter); }
+ if (dropEvents.drop ) { this.dropTarget.fire(dropEvents.drop ); }
+ if (dropEvents.deactivate) {
+ this.fireActiveDrops(dropEvents.deactivate);
+ }
+
+ target.fire(endEvent);
+ }
+ else if (this.resizing) {
+ endEvent = new InteractEvent(this, event, 'resize', 'end', this.element);
+ target.fire(endEvent);
+ }
+ else if (this.gesturing) {
+ endEvent = new InteractEvent(this, event, 'gesture', 'end', this.element);
+ target.fire(endEvent);
+ }
+
+ this.stop(event);
+ },
+
+ collectDrops: function (element) {
+ var drops = [],
+ elements = [],
+ i;
+
+ element = element || this.element;
+
+ // collect all dropzones and their elements which qualify for a drop
+ for (i = 0; i < interactables.length; i++) {
+ if (!interactables[i].options.drop.enabled) { continue; }
+
+ var current = interactables[i],
+ accept = current.options.drop.accept;
+
+ // test the draggable element against the dropzone's accept setting
+ if ((isElement(accept) && accept !== element)
+ || (isString(accept)
+ && !matchesSelector(element, accept))) {
+
+ continue;
+ }
+
+ // query for new elements if necessary
+ var dropElements = current.selector? current._context.querySelectorAll(current.selector) : [current._element];
+
+ for (var j = 0, len = dropElements.length; j < len; j++) {
+ var currentElement = dropElements[j];
+
+ if (currentElement === element) {
+ continue;
+ }
+
+ drops.push(current);
+ elements.push(currentElement);
+ }
+ }
+
+ return {
+ dropzones: drops,
+ elements: elements
+ };
+ },
+
+ fireActiveDrops: function (event) {
+ var i,
+ current,
+ currentElement,
+ prevElement;
+
+ // loop through all active dropzones and trigger event
+ for (i = 0; i < this.activeDrops.dropzones.length; i++) {
+ current = this.activeDrops.dropzones[i];
+ currentElement = this.activeDrops.elements [i];
+
+ // prevent trigger of duplicate events on same element
+ if (currentElement !== prevElement) {
+ // set current element as event target
+ event.target = currentElement;
+ current.fire(event);
+ }
+ prevElement = currentElement;
+ }
+ },
+
+ // Collect a new set of possible drops and save them in activeDrops.
+ // setActiveDrops should always be called when a drag has just started or a
+ // drag event happens while dynamicDrop is true
+ setActiveDrops: function (dragElement) {
+ // get dropzones and their elements that could receive the draggable
+ var possibleDrops = this.collectDrops(dragElement, true);
+
+ this.activeDrops.dropzones = possibleDrops.dropzones;
+ this.activeDrops.elements = possibleDrops.elements;
+ this.activeDrops.rects = [];
+
+ for (var i = 0; i < this.activeDrops.dropzones.length; i++) {
+ this.activeDrops.rects[i] = this.activeDrops.dropzones[i].getRect(this.activeDrops.elements[i]);
+ }
+ },
+
+ getDrop: function (dragEvent, event, dragElement) {
+ var validDrops = [];
+
+ if (dynamicDrop) {
+ this.setActiveDrops(dragElement);
+ }
+
+ // collect all dropzones and their elements which qualify for a drop
+ for (var j = 0; j < this.activeDrops.dropzones.length; j++) {
+ var current = this.activeDrops.dropzones[j],
+ currentElement = this.activeDrops.elements [j],
+ rect = this.activeDrops.rects [j];
+
+ validDrops.push(current.dropCheck(dragEvent, event, this.target, dragElement, currentElement, rect)
+ ? currentElement
+ : null);
+ }
+
+ // get the most appropriate dropzone based on DOM depth and order
+ var dropIndex = indexOfDeepestElement(validDrops),
+ dropzone = this.activeDrops.dropzones[dropIndex] || null,
+ element = this.activeDrops.elements [dropIndex] || null;
+
+ return {
+ dropzone: dropzone,
+ element: element
+ };
+ },
+
+ getDropEvents: function (pointerEvent, dragEvent) {
+ var dropEvents = {
+ enter : null,
+ leave : null,
+ activate : null,
+ deactivate: null,
+ move : null,
+ drop : null
+ };
+
+ if (this.dropElement !== this.prevDropElement) {
+ // if there was a prevDropTarget, create a dragleave event
+ if (this.prevDropTarget) {
+ dropEvents.leave = {
+ target : this.prevDropElement,
+ dropzone : this.prevDropTarget,
+ relatedTarget: dragEvent.target,
+ draggable : dragEvent.interactable,
+ dragEvent : dragEvent,
+ interaction : this,
+ timeStamp : dragEvent.timeStamp,
+ type : 'dragleave'
+ };
+
+ dragEvent.dragLeave = this.prevDropElement;
+ dragEvent.prevDropzone = this.prevDropTarget;
+ }
+ // if the dropTarget is not null, create a dragenter event
+ if (this.dropTarget) {
+ dropEvents.enter = {
+ target : this.dropElement,
+ dropzone : this.dropTarget,
+ relatedTarget: dragEvent.target,
+ draggable : dragEvent.interactable,
+ dragEvent : dragEvent,
+ interaction : this,
+ timeStamp : dragEvent.timeStamp,
+ type : 'dragenter'
+ };
+
+ dragEvent.dragEnter = this.dropElement;
+ dragEvent.dropzone = this.dropTarget;
+ }
+ }
+
+ if (dragEvent.type === 'dragend' && this.dropTarget) {
+ dropEvents.drop = {
+ target : this.dropElement,
+ dropzone : this.dropTarget,
+ relatedTarget: dragEvent.target,
+ draggable : dragEvent.interactable,
+ dragEvent : dragEvent,
+ interaction : this,
+ timeStamp : dragEvent.timeStamp,
+ type : 'drop'
+ };
+
+ dragEvent.dropzone = this.dropTarget;
+ }
+ if (dragEvent.type === 'dragstart') {
+ dropEvents.activate = {
+ target : null,
+ dropzone : null,
+ relatedTarget: dragEvent.target,
+ draggable : dragEvent.interactable,
+ dragEvent : dragEvent,
+ interaction : this,
+ timeStamp : dragEvent.timeStamp,
+ type : 'dropactivate'
+ };
+ }
+ if (dragEvent.type === 'dragend') {
+ dropEvents.deactivate = {
+ target : null,
+ dropzone : null,
+ relatedTarget: dragEvent.target,
+ draggable : dragEvent.interactable,
+ dragEvent : dragEvent,
+ interaction : this,
+ timeStamp : dragEvent.timeStamp,
+ type : 'dropdeactivate'
+ };
+ }
+ if (dragEvent.type === 'dragmove' && this.dropTarget) {
+ dropEvents.move = {
+ target : this.dropElement,
+ dropzone : this.dropTarget,
+ relatedTarget: dragEvent.target,
+ draggable : dragEvent.interactable,
+ dragEvent : dragEvent,
+ interaction : this,
+ dragmove : dragEvent,
+ timeStamp : dragEvent.timeStamp,
+ type : 'dropmove'
+ };
+ dragEvent.dropzone = this.dropTarget;
+ }
+
+ return dropEvents;
+ },
+
+ currentAction: function () {
+ return (this.dragging && 'drag') || (this.resizing && 'resize') || (this.gesturing && 'gesture') || null;
+ },
+
+ interacting: function () {
+ return this.dragging || this.resizing || this.gesturing;
+ },
+
+ clearTargets: function () {
+ this.target = this.element = null;
+
+ this.dropTarget = this.dropElement = this.prevDropTarget = this.prevDropElement = null;
+ },
+
+ stop: function (event) {
+ if (this.interacting()) {
+ autoScroll.stop();
+ this.matches = [];
+ this.matchElements = [];
+
+ var target = this.target;
+
+ if (target.options.styleCursor) {
+ target._doc.documentElement.style.cursor = '';
+ }
+
+ // prevent Default only if were previously interacting
+ if (event && isFunction(event.preventDefault)) {
+ this.checkAndPreventDefault(event, target, this.element);
+ }
+
+ if (this.dragging) {
+ this.activeDrops.dropzones = this.activeDrops.elements = this.activeDrops.rects = null;
+ }
+ }
+
+ this.clearTargets();
+
+ this.pointerIsDown = this.snapStatus.locked = this.dragging = this.resizing = this.gesturing = false;
+ this.prepared.name = this.prevEvent = null;
+ this.inertiaStatus.resumeDx = this.inertiaStatus.resumeDy = 0;
+
+ // remove pointers if their ID isn't in this.pointerIds
+ for (var i = 0; i < this.pointers.length; i++) {
+ if (indexOf(this.pointerIds, getPointerId(this.pointers[i])) === -1) {
+ this.pointers.splice(i, 1);
+ }
+ }
+ },
+
+ inertiaFrame: function () {
+ var inertiaStatus = this.inertiaStatus,
+ options = this.target.options[this.prepared.name].inertia,
+ lambda = options.resistance,
+ t = new Date().getTime() / 1000 - inertiaStatus.t0;
+
+ if (t < inertiaStatus.te) {
+
+ var progress = 1 - (Math.exp(-lambda * t) - inertiaStatus.lambda_v0) / inertiaStatus.one_ve_v0;
+
+ if (inertiaStatus.modifiedXe === inertiaStatus.xe && inertiaStatus.modifiedYe === inertiaStatus.ye) {
+ inertiaStatus.sx = inertiaStatus.xe * progress;
+ inertiaStatus.sy = inertiaStatus.ye * progress;
+ }
+ else {
+ var quadPoint = getQuadraticCurvePoint(
+ 0, 0,
+ inertiaStatus.xe, inertiaStatus.ye,
+ inertiaStatus.modifiedXe, inertiaStatus.modifiedYe,
+ progress);
+
+ inertiaStatus.sx = quadPoint.x;
+ inertiaStatus.sy = quadPoint.y;
+ }
+
+ this.pointerMove(inertiaStatus.startEvent, inertiaStatus.startEvent);
+
+ inertiaStatus.i = reqFrame(this.boundInertiaFrame);
+ }
+ else {
+ inertiaStatus.ending = true;
+
+ inertiaStatus.sx = inertiaStatus.modifiedXe;
+ inertiaStatus.sy = inertiaStatus.modifiedYe;
+
+ this.pointerMove(inertiaStatus.startEvent, inertiaStatus.startEvent);
+ this.pointerEnd(inertiaStatus.startEvent, inertiaStatus.startEvent);
+
+ inertiaStatus.active = inertiaStatus.ending = false;
+ }
+ },
+
+ smoothEndFrame: function () {
+ var inertiaStatus = this.inertiaStatus,
+ t = new Date().getTime() - inertiaStatus.t0,
+ duration = this.target.options[this.prepared.name].inertia.smoothEndDuration;
+
+ if (t < duration) {
+ inertiaStatus.sx = easeOutQuad(t, 0, inertiaStatus.xe, duration);
+ inertiaStatus.sy = easeOutQuad(t, 0, inertiaStatus.ye, duration);
+
+ this.pointerMove(inertiaStatus.startEvent, inertiaStatus.startEvent);
+
+ inertiaStatus.i = reqFrame(this.boundSmoothEndFrame);
+ }
+ else {
+ inertiaStatus.ending = true;
+
+ inertiaStatus.sx = inertiaStatus.xe;
+ inertiaStatus.sy = inertiaStatus.ye;
+
+ this.pointerMove(inertiaStatus.startEvent, inertiaStatus.startEvent);
+ this.pointerEnd(inertiaStatus.startEvent, inertiaStatus.startEvent);
+
+ inertiaStatus.smoothEnd =
+ inertiaStatus.active = inertiaStatus.ending = false;
+ }
+ },
+
+ addPointer: function (pointer) {
+ var id = getPointerId(pointer),
+ index = this.mouse? 0 : indexOf(this.pointerIds, id);
+
+ if (index === -1) {
+ index = this.pointerIds.length;
+ }
+
+ this.pointerIds[index] = id;
+ this.pointers[index] = pointer;
+
+ return index;
+ },
+
+ removePointer: function (pointer) {
+ var id = getPointerId(pointer),
+ index = this.mouse? 0 : indexOf(this.pointerIds, id);
+
+ if (index === -1) { return; }
+
+ this.pointers .splice(index, 1);
+ this.pointerIds .splice(index, 1);
+ this.downTargets.splice(index, 1);
+ this.downTimes .splice(index, 1);
+ this.holdTimers .splice(index, 1);
+ },
+
+ recordPointer: function (pointer) {
+ var index = this.mouse? 0: indexOf(this.pointerIds, getPointerId(pointer));
+
+ if (index === -1) { return; }
+
+ this.pointers[index] = pointer;
+ },
+
+ collectEventTargets: function (pointer, event, eventTarget, eventType) {
+ var pointerIndex = this.mouse? 0 : indexOf(this.pointerIds, getPointerId(pointer));
+
+ // do not fire a tap event if the pointer was moved before being lifted
+ if (eventType === 'tap' && (this.pointerWasMoved
+ // or if the pointerup target is different to the pointerdown target
+ || !(this.downTargets[pointerIndex] && this.downTargets[pointerIndex] === eventTarget))) {
+ return;
+ }
+
+ var targets = [],
+ elements = [],
+ element = eventTarget;
+
+ function collectSelectors (interactable, selector, context) {
+ var els = ie8MatchesSelector
+ ? context.querySelectorAll(selector)
+ : undefined;
+
+ if (interactable._iEvents[eventType]
+ && isElement(element)
+ && inContext(interactable, element)
+ && !testIgnore(interactable, element, eventTarget)
+ && testAllow(interactable, element, eventTarget)
+ && matchesSelector(element, selector, els)) {
+
+ targets.push(interactable);
+ elements.push(element);
+ }
+ }
+
+ while (element) {
+ if (interact.isSet(element) && interact(element)._iEvents[eventType]) {
+ targets.push(interact(element));
+ elements.push(element);
+ }
+
+ interactables.forEachSelector(collectSelectors);
+
+ element = parentElement(element);
+ }
+
+ // create the tap event even if there are no listeners so that
+ // doubletap can still be created and fired
+ if (targets.length || eventType === 'tap') {
+ this.firePointers(pointer, event, eventTarget, targets, elements, eventType);
+ }
+ },
+
+ firePointers: function (pointer, event, eventTarget, targets, elements, eventType) {
+ var pointerIndex = this.mouse? 0 : indexOf(this.pointerIds, getPointerId(pointer)),
+ pointerEvent = {},
+ i,
+ // for tap events
+ interval, createNewDoubleTap;
+
+ // if it's a doubletap then the event properties would have been
+ // copied from the tap event and provided as the pointer argument
+ if (eventType === 'doubletap') {
+ pointerEvent = pointer;
+ }
+ else {
+ pointerExtend(pointerEvent, event);
+ if (event !== pointer) {
+ pointerExtend(pointerEvent, pointer);
+ }
+
+ pointerEvent.preventDefault = preventOriginalDefault;
+ pointerEvent.stopPropagation = InteractEvent.prototype.stopPropagation;
+ pointerEvent.stopImmediatePropagation = InteractEvent.prototype.stopImmediatePropagation;
+ pointerEvent.interaction = this;
+
+ pointerEvent.timeStamp = new Date().getTime();
+ pointerEvent.originalEvent = event;
+ pointerEvent.originalPointer = pointer;
+ pointerEvent.type = eventType;
+ pointerEvent.pointerId = getPointerId(pointer);
+ pointerEvent.pointerType = this.mouse? 'mouse' : !supportsPointerEvent? 'touch'
+ : isString(pointer.pointerType)
+ ? pointer.pointerType
+ : [,,'touch', 'pen', 'mouse'][pointer.pointerType];
+ }
+
+ if (eventType === 'tap') {
+ pointerEvent.dt = pointerEvent.timeStamp - this.downTimes[pointerIndex];
+
+ interval = pointerEvent.timeStamp - this.tapTime;
+ createNewDoubleTap = !!(this.prevTap && this.prevTap.type !== 'doubletap'
+ && this.prevTap.target === pointerEvent.target
+ && interval < 500);
+
+ pointerEvent.double = createNewDoubleTap;
+
+ this.tapTime = pointerEvent.timeStamp;
+ }
+
+ for (i = 0; i < targets.length; i++) {
+ pointerEvent.currentTarget = elements[i];
+ pointerEvent.interactable = targets[i];
+ targets[i].fire(pointerEvent);
+
+ if (pointerEvent.immediatePropagationStopped
+ ||(pointerEvent.propagationStopped && elements[i + 1] !== pointerEvent.currentTarget)) {
+ break;
+ }
+ }
+
+ if (createNewDoubleTap) {
+ var doubleTap = {};
+
+ extend(doubleTap, pointerEvent);
+
+ doubleTap.dt = interval;
+ doubleTap.type = 'doubletap';
+
+ this.collectEventTargets(doubleTap, event, eventTarget, 'doubletap');
+
+ this.prevTap = doubleTap;
+ }
+ else if (eventType === 'tap') {
+ this.prevTap = pointerEvent;
+ }
+ },
+
+ validateSelector: function (pointer, event, matches, matchElements) {
+ for (var i = 0, len = matches.length; i < len; i++) {
+ var match = matches[i],
+ matchElement = matchElements[i],
+ action = validateAction(match.getAction(pointer, event, this, matchElement), match);
+
+ if (action && withinInteractionLimit(match, matchElement, action)) {
+ this.target = match;
+ this.element = matchElement;
+
+ return action;
+ }
+ }
+ },
+
+ setSnapping: function (pageCoords, status) {
+ var snap = this.target.options[this.prepared.name].snap,
+ targets = [],
+ target,
+ page,
+ i;
+
+ status = status || this.snapStatus;
+
+ if (status.useStatusXY) {
+ page = { x: status.x, y: status.y };
+ }
+ else {
+ var origin = getOriginXY(this.target, this.element);
+
+ page = extend({}, pageCoords);
+
+ page.x -= origin.x;
+ page.y -= origin.y;
+ }
+
+ status.realX = page.x;
+ status.realY = page.y;
+
+ page.x = page.x - this.inertiaStatus.resumeDx;
+ page.y = page.y - this.inertiaStatus.resumeDy;
+
+ var len = snap.targets? snap.targets.length : 0;
+
+ for (var relIndex = 0; relIndex < this.snapOffsets.length; relIndex++) {
+ var relative = {
+ x: page.x - this.snapOffsets[relIndex].x,
+ y: page.y - this.snapOffsets[relIndex].y
+ };
+
+ for (i = 0; i < len; i++) {
+ if (isFunction(snap.targets[i])) {
+ target = snap.targets[i](relative.x, relative.y, this);
+ }
+ else {
+ target = snap.targets[i];
+ }
+
+ if (!target) { continue; }
+
+ targets.push({
+ x: isNumber(target.x) ? (target.x + this.snapOffsets[relIndex].x) : relative.x,
+ y: isNumber(target.y) ? (target.y + this.snapOffsets[relIndex].y) : relative.y,
+
+ range: isNumber(target.range)? target.range: snap.range
+ });
+ }
+ }
+
+ var closest = {
+ target: null,
+ inRange: false,
+ distance: 0,
+ range: 0,
+ dx: 0,
+ dy: 0
+ };
+
+ for (i = 0, len = targets.length; i < len; i++) {
+ target = targets[i];
+
+ var range = target.range,
+ dx = target.x - page.x,
+ dy = target.y - page.y,
+ distance = hypot(dx, dy),
+ inRange = distance <= range;
+
+ // Infinite targets count as being out of range
+ // compared to non infinite ones that are in range
+ if (range === Infinity && closest.inRange && closest.range !== Infinity) {
+ inRange = false;
+ }
+
+ if (!closest.target || (inRange
+ // is the closest target in range?
+ ? (closest.inRange && range !== Infinity
+ // the pointer is relatively deeper in this target
+ ? distance / range < closest.distance / closest.range
+ // this target has Infinite range and the closest doesn't
+ : (range === Infinity && closest.range !== Infinity)
+ // OR this target is closer that the previous closest
+ || distance < closest.distance)
+ // The other is not in range and the pointer is closer to this target
+ : (!closest.inRange && distance < closest.distance))) {
+
+ if (range === Infinity) {
+ inRange = true;
+ }
+
+ closest.target = target;
+ closest.distance = distance;
+ closest.range = range;
+ closest.inRange = inRange;
+ closest.dx = dx;
+ closest.dy = dy;
+
+ status.range = range;
+ }
+ }
+
+ var snapChanged;
+
+ if (closest.target) {
+ snapChanged = (status.snappedX !== closest.target.x || status.snappedY !== closest.target.y);
+
+ status.snappedX = closest.target.x;
+ status.snappedY = closest.target.y;
+ }
+ else {
+ snapChanged = true;
+
+ status.snappedX = NaN;
+ status.snappedY = NaN;
+ }
+
+ status.dx = closest.dx;
+ status.dy = closest.dy;
+
+ status.changed = (snapChanged || (closest.inRange && !status.locked));
+ status.locked = closest.inRange;
+
+ return status;
+ },
+
+ setRestriction: function (pageCoords, status) {
+ var target = this.target,
+ restrict = target && target.options[this.prepared.name].restrict,
+ restriction = restrict && restrict.restriction,
+ page;
+
+ if (!restriction) {
+ return status;
+ }
+
+ status = status || this.restrictStatus;
+
+ page = status.useStatusXY
+ ? page = { x: status.x, y: status.y }
+ : page = extend({}, pageCoords);
+
+ if (status.snap && status.snap.locked) {
+ page.x += status.snap.dx || 0;
+ page.y += status.snap.dy || 0;
+ }
+
+ page.x -= this.inertiaStatus.resumeDx;
+ page.y -= this.inertiaStatus.resumeDy;
+
+ status.dx = 0;
+ status.dy = 0;
+ status.restricted = false;
+
+ var rect, restrictedX, restrictedY;
+
+ if (isString(restriction)) {
+ if (restriction === 'parent') {
+ restriction = parentElement(this.element);
+ }
+ else if (restriction === 'self') {
+ restriction = target.getRect(this.element);
+ }
+ else {
+ restriction = closest(this.element, restriction);
+ }
+
+ if (!restriction) { return status; }
+ }
+
+ if (isFunction(restriction)) {
+ restriction = restriction(page.x, page.y, this.element);
+ }
+
+ if (isElement(restriction)) {
+ restriction = getElementRect(restriction);
+ }
+
+ rect = restriction;
+
+ if (!restriction) {
+ restrictedX = page.x;
+ restrictedY = page.y;
+ }
+ // object is assumed to have
+ // x, y, width, height or
+ // left, top, right, bottom
+ else if ('x' in restriction && 'y' in restriction) {
+ restrictedX = Math.max(Math.min(rect.x + rect.width - this.restrictOffset.right , page.x), rect.x + this.restrictOffset.left);
+ restrictedY = Math.max(Math.min(rect.y + rect.height - this.restrictOffset.bottom, page.y), rect.y + this.restrictOffset.top );
+ }
+ else {
+ restrictedX = Math.max(Math.min(rect.right - this.restrictOffset.right , page.x), rect.left + this.restrictOffset.left);
+ restrictedY = Math.max(Math.min(rect.bottom - this.restrictOffset.bottom, page.y), rect.top + this.restrictOffset.top );
+ }
+
+ status.dx = restrictedX - page.x;
+ status.dy = restrictedY - page.y;
+
+ status.changed = status.restrictedX !== restrictedX || status.restrictedY !== restrictedY;
+ status.restricted = !!(status.dx || status.dy);
+
+ status.restrictedX = restrictedX;
+ status.restrictedY = restrictedY;
+
+ return status;
+ },
+
+ checkAndPreventDefault: function (event, interactable, element) {
+ if (!(interactable = interactable || this.target)) { return; }
+
+ var options = interactable.options,
+ prevent = options.preventDefault;
+
+ if (prevent === 'auto' && element && !/^(input|select|textarea)$/i.test(event.target.nodeName)) {
+ // do not preventDefault on pointerdown if the prepared action is a drag
+ // and dragging can only start from a certain direction - this allows
+ // a touch to pan the viewport if a drag isn't in the right direction
+ if (/down|start/i.test(event.type)
+ && this.prepared.name === 'drag' && options.drag.axis !== 'xy') {
+
+ return;
+ }
+
+ // with manualStart, only preventDefault while interacting
+ if (options[this.prepared.name] && options[this.prepared.name].manualStart
+ && !this.interacting()) {
+ return;
+ }
+
+ event.preventDefault();
+ return;
+ }
+
+ if (prevent === 'always') {
+ event.preventDefault();
+ return;
+ }
+ },
+
+ calcInertia: function (status) {
+ var inertiaOptions = this.target.options[this.prepared.name].inertia,
+ lambda = inertiaOptions.resistance,
+ inertiaDur = -Math.log(inertiaOptions.endSpeed / status.v0) / lambda;
+
+ status.x0 = this.prevEvent.pageX;
+ status.y0 = this.prevEvent.pageY;
+ status.t0 = status.startEvent.timeStamp / 1000;
+ status.sx = status.sy = 0;
+
+ status.modifiedXe = status.xe = (status.vx0 - inertiaDur) / lambda;
+ status.modifiedYe = status.ye = (status.vy0 - inertiaDur) / lambda;
+ status.te = inertiaDur;
+
+ status.lambda_v0 = lambda / status.v0;
+ status.one_ve_v0 = 1 - inertiaOptions.endSpeed / status.v0;
+ },
+
+ autoScrollMove: function (pointer) {
+ if (!(this.interacting()
+ && checkAutoScroll(this.target, this.prepared.name))) {
+ return;
+ }
+
+ if (this.inertiaStatus.active) {
+ autoScroll.x = autoScroll.y = 0;
+ return;
+ }
+
+ var top,
+ right,
+ bottom,
+ left,
+ options = this.target.options[this.prepared.name].autoScroll,
+ container = options.container || getWindow(this.element);
+
+ if (isWindow(container)) {
+ left = pointer.clientX < autoScroll.margin;
+ top = pointer.clientY < autoScroll.margin;
+ right = pointer.clientX > container.innerWidth - autoScroll.margin;
+ bottom = pointer.clientY > container.innerHeight - autoScroll.margin;
+ }
+ else {
+ var rect = getElementClientRect(container);
+
+ left = pointer.clientX < rect.left + autoScroll.margin;
+ top = pointer.clientY < rect.top + autoScroll.margin;
+ right = pointer.clientX > rect.right - autoScroll.margin;
+ bottom = pointer.clientY > rect.bottom - autoScroll.margin;
+ }
+
+ autoScroll.x = (right ? 1: left? -1: 0);
+ autoScroll.y = (bottom? 1: top? -1: 0);
+
+ if (!autoScroll.isScrolling) {
+ // set the autoScroll properties to those of the target
+ autoScroll.margin = options.margin;
+ autoScroll.speed = options.speed;
+
+ autoScroll.start(this);
+ }
+ },
+
+ _updateEventTargets: function (target, currentTarget) {
+ this._eventTarget = target;
+ this._curEventTarget = currentTarget;
+ }
+
+ };
+
+ function getInteractionFromPointer (pointer, eventType, eventTarget) {
+ var i = 0, len = interactions.length,
+ mouseEvent = (/mouse/i.test(pointer.pointerType || eventType)
+ // MSPointerEvent.MSPOINTER_TYPE_MOUSE
+ || pointer.pointerType === 4),
+ interaction;
+
+ var id = getPointerId(pointer);
+
+ // try to resume inertia with a new pointer
+ if (/down|start/i.test(eventType)) {
+ for (i = 0; i < len; i++) {
+ interaction = interactions[i];
+
+ var element = eventTarget;
+
+ if (interaction.inertiaStatus.active && interaction.target.options[interaction.prepared.name].inertia.allowResume
+ && (interaction.mouse === mouseEvent)) {
+ while (element) {
+ // if the element is the interaction element
+ if (element === interaction.element) {
+ return interaction;
+ }
+ element = parentElement(element);
+ }
+ }
+ }
+ }
+
+ // if it's a mouse interaction
+ if (mouseEvent || !(supportsTouch || supportsPointerEvent)) {
+
+ // find a mouse interaction that's not in inertia phase
+ for (i = 0; i < len; i++) {
+ if (interactions[i].mouse && !interactions[i].inertiaStatus.active) {
+ return interactions[i];
+ }
+ }
+
+ // find any interaction specifically for mouse.
+ // if the eventType is a mousedown, and inertia is active
+ // ignore the interaction
+ for (i = 0; i < len; i++) {
+ if (interactions[i].mouse && !(/down/.test(eventType) && interactions[i].inertiaStatus.active)) {
+ return interaction;
+ }
+ }
+
+ // create a new interaction for mouse
+ interaction = new Interaction();
+ interaction.mouse = true;
+
+ return interaction;
+ }
+
+ // get interaction that has this pointer
+ for (i = 0; i < len; i++) {
+ if (contains(interactions[i].pointerIds, id)) {
+ return interactions[i];
+ }
+ }
+
+ // at this stage, a pointerUp should not return an interaction
+ if (/up|end|out/i.test(eventType)) {
+ return null;
+ }
+
+ // get first idle interaction
+ for (i = 0; i < len; i++) {
+ interaction = interactions[i];
+
+ if ((!interaction.prepared.name || (interaction.target.options.gesture.enabled))
+ && !interaction.interacting()
+ && !(!mouseEvent && interaction.mouse)) {
+
+ return interaction;
+ }
+ }
+
+ return new Interaction();
+ }
+
+ function doOnInteractions (method) {
+ return (function (event) {
+ var interaction,
+ eventTarget = getActualElement(event.path
+ ? event.path[0]
+ : event.target),
+ curEventTarget = getActualElement(event.currentTarget),
+ i;
+
+ if (supportsTouch && /touch/.test(event.type)) {
+ prevTouchTime = new Date().getTime();
+
+ for (i = 0; i < event.changedTouches.length; i++) {
+ var pointer = event.changedTouches[i];
+
+ interaction = getInteractionFromPointer(pointer, event.type, eventTarget);
+
+ if (!interaction) { continue; }
+
+ interaction._updateEventTargets(eventTarget, curEventTarget);
+
+ interaction[method](pointer, event, eventTarget, curEventTarget);
+ }
+ }
+ else {
+ if (!supportsPointerEvent && /mouse/.test(event.type)) {
+ // ignore mouse events while touch interactions are active
+ for (i = 0; i < interactions.length; i++) {
+ if (!interactions[i].mouse && interactions[i].pointerIsDown) {
+ return;
+ }
+ }
+
+ // try to ignore mouse events that are simulated by the browser
+ // after a touch event
+ if (new Date().getTime() - prevTouchTime < 500) {
+ return;
+ }
+ }
+
+ interaction = getInteractionFromPointer(event, event.type, eventTarget);
+
+ if (!interaction) { return; }
+
+ interaction._updateEventTargets(eventTarget, curEventTarget);
+
+ interaction[method](event, event, eventTarget, curEventTarget);
+ }
+ });
+ }
+
+ function InteractEvent (interaction, event, action, phase, element, related) {
+ var client,
+ page,
+ target = interaction.target,
+ snapStatus = interaction.snapStatus,
+ restrictStatus = interaction.restrictStatus,
+ pointers = interaction.pointers,
+ deltaSource = (target && target.options || defaultOptions).deltaSource,
+ sourceX = deltaSource + 'X',
+ sourceY = deltaSource + 'Y',
+ options = target? target.options: defaultOptions,
+ origin = getOriginXY(target, element),
+ starting = phase === 'start',
+ ending = phase === 'end',
+ coords = starting? interaction.startCoords : interaction.curCoords;
+
+ element = element || interaction.element;
+
+ page = extend({}, coords.page);
+ client = extend({}, coords.client);
+
+ page.x -= origin.x;
+ page.y -= origin.y;
+
+ client.x -= origin.x;
+ client.y -= origin.y;
+
+ var relativePoints = options[action].snap && options[action].snap.relativePoints ;
+
+ if (checkSnap(target, action) && !(starting && relativePoints && relativePoints.length)) {
+ this.snap = {
+ range : snapStatus.range,
+ locked : snapStatus.locked,
+ x : snapStatus.snappedX,
+ y : snapStatus.snappedY,
+ realX : snapStatus.realX,
+ realY : snapStatus.realY,
+ dx : snapStatus.dx,
+ dy : snapStatus.dy
+ };
+
+ if (snapStatus.locked) {
+ page.x += snapStatus.dx;
+ page.y += snapStatus.dy;
+ client.x += snapStatus.dx;
+ client.y += snapStatus.dy;
+ }
+ }
+
+ if (checkRestrict(target, action) && !(starting && options[action].restrict.elementRect) && restrictStatus.restricted) {
+ page.x += restrictStatus.dx;
+ page.y += restrictStatus.dy;
+ client.x += restrictStatus.dx;
+ client.y += restrictStatus.dy;
+
+ this.restrict = {
+ dx: restrictStatus.dx,
+ dy: restrictStatus.dy
+ };
+ }
+
+ this.pageX = page.x;
+ this.pageY = page.y;
+ this.clientX = client.x;
+ this.clientY = client.y;
+
+ this.x0 = interaction.startCoords.page.x - origin.x;
+ this.y0 = interaction.startCoords.page.y - origin.y;
+ this.clientX0 = interaction.startCoords.client.x - origin.x;
+ this.clientY0 = interaction.startCoords.client.y - origin.y;
+ this.ctrlKey = event.ctrlKey;
+ this.altKey = event.altKey;
+ this.shiftKey = event.shiftKey;
+ this.metaKey = event.metaKey;
+ this.button = event.button;
+ this.buttons = event.buttons;
+ this.target = element;
+ this.t0 = interaction.downTimes[0];
+ this.type = action + (phase || '');
+
+ this.interaction = interaction;
+ this.interactable = target;
+
+ var inertiaStatus = interaction.inertiaStatus;
+
+ if (inertiaStatus.active) {
+ this.detail = 'inertia';
+ }
+
+ if (related) {
+ this.relatedTarget = related;
+ }
+
+ // end event dx, dy is difference between start and end points
+ if (ending) {
+ if (deltaSource === 'client') {
+ this.dx = client.x - interaction.startCoords.client.x;
+ this.dy = client.y - interaction.startCoords.client.y;
+ }
+ else {
+ this.dx = page.x - interaction.startCoords.page.x;
+ this.dy = page.y - interaction.startCoords.page.y;
+ }
+ }
+ else if (starting) {
+ this.dx = 0;
+ this.dy = 0;
+ }
+ // copy properties from previousmove if starting inertia
+ else if (phase === 'inertiastart') {
+ this.dx = interaction.prevEvent.dx;
+ this.dy = interaction.prevEvent.dy;
+ }
+ else {
+ if (deltaSource === 'client') {
+ this.dx = client.x - interaction.prevEvent.clientX;
+ this.dy = client.y - interaction.prevEvent.clientY;
+ }
+ else {
+ this.dx = page.x - interaction.prevEvent.pageX;
+ this.dy = page.y - interaction.prevEvent.pageY;
+ }
+ }
+ if (interaction.prevEvent && interaction.prevEvent.detail === 'inertia'
+ && !inertiaStatus.active
+ && options[action].inertia && options[action].inertia.zeroResumeDelta) {
+
+ inertiaStatus.resumeDx += this.dx;
+ inertiaStatus.resumeDy += this.dy;
+
+ this.dx = this.dy = 0;
+ }
+
+ if (action === 'resize' && interaction.resizeAxes) {
+ if (options.resize.square) {
+ if (interaction.resizeAxes === 'y') {
+ this.dx = this.dy;
+ }
+ else {
+ this.dy = this.dx;
+ }
+ this.axes = 'xy';
+ }
+ else {
+ this.axes = interaction.resizeAxes;
+
+ if (interaction.resizeAxes === 'x') {
+ this.dy = 0;
+ }
+ else if (interaction.resizeAxes === 'y') {
+ this.dx = 0;
+ }
+ }
+ }
+ else if (action === 'gesture') {
+ this.touches = [pointers[0], pointers[1]];
+
+ if (starting) {
+ this.distance = touchDistance(pointers, deltaSource);
+ this.box = touchBBox(pointers);
+ this.scale = 1;
+ this.ds = 0;
+ this.angle = touchAngle(pointers, undefined, deltaSource);
+ this.da = 0;
+ }
+ else if (ending || event instanceof InteractEvent) {
+ this.distance = interaction.prevEvent.distance;
+ this.box = interaction.prevEvent.box;
+ this.scale = interaction.prevEvent.scale;
+ this.ds = this.scale - 1;
+ this.angle = interaction.prevEvent.angle;
+ this.da = this.angle - interaction.gesture.startAngle;
+ }
+ else {
+ this.distance = touchDistance(pointers, deltaSource);
+ this.box = touchBBox(pointers);
+ this.scale = this.distance / interaction.gesture.startDistance;
+ this.angle = touchAngle(pointers, interaction.gesture.prevAngle, deltaSource);
+
+ this.ds = this.scale - interaction.gesture.prevScale;
+ this.da = this.angle - interaction.gesture.prevAngle;
+ }
+ }
+
+ if (starting) {
+ this.timeStamp = interaction.downTimes[0];
+ this.dt = 0;
+ this.duration = 0;
+ this.speed = 0;
+ this.velocityX = 0;
+ this.velocityY = 0;
+ }
+ else if (phase === 'inertiastart') {
+ this.timeStamp = interaction.prevEvent.timeStamp;
+ this.dt = interaction.prevEvent.dt;
+ this.duration = interaction.prevEvent.duration;
+ this.speed = interaction.prevEvent.speed;
+ this.velocityX = interaction.prevEvent.velocityX;
+ this.velocityY = interaction.prevEvent.velocityY;
+ }
+ else {
+ this.timeStamp = new Date().getTime();
+ this.dt = this.timeStamp - interaction.prevEvent.timeStamp;
+ this.duration = this.timeStamp - interaction.downTimes[0];
+
+ if (event instanceof InteractEvent) {
+ var dx = this[sourceX] - interaction.prevEvent[sourceX],
+ dy = this[sourceY] - interaction.prevEvent[sourceY],
+ dt = this.dt / 1000;
+
+ this.speed = hypot(dx, dy) / dt;
+ this.velocityX = dx / dt;
+ this.velocityY = dy / dt;
+ }
+ // if normal move or end event, use previous user event coords
+ else {
+ // speed and velocity in pixels per second
+ this.speed = interaction.pointerDelta[deltaSource].speed;
+ this.velocityX = interaction.pointerDelta[deltaSource].vx;
+ this.velocityY = interaction.pointerDelta[deltaSource].vy;
+ }
+ }
+
+ if ((ending || phase === 'inertiastart')
+ && interaction.prevEvent.speed > 600 && this.timeStamp - interaction.prevEvent.timeStamp < 150) {
+
+ var angle = 180 * Math.atan2(interaction.prevEvent.velocityY, interaction.prevEvent.velocityX) / Math.PI,
+ overlap = 22.5;
+
+ if (angle < 0) {
+ angle += 360;
+ }
+
+ var left = 135 - overlap <= angle && angle < 225 + overlap,
+ up = 225 - overlap <= angle && angle < 315 + overlap,
+
+ right = !left && (315 - overlap <= angle || angle < 45 + overlap),
+ down = !up && 45 - overlap <= angle && angle < 135 + overlap;
+
+ this.swipe = {
+ up : up,
+ down : down,
+ left : left,
+ right: right,
+ angle: angle,
+ speed: interaction.prevEvent.speed,
+ velocity: {
+ x: interaction.prevEvent.velocityX,
+ y: interaction.prevEvent.velocityY
+ }
+ };
+ }
+ }
+
+ InteractEvent.prototype = {
+ preventDefault: blank,
+ stopImmediatePropagation: function () {
+ this.immediatePropagationStopped = this.propagationStopped = true;
+ },
+ stopPropagation: function () {
+ this.propagationStopped = true;
+ }
+ };
+
+ function preventOriginalDefault () {
+ this.originalEvent.preventDefault();
+ }
+
+ function getActionCursor (action) {
+ var cursor = '';
+
+ if (action.name === 'drag') {
+ cursor = actionCursors.drag;
+ }
+ if (action.name === 'resize') {
+ if (action.axis) {
+ cursor = actionCursors[action.name + action.axis];
+ }
+ else if (action.edges) {
+ var cursorKey = 'resize',
+ edgeNames = ['top', 'bottom', 'left', 'right'];
+
+ for (var i = 0; i < 4; i++) {
+ if (action.edges[edgeNames[i]]) {
+ cursorKey += edgeNames[i];
+ }
+ }
+
+ cursor = actionCursors[cursorKey];
+ }
+ }
+
+ return cursor;
+ }
+
+ function checkResizeEdge (name, value, page, element, interactableElement, rect, margin) {
+ // false, '', undefined, null
+ if (!value) { return false; }
+
+ // true value, use pointer coords and element rect
+ if (value === true) {
+ // if dimensions are negative, "switch" edges
+ var width = isNumber(rect.width)? rect.width : rect.right - rect.left,
+ height = isNumber(rect.height)? rect.height : rect.bottom - rect.top;
+
+ if (width < 0) {
+ if (name === 'left' ) { name = 'right'; }
+ else if (name === 'right') { name = 'left' ; }
+ }
+ if (height < 0) {
+ if (name === 'top' ) { name = 'bottom'; }
+ else if (name === 'bottom') { name = 'top' ; }
+ }
+
+ if (name === 'left' ) { return page.x < ((width >= 0? rect.left: rect.right ) + margin); }
+ if (name === 'top' ) { return page.y < ((height >= 0? rect.top : rect.bottom) + margin); }
+
+ if (name === 'right' ) { return page.x > ((width >= 0? rect.right : rect.left) - margin); }
+ if (name === 'bottom') { return page.y > ((height >= 0? rect.bottom: rect.top ) - margin); }
+ }
+
+ // the remaining checks require an element
+ if (!isElement(element)) { return false; }
+
+ return isElement(value)
+ // the value is an element to use as a resize handle
+ ? value === element
+ // otherwise check if element matches value as selector
+ : matchesUpTo(element, value, interactableElement);
+ }
+
+ function defaultActionChecker (pointer, interaction, element) {
+ var rect = this.getRect(element),
+ shouldResize = false,
+ action = null,
+ resizeAxes = null,
+ resizeEdges,
+ page = extend({}, interaction.curCoords.page),
+ options = this.options;
+
+ if (!rect) { return null; }
+
+ if (actionIsEnabled.resize && options.resize.enabled) {
+ var resizeOptions = options.resize;
+
+ resizeEdges = {
+ left: false, right: false, top: false, bottom: false
+ };
+
+ // if using resize.edges
+ if (isObject(resizeOptions.edges)) {
+ for (var edge in resizeEdges) {
+ resizeEdges[edge] = checkResizeEdge(edge,
+ resizeOptions.edges[edge],
+ page,
+ interaction._eventTarget,
+ element,
+ rect,
+ resizeOptions.margin || margin);
+ }
+
+ resizeEdges.left = resizeEdges.left && !resizeEdges.right;
+ resizeEdges.top = resizeEdges.top && !resizeEdges.bottom;
+
+ shouldResize = resizeEdges.left || resizeEdges.right || resizeEdges.top || resizeEdges.bottom;
+ }
+ else {
+ var right = options.resize.axis !== 'y' && page.x > (rect.right - margin),
+ bottom = options.resize.axis !== 'x' && page.y > (rect.bottom - margin);
+
+ shouldResize = right || bottom;
+ resizeAxes = (right? 'x' : '') + (bottom? 'y' : '');
+ }
+ }
+
+ action = shouldResize
+ ? 'resize'
+ : actionIsEnabled.drag && options.drag.enabled
+ ? 'drag'
+ : null;
+
+ if (actionIsEnabled.gesture
+ && interaction.pointerIds.length >=2
+ && !(interaction.dragging || interaction.resizing)) {
+ action = 'gesture';
+ }
+
+ if (action) {
+ return {
+ name: action,
+ axis: resizeAxes,
+ edges: resizeEdges
+ };
+ }
+
+ return null;
+ }
+
+ // Check if action is enabled globally and the current target supports it
+ // If so, return the validated action. Otherwise, return null
+ function validateAction (action, interactable) {
+ if (!isObject(action)) { return null; }
+
+ var actionName = action.name,
+ options = interactable.options;
+
+ if (( (actionName === 'resize' && options.resize.enabled )
+ || (actionName === 'drag' && options.drag.enabled )
+ || (actionName === 'gesture' && options.gesture.enabled))
+ && actionIsEnabled[actionName]) {
+
+ if (actionName === 'resize' || actionName === 'resizeyx') {
+ actionName = 'resizexy';
+ }
+
+ return action;
+ }
+ return null;
+ }
+
+ var listeners = {},
+ interactionListeners = [
+ 'dragStart', 'dragMove', 'resizeStart', 'resizeMove', 'gestureStart', 'gestureMove',
+ 'pointerOver', 'pointerOut', 'pointerHover', 'selectorDown',
+ 'pointerDown', 'pointerMove', 'pointerUp', 'pointerCancel', 'pointerEnd',
+ 'addPointer', 'removePointer', 'recordPointer', 'autoScrollMove'
+ ];
+
+ for (var i = 0, len = interactionListeners.length; i < len; i++) {
+ var name = interactionListeners[i];
+
+ listeners[name] = doOnInteractions(name);
+ }
+
+ // bound to the interactable context when a DOM event
+ // listener is added to a selector interactable
+ function delegateListener (event, useCapture) {
+ var fakeEvent = {},
+ delegated = delegatedEvents[event.type],
+ eventTarget = getActualElement(event.path
+ ? event.path[0]
+ : event.target),
+ element = eventTarget;
+
+ useCapture = useCapture? true: false;
+
+ // duplicate the event so that currentTarget can be changed
+ for (var prop in event) {
+ fakeEvent[prop] = event[prop];
+ }
+
+ fakeEvent.originalEvent = event;
+ fakeEvent.preventDefault = preventOriginalDefault;
+
+ // climb up document tree looking for selector matches
+ while (isElement(element)) {
+ for (var i = 0; i < delegated.selectors.length; i++) {
+ var selector = delegated.selectors[i],
+ context = delegated.contexts[i];
+
+ if (matchesSelector(element, selector)
+ && nodeContains(context, eventTarget)
+ && nodeContains(context, element)) {
+
+ var listeners = delegated.listeners[i];
+
+ fakeEvent.currentTarget = element;
+
+ for (var j = 0; j < listeners.length; j++) {
+ if (listeners[j][1] === useCapture) {
+ listeners[j][0](fakeEvent);
+ }
+ }
+ }
+ }
+
+ element = parentElement(element);
+ }
+ }
+
+ function delegateUseCapture (event) {
+ return delegateListener.call(this, event, true);
+ }
+
+ interactables.indexOfElement = function indexOfElement (element, context) {
+ context = context || document;
+
+ for (var i = 0; i < this.length; i++) {
+ var interactable = this[i];
+
+ if ((interactable.selector === element
+ && (interactable._context === context))
+ || (!interactable.selector && interactable._element === element)) {
+
+ return i;
+ }
+ }
+ return -1;
+ };
+
+ interactables.get = function interactableGet (element, options) {
+ return this[this.indexOfElement(element, options && options.context)];
+ };
+
+ interactables.forEachSelector = function (callback) {
+ for (var i = 0; i < this.length; i++) {
+ var interactable = this[i];
+
+ if (!interactable.selector) {
+ continue;
+ }
+
+ var ret = callback(interactable, interactable.selector, interactable._context, i, this);
+
+ if (ret !== undefined) {
+ return ret;
+ }
+ }
+ };
+
+ /*\
+ * interact
+ [ method ]
+ *
+ * The methods of this variable can be used to set elements as
+ * interactables and also to change various default settings.
+ *
+ * Calling it as a function and passing an element or a valid CSS selector
+ * string returns an Interactable object which has various methods to
+ * configure it.
+ *
+ - element (Element | string) The HTML or SVG Element to interact with or CSS selector
+ = (object) An @Interactable
+ *
+ > Usage
+ | interact(document.getElementById('draggable')).draggable(true);
+ |
+ | var rectables = interact('rect');
+ | rectables
+ | .gesturable(true)
+ | .on('gesturemove', function (event) {
+ | // something cool...
+ | })
+ | .autoScroll(true);
+ \*/
+ function interact (element, options) {
+ return interactables.get(element, options) || new Interactable(element, options);
+ }
+
+ /*\
+ * Interactable
+ [ property ]
+ **
+ * Object type returned by @interact
+ \*/
+ function Interactable (element, options) {
+ this._element = element;
+ this._iEvents = this._iEvents || {};
+
+ var _window;
+
+ if (trySelector(element)) {
+ this.selector = element;
+
+ var context = options && options.context;
+
+ _window = context? getWindow(context) : window;
+
+ if (context && (_window.Node
+ ? context instanceof _window.Node
+ : (isElement(context) || context === _window.document))) {
+
+ this._context = context;
+ }
+ }
+ else {
+ _window = getWindow(element);
+
+ if (isElement(element, _window)) {
+
+ if (PointerEvent) {
+ events.add(this._element, pEventTypes.down, listeners.pointerDown );
+ events.add(this._element, pEventTypes.move, listeners.pointerHover);
+ }
+ else {
+ events.add(this._element, 'mousedown' , listeners.pointerDown );
+ events.add(this._element, 'mousemove' , listeners.pointerHover);
+ events.add(this._element, 'touchstart', listeners.pointerDown );
+ events.add(this._element, 'touchmove' , listeners.pointerHover);
+ }
+ }
+ }
+
+ this._doc = _window.document;
+
+ if (!contains(documents, this._doc)) {
+ listenToDocument(this._doc);
+ }
+
+ interactables.push(this);
+
+ this.set(options);
+ }
+
+ Interactable.prototype = {
+ setOnEvents: function (action, phases) {
+ if (action === 'drop') {
+ if (isFunction(phases.ondrop) ) { this.ondrop = phases.ondrop ; }
+ if (isFunction(phases.ondropactivate) ) { this.ondropactivate = phases.ondropactivate ; }
+ if (isFunction(phases.ondropdeactivate)) { this.ondropdeactivate = phases.ondropdeactivate; }
+ if (isFunction(phases.ondragenter) ) { this.ondragenter = phases.ondragenter ; }
+ if (isFunction(phases.ondragleave) ) { this.ondragleave = phases.ondragleave ; }
+ if (isFunction(phases.ondropmove) ) { this.ondropmove = phases.ondropmove ; }
+ }
+ else {
+ action = 'on' + action;
+
+ if (isFunction(phases.onstart) ) { this[action + 'start' ] = phases.onstart ; }
+ if (isFunction(phases.onmove) ) { this[action + 'move' ] = phases.onmove ; }
+ if (isFunction(phases.onend) ) { this[action + 'end' ] = phases.onend ; }
+ if (isFunction(phases.oninertiastart)) { this[action + 'inertiastart' ] = phases.oninertiastart ; }
+ }
+
+ return this;
+ },
+
+ /*\
+ * Interactable.draggable
+ [ method ]
+ *
+ * Gets or sets whether drag actions can be performed on the
+ * Interactable
+ *
+ = (boolean) Indicates if this can be the target of drag events
+ | var isDraggable = interact('ul li').draggable();
+ * or
+ - options (boolean | object) #optional true/false or An object with event listeners to be fired on drag events (object makes the Interactable draggable)
+ = (object) This Interactable
+ | interact(element).draggable({
+ | onstart: function (event) {},
+ | onmove : function (event) {},
+ | onend : function (event) {},
+ |
+ | // the axis in which the first movement must be
+ | // for the drag sequence to start
+ | // 'xy' by default - any direction
+ | axis: 'x' || 'y' || 'xy',
+ |
+ | // max number of drags that can happen concurrently
+ | // with elements of this Interactable. Infinity by default
+ | max: Infinity,
+ |
+ | // max number of drags that can target the same element+Interactable
+ | // 1 by default
+ | maxPerElement: 2
+ | });
+ \*/
+ draggable: function (options) {
+ if (isObject(options)) {
+ this.options.drag.enabled = options.enabled === false? false: true;
+ this.setPerAction('drag', options);
+ this.setOnEvents('drag', options);
+
+ if (/^x$|^y$|^xy$/.test(options.axis)) {
+ this.options.drag.axis = options.axis;
+ }
+ else if (options.axis === null) {
+ delete this.options.drag.axis;
+ }
+
+ return this;
+ }
+
+ if (isBool(options)) {
+ this.options.drag.enabled = options;
+
+ return this;
+ }
+
+ return this.options.drag;
+ },
+
+ setPerAction: function (action, options) {
+ // for all the default per-action options
+ for (var option in options) {
+ // if this option exists for this action
+ if (option in defaultOptions[action]) {
+ // if the option in the options arg is an object value
+ if (isObject(options[option])) {
+ // duplicate the object
+ this.options[action][option] = extend(this.options[action][option] || {}, options[option]);
+
+ if (isObject(defaultOptions.perAction[option]) && 'enabled' in defaultOptions.perAction[option]) {
+ this.options[action][option].enabled = options[option].enabled === false? false : true;
+ }
+ }
+ else if (isBool(options[option]) && isObject(defaultOptions.perAction[option])) {
+ this.options[action][option].enabled = options[option];
+ }
+ else if (options[option] !== undefined) {
+ // or if it's not undefined, do a plain assignment
+ this.options[action][option] = options[option];
+ }
+ }
+ }
+ },
+
+ /*\
+ * Interactable.dropzone
+ [ method ]
+ *
+ * Returns or sets whether elements can be dropped onto this
+ * Interactable to trigger drop events
+ *
+ * Dropzones can receive the following events:
+ * - `dropactivate` and `dropdeactivate` when an acceptable drag starts and ends
+ * - `dragenter` and `dragleave` when a draggable enters and leaves the dropzone
+ * - `dragmove` when a draggable that has entered the dropzone is moved
+ * - `drop` when a draggable is dropped into this dropzone
+ *
+ * Use the `accept` option to allow only elements that match the given CSS selector or element.
+ *
+ * Use the `overlap` option to set how drops are checked for. The allowed values are:
+ * - `'pointer'`, the pointer must be over the dropzone (default)
+ * - `'center'`, the draggable element's center must be over the dropzone
+ * - a number from 0-1 which is the `(intersection area) / (draggable area)`.
+ * e.g. `0.5` for drop to happen when half of the area of the
+ * draggable is over the dropzone
+ *
+ - options (boolean | object | null) #optional The new value to be set.
+ | interact('.drop').dropzone({
+ | accept: '.can-drop' || document.getElementById('single-drop'),
+ | overlap: 'pointer' || 'center' || zeroToOne
+ | }
+ = (boolean | object) The current setting or this Interactable
+ \*/
+ dropzone: function (options) {
+ if (isObject(options)) {
+ this.options.drop.enabled = options.enabled === false? false: true;
+ this.setOnEvents('drop', options);
+
+ 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 (PointerEvent) {
+ if (PointerEvent === win.MSPointerEvent) {
+ pEventTypes = {
+ up: 'MSPointerUp', down: 'MSPointerDown', over: 'mouseover',
+ out: 'mouseout', move: 'MSPointerMove', cancel: 'MSPointerCancel' };
+ }
+ else {
+ pEventTypes = {
+ up: 'pointerup', down: 'pointerdown', over: 'pointerover',
+ out: 'pointerout', move: 'pointermove', cancel: 'pointercancel' };
+ }
+
+ events.add(doc, pEventTypes.down , listeners.selectorDown );
+ events.add(doc, pEventTypes.move , listeners.pointerMove );
+ events.add(doc, pEventTypes.over , listeners.pointerOver );
+ events.add(doc, pEventTypes.out , listeners.pointerOut );
+ events.add(doc, pEventTypes.up , listeners.pointerUp );
+ events.add(doc, pEventTypes.cancel, listeners.pointerCancel);
+
+ // autoscroll
+ events.add(doc, pEventTypes.move, listeners.autoScrollMove);
+ }
+ else {
+ events.add(doc, 'mousedown', listeners.selectorDown);
+ events.add(doc, 'mousemove', listeners.pointerMove );
+ events.add(doc, 'mouseup' , listeners.pointerUp );
+ events.add(doc, 'mouseover', listeners.pointerOver );
+ events.add(doc, 'mouseout' , listeners.pointerOut );
+
+ events.add(doc, 'touchstart' , listeners.selectorDown );
+ events.add(doc, 'touchmove' , listeners.pointerMove );
+ events.add(doc, 'touchend' , listeners.pointerUp );
+ events.add(doc, 'touchcancel', listeners.pointerCancel);
+
+ // autoscroll
+ events.add(doc, 'mousemove', listeners.autoScrollMove);
+ events.add(doc, 'touchmove', listeners.autoScrollMove);
+ }
+
+ events.add(win, 'blur', endAllInteractions);
+
+ try {
+ if (win.frameElement) {
+ var parentDoc = win.frameElement.ownerDocument,
+ parentWindow = parentDoc.defaultView;
+
+ events.add(parentDoc , 'mouseup' , listeners.pointerEnd);
+ events.add(parentDoc , 'touchend' , listeners.pointerEnd);
+ events.add(parentDoc , 'touchcancel' , listeners.pointerEnd);
+ events.add(parentDoc , 'pointerup' , listeners.pointerEnd);
+ events.add(parentDoc , 'MSPointerUp' , listeners.pointerEnd);
+ events.add(parentWindow, 'blur' , endAllInteractions );
+ }
+ }
+ catch (error) {
+ interact.windowParentError = error;
+ }
+
+ // prevent native HTML5 drag on interact.js target elements
+ events.add(doc, 'dragstart', function (event) {
+ for (var i = 0; i < interactions.length; i++) {
+ var interaction = interactions[i];
+
+ if (interaction.element
+ && (interaction.element === event.target
+ || nodeContains(interaction.element, event.target))) {
+
+ interaction.checkAndPreventDefault(event, interaction.target, interaction.element);
+ return;
+ }
+ }
+ });
+
+ if (events.useAttachEvent) {
+ // For IE's lack of Event#preventDefault
+ events.add(doc, 'selectstart', function (event) {
+ var interaction = interactions[0];
+
+ if (interaction.currentAction()) {
+ interaction.checkAndPreventDefault(event);
+ }
+ });
+
+ // For IE's bad dblclick event sequence
+ events.add(doc, 'dblclick', doOnInteractions('ie8Dblclick'));
+ }
+
+ documents.push(doc);
+ }
+
+ listenToDocument(document);
+
+ function indexOf (array, target) {
+ for (var i = 0, len = array.length; i < len; i++) {
+ if (array[i] === target) {
+ return i;
+ }
+ }
+
+ return -1;
+ }
+
+ function contains (array, target) {
+ return indexOf(array, target) !== -1;
+ }
+
+ function matchesSelector (element, selector, nodeList) {
+ if (ie8MatchesSelector) {
+ return ie8MatchesSelector(element, selector, nodeList);
+ }
+
+ // remove /deep/ from selectors if shadowDOM polyfill is used
+ if (window !== realWindow) {
+ selector = selector.replace(/\/deep\//g, ' ');
+ }
+
+ return element[prefixedMatchesSelector](selector);
+ }
+
+ function matchesUpTo (element, selector, limit) {
+ while (isElement(element)) {
+ if (matchesSelector(element, selector)) {
+ return true;
+ }
+
+ element = parentElement(element);
+
+ if (element === limit) {
+ return matchesSelector(element, selector);
+ }
+ }
+
+ return false;
+ }
+
+ // For IE8's lack of an Element#matchesSelector
+ // taken from http://tanalin.com/en/blog/2012/12/matches-selector-ie8/ and modified
+ if (!(prefixedMatchesSelector in Element.prototype) || !isFunction(Element.prototype[prefixedMatchesSelector])) {
+ ie8MatchesSelector = function (element, selector, elems) {
+ elems = elems || element.parentNode.querySelectorAll(selector);
+
+ for (var i = 0, len = elems.length; i < len; i++) {
+ if (elems[i] === element) {
+ return true;
+ }
+ }
+
+ return false;
+ };
+ }
+
+ // requestAnimationFrame polyfill
+ (function() {
+ var lastTime = 0,
+ vendors = ['ms', 'moz', 'webkit', 'o'];
+
+ for(var x = 0; x < vendors.length && !realWindow.requestAnimationFrame; ++x) {
+ reqFrame = realWindow[vendors[x]+'RequestAnimationFrame'];
+ cancelFrame = realWindow[vendors[x]+'CancelAnimationFrame'] || realWindow[vendors[x]+'CancelRequestAnimationFrame'];
+ }
+
+ if (!reqFrame) {
+ reqFrame = function(callback) {
+ var currTime = new Date().getTime(),
+ timeToCall = Math.max(0, 16 - (currTime - lastTime)),
+ id = setTimeout(function() { callback(currTime + timeToCall); },
+ timeToCall);
+ lastTime = currTime + timeToCall;
+ return id;
+ };
+ }
+
+ if (!cancelFrame) {
+ cancelFrame = function(id) {
+ clearTimeout(id);
+ };
+ }
+ }());
+
+ /* global exports: true, module, define */
+
+ // http://documentcloud.github.io/underscore/docs/underscore.html#section-11
+ if (typeof exports !== 'undefined') {
+ if (typeof module !== 'undefined' && module.exports) {
+ exports = module.exports = interact;
+ }
+ exports.interact = interact;
+ }
+ // AMD
+ else if (typeof define === 'function' && define.amd) {
+ define('interact', function() {
+ return interact;
+ });
+ }
+ else {
+ realWindow.interact = interact;
+ }
+
+} (typeof window === 'undefined'? undefined : window));
diff --git a/sourcing/static/js/viewer.js b/sourcing/static/js/viewer.js
new file mode 100644
index 0000000..5414075
--- /dev/null
+++ b/sourcing/static/js/viewer.js
@@ -0,0 +1,397 @@
+'use strict';
+
+var doc1 = document.getElementById('doc1');
+var edlform = document.getElementById('edlform');
+var max_zindex = 0;
+var bridge_count = 0;
+var link_bridge_count = 0;
+var payment_params = {};
+var payment_content;
+var xnb_per_char = 150000;
+
+function listener (event) {
+ console.log(event.type, event.pageX, event.pageY);
+}
+
+function hl_location(hl) {
+ var rects = hl.getClientRects();
+ var top = rects[0].top;
+ var right = rects[0].right;
+ var bottom = rects[rects.length-1].bottom
+ var left = rects[rects.length-1].left;
+ console.log(top, right, bottom, left);
+}
+
+function dragMoveListener (event) {
+ var target = event.target,
+ // keep the dragged position in the data-x/data-y attributes
+ x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
+ y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
+
+ update_location(target, x, y);
+
+ update();
+}
+
+function update() {
+ for(var i = 0; i < bridge_count; i++) {
+ update_bridge('bridge' + i, 'span' + i, 'transclusion' + i);
+ }
+
+ for(var i = 0; i < link_bridge_count; i++) {
+ update_bridge('linkbridge' + i, 'xanalink' + i, 'link' + i);
+ }
+}
+
+function update_bridge(bridge, name_h1, name_h2) {
+ var points = []
+
+ var h1 = document.getElementById(name_h1);
+ var h2 = document.getElementById(name_h2);
+
+ if (!h1) {
+ return;
+ }
+ if (!h2) {
+ return; // because we skipped the large document
+ }
+
+
+ var rect1 = h1.getBoundingClientRect();
+ var rect2 = h2.getBoundingClientRect();
+
+ var h1_x_center = rect1.right - rect1.width / 2;
+ var h2_x_center = rect2.right - rect2.width / 2;
+
+ var bridge_element = document.getElementById(bridge);
+
+ var h_l, h_r, rect_l, rect_r;
+ if (h1_x_center < h2_x_center) {
+ h_l = h1;
+ h_r = h2;
+ rect_l = rect1;
+ rect_r = rect2;
+ } else {
+ h_l = h2;
+ h_r = h1;
+ rect_l = rect2;
+ rect_r = rect1;
+ }
+
+ var body_l = $(h_l).closest(".body").get(0).getBoundingClientRect();
+ var body_r = $(h_r).closest(".body").get(0).getBoundingClientRect();
+
+ var left_bottom = rect_l.bottom;
+ if(left_bottom < body_l.top) {
+ left_bottom = body_l.top;
+ } else if (left_bottom > body_l.bottom) {
+ left_bottom = body_l.bottom;
+ }
+
+ var left_top = rect_l.top;
+ if(left_top < body_l.top) {
+ left_top = body_l.top;
+ } else if (left_top > body_l.bottom) {
+ left_top = body_l.bottom;
+ }
+
+ var right_bottom = rect_r.bottom;
+ if(right_bottom < body_r.top) {
+ right_bottom = body_r.top;
+ } else if (right_bottom > body_r.bottom) {
+ right_bottom = body_r.bottom;
+ }
+
+ var right_top = rect_r.top;
+ if(right_top < body_r.top) {
+ right_top = body_r.top;
+ } else if (right_top > body_r.bottom) {
+ right_top = body_r.bottom;
+ }
+
+ points.push(rect_l.right + ',' + left_top);
+ points.push(rect_l.right + ',' + left_bottom);
+
+ points.push(rect_r.left + ',' + right_bottom);
+ points.push(rect_r.left + ',' + right_top);
+
+ var poly = document.getElementById(bridge);
+ poly.setAttribute('points', points.join(' '));
+}
+
+function update_location(target, x, y) {
+ // target.style.transform = 'scale(0.75) translate(' + x + 'px, ' + y + 'px)';
+ target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
+
+ target.setAttribute('data-x', x);
+ target.setAttribute('data-y', y);
+
+ max_zindex += 1;
+ target.style.zIndex = max_zindex;
+}
+
+function resizemove(event) {
+ var target = event.target,
+ x = (parseFloat(target.getAttribute('data-x')) || 0),
+ y = (parseFloat(target.getAttribute('data-y')) || 0);
+
+ // update the element's style
+ target.style.width = event.rect.width + 'px';
+ target.style.height = event.rect.height + 'px';
+
+ // translate when resizing from top or left edges
+ x += event.deltaRect.left;
+ y += event.deltaRect.top;
+
+ update_location(target, x, y);
+
+ update();
+}
+
+interact('.document')
+ .draggable({
+ onmove: dragMoveListener,
+ })
+ .resizable({
+ // preserveAspectRatio: false,
+ edges: { left: true, right: true, bottom: true, top: true },
+ })
+ .on('resizemove', resizemove)
+ .actionChecker(function (pointer, event, action, interactable, element, interaction) {
+ if (!interact.matchesSelector(event.target, '.heading') && action.name == 'drag') {
+ return;
+ }
+ return action;
+ });
+
+interact('#edlform')
+ .draggable({
+ onmove: dragMoveListener,
+ })
+ .on('resizemove', resizemove)
+ .actionChecker(function (pointer, event, action, interactable, element, interaction) {
+ if (!interact.matchesSelector(event.target, '.heading') && action.name == 'drag') {
+ return;
+ }
+ return action;
+ });
+
+// doc1.style.height = '400px';
+// update_location(doc1, 200, 50);
+
+var docid = 0;
+
+function new_document(doc) {
+ var source = $("#document-template").html();
+ var template = Handlebars.compile(source);
+ docid++;
+ var context = {
+ docid: docid,
+ heading: doc.heading,
+ doctype: doc.doctype,
+ text: doc.text
+ };
+ var element = $(template(context));
+ var w = document.documentElement.clientWidth;
+ var h = document.documentElement.clientHeight;
+
+ if (doc.doctype == 'xanadoc') {
+ var x = (w / 2) - 400;
+ var y = (h / 2) - 400;
+ } else {
+ var x = Math.random() * (w - 400);
+ var y = Math.random() * (h - 400);
+ }
+ update_location(element.get(0), x, y);
+
+ $("#top").append(element);
+}
+
+function reset() {
+ $(".document").remove();
+
+ var svg = document.getElementById('svg');
+ while (svg.firstChild) {
+ svg.removeChild(svg.firstChild);
+ }
+
+ bridge_count = 0;
+ link_bridge_count = 0;
+}
+
+$("button#clear").click(function(event) {
+ $("#edl").val("");
+ reset();
+});
+
+function get_end_number(str) {
+ var len = str.length;
+ var num;
+ for(var i = 0; i < len; i++) {
+ if(!isNaN(num = parseInt(str.substr(i))))
+ return num;
+ }
+ throw "no number found";
+}
+
+function hover_bridge(element, hover) {
+ var num = get_end_number(element.id);
+ var bridge = document.getElementById('bridge' + num);
+
+ bridge.setAttribute("class", hover ? 'hoverbridge' : 'bridge');
+
+ var cls = 'hovertransclusion';
+
+ if (hover) {
+ $('#transclusion' + num).addClass(cls);
+ $('#span' + num).addClass(cls);
+ } else {
+ $('#transclusion' + num).removeClass(cls);
+ $('#span' + num).removeClass(cls);
+ }
+}
+
+function hover_link_bridge(element, hover) {
+ var num = get_end_number(element.id);
+ var bridge = document.getElementById('linkbridge' + num);
+
+ bridge.setAttribute("class", hover ? 'hoverlinkbridge' : 'linkbridge');
+
+ var cls = 'hoverlink';
+
+ if (hover) {
+ $('#xanalink' + num).addClass(cls);
+ $('#link' + num).addClass(cls);
+ } else {
+ $('#xanalink' + num).removeClass(cls);
+ $('#link' + num).removeClass(cls);
+ }
+}
+
+function fulfil() {
+ reset(); // clear all documents and bridges
+
+ bridge_count = doc.span_count;
+ link_bridge_count = doc.link_count;
+ var svg_element = document.getElementById('svg');
+
+ for(var i = 0; i < doc.span_count; i++) {
+ var p = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+ p.setAttribute('id', 'bridge' + i);
+ p.setAttribute('class', 'bridge');
+ p.setAttribute('visibility', 'hidden');
+
+ p.addEventListener('mouseover', function(e) {
+ hover_bridge(this, true);
+ });
+
+ p.addEventListener('mouseout', function(e) {
+ hover_bridge(this, false);
+ });
+
+ svg_element.appendChild(p);
+ }
+
+ for(var i = 0; i < doc.link_count; i++) {
+ var p = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+ p.setAttribute('id', 'linkbridge' + i);
+ p.setAttribute('class', 'linkbridge');
+ p.setAttribute('visibility', 'hidden');
+
+ p.addEventListener('mouseover', function(e) {
+ hover_link_bridge(this, true);
+ });
+
+ p.addEventListener('mouseout', function(e) {
+ hover_link_bridge(this, false);
+ });
+
+ svg_element.appendChild(p);
+ }
+
+ $.each(doc.source, function(key, doc) {
+ if (doc.text) {
+ doc.heading += " (source document)";
+ doc.doctype = 'sourcedoc';
+ new_document(doc);
+ }
+ });
+ new_document({'heading': 'xanadoc',
+ 'text': doc.doc,
+ 'doctype': 'xanadoc'});
+
+ update();
+
+ $('.transclusion').bind('mouseover', function(e) {
+ hover_bridge(this, true);
+ });
+
+ $('.transclusion').bind('mouseout', function(e) {
+ hover_bridge(this, false);
+ });
+
+ $('.link').bind('mouseover', function(e) {
+ hover_link_bridge(this, true);
+ });
+
+ $('.link').bind('mouseout', function(e) {
+ hover_link_bridge(this, false);
+ });
+
+ $('.xanadoclink').click(function(e) {
+ var num = get_end_number(this.id);
+ var source = $('#link' + num).closest( ".sourcedoc" );
+
+ var bridge1 = document.getElementById('linkbridge' + num);
+ var cur_state = bridge1.getAttribute('visibility');
+ var new_state = cur_state == 'hidden' ? 'visible' : 'hidden';
+
+ source.find('.sourcedoclink').each(function(index, value) {
+ var bridge_num = get_end_number(value.id);
+ var bridge = document.getElementById('linkbridge' + bridge_num);
+ bridge.setAttribute('visibility', new_state);
+ });
+
+ source.toggle();
+
+ update();
+ });
+
+ $('.xanadoctransclusion').click(function(e) {
+ var num = get_end_number(this.id);
+ var source = $('#transclusion' + num).closest( ".sourcedoc" );
+
+ var bridge1 = document.getElementById('bridge' + num);
+ var cur_state = bridge1.getAttribute('visibility');
+ var new_state = cur_state == 'hidden' ? 'visible' : 'hidden';
+
+ source.find('.sourcedoctransclusion').each(function(index, value) {
+ var bridge_num = get_end_number(value.id);
+ var bridge = document.getElementById('bridge' + bridge_num);
+ bridge.setAttribute('visibility', new_state);
+ });
+
+ source.toggle();
+
+ update();
+ });
+
+ $('.body').bind('scroll', function(event) {
+ update();
+ });
+
+ $('.sourcedoc').hide();
+}
+
+function size_svg() {
+ var w = document.documentElement.clientWidth - 10;
+ var h = document.documentElement.clientHeight - 10;
+ $('svg').width(w);
+ $('svg').height(h);
+}
+
+$(function() {
+ size_svg();
+ $(window).resize(size_svg);
+ fulfil();
+});
diff --git a/sourcing/templates/head.html b/sourcing/templates/head.html
index 3ff6f28..1024ef2 100644
--- a/sourcing/templates/head.html
+++ b/sourcing/templates/head.html
@@ -7,6 +7,7 @@
<title>{{ title | default("Xanadu") }}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.css') }}">
+{{ style | safe }}
</head>
<body>
diff --git a/sourcing/templates/view.html b/sourcing/templates/view.html
index 628bc2d..5f38166 100644
--- a/sourcing/templates/view.html
+++ b/sourcing/templates/view.html
@@ -11,6 +11,9 @@ div#text { font-family: Courier; }
{% if doc.user == current_user %}
<a href="{{ doc.edit_url }}" class="btn btn-default">edit</a>
{% endif %}
+ {% if doc.type == 'xanadoc' %}
+ <a href="{{ doc.url }}" class="btn btn-default">fulfil</a>
+ {% endif %}
</h1>
<p><a href="{{ url_for('.home') }}">back to index</a></p>
<div class="well" id="text">
diff --git a/sourcing/templates/view/xanadoc.html b/sourcing/templates/view/xanadoc.html
new file mode 100644
index 0000000..3ff47fa
--- /dev/null
+++ b/sourcing/templates/view/xanadoc.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{ title | default("Xanadu") }}</title>
+
+<link rel="stylesheet" href="{{ url_for('static', filename='bootstrap/css/bootstrap.css') }}">
+<link rel="stylesheet" href="{{ url_for('static', filename='css/xanadoc.css') }}">
+</head>
+
+<body>
+{% include "navbar.html" %}
+<div class="container-fluid">
+{% include "flash_msg.html" %}
+
+{% raw %}
+<script id="document-template" type="text/x-handlebars-template">
+ <div class="document {{ doctype }}" id="doc{{ docid }}">
+ <div class="heading" id="head{{ docid }}">{{ heading }}</div>
+ <div class="wrapper">
+ <div class="body" id="body{{ docid }}">
+ {{{ text }}}
+ </div>
+ </div>
+ </div>
+</script>
+{% endraw %}
+
+<svg id="svg" version="1.2" xmlns="http://www.w3.org/2000/svg">
+</svg>
+
+<div id="top">
+
+<a href="{{ item.url + '/edl' }}" class="btn btn-default">view EDL</a>
+
+</div>
+
+<script src="{{ url_for('static', filename='jquery/jquery.js') }}"></script>
+<script src="{{ url_for('static', filename='bootstrap/js/bootstrap.js') }}"></script>
+
+<script>
+var get_span_path = "{{ url_for('.get_span') }}";
+var doc = {{ doc | tojson }};
+</script>
+
+<script src="{{ url_for('static', filename='js/interact.js') }}"></script>
+<script src="{{ url_for('static', filename='js/viewer.js') }}"></script>
+<script src="{{ url_for('static', filename='handlebars/handlebars.js') }}"></script>
+
+</body>
+</html>
diff --git a/sourcing/url.py b/sourcing/url.py
new file mode 100644
index 0000000..a8d7dc9
--- /dev/null
+++ b/sourcing/url.py
@@ -0,0 +1,45 @@
+import requests
+from .model import Item
+import os.path
+import re
+
+project_dir = os.path.dirname(os.path.dirname(__file__))
+cache_location = os.path.join(project_dir, 'cache')
+
+re_colon_slash = re.compile('[/:]+')
+
+def url_filename(url):
+ return re_colon_slash.sub('_', url)
+
+def get_text(url):
+ # assume UTF-8
+
+ text = get_url(url)
+
+ heading = url.rsplit('/', 1)[-1]
+ return {
+ 'url': url,
+ 'text': text,
+ 'heading': heading,
+ 'length': len(text),
+ }
+
+def get_url(url):
+ print('get_url:', url)
+ item = Item.from_external(url)
+ if item:
+ return item.text
+ content = requests.get(url).content
+ return content.decode(errors='replace')
+
+ filename = os.path.join(cache_location, url_filename(url))
+
+ if os.path.exists(filename):
+ content = open(filename, 'rb').read()
+ else:
+ content = requests.get(url).content
+ open(filename, 'wb').write(content)
+
+ return content.decode(errors='replace')
+
+
diff --git a/sourcing/view.py b/sourcing/view.py
index 307bbf4..0828a31 100644
--- a/sourcing/view.py
+++ b/sourcing/view.py
@@ -5,6 +5,8 @@ from flask_login import (login_user, current_user, logout_user,
from .forms import (LoginForm, SignupForm, AccountSettingsForm,
UploadSourceDocForm, SourceDocForm, ItemForm)
from .model import User, SourceDoc, Item, XanaDoc, XanaLink
+from .url import get_url
+from .edl import fulfil_edl_with_sources
from .database import session
from .text import iter_lines
from werkzeug.debug.tbtools import get_current_traceback
@@ -122,10 +124,27 @@ def get_item(username, hashid):
doc = None
return doc if doc else abort(404)
+def view_xanadoc(item):
+ return render_template('view/xanadoc.html',
+ item=item,
+ doc=fulfil_edl_with_sources(item.text))
+
+@bp.route('/<username>/<hashid>/edl')
+def view_edl(username, hashid):
+ item = get_item(username, hashid)
+ if item.type != 'xanadoc':
+ return abort(404)
+
+ return render_template('view.html', doc=item, iter_lines=iter_lines)
+
@bp.route('/<username>/<hashid>')
def view_item(username, hashid):
+ item = get_item(username, hashid)
+ if item.type == 'xanadoc':
+ return view_xanadoc(item)
+
return render_template('view.html',
- doc=get_item(username, hashid),
+ doc=item,
iter_lines=iter_lines)
@bp.route('/<username>/<hashid>/edit', methods=['GET', 'POST'])
@@ -224,9 +243,11 @@ def api_get_document(username, filename):
}
return jsonify(ret)
-@bp.route('/all_titles')
-def get_all_titles():
- titles = XanaLink.get_all_titles()
- for k, v in titles.items():
- print(from_external(k), v)
- return ''
+@bp.route('/get_span.json')
+def get_span():
+ url = request.args['url']
+ start = int(request.args['start'])
+ length = int(request.args['length'])
+ spanid = request.args['spanid']
+ text = get_url(url)
+ return jsonify(text=text[start:start + length], spanid=spanid)