open source ftw

Author: potch

LICENSE

@@ -0,0 +1,27 @@
+Copyright (c) 2013, Mozilla Corporation
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice,
+this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+this list of conditions and the following disclaimer in the documentation
+and/or other materials provided with the distribution.
+
+* Neither the name of the Mozilla Corporation nor the names of its contributors
+may be used to endorse or promote products derived from this software without
+specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -0,0 +1,23 @@
+# pointer.js
+
+Normalizes mouse/touch events into 'pointer' events.
+
+## Types of Events
+
+The following events are generated:
+
+* `pointerdown`: based on mousedown/touchstart
+* `pointerup`: based on mouseup/touchend
+* `pointermove`: based on mousemove/touchmove
+* `pointerlave`: based on mouseout/touchleave
+* `pointerclick`: a 'fast click' event based on a sequence of the above events. Additional heuristics are applied to determine whether or not to generate a `pointerclick`.
+
+## Event Objects
+
+`pointer` events have the following custom properties:
+
+* maskedEvent: the event that triggered the pointer event.
+* touch: boolean- is maskedEvent a touch event?
+* mouse: boolean- is maskedEvent a mouse event?
+* x: page-normalized x coordinate of the event.
+* y: page-normalized y coordinate of the event.

dom.js

@@ -0,0 +1,105 @@
+var dom = (function(win, doc, undefined) {
+
+    function dom(sel) {
+
+        if (sel === window) return window;
+        var ret = sel.nodeType ? [sel] : arr(doc.querySelectorAll(sel));
+
+        ret.on = function (type, handler) {
+            ret.forEach(function(el) {
+                on(el, type, handler)
+            });
+            return ret;
+        };
+        ret.delegate = function (type, sel, handler) {
+            ret.forEach(function(delegateEl) {
+                on(delegateEl, type, function(e,t) {
+                    var matches = delegateEl.querySelectorAll(sel);
+                    if (!matches.length) return;
+                    for (var el = t; el.parentNode && el != delegateEl; el = el.parentNode) {
+                        for (var i = 0; i < matches.length; i++) {
+                            if (matches[i] == el) {
+                                handler.call(el, e);
+                                return;
+                            }
+                        }
+                    }
+                });
+            });
+            return ret;
+        };
+        ret.css = function (o) {
+            if (typeof o == 'object') {
+                for (var i in o) {
+                    if (!o.hasOwnProperty(i)) continue;
+                    ret.forEach(function(el) {
+                        el.style.setProperty(i, o[i]);
+                    });
+                }
+                return ret;
+            }
+            return win.getComputedStyle(ret[0]).getPropertyValue(o);
+        };
+        ret.attr = function (o) {
+            if (typeof o == 'object') {
+                for (var i in o) {
+                    if (!o.hasOwnProperty(i)) continue;
+                    ret.forEach(function(el) {
+                        el.setAttribute(i, o[i]);
+                    });
+                }
+                return ret;
+            }
+            return ret[0].getAttribute(o);
+        };
+        ret.prop = function (o) {
+            ret.forEach(function(el) {
+                extend(el, o);
+            });
+            return ret;
+        };
+        ret.append = function (el) {
+            ret[0].appendChild(el.length ? el[0] : el);
+            return ret;
+        };
+        ret.empty = function () {
+            ret.forEach(empty);
+            return ret;
+        };
+        ret.text = function (s) {
+            ret[0].appendChild(doc.createTextNode(s));
+            return ret;
+        };
+
+        return ret;
+    };
+
+    var arr = dom.arr = function(a, i) {
+        return Array.prototype.slice.call(a, i || 0);
+    };
+    var extend = dom.extend = function extend(d, s) {
+        for (p in s) {
+            if (s.hasOwnProperty(p)) {
+                d[p] = s[p];
+            }
+        }
+    };
+    var on = dom.on = function on(obj, type, handler) {
+        obj.addEventListener(type, function(e) {
+            handler(e, e.target);
+        }, false);
+    };
+
+    var empty = dom.empty = function empty(el) {
+        while (el.childNodes.length) {
+            el.removeChild(el.firstChild);
+        }
+    };
+
+    dom.tag = function tag(name) {
+        return dom(doc.createElement(name));
+    };
+
+    return dom;
+
+})(window, document);

index.html

@@ -0,0 +1,78 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
+    <title>Pointer Events Test</title>
+    <style>
+    div {
+        margin: 0 10px;
+        border: 1px solid black;
+        line-height: 40px;
+        text-align: center;
+    }
+    input {
+        position: fixed;
+        top: 0;
+        left: 0;
+    }
+    b {
+        display: block;
+        position: absolute;
+        width: 64px;
+        height: 64px;
+        border: 1px solid black;
+        pointer-events: none;
+        border-radius: 32px;
+        text-align: center;
+        line-height: 64px;
+    }
+    i {
+        position: fixed;
+        width: 0;
+        height: 0;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+    }
+    #lineX {
+        height: 100%;
+        border-left: 1px solid black;
+    }
+    #lineY {
+        width: 100%;
+        position: absolute;
+        border-top: 1px solid black;
+    }
+    </style>
+  </head>
+  <body>
+    <h1>Pointer Events Test</h1>
+    <b></b>
+    <i id="lineX"></i>
+    <i id="lineY"></i>
+    <script src="pointer.js"></script>
+    <script src="dom.js"></script>
+    <script>
+        dom('body').append(dom.tag('input')
+                   .attr({'id': 'foo', 'data-foo': 'bar'})
+                   .css({'border-color': 'red'}));
+        for (var i=0; i<100; i++) {
+            dom('body').append(dom.tag('div').text('foo'));
+        }
+        dom('body').on('pointermove', function(e) {
+        });
+        var bel = dom('b');
+        var input = dom('input')[0];
+        document.body.addEventListener('pointermove', function(e) {
+            bel.css({'left': e.x-32+'px', 'top': e.y-32+'px'});
+            dom('#lineX').css({'left': e.x+'px'});
+            dom('#lineY').css({'top': e.y+'px'});
+            dom('b').empty().text(e.x);
+        });
+        dom('body').delegate('pointerclick', 'div', function(e) {
+            e.target.innerHTML = Date.now();
+        });
+    </script>
+  </body>
+</html>

