tests/manual/svtestbed.html

	svtestbed.html revision 0e8e408d4c403319217b987af64a10b134a6e4a4
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff<!DOCTYPE html>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff<html>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff    <head>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        <style type="text/css">
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        body {
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            font-family:Arial, Helvetica, sans-serif;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        }
8cf870d281dc8c242f083d14dfef05f24aa5fceeJnRouvignac
8cf870d281dc8c242f083d14dfef05f24aa5fceeJnRouvignac        .container {
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            margin:20px;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            padding:0;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            border:1px solid #000;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            width:200px;
8cf870d281dc8c242f083d14dfef05f24aa5fceeJnRouvignac            position:relative;
8cf870d281dc8c242f083d14dfef05f24aa5fceeJnRouvignac        }
8cf870d281dc8c242f083d14dfef05f24aa5fceeJnRouvignac
8cf870d281dc8c242f083d14dfef05f24aa5fceeJnRouvignac        .container .hd {
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            padding:10px;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            text-align:center;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            background-color:#ccc;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        }
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        #sv-horiz-content ul {
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            margin:0;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            padding:0;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            list-style:none;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            white-space:nowrap;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        }
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        #sv-vert-content ul {
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            margin:0;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            padding:0;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            list-style:none;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        }
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        #sv-vert-content ul li {
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            width:198px;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            height:198px;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            line-height:198px;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            margin:0;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        }
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        #sv-horiz-content ul li {
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            width:198px;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            height:198px;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            line-height:198px;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            margin:0;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            display:inline-block;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            *display:inline;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            *zoom:1;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        }
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        .yui3-skin-sam #sv-horiz-content li,
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        .yui3-skin-sam #sv-vert-content li {
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            padding:0;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            border:1px solid #00ff00;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            background:#eee;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            font-size:150px;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            text-align:center;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            vertical-align:middle;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        }
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        #state div {
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            display:inline-block;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            margin:10px 3px;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            border:1px solid #000;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            background-color:#ccc;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            color:#aaa;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            padding:2px 5px;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        }
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        #state div.true {
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            background-color:#a00;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            color:#000;
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        }
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        </style>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        <script src="/build/yui/yui.js" type="text/javascript" charset="utf-8"></script>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff    </head>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff    <body class="yui3-skin-sam">
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        <div class="container">
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            <div class="hd">Horizonal</div>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            <!-- SV starts here -->
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            <div id="sv-horiz-content">
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff                <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            </div>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        </div>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        <div class="container">
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            <div class="hd">Vertical</div>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            <!-- SV starts here -->
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            <div id="sv-vert-content">
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff                <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            </div>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        </div>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        <div id="state">
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            <div id="disabled">Disabled</div>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            <div id="flickDisabled">Flick Disabled</div>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            <div id="dragDisabled">Drag Disabled</div>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        </div>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        <div id="toolbar">
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            <button id="add">Add</button>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            <button id="remove">Remove</button>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            <span>(scrollTo 250 first, to test translate fix)</span>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            <p>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff                <button id="disable">Disable</button>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff                <button id="enable">Enable</button>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff                <button id="disableFlick">Disable Flick</button>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff                <button id="enableFlick">Enable Flick</button>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff                <button id="disableDrag">Disable Drag</button>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff                <button id="enableDrag">Enable Drag</button>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            </p>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        </div>
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff        <script type="text/javascript">
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff            YUI().use("scrollview", function(Y) {
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff                var sHoriz = new Y.ScrollView({
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff                    id:"svHoriz",
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff                    srcNode:"#sv-horiz-content",
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff                    height:200,
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff                    width:200,
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff                    render:true
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff                });
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff                var sVert = new Y.ScrollView({
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff                    id:"svVert",
d25372dc8e65a9ed019a88fdf659ca61313f1b31jcduff                    srcNode:"#sv-vert-content",
                    height:200,
                    width:200,
                    render:true
                });

                var origFlick = sHoriz.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() {
                            list.append("<li>" + (children.size() + 1) + "</li>");
                            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", 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");
                    }
                };

                Y.one("#toolbar").delegate("click", function(e) {
                    var handler = clickMap[e.currentTarget.get("id")];

                    handler(sVert);
                    handler(sHoriz);

                }, "button");

            });
        </script>
    </body>
</html>