From 35fb9361b2113f4ebc7179b9421f5f3b8a98a6c7 Mon Sep 17 00:00:00 2001 From: Nathan Reiner Date: Thu, 28 May 2026 18:37:11 +0200 Subject: add timeline --- src/main.zig | 10 +++------ src/web/badge/index.css | 5 ----- src/web/badge/index.html | 3 --- src/web/badge/index.js | 1 - src/web/badge/root.zig | 8 ------- src/web/component/image/index.css | 0 src/web/component/image/index.html | 2 ++ src/web/component/image/index.js | 1 + src/web/component/image/root.zig | 8 +++++++ src/web/component/root.zig | 6 +++++ src/web/component/timeline/index.css | 9 ++++++++ src/web/component/timeline/index.html | 2 ++ src/web/component/timeline/index.js | 42 +++++++++++++++++++++++++++++++++++ src/web/component/timeline/root.zig | 8 +++++++ src/web/index.css | 7 ++++++ src/web/index.html | 3 +-- src/z/z.js | 8 +++++-- 17 files changed, 95 insertions(+), 28 deletions(-) delete mode 100644 src/web/badge/index.css delete mode 100644 src/web/badge/index.html delete mode 100644 src/web/badge/index.js delete mode 100644 src/web/badge/root.zig create mode 100644 src/web/component/image/index.css create mode 100644 src/web/component/image/index.html create mode 100644 src/web/component/image/index.js create mode 100644 src/web/component/image/root.zig create mode 100644 src/web/component/root.zig create mode 100644 src/web/component/timeline/index.css create mode 100644 src/web/component/timeline/index.html create mode 100644 src/web/component/timeline/index.js create mode 100644 src/web/component/timeline/root.zig diff --git a/src/main.zig b/src/main.zig index f17214c..82f5824 100644 --- a/src/main.zig +++ b/src/main.zig @@ -8,7 +8,7 @@ const http = @import("http"); const html = @import("html"); const z = @import("z"); -const badge = @import("web/badge/root.zig"); +const components = @import("web/component/root.zig").components; const document: html.Element = .native(.html, .{}, .children(&.{ .native(.head, .{}, .children(&.{ @@ -17,15 +17,11 @@ const document: html.Element = .native(.html, .{}, .children(&.{ .name = "viewport", .content = "width=device-width, initial-scale=1.0", }, .void), - z.env(&.{ - badge.component, - }), + z.style.load(@embedFile("web/index.css")), + z.env(components), })), .native(.body, .{}, .children(&.{ z.html.load(@embedFile("web/index.html")), - z.component(.badge, .{}, .children(&.{ - .native(.span, .{ .slot = "content" }, .content("Hello Z (direct)!")), - })), })), })); diff --git a/src/web/badge/index.css b/src/web/badge/index.css deleted file mode 100644 index 3f237d6..0000000 --- a/src/web/badge/index.css +++ /dev/null @@ -1,5 +0,0 @@ -#container { - background: red; - padding: 5px; - border-radius: 5px; -} diff --git a/src/web/badge/index.html b/src/web/badge/index.html deleted file mode 100644 index dcb38e1..0000000 --- a/src/web/badge/index.html +++ /dev/null @@ -1,3 +0,0 @@ -
- -
diff --git a/src/web/badge/index.js b/src/web/badge/index.js deleted file mode 100644 index 60fbac5..0000000 --- a/src/web/badge/index.js +++ /dev/null @@ -1 +0,0 @@ -Z.by_id('sdf') diff --git a/src/web/badge/root.zig b/src/web/badge/root.zig deleted file mode 100644 index 5e8ea25..0000000 --- a/src/web/badge/root.zig +++ /dev/null @@ -1,8 +0,0 @@ -const z = @import("z"); - -pub const component: z.Component = .{ - .name = .badge, - .body = @embedFile("index.html"), - .style = @embedFile("index.css"), - .script = @embedFile("index.js"), -}; diff --git a/src/web/component/image/index.css b/src/web/component/image/index.css new file mode 100644 index 0000000..e69de29 diff --git a/src/web/component/image/index.html b/src/web/component/image/index.html new file mode 100644 index 0000000..918c5df --- /dev/null +++ b/src/web/component/image/index.html @@ -0,0 +1,2 @@ +
+
diff --git a/src/web/component/image/index.js b/src/web/component/image/index.js new file mode 100644 index 0000000..d88023d --- /dev/null +++ b/src/web/component/image/index.js @@ -0,0 +1 @@ +console.log(Z.by_selector('div')); diff --git a/src/web/component/image/root.zig b/src/web/component/image/root.zig new file mode 100644 index 0000000..7c8ec77 --- /dev/null +++ b/src/web/component/image/root.zig @@ -0,0 +1,8 @@ +const z = @import("z"); + +pub const component: z.Component = .{ + .name = .image, + .body = @embedFile("index.html"), + .style = @embedFile("index.css"), + .script = @embedFile("index.js"), +}; diff --git a/src/web/component/root.zig b/src/web/component/root.zig new file mode 100644 index 0000000..226f3f7 --- /dev/null +++ b/src/web/component/root.zig @@ -0,0 +1,6 @@ +const z = @import("z"); + +pub const components: []const z.Component = &.{ + @import("image/root.zig").component, + @import("timeline/root.zig").component, +}; 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 @@ +
+
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"), +}; diff --git a/src/web/index.css b/src/web/index.css index a93ea47..b5647b1 100644 --- a/src/web/index.css +++ b/src/web/index.css @@ -1,4 +1,11 @@ body { padding: 0; margin: 0; + width: 100vw; + height: 100vh; +} + +#timeline { + display: block; + height: 100%; } diff --git a/src/web/index.html b/src/web/index.html index 3bf9953..d2bc6fe 100644 --- a/src/web/index.html +++ b/src/web/index.html @@ -1,3 +1,2 @@ - - Hello Z! + diff --git a/src/z/z.js b/src/z/z.js index a5a1b92..ba07b9e 100644 --- a/src/z/z.js +++ b/src/z/z.js @@ -47,7 +47,7 @@ class Zenv { populate_attributes(obj, attrs) { for (const attr in attrs) { if (typeof(obj[attr]) == 'object' && typeof(attrs[attr]) == 'object') { - populate_attributes(obj[attr], attrs[attr]); + this.populate_attributes(obj[attr], attrs[attr]); } else { obj[attr] = attrs[attr]; } @@ -56,7 +56,7 @@ class Zenv { native(name, options) { const element = document.createElement(name); - Zenv.populate_attributes(element, options); + this.populate_attributes(element, options); return element; } @@ -71,6 +71,10 @@ class Zenv { by_selector_all(query) { return this.document.shadowRoot.querySelectorAll(query); } + + get body() { + return this.document.shadowRoot; + } } Z = new Zenv(document.body); -- cgit v1.2.3-70-g09d2