blob: 13ef58ec3a27242d6cb623d2e196e2e0ab331477 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
const Router = {
init: () => {
document.querySelectorAll("a.navlink").forEach((a) => {
a.addEventListener("click", (event) => {
event.preventDefault();
const url = event.target.getAttribute("href");
Router.go(url);
});
});
// Event Handler for URL changes
window.addEventListener("popstate", (event) => {
Router.go(event.state.route, false);
});
// Check inital URL
Router.go(location.pathname);
},
go: (route, addToHistory = true) => {
console.log("Going to route" + route);
if (addToHistory) {
history.pushState({ route }, "", route);
}
let pageElement = null;
switch (route) {
case "/":
pageElement = document.createElement("h1");
pageElement.textContent = "Menu";
break;
case "/order":
pageElement = document.createElement("h1");
pageElement.textContent = "Your Order";
break;
default:
if (route.startsWith("/product-")) {
pageElement = document.createElement("h1");
pageElement.textContent = "Your Order";
const paramId = route.substring(route.lastIndexOf("-") + 1);
// Dataset is great for storing costum data because it doesnt get
// parsed by the browser
pageElement.dataset.id = paramId;
}
}
if (pageElement) {
// document.querySelector("main").children[0].remove();
// For little Performance Improvement
const cache = document.querySelector("main");
cache.innerHTML = "";
cache.appendChild(pageElement);
window.screenX = 0;
window.screenY = 0;
}
},
};
export default Router;
|
