blob: 0bbbcc23b489df771e3491eb235370e398d77a79 (
plain)
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
|
const container = Z.by_id('container');
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
for (let i = 0; i < 100; ++i) {
container.appendChild(Z.native('div', {
className: 'image',
style: {
background: getRandomColor(),
aspectRatio: '1 / ' + (Math.random() + 0.5),
},
}));
}
const set_number_of_rows = (n) => {
container.style.gridTemplateColumns = '1fr '.repeat(n);
container.classList.toggle('tiling', n != 1);
};
let zoom_state = 5;
set_number_of_rows(zoom_state);
Z.document.onwheel = (event) => {
if (!event.ctrlKey) {
return;
}
event.preventDefault();
zoom_state += event.wheelDeltaY / 120;
zoom_state = Math.max(zoom_state, 1);
set_number_of_rows(zoom_state);
}
|
