add timeline

4 files changed, 61 insertions, 0 deletions

diff --git a/src/web/component/timeline/index.css b/src/web/component/timeline/index.css
new file mode 100644
index 0000000..4060deb
--- /dev/null
+++ b/src/web/component/timeline/index.css
@@ -0,0 +1,9 @@
+#container {
+	width: 100%;
+	display: inline-grid;
+	gap: 0px;
+}
+
+#container.tiling .image {
+	aspect-ratio: 1 / 1 !important;
+}
diff --git a/src/web/component/timeline/index.html b/src/web/component/timeline/index.html
new file mode 100644
index 0000000..41d4617
--- /dev/null
+++ b/src/web/component/timeline/index.html
@@ -0,0 +1,2 @@
+<div id="container">
+</div>
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);
+}
diff --git a/src/web/component/timeline/root.zig b/src/web/component/timeline/root.zig
new file mode 100644
index 0000000..9faa40e
--- /dev/null
+++ b/src/web/component/timeline/root.zig
@@ -0,0 +1,8 @@
+const z = @import("z");
+
+pub const component: z.Component = .{
+    .name = .timeline,
+    .body = @embedFile("index.html"),
+    .style = @embedFile("index.css"),
+    .script = @embedFile("index.js"),
+};