interactjs

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>src/interact.js - Documentation</title> <script src="scripts/prettify/prettify.js"></script> <script src="scripts/prettify/lang-css.js"></script>  <link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link type="text/css" rel="stylesheet" href="styles/prettify.css"> <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css"> </head> <body> <input type="checkbox" id="nav-trigger" class="nav-trigger" /> <label for="nav-trigger" class="navicon-button x"> <div class="navicon"></div> </label> <label for="nav-trigger" class="overlay"></label> <nav> <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Classes</li><li class="nav-heading">C<a href="Interactable.html">Interactable</a></li><li class="nav-item">F<a href="Interactable.html#actionChecker">actionChecker</a></li><li class="nav-item">F<a href="Interactable.html#context">context</a></li><li class="nav-item">F<a href="Interactable.html#deltaSource">deltaSource</a></li><li class="nav-item">F<a href="Interactable.html#draggable">draggable</a></li><li class="nav-item">F<a href="Interactable.html#dropzone">dropzone</a></li><li class="nav-item">F<a href="Interactable.html#fire">fire</a></li><li class="nav-item">F<a href="Interactable.html#gesturable">gesturable</a></li><li class="nav-item">F<a href="Interactable.html#getRect">getRect</a></li><li class="nav-item">F<a href="Interactable.html#off">off</a></li><li class="nav-item">F<a href="Interactable.html#on">on</a></li><li class="nav-item">F<a href="Interactable.html#origin">origin</a></li><li class="nav-item">F<a href="Interactable.html#preventDefault">preventDefault</a></li><li class="nav-item">F<a href="Interactable.html#rectChecker">rectChecker</a></li><li class="nav-item">F<a href="Interactable.html#resizable">resizable</a></li><li class="nav-item">F<a href="Interactable.html#set">set</a></li><li class="nav-item">F<a href="Interactable.html#styleCursor">styleCursor</a></li><li class="nav-item">F<a href="Interactable.html#unset">unset</a></li><li class="nav-heading">C<a href="InteractEvent.html">InteractEvent</a></li><li class="nav-item">F<a href="InteractEvent.html#stopImmediatePropagation">stopImmediatePropagation</a></li><li class="nav-item">F<a href="InteractEvent.html#stopPropagation">stopPropagation</a></li><li class="nav-heading">C<a href="Interaction.html">Interaction</a></li><li class="nav-item">F<a href="Interaction.html#doMove">doMove</a></li><li class="nav-item">F<a href="Interaction.html#end">end</a></li><li class="nav-item">F<a href="Interaction.html#start">start</a></li><li class="nav-item">F<a href="Interaction.html#stop">stop</a></li><li class="nav-heading">C<a href="module.exports_module.exports.html">exports</a></li><li class="nav-heading">Modules</li><li class="nav-heading">M<a href="module-interact.html">interact</a></li><li class="nav-item">F<a href="module-interact.html#.debug">debug</a></li><li class="nav-item">F<a href="module-interact.html#.dynamicDrop">dynamicDrop</a></li><li class="nav-item">F<a href="module-interact.html#.isSet">isSet</a></li><li class="nav-item">F<a href="module-interact.html#.maxInteractions">maxInteractions</a></li><li class="nav-item">F<a href="module-interact.html#.off">off</a></li><li class="nav-item">F<a href="module-interact.html#.on">on</a></li><li class="nav-item">F<a href="module-interact.html#.pointerMoveTolerance">pointerMoveTolerance</a></li><li class="nav-item">F<a href="module-interact.html#.stop">stop</a></li><li class="nav-item">F<a href="module-interact.html#.supportsPointerEvent">supportsPointerEvent</a></li><li class="nav-item">F<a href="module-interact.html#.supportsTouch">supportsTouch</a></li><li class="nav-heading"><a href="global.html">Globals</a></li><li class="nav-item">F<a href="global.html#interact">interact</a></li> </nav> <div class="code-col-bg"></div> <div id="main"> <h1 class="page-title">src/interact.js</h1> <section> <article> <pre class="prettyprint source linenums"><code>/** @module interact */ const browser = require('./utils/browser'); const events = require('./utils/events'); const utils = require('./utils'); const scope = require('./scope'); const Interactable = require('./Interactable'); const Interaction = require('./Interaction'); const globalEvents = {}; /** * ```js * interact('#draggable').draggable(true); * * var rectables = interact('rect'); * rectables * .gesturable(true) * .on('gesturemove', function (event) { * // ... * }); * ``` * * 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. * * @global * * @param {Element | string} element The HTML or SVG Element to interact with * or CSS selector * @return {Interactable} */ function interact (element, options) { let interactable = scope.interactables.get(element, options); if (!interactable) { interactable = new Interactable(element, options); interactable.events.global = globalEvents; } return interactable; } /** * Check if an element or selector has been set with the {@link interact} * function * * @alias module:interact.isSet * * @param {Element} element The Element being searched for * @return {boolean} Indicates if the element or CSS selector was previously * passed to interact */ interact.isSet = function (element, options) { return scope.interactables.indexOfElement(element, options && options.context) !== -1; }; /** * Add a global listener for an InteractEvent or adds a DOM event to `document` * * @alias module:interact.on * * @param {string | array | object} type The types of events to listen for * @param {function} listener The function event (s) * @param {object | boolean} [options] object or useCapture flag for * addEventListener * @return {object} interact */ interact.on = function (type, listener, options) { if (utils.is.string(type) && type.search(' ') !== -1) { type = type.trim().split(/ +/); } if (utils.is.array(type)) { for (const eventType of type) { interact.on(eventType, listener, options); } return interact; } if (utils.is.object(type)) { for (const prop in type) { interact.on(prop, type[prop], listener); } return interact; } // if it is an InteractEvent type, add listener to globalEvents if (utils.contains(Interactable.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(scope.document, type, listener, { options }); } return interact; }; /** * Removes a global InteractEvent listener or DOM event from `document` * * @alias module:interact.off * * @param {string | array | object} type The types of events that were listened * for * @param {function} listener The listener function to be removed * @param {object | boolean} options [options] object or useCapture flag for * removeEventListener * @return {object} interact */ interact.off = function (type, listener, options) { if (utils.is.string(type) && type.search(' ') !== -1) { type = type.trim().split(/ +/); } if (utils.is.array(type)) { for (const eventType of type) { interact.off(eventType, listener, options); } return interact; } if (utils.is.object(type)) { for (const prop in type) { interact.off(prop, type[prop], listener); } return interact; } if (!utils.contains(Interactable.eventTypes, type)) { events.remove(scope.document, type, listener, options); } else { let index; if (type in globalEvents && (index = globalEvents[type].indexOf(listener)) !== -1) { globalEvents[type].splice(index, 1); } } return interact; }; /** * Returns an object which exposes internal data * @alias module:interact.debug * * @return {object} An object with properties that outline the current state * and expose internal functions and variables */ interact.debug = function () { return scope; }; // expose the functions used to calculate multi-touch properties interact.getPointerAverage = utils.pointerAverage; interact.getTouchBBox = utils.touchBBox; interact.getTouchDistance = utils.touchDistance; interact.getTouchAngle = utils.touchAngle; interact.getElementRect = utils.getElementRect; interact.getElementClientRect = utils.getElementClientRect; interact.matchesSelector = utils.matchesSelector; interact.closest = utils.closest; /** * @alias module:interact.supportsTouch * * @return {boolean} Whether or not the browser supports touch input */ interact.supportsTouch = function () { return browser.supportsTouch; }; /** * @alias module:interact.supportsPointerEvent * * @return {boolean} Whether or not the browser supports PointerEvents */ interact.supportsPointerEvent = function () { return browser.supportsPointerEvent; }; /** * Cancels all interactions (end events are not fired) * * @alias module:interact.stop * * @param {Event} event An event on which to call preventDefault() * @return {object} interact */ interact.stop = function (event) { for (let i = scope.interactions.length - 1; i >= 0; i--) { scope.interactions[i].stop(event); } return interact; }; /** * Returns or sets the distance the pointer must be moved before an action * sequence occurs. This also affects tolerance for tap events. * * @alias module:interact.pointerMoveTolerance * * @param {number} [newValue] The movement from the start position must be greater than this value * @return {interact | number} */ interact.pointerMoveTolerance = function (newValue) { if (utils.is.number(newValue)) { Interaction.pointerMoveTolerance = newValue; return interact; } return Interaction.pointerMoveTolerance; }; interact.addDocument = scope.addDocument; interact.removeDocument = scope.removeDocument; scope.interact = interact; module.exports = interact; </code></pre> </article> </section> </div> <script>prettyPrint();</script> <script src="scripts/linenumber.js"></script> </body> </html>