svtestbed.html revision 0e8e408d4c403319217b987af64a10b134a6e4a4
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai<!DOCTYPE html>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai<html>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <head>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <style type="text/css">
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai body {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai font-family:Arial, Helvetica, sans-serif;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai }
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai .container {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai margin:20px;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai padding:0;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai border:1px solid #000;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai width:200px;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai position:relative;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai }
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai .container .hd {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai padding:10px;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai text-align:center;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai background-color:#ccc;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai }
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai #sv-horiz-content ul {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai margin:0;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai padding:0;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai list-style:none;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai white-space:nowrap;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai }
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai #sv-vert-content ul {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai margin:0;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai padding:0;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai list-style:none;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai }
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai #sv-vert-content ul li {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai width:198px;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai height:198px;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai line-height:198px;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai margin:0;
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai }
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai #sv-horiz-content ul li {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai width:198px;
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
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai .yui3-skin-sam #sv-horiz-content li,
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai .yui3-skin-sam #sv-vert-content 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 display:inline-block;
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;
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>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai </head>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <body class="yui3-skin-sam">
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <div class="container">
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <div class="hd">Horizonal</div>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <!-- SV starts here -->
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <div id="sv-horiz-content">
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 class="container">
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <div class="hd">Vertical</div>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <!-- SV starts here -->
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <div id="sv-vert-content">
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">
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <button id="add">Add</button>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <button id="remove">Remove</button>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <span>(scrollTo 250 first, to test translate fix)</span>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <p>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <button id="disable">Disable</button>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <button id="enable">Enable</button>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <button id="disableFlick">Disable Flick</button>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <button id="enableFlick">Enable Flick</button>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <button id="disableDrag">Disable Drag</button>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <button id="enableDrag">Enable Drag</button>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai </p>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai </div>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai <script type="text/javascript">
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai YUI().use("scrollview", function(Y) {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai var sHoriz = new Y.ScrollView({
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai id:"svHoriz",
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai srcNode:"#sv-horiz-content",
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai height:200,
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai width:200,
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai render:true
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai });
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai var sVert = new Y.ScrollView({
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai id:"svVert",
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai srcNode:"#sv-vert-content",
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai height:200,
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai width:200,
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai render:true
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai });
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai var origFlick = sHoriz.get("flick");
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai var state = Y.one("#state");
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai var clickMap = {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen 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
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai if (sv._scrollsHorizontal) {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai sv.scrollTo(250, 0, 500);
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai } else {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai sv.scrollTo(0, 250, 500);
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai }
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
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai if (sv._scrollsHorizontal) {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai sv.scrollTo(250, 0, 500);
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai } else {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai sv.scrollTo(0, 250, 500);
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai }
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) {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai sv.set("flick", 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");
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai }
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai };
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai Y.one("#toolbar").delegate("click", function(e) {
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai var handler = clickMap[e.currentTarget.get("id")];
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai handler(sVert);
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai handler(sHoriz);
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai }, "button");
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai });
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai </script>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai </body>
9d8a1e46eef4d2ba1724d3656501d1ed2b68ab1bSatyen Desai</html>