tests/manual/gestures.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html id="ht">
    <head>
        <title>Touch/Gesture Events</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />

        <style>
        #testNode, #testNode2 {
            background-color: #ddd;
            width:200px;
            height:200px;
            font-family:monospace;
            font-size:7pt;
            position:relative;
        }

        #testNode div {
            white-space:nowrap;
        }

        #testNode.active {
            background-color:#aaa;
        }
        </style>

        <script src="/build/yui/yui.js"></script>

    </head>

    <body id="bd">

        Left Mouse or Finger
        <div id="testNode"></div>
        Center Mouse or Finger, no flick, needs to move 10px
        <div id="testNode2"></div>

        <script>
            YUI({filter:"raw", combine:false}).use("event-gestures", function(Y) {

                var div = Y.Node.one("#testNode"),
                    div2 = Y.Node.one("#testNode2");

                var flickHandler = function(e) {
                    div.append("<div>flick, e:" + [e.flick.velocity, e.flick.distance, e.flick.button] + "</div>");
                };

                var moveStartHandler = function(e) {
                    Y.log("MoveStart: " + e.target + ", " + e.currentTarget);

                    e.target.set("innerHTML", "");
                    e.target.append("<div>gesturemovestart, page:" + [e.pageX, e.pageY, e.button] + "</div>");
                };

                var moveHandler = function(e) {
                    Y.log("Move: " + e.target + ", " + e.currentTarget);

                    e.target.append("<div>gesturemove, page:" + [e.pageX, e.pageY, e.button] + "</div>");
                };

                var moveEndHandler = function(e) {
                    Y.log("MoveEnd: " + e.target + ", " + e.currentTarget);

                    e.target.append("<div>gesturemoveend page:" + [e.pageX, e.pageY, e.button] + "</div>");
                };

                var flickCfg = {
                    minDistance:20,
                    minVelocity:0.3,
		    preventDefault:true
                };

                var moveStartCfg = {
                    minDistance: 10,
                    minTime: 5000,
                    button:1,
                    preventDefault:true
                };

                var moveStartCfg2 = {
                    minDistance: 10,
                    minTime: -1, // must move at least 10 pixels
                    button:2,
                    preventDefault: function(e) {
                        var prevent = false;
                        if (e.target === div2) {
                            prevent = true;
                        }
                        Y.log("prevent:" + prevent);
                        return prevent;
                    }
                };

                div.on("flick", flickHandler, flickCfg);

                div.on("gesturemovestart", moveStartHandler, moveStartCfg);
                div.on("gesturemove", moveHandler);
                div.on("gesturemoveend", moveEndHandler);

                div2.on("gesturemovestart", moveStartHandler, moveStartCfg2);
                div2.on("gesturemove", moveHandler);
                div2.on("gesturemoveend", moveEndHandler);

                div.addClass("active");
            });
        </script>
    </body>
</html>