manifest.webapp

@@ -0,0 +1,10 @@
+{
+    "name": "Pointer Test",
+    "description": "Test Page for Pointer Events Polyfill",
+    "developer": {
+        "name": "Potch",
+        "url": "https://github.com/potch/"
+    },
+    "launch_path": "/index.html",
+    "default_locale": "en"
+}

pointer.js

@@ -0,0 +1,108 @@
+
+// pointer.js, version 1.0
+
+// Synthesize 'pointer' events using mouse/touch events.
+
+// (c) 2013 Copyright (c) 2013, Mozilla Corporation
+// project located at https://github.com/mozilla/pointer.js.
+// Licenced under the BSD license (see LICENSE file)
+
+// Pointer events have the following custom properties:
+// * maskedEvent: the event that triggered the pointer event.
+// * touch: boolean- is maskedEvent a touch event?
+// * mouse: boolean- is maskedEvent a mouse event?
+// * x: page-normalized x coordinate of the event.
+// * y: page-normalized y coordinate of the event.
+
+(function() {
+    var body = document.body;
+
+    var isScrolling = false;
+    var timeout = false;
+    var sDistX = 0;
+    var sDistY = 0;
+    window.addEventListener('scroll', function() {
+        if (!isScrolling) {
+            sDistX = window.pageXOffset;
+            sDistY = window.pageYOffset;
+        }
+        isScrolling = true;
+        clearTimeout(timeout);
+        timeout = setTimeout(function() {
+            isScrolling = false;
+            sDistX = 0;
+            sDistY = 0;
+        }, 100);
+    });
+
+    body.addEventListener('mousedown', pointerDown);
+    body.addEventListener('touchstart', pointerDown);
+    body.addEventListener('mouseup', pointerUp);
+    body.addEventListener('touchend', pointerUp);
+    body.addEventListener('mousemove', pointerMove);
+    body.addEventListener('touchmove', pointerMove);
+    body.addEventListener('mouseout', pointerLeave);
+    body.addEventListener('touchleave', pointerLeave);
+
+    // 'pointerdown' event, triggered by mousedown/touchstart.
+    function pointerDown(e) {
+        var evt = makePointerEvent('down', e);
+        // don't maybeClick if more than one touch is active.
+        var singleFinger = evt.mouse || (evt.touch && e.touches.length === 1);
+        if (!isScrolling && singleFinger) {
+            e.target.maybeClick = true;
+            e.target.maybeClickX = evt.x;
+            e.target.maybeClickY = evt.y;
+        }
+    }
+
+    // 'pointerdown' event, triggered by mouseout/touchleave.
+    function pointerLeave(e) {
+        e.target.maybeClick = false;
+        makePointerEvent('leave', e);
+    }
+
+    // 'pointermove' event, triggered by mousemove/touchmove.
+    function pointerMove(e) {
+        var evt = makePointerEvent('move', e);
+    }
+
+    // 'pointerup' event, triggered by mouseup/touchend.
+    function pointerUp(e) {
+        var evt = makePointerEvent('up', e);
+        // Does our target have maybeClick set by pointerdown?
+        if (e.target.maybeClick) {
+            // Have we moved too much?
+            if (Math.abs(e.target.maybeClickX - evt.x) < 5 &&
+                Math.abs(e.target.maybeClickY - evt.y) < 5) {
+                // Have we scrolled too much?
+                if (!isScrolling ||
+                    (Math.abs(sDistX - window.pageXOffset) < 5 &&
+                     Math.abs(sDistY - window.pageYOffset) < 5)) {
+                    makePointerEvent('click', e);
+                }
+            }
+        }
+        e.target.maybeClick = false;
+    }
+
+    function makePointerEvent(type, e) {
+        var tgt = e.target;
+        var evt = document.createEvent('CustomEvent');
+        evt.initCustomEvent('pointer' + type, true, true, {});
+        evt.touch = e.type.indexOf('touch') === 0;
+        evt.mouse = e.type.indexOf('mouse') === 0;
+        if (evt.touch) {
+            evt.x = e.changedTouches[0].pageX;
+            evt.y = e.changedTouches[0].pageY;
+        }
+        if (evt.mouse) {
+            evt.x = e.clientX + window.pageXOffset;
+            evt.y = e.clientY + window.pageYOffset;
+        }
+        evt.maskedEvent = e;
+        tgt.dispatchEvent(evt);
+        return evt;
+    }
+
+})();