UNPKG

15.6 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1">
6 <title>packages/@interactjs/core/interactStatic.ts - Documentation</title>
7
8 <script src="scripts/prettify/prettify.js"></script>
9 <script src="scripts/prettify/lang-css.js"></script>
10 <!--[if lt IE 9]>
11 <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
12 <![endif]-->
13 <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
14 <link type="text/css" rel="stylesheet" href="styles/prettify.css">
15 <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
16</head>
17<body>
18
19<input type="checkbox" id="nav-trigger" class="nav-trigger" />
20<label for="nav-trigger" class="navicon-button x">
21 <div class="navicon"></div>
22</label>
23
24<label for="nav-trigger" class="overlay"></label>
25
26<nav>
27 <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="DropEvent_DropEvent.html">DropEvent</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Interactable.html">Interactable</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#context">context</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#deltaSource">deltaSource</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#draggable">draggable</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#dropCheck">dropCheck</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#dropzone">dropzone</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#fire">fire</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#gesturable">gesturable</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#getRect">getRect</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#off">off</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#on">on</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#origin">origin</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#rectChecker">rectChecker</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#reflow">reflow</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#resizable">resizable</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#set">set</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="Interactable.html#unset">unset</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="InteractEvent_InteractEvent.html">InteractEvent</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="Interaction_Interaction.html">Interaction</a></span></li><li class="nav-heading"><span class="nav-item-type type-class">C</span><span class="nav-item-name"><a href="module.exports_module.exports.html">exports</a></span></li><li class="nav-heading">Modules</li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-interact.html">interact</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.isSet">isSet</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.maxInteractions">maxInteractions</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.off">off</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.on">on</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.pointerMoveTolerance">pointerMoveTolerance</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.stop">stop</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.supportsPointerEvent">supportsPointerEvent</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.supportsTouch">supportsTouch</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-interact.html#.use">use</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-modifiers_aspectRatio.html">modifiers/aspectRatio</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-modifiers_snapEdges.html">modifiers/snapEdges</a></span></li><li class="nav-heading"><a href="global.html">Globals</a></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#interact">interact</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="global.html#preventDefault">preventDefault</a></span></li>
28</nav>
29
30<div class="code-col-bg"></div>
31
32<div id="main">
33
34 <h1 class="page-title">packages/@interactjs/core/interactStatic.ts</h1>
35
36
37
38
39
40
41
42 <section>
43 <article>
44 <pre class="prettyprint source linenums"><code>/** @module interact */
45import * as Interact from '@interactjs/types/index'
46import browser from '@interactjs/utils/browser'
47import * as domUtils from '@interactjs/utils/domUtils'
48import is from '@interactjs/utils/is'
49import * as pointerUtils from '@interactjs/utils/pointerUtils'
50
51import { Interactable } from './Interactable'
52import { Options } from './defaultOptions'
53import isNonNativeEvent from './isNonNativeEvent'
54
55export interface InteractStatic {
56 (target: Interact.Target, options?: Options): Interactable
57 getPointerAverage: typeof pointerUtils.pointerAverage
58 getTouchBBox: typeof pointerUtils.touchBBox
59 getTouchDistance: typeof pointerUtils.touchDistance
60 getTouchAngle: typeof pointerUtils.touchAngle
61 getElementRect: typeof domUtils.getElementRect
62 getElementClientRect: typeof domUtils.getElementClientRect
63 matchesSelector: typeof domUtils.matchesSelector
64 closest: typeof domUtils.closest
65 /** @internal */ globalEvents: any
66 version: string
67 /** @internal */ scope: Interact.Scope
68 use(plugin: Interact.Plugin, options?: {
69 [key: string]: any
70 }): any
71 isSet(target: Interact.Element, options?: any): boolean
72 on(type: string | Interact.EventTypes, listener: Interact.ListenersArg, options?: object): any
73 off(type: Interact.EventTypes, listener: any, options?: object): any
74 debug(): any
75 supportsTouch(): boolean
76 supportsPointerEvent(): boolean
77 stop(): any
78 pointerMoveTolerance(newValue?: number): any
79 addDocument(doc: Document, options?: object): void
80 removeDocument(doc: Document): void
81}
82
83export function createInteractStatic (scope: Interact.Scope): Interact.InteractStatic {
84 /**
85 * ```js
86 * interact('#draggable').draggable(true)
87 *
88 * var rectables = interact('rect')
89 * rectables
90 * .gesturable(true)
91 * .on('gesturemove', function (event) {
92 * // ...
93 * })
94 * ```
95 *
96 * The methods of this variable can be used to set elements as interactables
97 * and also to change various default settings.
98 *
99 * Calling it as a function and passing an element or a valid CSS selector
100 * string returns an Interactable object which has various methods to configure
101 * it.
102 *
103 * @global
104 *
105 * @param {Element | string} target The HTML or SVG Element to interact with
106 * or CSS selector
107 * @return {Interactable}
108 */
109 const interact = ((target, options) => {
110 let interactable = scope.interactables.get(target, options)
111
112 if (!interactable) {
113 interactable = scope.interactables.new(target, options)
114 interactable.events.global = interact.globalEvents
115 }
116
117 return interactable
118 }) as InteractStatic
119
120 // expose the functions used to calculate multi-touch properties
121 interact.getPointerAverage = pointerUtils.pointerAverage
122 interact.getTouchBBox = pointerUtils.touchBBox
123 interact.getTouchDistance = pointerUtils.touchDistance
124 interact.getTouchAngle = pointerUtils.touchAngle
125
126 interact.getElementRect = domUtils.getElementRect
127 interact.getElementClientRect = domUtils.getElementClientRect
128 interact.matchesSelector = domUtils.matchesSelector
129 interact.closest = domUtils.closest
130
131 interact.globalEvents = {} as any
132
133 // eslint-disable-next-line no-undef
134 interact.version = process.env.npm_package_version
135 interact.scope = scope
136 /**
137 * Use a plugin
138 *
139 * @alias module:interact.use
140 *
141 * @param {Object} plugin
142 * @param {function} plugin.install
143 * @return {Interact.InteractStatic}
144 */
145 interact.use = function (plugin, options) {
146 this.scope.usePlugin(plugin, options)
147
148 return this
149 }
150
151 /**
152 * Check if an element or selector has been set with the {@link interact}
153 * function
154 *
155 * @alias module:interact.isSet
156 *
157 * @param {Element} element The Element being searched for
158 * @return {boolean} Indicates if the element or CSS selector was previously
159 * passed to interact
160 */
161 interact.isSet = function (target, options) {
162 return !!this.scope.interactables.get(target, options &amp;&amp; options.context)
163 }
164
165 /**
166 * Add a global listener for an InteractEvent or adds a DOM event to `document`
167 *
168 * @alias module:interact.on
169 *
170 * @param {string | array | object} type The types of events to listen for
171 * @param {function} listener The function event (s)
172 * @param {object | boolean} [options] object or useCapture flag for
173 * addEventListener
174 * @return {object} interact
175 */
176 interact.on = function (type: string | Interact.EventTypes, listener: Interact.ListenersArg, options?: object) {
177 if (is.string(type) &amp;&amp; type.search(' ') !== -1) {
178 type = type.trim().split(/ +/)
179 }
180
181 if (is.array(type)) {
182 for (const eventType of (type as any[])) {
183 this.on(eventType, listener, options)
184 }
185
186 return this
187 }
188
189 if (is.object(type)) {
190 for (const prop in type) {
191 this.on(prop, (type as any)[prop], listener)
192 }
193
194 return this
195 }
196
197 // if it is an InteractEvent type, add listener to globalEvents
198 if (isNonNativeEvent(type, this.scope.actions)) {
199 // if this type of event was never bound
200 if (!this.globalEvents[type]) {
201 this.globalEvents[type] = [listener]
202 }
203 else {
204 this.globalEvents[type].push(listener)
205 }
206 }
207 // If non InteractEvent type, addEventListener to document
208 else {
209 this.scope.events.add(this.scope.document, type, listener as Interact.Listener, { options })
210 }
211
212 return this
213 }
214
215 /**
216 * Removes a global InteractEvent listener or DOM event from `document`
217 *
218 * @alias module:interact.off
219 *
220 * @param {string | array | object} type The types of events that were listened
221 * for
222 * @param {function} listener The listener function to be removed
223 * @param {object | boolean} options [options] object or useCapture flag for
224 * removeEventListener
225 * @return {object} interact
226 */
227 interact.off = function (type: Interact.EventTypes, listener: any, options?: object) {
228 if (is.string(type) &amp;&amp; type.search(' ') !== -1) {
229 type = type.trim().split(/ +/)
230 }
231
232 if (is.array(type)) {
233 for (const eventType of type) {
234 this.off(eventType, listener, options)
235 }
236
237 return this
238 }
239
240 if (is.object(type)) {
241 for (const prop in type) {
242 this.off(prop, type[prop], listener)
243 }
244
245 return this
246 }
247
248 if (isNonNativeEvent(type, this.scope.actions)) {
249 let index: number
250
251 if (type in this.globalEvents &amp;&amp;
252 (index = this.globalEvents[type].indexOf(listener)) !== -1) {
253 this.globalEvents[type].splice(index, 1)
254 }
255 }
256 else {
257 this.scope.events.remove(this.scope.document, type, listener, options)
258 }
259
260 return this
261 }
262
263 interact.debug = function () {
264 return this.scope
265 }
266
267 /**
268 * @alias module:interact.supportsTouch
269 *
270 * @return {boolean} Whether or not the browser supports touch input
271 */
272 interact.supportsTouch = function () {
273 return browser.supportsTouch
274 }
275
276 /**
277 * @alias module:interact.supportsPointerEvent
278 *
279 * @return {boolean} Whether or not the browser supports PointerEvents
280 */
281 interact.supportsPointerEvent = function () {
282 return browser.supportsPointerEvent
283 }
284
285 /**
286 * Cancels all interactions (end events are not fired)
287 *
288 * @alias module:interact.stop
289 *
290 * @return {object} interact
291 */
292 interact.stop = function () {
293 for (const interaction of this.scope.interactions.list) {
294 interaction.stop()
295 }
296
297 return this
298 }
299
300 /**
301 * Returns or sets the distance the pointer must be moved before an action
302 * sequence occurs. This also affects tolerance for tap events.
303 *
304 * @alias module:interact.pointerMoveTolerance
305 *
306 * @param {number} [newValue] The movement from the start position must be greater than this value
307 * @return {interact | number}
308 */
309 interact.pointerMoveTolerance = function (newValue?: number) {
310 if (is.number(newValue)) {
311 this.scope.interactions.pointerMoveTolerance = newValue
312
313 return this
314 }
315
316 return this.scope.interactions.pointerMoveTolerance
317 }
318
319 interact.addDocument = function (doc: Document, options?: object) {
320 this.scope.addDocument(doc, options)
321 }
322
323 interact.removeDocument = function (doc: Document) {
324 this.scope.removeDocument(doc)
325 }
326
327 return interact as any
328}
329</code></pre>
330 </article>
331 </section>
332
333
334
335
336</div>
337
338<script>prettyPrint();</script>
339<script src="scripts/linenumber.js"></script>
340</body>
341</html>