feat: open apps menu on scroll, set apps to grid view, etc

js/UI/Main/Main.js

@@ -1,31 +1,50 @@
-import App from "../../App"
+import App from "../../App";
+import { currentPage, showPage } from "../../Utils/DOMUtils";
 
 export default class Main {
-	constructor() {
-		this.app = new App()
-		this.config = this.app.config
-		this.init()
-	}
+  constructor() {
+    this.app = new App();
+    this.config = this.app.config;
+    this.init();
+  }
 
-	init() {
-		document.title = this.config.get("name")
-		document.querySelector("#favicon").href = this.config.get("icon")
-		this.initBackgrounds()
-	}
+  init() {
+    document.title = this.config.get("name");
+    document.querySelector("#favicon").href = this.config.get("icon");
+    this.initBackgrounds();
+    this.initScrollEvent();
+  }
 
-	initBackgrounds() {
-		this.backgrounds = document.querySelector("#background")
-		for (let i = 0; i < 2; i++) {
-			let img = document.createElement("img")
-			img.classList.add("notloaded")
-			img.addEventListener("load", () => {
-				img.classList.remove("notloaded")
-			})
-			this.backgrounds.appendChild(img)
-		}
+  initBackgrounds() {
+    this.backgrounds = document.querySelector("#background");
+    for (let i = 0; i < 2; i++) {
+      let img = document.createElement("img");
+      img.classList.add("notloaded");
+      img.addEventListener("load", () => {
+        img.classList.remove("notloaded");
+      });
+      this.backgrounds.appendChild(img);
+    }
 
-		this.backgrounds = this.backgrounds.children
-		this.backgrounds[0].src = this.config.get("wallpaper")
-		this.backgrounds[1].src = this.config.get("wallpaper_dark")
-	}
+    this.backgrounds = this.backgrounds.children;
+    this.backgrounds[0].src = this.config.get("wallpaper");
+    this.backgrounds[1].src = this.config.get("wallpaper_dark");
+  }
+
+  initScrollEvent() {
+    const servicesPage = document.querySelector(".page[p=services]");
+
+    window.addEventListener("wheel", (e) => {
+      if (currentPage === "home" && e.deltaY > 0) {
+        showPage("services");
+      }
+      if (
+        currentPage === "services" &&
+        e.deltaY < 0 &&
+        servicesPage.scrollTop === 0
+      ) {
+        showPage("home");
+      }
+    });
+  }
 }

js/Utils/DOMUtils.js

@@ -1,13 +1,15 @@
+export let currentPage;
+
 export function showPage(target) {
-	let bg = document.querySelector("#background").classList
-	if (target == "home") bg.add("scaled")
-	else bg.remove("scaled")
-	let pages = document.querySelectorAll(".page")
-
-	for (let page of pages) {
-		let p = page.getAttribute("p")
-		if (p == target) page.classList.add("current")
-		else page.classList.remove("current")
-	}
+  let bg = document.querySelector("#background").classList;
+  if (target == "home") bg.add("scaled");
+  else bg.remove("scaled");
+  let pages = document.querySelectorAll(".page");
 
+  for (let page of pages) {
+    let p = page.getAttribute("p");
+    if (p == target) page.classList.add("current");
+    else page.classList.remove("current");
+  }
+  currentPage = target;
 }