{"_id":"@boltline/pepjs","_rev":"1-a191d953e5d430b128b75fd299a44b4d","name":"@boltline/pepjs","dist-tags":{"latest":"0.4.5"},"versions":{"0.4.5":{"name":"@boltline/pepjs","version":"0.4.5","main":"dist/pep.js","description":"Polyfill of the PointerEvents W3C spec","author":{"name":"jQuery Foundation and other contributors","url":"https://github.com/jquery/PEP/blob/master/AUTHORS.txt"},"repository":{"type":"git","url":"git://github.com/jquery/PEP.git"},"bugs":{"url":"https://github.com/jquery/PEP/issues"},"license":"MIT","devDependencies":{"atob":"^2.0.3","bluebird":"^3.4.0","chai-spies":"^0.7.1","fs-extra":"^0.30.0","glob":"^7.0.3","grunt":"^1.0.1","grunt-cli":"^1.2.0","grunt-contrib-jshint":"^1.0.0","grunt-contrib-uglify":"^1.0.1","grunt-contrib-watch":"^1.0.0","grunt-git-authors":"^3.2.0","grunt-jscs":"^3.0.0","grunt-selenium-standalone":"^1.0.1","intern":"^3.2.3","lodash":"^4.13.1","request":"^2.72.0","rollup":"^0.29.0"},"web-platform-tests":{"repo":"w3c/web-platform-tests#c5d333c859075744b3828a2a29057ee456234cb2","path":"./tests/w3c"},"scripts":{"build":"grunt build","ci":"grunt ci","test":"grunt test"},"gitHead":"5211f3da2be00b86d8455a8c45752409406f45e2","homepage":"https://github.com/jquery/PEP#readme","_id":"@boltline/pepjs@0.4.5","_npmVersion":"6.4.0","_nodeVersion":"10.10.0","_npmUser":{"name":"mike-marcacci","email":"mike.marcacci@gmail.com"},"dist":{"integrity":"sha512-0choDlzVcyQLh9G5+Fan3HKIDf0D96Q8RXFVIsF/UDjs3L2ee0cLVldyk3lHw8nhn3OT+mPHDtk6xS+VFf60hw==","shasum":"773c7cc89b6720202005e6b07cc9e515cf256645","tarball":"https://registry.npmjs.org/@boltline/pepjs/-/pepjs-0.4.5.tgz","fileCount":28,"unpackedSize":124022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbunbSCRA9TVsSAnZWagAAOSAP/0qePW5r62We5Xl/5+HL\nFdL9uFv6jRPpkxmDDxpXLEmebILfO6PjZOKIq2SAyfLGiogpgA7nKF8tb+nm\ngx/5YWl5zXbtq4DtZxgJw/5L+csuPZX6MvROAlPZIrzDw+CezWyj6IoG7gEB\ntu5GNDuabWsWdP0GJruz3iPn3ReUs/PtS4dc2iw211Igi49Cf/Hbg3VXyeIX\nc2Og0fpmb/FGJMNPU4UEWRVt+eUFRpIni3U7dR5nOoEbvkaY/D+zqkK6jpta\nvazl4GSXEVtnfVEWcK8qfUzqhqzqZAPnBG73QNexDpDL/WT9z+7h8l6LfjQ2\nUw1X6p3oP3XSZY/oVsLFib/icswAqx977FJJ9MWcpfYMq3jkKcWQGlLR1OS7\n9ioV2ZKHw1dzuXcRCiZq6JAiS2mtVc9vVdUAOlmq6Gvh6A6CIWB23FcH7BeL\nCfyrYRotoVwipoFUbAhKeFVCUJGQBqNDVfHU6U+8VHaIWLpXbgOgFDER3X+1\n1TWAWP6sc5CNeJE1KgQb3+LH6AcYJzRmPivnIk9tp0J0b8twi+tcTbl672sL\nHfVixi63LueUJacspRSCWmzUUKBrpFw7shGXOpMpNmXxhz5wxM2j8GzRlaup\nkBoK/5JzjOFvAUwa1QVkbhVxvGlkyItZxlxYrLcr5z8qULfRlVhSDEqGIEBz\nAg1m\r\n=/Ruz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8ZRgtjhUYeYFmTWhsl+NYATreVaoKi6TDmAjdqay44AIgaLdgXzSjrU2iGQ7M769wv9r8wr5WysaIpibaLVRHYNo="}]},"maintainers":[{"name":"mike-marcacci","email":"mike.marcacci@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pepjs_0.4.5_1538946769400_0.34807464208531735"},"_hasShrinkwrap":false}},"time":{"created":"2018-10-07T21:12:49.322Z","0.4.5":"2018-10-07T21:12:49.556Z","modified":"2022-04-04T20:04:41.896Z"},"maintainers":[{"name":"mike-marcacci","email":"mike.marcacci@gmail.com"}],"description":"Polyfill of the PointerEvents W3C spec","homepage":"https://github.com/jquery/PEP#readme","repository":{"type":"git","url":"git://github.com/jquery/PEP.git"},"author":{"name":"jQuery Foundation and other contributors","url":"https://github.com/jquery/PEP/blob/master/AUTHORS.txt"},"bugs":{"url":"https://github.com/jquery/PEP/issues"},"license":"MIT","readme":"# Pointer Events Polyfill - making pointer events usable today\n\n![PEP logo](pep-logo-shield.png)\n\nPEP polyfills pointer events in all browsers that haven't yet implemented them, providing a unified, responsive input model for all devices and input types. You can [read more about pointer events below](#why-pointer-events).\n\n## Getting Started\n\n1. Place the PEP script in the document head\n  - `<script src=\"https://code.jquery.com/pep/0.4.3/pep.js\"></script>`\n\n2. By default, no pointer events are sent from an element. This maximizes the possibility that a browser can deliver smooth scrolling and jank-free gestures. If you want to receive events, you must set the `touch-action` property of that element. Set up some elements to create events with the [`touch-action` attribute](http://www.w3.org/TR/pointerevents/#the-touch-action-css-property).\n\n3. Listen for the desired events\n  - `pointermove`: a pointer moves, similar to touchmove or mousemove.\n  - `pointerdown`: a pointer is activated, or a device button held.\n  - `pointerup`: a pointer is deactivated, or a device button released.\n  - `pointerover`: a pointer has moved onto an element.\n  - `pointerout`: a pointer is no longer on an element it once was.\n  - `pointerenter`: a pointer enters the bounding box of an element.\n  - `pointerleave`: a pointer leaves the bounding box of an element.\n  - `pointercancel`: a pointer will no longer generate events.\n\n4. As elements come and go, or have their `touch-action` attribute changed, they will send the proper set of pointer events.\n\n```html\n<html lang=\"en\">\n<head>\n  <meta charset=\"utf-8\">\n  <title>PEP (Pointer Events Polyfill)</title>\n  <meta name=\"viewport\" content=\"width=device-width\">\n  <!-- include PEP -->\n  <script src=\"https://code.jquery.com/pep/0.4.3/pep.js\"></script>\n</head>\n<body>\n<button id=\"b\" touch-action=\"none\">Test button!</button>\n<p><output id=\"o\"></output></p>\n<script>\ndocument.getElementById( \"b\" ).addEventListener( \"pointerdown\", function( e ) {\n  document.getElementById( \"o\" ).innerHTML = \"that was a \" +\n    e.pointerType + \" \" + e.type + \" on a \"+ e.target.nodeName;\n} );\n</script>\n</body>\n</html>\n```\n\nSee also the [examples in the W3C Pointer Events Specification](http://www.w3.org/TR/pointerevents/#examples) and our own [samples for using PEP](http://jquery.github.io/PEP/).\n\n### Using PEP with jQuery\n\nYou can use pointer events with jQuery and PEP:\n```html\n<div id=\"canvas\" touch-action=\"none\"></div>\n<script src=\"pep.dist.js\"></script>\n<script src=\"jquery.js\"></script>\n<script>\n$(\"#canvas\").on(\"pointermove\", function(event) {\n  draw(event);\n});\n</script>\n```\nCheck out [this jsbin demo](http://jsbin.com/bojumofowa/1/edit?html,css,js,output) for a full demo.\n\njQuery doesn't copy all properties from the original event object to the event object provided in the event handler. You can find [a list of copied and normalized properties on the jQuery API docs](http://api.jquery.com/category/events/event-object/). To access any other original properties, use `event.originalEvent`.\n\n### Using PEP with React\n\nReact supports pointer events natively [since version 16.4.0](https://reactjs.org/blog/2018/05/23/react-v-16-4.html), but does not include polyfills to avoid an increase in bundle size.\n\nPEP works fine with React 16.4 and higher, but if you want to use pointer events with React < 16.4 check out [the `react-pointable` npm module](https://www.npmjs.com/package/react-pointable) which introduces a declarative `<Pointable />` component.\n\n## Why Pointer Events?\n\nMouse events and touch events are fundamentally different beasts in browsers today, and that makes it hard to write cross-platform apps.\n\nFor example, a simple finger paint app needs plenty of work to behave correctly with mouse and touch:\n\nCurrent platforms that implement touch events also provide mouse events for backward compatibility; however, only a subset of mouse events are fired and the semantics are changed.\n\n- Mouse events are only fired after the touch sequence ends.\n- Mouse events are not fired on elements without a `click` event handler. One must be attached by default, or directly on the element with `onclick`.\n- `click` events are not fired if the content of the page changes in a `mousemove` or `mouseover` event.\n- `click` events are fired 300ms after the touch sequence ends.\n- More information: [Apple Developer Documentation](http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html).\n\nAdditionally, touch events are sent only to the element that received the `touchstart`. This is fundamentally different than mouse events, which fire on the element that is under the mouse. To make them behave similarly, touch events need to be retargeted with `document.elementFromPoint`.\n\nThese incompatibilities lead to applications having to listen to 2 sets of events, mouse on desktop and touch for mobile.\n\n**This forked interaction experience is cumbersome and hard to maintain.**\n\nInstead, there should exist a set of events that are normalized such that they behave exactly the same, no matter the source: touch, mouse, stylus, skull implant, etc. To do this right, this normalized event system needs to be available for all the web platform to use.\n\n*Thus, Pointer Events!*\n\n## Polyfill Limitations\n\n### touch-action\n\nAccording to the spec, the\n[touch-action](http://www.w3.org/TR/pointerevents/#the-touch-action-css-property) CSS property controls whether an element will perform a \"default action\" such as scrolling, or receive a continuous stream of pointer events.\n\nDue to the difficult nature of polyfilling new CSS properties, this library uses a touch-action *attribute* instead. For PEP to work correctly, you will therefore need to include `touch-action=\"...\"` attributes in your HTML that mirror any `touch-action:...` properties you have in your CSS.\n\n```\n<style>\n  div#foo { touch-action: none; }\n</style>\n...\n<div id=\"foo\" touch-action=\"none\"> ... </div>\n```\nRun time changes involving the `touch-action` attribute are monitored using Mutation Observers for maximum flexibility.\n\nTouches will not generate events unless inside of an area that has a valid `touch-action` attribute defined. This is to maintain composition scrolling optimizations where possible.\n\n### Capturing Phase\n\nPEP does not currently polyfill the capturing phase for pointer events.\n\n## navigator.maxTouchPoints\n\nAs the information necessary to populate [`navigator.maxTouchPoints`](https://www.w3.org/TR/pointerevents/#extensions-to-the-navigator-interface) is not available in browsers that do not natively implement pointer events, PEP sets the value to `0`, which is \"the minimum number guaranteed to be recognized\" as required by the specification.\n\n### Browser Compatibility\n\nPEP should work on IE 10+ and the latest versions of Chrome, Safari, Firefox, and Opera. In any [browser implementing pointer events natively](http://caniuse.com/#feat=pointer) (detected by checking for `window.PointerEvent`), PEP won't do anything.\n\n## Building PEP\n\nIf you want to build PEP yourself from source, you'll need to install [Node.js](https://nodejs.org/en/download/) and run the following commands:\n\n```sh\n# Install all dependencies\nnpm install\n\n# Build PEP\nnpm run build\n```\n\nWhen the build completes, the generated files will be available in the `dist/` directory.\n\n*NOTE: Running the demos requires building PEP.*\n","readmeFilename":"README.md"}