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 .type { color: #58a6ff; }
#event-log .time { color: #6e7681; margin-right: 8px; } #event-log .time { color: #6e7681; margin-right: 8px; }
#event-log .payload { color: #8b949e; } #event-log .payload { color: #8b949e; }
#flutter-container { flex: 1; min-height: 0; } #flutter-container { flex: 1; min-height: 0; position: relative; }
</style> </style>
</head> </head>
<body> <body>
@@ -235,11 +235,10 @@
function handleEvent(event) { function handleEvent(event) {
switch (event.type) { switch (event.type) {
case "content_height": { case "content_height":
const container = document.getElementById("flutter-container"); // No-op in dev page — flex layout handles sizing.
if (container) container.style.height = event.payload.height + "px"; // The event is still logged via logEvent().
break; break;
}
case "entry_moved": { case "entry_moved": {
const { entryId, newStart, newEnd, newGroupId, newLane } = event.payload; const { entryId, newStart, newEnd, newGroupId, newLane } = event.payload;
const item = currentState.items[entryId]; const item = currentState.items[entryId];
@@ -299,29 +298,78 @@
// Toolbar actions // 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", () => { document.getElementById("btn-dark").addEventListener("click", () => {
currentState.darkMode = true; currentState.darkMode = true;
document.body.style.background = "#1a1a2e"; setPageTheme(true);
pushState(currentState); pushState(currentState);
}); });
document.getElementById("btn-light").addEventListener("click", () => { document.getElementById("btn-light").addEventListener("click", () => {
currentState.darkMode = false; currentState.darkMode = false;
document.body.style.background = "#f0f0f0"; setPageTheme(false);
document.body.style.color = "#333";
pushState(currentState); pushState(currentState);
}); });
document.getElementById("btn-few").addEventListener("click", () => { document.getElementById("btn-few").addEventListener("click", () => {
pushState(buildFewItems()); const state = buildFewItems();
state.darkMode = currentState.darkMode;
pushState(state);
}); });
document.getElementById("btn-many").addEventListener("click", () => { document.getElementById("btn-many").addEventListener("click", () => {
pushState(buildManyItems()); const state = buildManyItems();
state.darkMode = currentState.darkMode;
pushState(state);
}); });
document.getElementById("btn-empty").addEventListener("click", () => { document.getElementById("btn-empty").addEventListener("click", () => {
pushState(buildEmpty()); const state = buildEmpty();
state.darkMode = currentState.darkMode;
pushState(state);
}); });
document.getElementById("btn-push").addEventListener("click", () => { document.getElementById("btn-push").addEventListener("click", () => {
@@ -333,6 +381,28 @@
}); });
</script> </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> <script src="flutter_bootstrap.js" async></script>
</body> </body>
</html> </html>