hello everyone I hope you fine.
trying making mobile app using vanilla and capacitor js, i have made SPA app manually using simple library for reasons.
now i will using ZIM in the project.
the hole idea of my code is to emptying the root element innerHtml and fill it again with another content , when I am doing that i failed
cause:
1- i can see the content of one stage when click on it when trying another button to display the new content i see nothing,
2- also the outercolor of stage still visible on emulator when i navigate to another link "quiz' for example
here is my code
component/ZIM.js
import { Frame, Tag } from "zimjs";
import { Zim1 } from "./allZims/zim1";
import { Zim2 } from "./allZims/zim2";
// مصفوفة تحتوي على بيانات الأزرار
const zimItems = [
{ id: "btn-1", label: "The current button", content: Zim1 },
{ id: "btn-2", label: "A second button item", content: Zim2 },
];
export const showZim = () => {
const app = document.getElementById("app");
app.innerHTML = ""; // تفريغ المحتوى القديم
const listGroup = document.createElement("div");
listGroup.className = "list-group list-group-flush";
zimItems.forEach((item) => {
const button = document.createElement("button");
button.id = item.id;
button.className = "list-group-item list-group-item-action";
button.textContent = item.label;
button.addEventListener("click", () => {
app.innerHTML = ""; // تفريغ المحتوى السابق
app.style.backgroundColor = '';
const holderDiv = document.createElement("div");
holderDiv.id = "holder"; // إنشاء div مخصص للإطار
holderDiv.style.width = "255";
holderDiv.style.width = "100%";
holderDiv.style.height = "488"; // يمكن تعديل الارتفاع
app.appendChild(holderDiv);
// التحقق من وجود الـ canvas السابق وإزالته
const existingCanvas = document.getElementById("holderCanvas");
if (existingCanvas) {
existingCanvas.remove();
}
// إنشاء إطار ZIM داخل الحاوية
const frame = new Frame({
scaling: "holder", // استخدام الوضع holder لربط الإطار بـ div
width: 255, // تحديد عرض الإطار
height: 488, // تحديد ارتفاع الإطار
color: light,
outerColor:dark,
//tag: "holder",
ready: function() {
const stage = frame.stage;
item.content(stage); // استدعاء دالة المحتوى الخاصة بكل زر
stage.update();
}
});
});
listGroup.appendChild(button);
});
app.appendChild(listGroup);
};
main.js
import { App } from '@capacitor/app';
import { Dialog } from '@capacitor/dialog';
import Navigo from "navigo";
import { learn } from '../components/learn';
import { showQuizzes } from '../components/quiz';
import { showZim } from '../components/zim';
export const router = new Navigo("/", { hash: false, root: "/" });
async function handleRoute(callback) {
const isSessionActive = await checkSession();
toggleBottomBar(isSessionActive);
if (isSessionActive) {
await callback();
} else {
router.navigate('/login');
}
}
router
.on('/', async () => {
const isSessionActive = await checkSession();
toggleBottomBar(isSessionActive);
if (isSessionActive) {
router.navigate('/profile');
} else {
signUp();
}
})
.on('/login', async () => {
const isSessionActive = await checkSession();
toggleBottomBar(isSessionActive);
if (!isSessionActive) {
logIn();
} else {
router.navigate('/profile');
}
})
.on('/profile', () => handleRoute(profile))
.on('/resources', () => handleRoute(Files))
.on('/lessons', () => handleRoute(Lesson))
.on('/learn', () => {
learn();
})
.on('/quiz', () => handleRoute(showQuizzes))
.on('/zim', () => showZim())
.resolve();
allZim/ZIM1.js
import { Tile, Scrambler, Frame, Bitmap, Pic, Button, Circle } from "zimjs";
export const Zim1 = function (stage){
zog("Zim1");
new Circle(30,blue).pos(100,100).drag()
new Circle(30,blue).pos(100,120).drag()
new Circle(30,blue).pos(100,140).drag()
};
allZim/ZIM2.js
import { Tile, Scrambler, Poly, Frame, Label, Rectangle, Emitter, Circle } from "zimjs";
export const Zim2 = function (stage){
zog("Zim2");
new Circle(30,red).center().drag()
}
i will appreciate any helping
