docs/examples/example 15 - resize canvas/index.html from GreyRook/gown.js

docs/examples/example 15 - resize canvas/index.html
Summary

Maintainability

Test Coverage

Issues
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>gown.js example: resize canvas using css-element-queries</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #ffffff;
        }

        #content {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #header {
            position: relative;
            height: 40px;
            width: 100%;
            font-size: 20px;
            text-align: center;
            border: 1px solid blue;
            left: 0;
            right: 0;
        }

        #middle {
            position: absolute;
            top: 40px;
            bottom: 30px;
            left:0;
            right:0;
        }

        #left {
            position: relative;
            left: 0;
            width: 300px;
            height: 100%;
            border: 1px solid yellow;
        }

        #main {
            position: absolute;
            left: 300px;
            right: 150px;
            top: 0px;
            bottom: 0px;
            border: 1px solid green;
            position: absolute;

        }

        #right {
            height: 100%;
            position: absolute;
            right: 0;
            width: 150px;
            top: 0;
            border: 1px solid red;
        }

        #center {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 300px;
            right: 150px;
        }

        #footer {
            height: 30px;
            font-size: 20px;
            text-align: center;
            bottom: 0;
            right: 0;
            position: fixed;
            width: 100%;
            border: 1px solid orange;
        }
    </style>
    <script src="../../lib/pixi/pixi.js"></script>
    <script src="../../dist/gown.js"></script>
    <!--script src="lib/css-element-queries/src/ResizeSensor.js"></script-->
</head>
<body>
    <div id="content">
        <div id="header">GOWN.js Header</div>
        <div id="middle">
            <div id="left">sth. on the left</div>
            <div id="center"></div>
            <div id="right">some right text</div>
        </div>
        <div id="footer">this could be your corporate information in the footer...</div>
    </div>
<script>
    var config = {backgroundColor: 0xffffff};
    var aeontheme;
    var aeonbtn;
    var app;

    document.addEventListener("DOMContentLoaded", function(event) {

        function onCompleteAeon() {
            var app = new GOWN.Application(config, GOWN.Application.SCREEN_MODE_RESIZE, 'center');
            aeonbtn = new GOWN.Button(aeontheme);
            aeonbtn.percentWidth = 100;
            aeonbtn.percentHeight = 100;
            aeonbtn.label = "scale button";
            app.addChild(aeonbtn);
            app.layout = new GOWN.layout.HorizontalLayout();

            app.on('resize', function(eventData) {
                app.layout.layoutContainer(app);
            });
            app.layout.layoutContainer(app);
            aeonbtn.on(GOWN.Button.TRIGGERED, function () {
                if (window.console) {
                    console.log("you clicked the button!");
                }
            });
        }

        aeontheme = new GOWN.ThemeParser("../../themes/assets/aeon_desktop/aeon_desktop.json");
        aeontheme.once(GOWN.Theme.COMPLETE, onCompleteAeon, this);
        GOWN.loader.load();
    });

</script>

</body>
</html>