A simple adapter to jquery's PEP for FramerJS. A PointerEvent Polyfill makes it possible to use the W3C's PointerEvent specification today. PointerEvents let you handle mouse, touch, and pen input through a single set of event handlers.
Example Usage
Tested in Framer Studio and framer-cli.
- Run
npm install framer-pep
in your prototype's directory (usually MyPrototype.framer/) - Add a reference framer-pep by adding
pep = require("framer-pep")
. Where you do this dependson whether you're using Framer Studio or framer-cli
Framer Studio
If you're using Framer Studio, you need to create an npm.coffee
file in your modules folder, per these instructions.
MyPrototype.framer/modules/npm.coffee
# npm.coffee is a simple module wrapper exports.pep = require"framer-pep"# You could require more npm modules that you have installed on additional lines. For example, assuming you have backbone installed: #exports.backbone = require("backbone")
MyPrototype.framer/app.coffee
npm = require"npm" # reference to your npm wrapper module pep = npmpep # now you have direct access to the framer-pep npm module
framer-cli
index.coffee
(or index.js)
pep = require"framer-pep"
Features
framer-pep exposes two properties, pep.PointerEvents
and pep.PointerEventLayer
Here's how I like to use it:
pep = require"framer-pep" # Replace the standard Framer objects with PEP objects window.Events = _extendEventspepPointerEventswindow.Layer = pepPointerEventLayer TestLayer = TestLayercenter TestLayeron EventsPointerDown # Will print on mouse, touch, and pen print "Hello from pointerdown!"
Known Issues
Dragging and ScrollComponents don't work because they're hard-coded to use touch events. You can get dragging to work (hackily) like so:
window.Events.TouchStart = EventsPointerDownwindow.Events.TouchMove = EventsPointerMovewindow.Events.TouchEnd = EventsPointerUp
Building
Just use npm run build
. That will generate the compiled index.js
from index.coffee
.