1 files changed, 42 insertions, 0 deletions
diff --git a/src/web/component/timeline/index.js b/src/web/component/timeline/index.js
new file mode 100644
index 0000000..0bbbcc2
--- /dev/null
+++ b/src/web/component/timeline/index.js
@@ -0,0 +1,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);
+}