UNPKG

13.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/auto-start/InteractableMethods.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/auto-start/InteractableMethods.ts</h1>
35
36
37
38
39
40
41
42 <section>
43 <article>
44 <pre class="prettyprint source linenums"><code>import * as Interact from '@interactjs/types/index'
45import is from '@interactjs/utils/is'
46import { warnOnce } from '@interactjs/utils/misc'
47
48declare module '@interactjs/core/Interactable' {
49 interface Interactable {
50 getAction: (
51 this: Interact.Interactable,
52 pointer: Interact.PointerType,
53 event: Interact.PointerEventType,
54 interaction: Interact.Interaction,
55 element: Interact.Element,
56 ) => Interact.ActionProps | null
57 styleCursor: typeof styleCursor
58 actionChecker: typeof actionChecker
59 ignoreFrom: {
60 (...args: any[]): Interactable
61 (): boolean
62 }
63 allowFrom: {
64 (...args: any[]): Interactable
65 (): boolean
66 }
67 }
68}
69
70function install (scope: Interact.Scope) {
71 const {
72 /** @lends Interactable */
73 Interactable, // tslint:disable-line no-shadowed-variable
74 } = scope
75
76 Interactable.prototype.getAction = function getAction (
77 this: Interact.Interactable,
78 pointer: Interact.PointerType,
79 event: Interact.PointerEventType,
80 interaction: Interact.Interaction,
81 element: Interact.Element,
82 ): Interact.ActionProps {
83 const action = defaultActionChecker(this, event, interaction, element, scope)
84
85 if (this.options.actionChecker) {
86 return this.options.actionChecker(pointer, event, action, this, element, interaction)
87 }
88
89 return action
90 }
91
92 /**
93 * ```js
94 * interact(element, { ignoreFrom: document.getElementById('no-action') })
95 * // or
96 * interact(element).ignoreFrom('input, textarea, a')
97 * ```
98 * @deprecated
99 * If the target of the `mousedown`, `pointerdown` or `touchstart` event or any
100 * of it's parents match the given CSS selector or Element, no
101 * drag/resize/gesture is started.
102 *
103 * Don't use this method. Instead set the `ignoreFrom` option for each action
104 * or for `pointerEvents`
105 *
106 * @example
107 * interact(targett)
108 * .draggable({
109 * ignoreFrom: 'input, textarea, a[href]'',
110 * })
111 * .pointerEvents({
112 * ignoreFrom: '[no-pointer]',
113 * })
114 *
115 * @param {string | Element | null} [newValue] a CSS selector string, an
116 * Element or `null` to not ignore any elements
117 * @return {string | Element | object} The current ignoreFrom value or this
118 * Interactable
119 */
120 Interactable.prototype.ignoreFrom = warnOnce(function (this: Interact.Interactable, newValue) {
121 return this._backCompatOption('ignoreFrom', newValue)
122 }, 'Interactable.ignoreFrom() has been deprecated. Use Interactble.draggable({ignoreFrom: newValue}).')
123
124 /**
125 * @deprecated
126 *
127 * A drag/resize/gesture is started only If the target of the `mousedown`,
128 * `pointerdown` or `touchstart` event or any of it's parents match the given
129 * CSS selector or Element.
130 *
131 * Don't use this method. Instead set the `allowFrom` option for each action
132 * or for `pointerEvents`
133 *
134 * @example
135 * interact(targett)
136 * .resizable({
137 * allowFrom: '.resize-handle',
138 * .pointerEvents({
139 * allowFrom: '.handle',,
140 * })
141 *
142 * @param {string | Element | null} [newValue] a CSS selector string, an
143 * Element or `null` to allow from any element
144 * @return {string | Element | object} The current allowFrom value or this
145 * Interactable
146 */
147 Interactable.prototype.allowFrom = warnOnce(function (this: Interact.Interactable, newValue) {
148 return this._backCompatOption('allowFrom', newValue)
149 }, 'Interactable.allowFrom() has been deprecated. Use Interactble.draggable({allowFrom: newValue}).')
150
151 /**
152 * ```js
153 * interact('.resize-drag')
154 * .resizable(true)
155 * .draggable(true)
156 * .actionChecker(function (pointer, event, action, interactable, element, interaction) {
157 *
158 * if (interact.matchesSelector(event.target, '.drag-handle')) {
159 * // force drag with handle target
160 * action.name = drag
161 * }
162 * else {
163 * // resize from the top and right edges
164 * action.name = 'resize'
165 * action.edges = { top: true, right: true }
166 * }
167 *
168 * return action
169 * })
170 * ```
171 *
172 * Returns or sets the function used to check action to be performed on
173 * pointerDown
174 *
175 * @param {function | null} [checker] A function which takes a pointer event,
176 * defaultAction string, interactable, element and interaction as parameters
177 * and returns an object with name property 'drag' 'resize' or 'gesture' and
178 * optionally an `edges` object with boolean 'top', 'left', 'bottom' and right
179 * props.
180 * @return {Function | Interactable} The checker function or this Interactable
181 */
182 Interactable.prototype.actionChecker = actionChecker
183
184 /**
185 * Returns or sets whether the the cursor should be changed depending on the
186 * action that would be performed if the mouse were pressed and dragged.
187 *
188 * @param {boolean} [newValue]
189 * @return {boolean | Interactable} The current setting or this Interactable
190 */
191 Interactable.prototype.styleCursor = styleCursor
192}
193
194function defaultActionChecker (
195 interactable: Interact.Interactable,
196 event: Interact.PointerEventType,
197 interaction: Interact.Interaction,
198 element: Interact.Element,
199 scope: Interact.Scope,
200) {
201 const rect = interactable.getRect(element)
202 const buttons = (event as MouseEvent).buttons || ({
203 0: 1,
204 1: 4,
205 3: 8,
206 4: 16,
207 })[(event as MouseEvent).button as 0 | 1 | 3 | 4]
208 const arg = {
209 action: null,
210 interactable,
211 interaction,
212 element,
213 rect,
214 buttons,
215 }
216
217 scope.fire('auto-start:check', arg)
218
219 return arg.action
220}
221
222function styleCursor (this: Interact.Interactable): boolean
223function styleCursor (this: Interact.Interactable, newValue: boolean): typeof this
224function styleCursor (this: Interact.Interactable, newValue?: boolean) {
225 if (is.bool(newValue)) {
226 this.options.styleCursor = newValue
227
228 return this
229 }
230
231 if (newValue === null) {
232 delete this.options.styleCursor
233
234 return this
235 }
236
237 return this.options.styleCursor
238}
239
240function actionChecker (this: Interact.Interactable, checker: any) {
241 if (is.func(checker)) {
242 this.options.actionChecker = checker
243
244 return this
245 }
246
247 if (checker === null) {
248 delete this.options.actionChecker
249
250 return this
251 }
252
253 return this.options.actionChecker
254}
255
256export default {
257 id: 'auto-start/interactableMethods',
258 install,
259}
260</code></pre>
261 </article>
262 </section>
263
264
265
266
267</div>
268
269<script>prettyPrint();</script>
270<script src="scripts/linenumber.js"></script>
271</body>
272</html>