tests/manual/svtestbed.html

ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai<html>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai    <head>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai        <style type="text/css">
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai        .yui3-scrollview-loading {
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            visibility:hidden;
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            height:0;
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            *height:auto;
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai        }
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai        .container {
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai            margin:20px;
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai            padding:0;
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai            border:1px solid #000;
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            vertical-align:top;
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai            display:inline-block;
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai            *display:inline;
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai            *zoom:1;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai        }
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai        .container .hd {
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            font:13px/1.231 arial,helvetica,clean,sans-serif;
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            font-size:108%;
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            font-weight:bold;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            padding:10px;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            text-align:center;
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai            color:#fff;
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai            background-color:#6d83a1;
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai            background: -webkit-gradient(
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                linear,
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                left top,
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                left bottom,
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                from(#d8dee6),
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                color-stop(0.01, #b0bccc),
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                color-stop(0.49, #889bb3),
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                color-stop(0.50, #8094ae),
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                to(#6d83a1)
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai            );
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai        }
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai        .vert-container {
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            width:200px;
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai        }
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai        .horiz-container {
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            width:300px;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai        }
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai        .horiz-content ul, .vert-content ul {
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            font:13px/1.231 arial,helvetica,clean,sans-serif;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            margin:0;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            padding:0;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            list-style:none;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            white-space:nowrap;
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            *zoom:1;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai        }
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai        .vert-content ul li {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            width:198px;
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai            height:298px;
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai            line-height:298px;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            margin:0;
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            *zoom:1;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai        }
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai        .horiz-content ul li {
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai            width:298px;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            height:198px;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            line-height:198px;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            margin:0;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            display:inline-block;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            *display:inline;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            *zoom:1;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai        }
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai        .horiz-content ul li,
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai        .vert-content ul li {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            padding:0;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            border:1px solid #00ff00;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            background:#eee;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            font-size:150px;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            text-align:center;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            vertical-align:middle;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai        }
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai        #state div {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            margin:10px 3px;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            border:1px solid #000;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            background-color:#ccc;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            color:#aaa;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            padding:2px 5px;
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            display:inline-block;
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            *display:inline;
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            *zoom:1;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai        }
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai        #state div.true {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            background-color:#a00;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            color:#000;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai        }
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai        </style>
0e8e408d4c403319217b987af64a10b134a6e4a4Satyen Desai        <script src="/build/yui/yui.js" type="text/javascript" charset="utf-8"></script>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai        <!--script src="http://yui.yahooapis.com/3.4.0/build/yui/yui.js" type="text/javascript" charset="utf-8"></script-->
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai    </head>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai    <body class="yui3-skin-sam">
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai        <div class="container vert-container">
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            <div class="hd">Vertical</div>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            <!-- SV starts here -->
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            <div id="sv-vert-content" class="vert-content yui3-scrollview-loading">
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            </div>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai        </div>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai        <div class="container horiz-container">
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            <div class="hd">Horizonal</div>
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            <!-- SV starts here -->
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            <div id="sv-horiz-content" class="horiz-content yui3-scrollview-loading">
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            </div>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai        </div>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai        <div class="container vert-container">
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            <div class="hd">Vertical Paged</div>
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            <!-- SV starts here -->
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            <div id="sv-vert-paged-content" class="vert-content yui3-scrollview-loading">
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            </div>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai        </div>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai        <div class="container horiz-container">
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            <div class="hd">Horizonal Paged</div>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            <!-- SV starts here -->
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            <div id="sv-horiz-paged-content" class="horiz-content yui3-scrollview-loading">
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            </div>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai        </div>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai        <div id="state">
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            <div id="disabled">Disabled</div>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            <div id="flickDisabled">Flick Disabled</div>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            <div id="dragDisabled">Drag Disabled</div>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai        </div>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai        <div id="toolbar">
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai            <p>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                <button id="scrollTo">Scroll To</button>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            </p>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            <p>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                <button id="add">Add Content</button>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                <button id="remove">Remove Content</button>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                <span>(scrollTo somewhere non-0,0 first, to test translate fix)</span>
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai            </p>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            <p>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                <button id="disable">Disable</button>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                <button id="enable">Enable</button>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            </p>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            <p>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                <button id="disableFlick">Disable Flick</button>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                <button id="enableFlick">Enable Flick</button>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            </p>
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai            <p>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                <button id="disableDrag">Disable Drag</button>
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                <button id="enableDrag">Enable Drag</button>
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai            </p>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai        </div>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai        <script type="text/javascript">
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai            var svHoriz, svVert, svHorizPaged, svVertPaged;
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai            YUI({filter:"raw"}).use("scrollview", "scrollview-paginator", function(Y) {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                svHoriz = new Y.ScrollView({
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    id:"svHoriz",
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    srcNode:"#sv-horiz-content",
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    height:200,
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                    width:300,
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                    flick: {
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                        minDistance: 10,
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                        minVelocity:0.3,
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                        axis:"x"
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                    },
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    render:true
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                });
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                svVert = new Y.ScrollView({
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    id:"svVert",
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    srcNode:"#sv-vert-content",
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                    height:300,
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    width:200,
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                    flick: {
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                        minDistance: 10,
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                        minVelocity:0.3,
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                        axis:"y"
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                    },
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    render:true
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                });
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                svHorizPaged = new Y.ScrollView({
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    id:"svHorizPaged",
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    srcNode:"#sv-horiz-paged-content",
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    height:200,
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    width:300,
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    flick: {
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        minDistance: 10,
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        minVelocity:0.3,
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        axis:"x"
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    },
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    plugins: [{
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        fn:Y.Plugin.ScrollViewPaginator,
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        cfg:{
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                            selector:">ul>li"
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        }
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    }],
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    render:true
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                });
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                svVertPaged = new Y.ScrollView({
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    id:"svVertPaged",
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    srcNode:"#sv-vert-paged-content",
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    height:300,
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    width:200,
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    flick: {
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        minDistance: 10,
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        minVelocity:0.3,
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        axis:"y"
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    },
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    plugins: [{
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        fn:Y.Plugin.ScrollViewPaginator,
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        cfg:{
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                            selector:">ul>li"
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        }
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    }],
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    render:true
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                });
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                svHoriz._origFlick = svHoriz.get("flick");
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                svVert._origFlick = svVert.get("flick");
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                svVertPaged._origFlick = svVertPaged.get("flick");
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                svHorizPaged._origFlick = svHorizPaged.get("flick");
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                var state = Y.one("#state");
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                var clickMap = {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    _scrollPositions : [ 200, 75, 450, 600, 0 ],
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    _scrollToNonZero : function(sv) {
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        var scrollDim = (sv._scrollsHorizontal) ?  "scrollX" : "scrollY",
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                            position = sv.get(scrollDim);
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        position = (position === 250) ? 100 : 250;
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        sv.set(scrollDim, position, {duration:350});
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    },
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    add: function(sv) {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        var list = sv.get("contentBox").one("ul");
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        var children = list.get("children");
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        sv.once("scrollEnd", function() {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                            list.append("<li>" + (children.size() + 1) + "</li>");
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                            sv.syncUI();
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        });
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        this._scrollToNonZero(sv);
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    },
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    remove: function(sv) {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        var list = sv.get("contentBox").one("ul");
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        var children = list.get("children");
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        var lastItem;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        if (children.size() > 3) {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                            sv.once("scrollEnd", function() {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                                children.pop().remove(true);
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                                sv.syncUI();
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                            });
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                            this._scrollToNonZero(sv);
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        }
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    },
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    disable: function(sv) {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        sv.disable();
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        state.one("#disabled").addClass("true");
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    },
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    enable: function(sv) {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        sv.enable();
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        state.one("#disabled").removeClass("true");
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    },
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    disableFlick: function(sv) {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        sv.set("flick", false);
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        state.one("#flickDisabled").addClass("true");
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    },
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    enableFlick: function(sv) {
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                        sv.set("flick", sv._origFlick);
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        state.one("#flickDisabled").removeClass("true");
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    },
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    disableDrag: function(sv) {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        sv.set("drag", false);
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        state.one("#dragDisabled").addClass("true");
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    },
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    enableDrag: function(sv) {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        sv.set("drag", true);
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                        state.one("#dragDisabled").removeClass("true");
03f6549a37d5e5e66d82029017e7482b1d0f0154Satyen Desai                    },
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    scrollTo: function(sv) {
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        var positions = this._scrollPositions.length,
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                            i = sv._scrollPositionIndex || 0,
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                            position = this._scrollPositions[(i % positions)];
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                            sv._scrollPositionIndex = i+1;
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        if (sv._scrollsHorizontal) {
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                            sv.set("scrollX", position, {duration:350});
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        } else {
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                            sv.set("scrollY", position, {duration:350});
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        }
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                    }
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                };
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                var pagedClickMap = Y.mix(Y.Object(clickMap), {
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    _scrollToNonZero: function(sv) {
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        var index = (sv.pages.get("index") == 2) ? 1 : 2;
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        sv.pages.set("index", index);
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    },
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    scrollTo: function(sv) {
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        var pages = sv.pages.get("total"),
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                            current = sv.pages.get("index"),
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                            position = (current + 1) % pages;
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                        sv.pages.set("index", position);
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    }
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                }, true);
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                Y.one("#toolbar").delegate("click", function(e) {
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    var method = e.currentTarget.get("id");
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    clickMap[method](svVert);
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    clickMap[method](svHoriz);
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    pagedClickMap[method](svVertPaged);
ea9d934cb7e379c8bb93c95c66219c403f6eeb30Satyen Desai                    pagedClickMap[method](svHorizPaged);
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai                }, "button");
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai            });
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai        </script>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai    </body>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai</html>