docs/examples/example 05 - scrollbars/index.html from GreyRook/gown.js

docs/examples/example 05 - scrollbars/index.html
Summary

Maintainability

Test Coverage

Issues
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>gown.js example: scrollbar</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
    </style>
    <script src="../../lib/pixi/pixi.js"></script>
    <script src="../../dist/gown.js"></script>
</head>
<body>
<script>
    var stage = new PIXI.Container();
    var sizes = {w: 800, h: 600};
    var renderer = PIXI.autoDetectRenderer(sizes.w, sizes.h, {backgroundColor : 0xffffff});
    document.body.appendChild(renderer.view);

    var grp, btn, sa_grp;
    var inner_horizontal, horizontal_container, horizontal_scrollbar;

    function onComplete() {
        var i;

        // HORIZONTAL
        inner_horizontal = new GOWN.LayoutGroup();
        inner_horizontal.layout = new GOWN.layout.HorizontalLayout();
        inner_horizontal.layout.gap = 10;

        // add some buttons
        for (i = 0; i < 50; i++) {
            btn = new GOWN.Button();
            btn.height = 25;
            btn.width = 80;
            btn.label = (i+1)+". button";
            inner_horizontal.addChild(btn);
        }

        horizontal_container = new GOWN.ScrollContainer();
        horizontal_container.addChild(inner_horizontal);
        stage.addChild(horizontal_container);

        horizontal_scrollbar = new GOWN.ScrollBar();
        horizontal_scrollbar.container = horizontal_container;
        horizontal_scrollbar.y = 60;
        horizontal_scrollbar.x = 10;
        horizontal_scrollbar.width = 780;
        stage.addChild(horizontal_scrollbar);

        // TODO: let the scrollbar move the content,
        // implement locationToValue? implement thumb_touchHandler?

        /*
        inner_scroll_horizontal = new GOWN.ScrollArea();
        inner_scroll_horizontal.width = 500;

        inner_scroll_horizontal.content = inner_horizontal;
        inner_scroll_horizontal.x = 200;
        stage.addChild(inner_scroll_horizontal);

        sb_horizontal = new GOWN.ScrollBar(inner_scroll_horizontal);
        stage.addChild(sb_horizontal);
        sb_horizontal.y = inner_scroll_horizontal.height;
        sb_horizontal.x = inner_scroll_horizontal.x;
        sb_horizontal.width = inner_scroll_horizontal.width;

        // VERTICAL
        var grp = new GOWN.LayoutGroup();
        var inner = new GOWN.LayoutGroup();
        inner.layout = new GOWN.layout.VerticalLayout();
        inner.layout.gap = 10;

        // add some buttons
        for (i = 0; i < 12; i++) {
            btn = new GOWN.Button();
            btn.height = 25;
            btn.width = 80;
            btn.label = (i+1)+". button";
            inner.addChild(btn);
        }
        */
/*
        var inner_scroll = new GOWN.ScrollArea(inner);
        inner_scroll.width = 100;
        inner_scroll.height = 150;
        grp.addChild(inner_scroll);
*/
/*
        var sb = new GOWN.ScrollBar(inner_scroll);
        grp.addChild(sb);
        sb.x = inner_scroll.width;
        sb.height = inner_scroll.height;

        stage.addChild(grp);
        grp.y = 100;
*/
        requestAnimationFrame(animate);
    }

    var theme = new GOWN.ThemeParser("../../themes/assets/aeon_desktop/aeon_desktop.json");
    theme.once(GOWN.Theme.COMPLETE, onComplete, this);
    var shapeTheme;

    function animate() {
        // render the stage
        renderer.render(stage);
        requestAnimationFrame(animate);
    }
    GOWN.loader.load();
</script>

</body>
</html>