svtestbed.html revision 03f6549a37d5e5e66d82029017e7482b1d0f0154
<!DOCTYPE html>
<html>
<head>
body {
font-family:Arial, Helvetica, sans-serif;
}
.container-vert {
margin:20px;
padding:0;
border:1px solid #000;
width:200px;
display:inline-block;
*display:inline;
*zoom:1;
vertical-align:top;
}
.container-horiz {
margin:20px;
padding:0;
border:1px solid #000;
width:300px;
display:inline-block;
*display:inline;
*zoom:1;
vertical-align:top;
}
.container-horiz .hd, .container-vert .hd {
padding:10px;
text-align:center;
color:#fff;
background-color:#6d83a1;
background: -webkit-gradient(
linear,
left top,
left bottom,
from(#d8dee6),
color-stop(0.01, #b0bccc),
color-stop(0.49, #889bb3),
color-stop(0.50, #8094ae),
to(#6d83a1)
);
}
#sVert, #sHoriz {
background:#fff;
}
#sv-horiz-content ul {
margin:0;
padding:0;
list-style:none;
white-space:nowrap;
}
#sv-vert-content ul {
margin:0;
padding:0;
list-style:none;
background:#fff;
}
#sv-vert-content ul li {
width:198px;
height:298px;
line-height:298px;
margin:0;
}
#sv-horiz-content ul li {
width:298px;
height:198px;
line-height:198px;
margin:0;
display:inline-block;
*display:inline;
*zoom:1;
}
.yui3-skin-sam #sv-horiz-content li,
.yui3-skin-sam #sv-vert-content li {
padding:0;
border:1px solid #00ff00;
background:#eee;
font-size:150px;
text-align:center;
vertical-align:middle;
}
#state div {
display:inline-block;
margin:10px 3px;
border:1px solid #000;
background-color:#ccc;
color:#aaa;
padding:2px 5px;
}
#state div.true {
background-color:#a00;
color:#000;
}
</style>
<!--script src="http://yui.yahooapis.com/3.3.0/build/yui/yui.js" type="text/javascript" charset="utf-8"></script-->
</head>
<body class="yui3-skin-sam">
<div class="container-horiz">
<div class="hd">Horizonal</div>
<!-- SV starts here -->
<div id="sv-horiz-content">
<ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
</div>
</div>
<div class="container-vert">
<div class="hd">Vertical</div>
<!-- SV starts here -->
<div id="sv-vert-content">
<ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
</div>
</div>
<div id="state">
<div id="disabled">Disabled</div>
<div id="flickDisabled">Flick Disabled</div>
<div id="dragDisabled">Drag Disabled</div>
<div id="paginated">Paginated</div>
</div>
<div id="toolbar">
<p>
<button id="add">Add</button>
<button id="remove">Remove</button>
<span>(scrollTo 250 first, to test translate fix)</span>
</p>
<p>
<button id="disable">Disable</button>
<button id="enable">Enable</button>
<button id="disableFlick">Disable Flick</button>
<button id="enableFlick">Enable Flick</button>
<button id="disableDrag">Disable Drag</button>
<button id="enableDrag">Enable Drag</button>
</p>
<p>
<button id="paginate">Paginate</button>
<button id="unpaginate">UnPaginate</button>
</p>
</div>
<script type="text/javascript">
YUI({filter:"raw"}).use("scrollview", "scrollview-paginator", function(Y) {
var sHoriz = new Y.ScrollView({
id:"sHoriz",
srcNode:"#sv-horiz-content",
height:200,
width:300,
flick: {
minDistance: 10,
minVelocity:0.3,
axis:"x"
},
render:true
});
var sVert = new Y.ScrollView({
id:"sVert",
srcNode:"#sv-vert-content",
height:300,
width:200,
flick: {
minDistance: 10,
minVelocity:0.3,
axis:"y"
},
render:true
});
sHoriz._origFlick = sHoriz.get("flick");
sVert._origFlick = sVert.get("flick");
var state = Y.one("#state");
var clickMap = {
add: function(sv) {
var list = sv.get("contentBox").one("ul");
var children = list.get("children");
sv.once("scrollEnd", function() {
sv.syncUI();
});
if (sv._scrollsHorizontal) {
sv.scrollTo(250, 0, 500);
} else {
sv.scrollTo(0, 250, 500);
}
},
remove: function(sv) {
var list = sv.get("contentBox").one("ul");
var children = list.get("children");
var lastItem;
if (children.size() > 3) {
sv.once("scrollEnd", function() {
children.pop().remove(true);
sv.syncUI();
});
if (sv._scrollsHorizontal) {
sv.scrollTo(250, 0, 500);
} else {
sv.scrollTo(0, 250, 500);
}
}
},
disable: function(sv) {
sv.disable();
state.one("#disabled").addClass("true");
},
enable: function(sv) {
sv.enable();
state.one("#disabled").removeClass("true");
},
disableFlick: function(sv) {
sv.set("flick", false);
state.one("#flickDisabled").addClass("true");
},
enableFlick: function(sv) {
sv.set("flick", sv._origFlick);
state.one("#flickDisabled").removeClass("true");
},
disableDrag: function(sv) {
sv.set("drag", false);
state.one("#dragDisabled").addClass("true");
},
enableDrag: function(sv) {
sv.set("drag", true);
state.one("#dragDisabled").removeClass("true");
},
paginate: function(sv) {
selector: "> ul > li"
});
sv.syncUI();
state.one("#paginated").addClass("true");
},
unpaginate: function(sv) {
state.one("#paginated").removeClass("true");
}
};
Y.one("#toolbar").delegate("click", function(e) {
var handler = clickMap[e.currentTarget.get("id")];
handler(sVert);
handler(sHoriz);
}, "button");
});
</script>
</body>
</html>