jslay/demo2.html at master · tfriedel6/jslay · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
    <head>
        <title>jslay demo 2</title>
        <script type="text/javascript" src="jslay-0.5.0.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
        <script type="text/javascript">
            var firstTime = true;

            function init() {
                screen1();
                window.onresize = function() {
                    jslay.layout();
                };
            }

            function screen1() {
                jslay.clear();
                jslay.setConstant('padding', 10);
                jslay.setRule('button1',
                        {l: 'padding', t: 'padding',
                            w: '100', h: '50'});
                jslay.setRule('button2',
                        {l: '#button1.l', t: '#button1.b + padding',
                            w: '#button1.w', h: '#button1.h'});
                jslay.setRule('button3',
                        {l: 'padding', b: '#main.b - padding',
                            r: '#main.w - padding', h: '50'});
                jslay.setRule('content',
                        {l: '#button1.r + padding', t: 'padding',
                            r: '#main.w - padding', b: '#button3.t - padding'});
                animate(jslay.getLayout());
            }

            function screen2() {
                jslay.clear();
                jslay.setConstant('padding', 30);
                jslay.setRule('button1',
                        {l: 'padding', t: 'padding',
                            w: '150', h: '80'});
                jslay.setRule('button2',
                        {l: '#button1.l', t: '#button1.b + padding',
                            w: '#button1.w', h: '#button1.h'});
                jslay.setRule('button3',
                        {l: 'padding', b: '#main.b - padding',
                            r: '#main.w - padding', h: '100'});
                jslay.setRule('content',
                        {l: '#button1.r + padding', t: 'padding',
                            r: '#main.w - padding', b: '#button3.t - padding'});
                animate(jslay.getLayout());
            }

            function animate(positions) {
                if(firstTime) {
                    jslay.applyLayout(positions);
                    firstTime = false;
                    return;
                }
                for(var elementName in positions) {
                    if(positions.hasOwnProperty(elementName)) {
                        var position = positions[elementName];
                        $('#' + elementName).animate({
                            left: position.left + 'px',
                            top: position.top + 'px',
                            width: position.width + 'px',
                            height: position.height + 'px'
                        }, 400);
                    }
                }
            }
        </script>
        <style type="text/css">
            body {
                overflow: hidden;
                position: absolute;
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }

            .layout_element {
                border: 0;
                margin: 0;
                text-align: center;
                position: absolute;
                padding: 10px;
                box-sizing: border-box;
            }

            .button, #content {
                background-color: lightgrey;
                border: 1px solid black;
            }
        </style>
    </head>
    <body id="main" onload="init()">
        <a id="button1" class="layout_element button" onclick="screen1(); return false;">Screen 1</a>
        <a id="button2" class="layout_element button" onclick="screen2(); return false;">Screen 2</a>
        <a id="button3" class="layout_element button" onclick="screen1(); return false;">Screen 1</a>
        <div id="content" class="layout_element">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
            voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
            officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
            qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
            labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
            culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </body>
</html>