ps/ui/js/grid.js


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

/**/

var $ = {
    'info': 'info'
};
var info = document.getElementById('info');

info.style.transition = 'opacity 2s ease-in 0s';
info.classList.add('on');
info.style.position = 'fixed';
info.style.top      = '10rem';

// Populate Grid
var scene = document.getElementById('scene');
var view = document.createElement('SECTION');

view.style.width    = screen.availWidth;
view.style.height   = screen.availHeight;
view.classList.add('view');

var row = 0, col = 0;

for (var i = 0; i < 100; i++) {
    var v = view.cloneNode();
    v.id  = 'view-' + i;
    v.style.left = 'calc(' + (i * view.style.width) + ' + 0px)';
    v.style.top  = 'calc(' + (Math.floor(i / 10) * view.style.height) + ' + 0px)';
    v.style.position = 'relative';
    scene.appendChild(v);
}