tests/manual/svtestbedpct.html

673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai<html>
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai    <head>
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        <style type="text/css">
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        html, body {
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            margin:0;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            padding:0;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        }
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        .yui3-scrollview-loading {
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            visibility:hidden;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            height:0;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            *height:auto;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        }
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        .container {
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            margin:0;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            padding:0;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            border:1px solid #000;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        }
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        .container .hd {
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            font:13px/1.231 arial,helvetica,clean,sans-serif;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            font-size:108%;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            font-weight:bold;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            padding:10px;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            text-align:center;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            color:#fff;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            background-color:#6d83a1;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            background: -webkit-gradient(
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                linear,
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                left top,
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                left bottom,
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                from(#d8dee6),
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                color-stop(0.01, #b0bccc),
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                color-stop(0.49, #889bb3),
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                color-stop(0.50, #8094ae),
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                to(#6d83a1)
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            );
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        }
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        #page {
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            display:inline-block;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            color:#a00;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            background-color:#fff;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            height:1.3em;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            line-height:1.3em;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            width:1.3em;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            border:1px solid #000;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            vertical-align:middle;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        }
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        .horiz-content ul {
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            font:13px/1.231 arial,helvetica,clean,sans-serif;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            margin:0;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            padding:0;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            list-style:none;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            white-space:nowrap;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            *zoom:1;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        }
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        .horiz-content ul li {
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            width:100%;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            height:100px;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            line-height:100px;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            margin:0;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            white-space:normal;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            display:inline-block;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            *display:inline;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            *zoom:1;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        }
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        .horiz-content ul li {
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            padding:0;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            border:1px solid #00ff00;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            background:#eee;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            font-size:50px;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            text-align:center;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            vertical-align:middle;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        }
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        </style>
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        <script src="/build/yui/yui.js" type="text/javascript" charset="utf-8"></script>
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai    </head>
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai    <body class="yui3-skin-sam">
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        <div class="container horiz-container">
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            <div class="hd">Page: <span id="page"></span></div>
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            <!-- SV starts here -->
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            <div id="sv-horiz-paged-content" class="horiz-content yui3-scrollview-loading">
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            </div>
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        </div>
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        <script type="text/javascript">
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            YUI({filter:"raw"}).use("scrollview", "scrollview-paginator", function(Y) {
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                function allowPageScroll(sv) {
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                    sv._prevent.move = false;
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                    var bb = sv.get("boundingBox");
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                    bb.on("gesturemovestart", function(e) {
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                        var origXY = [e.pageX, e.pageY];
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                        // Figure out direction on first move event, and then detach
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                        bb.once("gesturemove", function(e) {
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                            var currXY = [e.pageX, e.pageY],
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                                xMove = Math.abs(currXY[0] - origXY[0]),
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                                yMove = Math.abs(currXY[1] - origXY[1]),
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                                angleMove = (180/Math.PI)*(Math.atan2(yMove,xMove));
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                            if (angleMove < 60) {
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                                e.preventDefault();
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                            }
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                        });
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                    });
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                }
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                function handleResize(e) {
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                    this.syncUI();
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                    this.pages.scrollTo(this.pages.get("index"));
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                }
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                function bindPageUI(page, sv) {
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                    page.setContent(sv.pages.get("index") + 1);
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                    sv.pages.after("indexChange", function(e) {
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                        page.setContent(e.newVal + 1);
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                    });
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                }
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                var svHorizPaged = new Y.ScrollView({
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                    id:"svHorizPaged",
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                    srcNode:"#sv-horiz-paged-content",
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                    flick: {
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                        minDistance: 10,
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                        minVelocity:0.5,
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                        axis:"x"
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                    },
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                    plugins: {
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                        fn:Y.Plugin.ScrollViewPaginator,
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                        cfg:{
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                            selector:">ul>li"
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                        }
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                    },
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                    render:true
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                });
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                allowPageScroll(svHorizPaged);
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                bindPageUI(Y.one("#page"), svHorizPaged);
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai                Y.one("window").on("resize", Y.bind(handleResize, svHorizPaged));
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai            });
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai        </script>
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai    </body>
673d3de9a184f19cf3a74e0172dd78ba3612ce8dSatyen Desai</html>