jntn/zendegi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update demo page

Browse Source
This commit is contained in:
Jonatan Granqvist
2026-03-05 19:18:54 +01:00
parent b2c88dc7cd
commit 44ffe219b1
1 changed files with 81 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
packages/z-flutter/web/index.html
View File

@@ -64,7 +64,7 @@
#event-log .type { color: #58a6ff; }
#event-log .time { color: #6e7681; margin-right: 8px; }
#event-log .payload { color: #8b949e; }
#flutter-container { flex: 1; min-height: 0; }
#flutter-container { flex: 1; min-height: 0; position: relative; }
</style>
</head>
<body>
@@ -235,11 +235,10 @@
function handleEvent(event) {
switch (event.type) {
case "content_height": {
const container = document.getElementById("flutter-container");
if (container) container.style.height = event.payload.height + "px";
case "content_height":
// No-op in dev page — flex layout handles sizing.
// The event is still logged via logEvent().
break;
}
case "entry_moved": {
const { entryId, newStart, newEnd, newGroupId, newLane } = event.payload;
const item = currentState.items[entryId];
@@ -299,29 +298,78 @@
// Toolbar actions
// -----------------------------------------------------------------------
function setPageTheme(isDark) {
const body = document.body;
const toolbar = document.getElementById("toolbar");
const eventLog = document.getElementById("event-log");
if (isDark) {
body.style.background = "#1a1a2e";
body.style.color = "#e0e0e0";
toolbar.style.background = "#16213e";
toolbar.style.borderBottomColor = "#0f3460";
eventLog.style.background = "#0d1117";
eventLog.style.borderTopColor = "#0f3460";
for (const btn of toolbar.querySelectorAll("button")) {
btn.style.background = "#1a1a2e";
btn.style.color = "#e0e0e0";
btn.style.borderColor = "#0f3460";
}
for (const sep of toolbar.querySelectorAll(".sep")) {
sep.style.background = "#0f3460";
}
for (const lbl of toolbar.querySelectorAll("label")) {
lbl.style.color = "#8899aa";
}
} else {
body.style.background = "#f0f0f0";
body.style.color = "#333";
toolbar.style.background = "#e0e0e0";
toolbar.style.borderBottomColor = "#ccc";
eventLog.style.background = "#f5f5f5";
eventLog.style.borderTopColor = "#ccc";
for (const btn of toolbar.querySelectorAll("button")) {
btn.style.background = "#fff";
btn.style.color = "#333";
btn.style.borderColor = "#ccc";
}
for (const sep of toolbar.querySelectorAll(".sep")) {
sep.style.background = "#ccc";
}
for (const lbl of toolbar.querySelectorAll("label")) {
lbl.style.color = "#666";
}
}
}
document.getElementById("btn-dark").addEventListener("click", () => {
currentState.darkMode = true;
document.body.style.background = "#1a1a2e";
setPageTheme(true);
pushState(currentState);
});
document.getElementById("btn-light").addEventListener("click", () => {
currentState.darkMode = false;
document.body.style.background = "#f0f0f0";
document.body.style.color = "#333";
setPageTheme(false);
pushState(currentState);
});
document.getElementById("btn-few").addEventListener("click", () => {
pushState(buildFewItems());
const state = buildFewItems();
state.darkMode = currentState.darkMode;
pushState(state);
});
document.getElementById("btn-many").addEventListener("click", () => {
pushState(buildManyItems());
const state = buildManyItems();
state.darkMode = currentState.darkMode;
pushState(state);
});
document.getElementById("btn-empty").addEventListener("click", () => {
pushState(buildEmpty());
const state = buildEmpty();
state.darkMode = currentState.darkMode;
pushState(state);
});
document.getElementById("btn-push").addEventListener("click", () => {
@@ -333,6 +381,28 @@
});
</script>
<script>
// Intercept Flutter bootstrap to render into #flutter-container
window._flutter = {};
let _loaderInstance = null;
Object.defineProperty(window._flutter, 'loader', {
set(loader) {
const origLoad = loader.load.bind(loader);
loader.load = (opts = {}) => origLoad({
...opts,
onEntrypointLoaded: async (engineInitializer) => {
const appRunner = await engineInitializer.initializeEngine({
hostElement: document.getElementById('flutter-container'),
});
appRunner.runApp();
},
});
_loaderInstance = loader;
},
get() { return _loaderInstance; },
configurable: true,
});
</script>
<script src="flutter_bootstrap.js" async></script>
</body>
</html>