khairul169/launcher
1
0
Fork 0
mirror of https://github.com/khairul169/launcher.git synced 2025-04-28 16:49:37 +07:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: update for mobile

Browse Source
This commit is contained in:
Khairul Hidayat 2024-11-04 02:46:23 +00:00
parent 6cafc36ac6
commit e327dab1df
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/launcher.ts
View File

@ -183,6 +183,7 @@ const title = launcher.querySelector(".title") as HTMLButtonElement;
const itemContainer = launcher.querySelector(".items") as HTMLDivElement; const itemContainer = launcher.querySelector(".items") as HTMLDivElement;
let isLauncherOpen = false; let isLauncherOpen = false;
let startY = 0;
export const openLauncher = () => { export const openLauncher = () => {
launcher.classList.add("open"); launcher.classList.add("open");
@ -196,19 +197,28 @@ export const closeLauncher = () => {
isLauncherOpen = false; isLauncherOpen = false;
}; };
const onScroll = (e: WheelEvent) => { const onScroll = (deltaY: number) => {
if (e.deltaY > 10 && !isLauncherOpen) { if (deltaY > 10 && !isLauncherOpen) {
openLauncher(); openLauncher();
return; return;
} }
const curScroll = launcher.scrollTop; const curScroll = launcher.scrollTop;
if (e.deltaY < -50 && isLauncherOpen && curScroll <= 1) { if (deltaY < -50 && isLauncherOpen && curScroll <= 1) {
closeLauncher(); closeLauncher();
return; return;
} }
}; };
const onTouchStart = (e: TouchEvent) => {
startY = e.touches[0].clientY;
};
const onTouchMove = (e: TouchEvent) => {
const curY = e.touches[0].clientY;
onScroll(startY - curY);
};
export const initLauncher = () => { export const initLauncher = () => {
itemContainer.innerHTML = launcherItems itemContainer.innerHTML = launcherItems
.filter((item) => item.disabled !== true) .filter((item) => item.disabled !== true)
@ -226,7 +236,9 @@ export const initLauncher = () => {
title.addEventListener("click", closeLauncher); title.addEventListener("click", closeLauncher);
openBtn.addEventListener("click", openLauncher); openBtn.addEventListener("click", openLauncher);
document.addEventListener("wheel", onScroll); document.addEventListener("wheel", (e) => onScroll(e.deltaY));
document.addEventListener("touchstart", onTouchStart);
document.addEventListener("touchmove", onTouchMove);
launcher.addEventListener("click", (e) => { launcher.addEventListener("click", (e) => {
if (e.target === launcher) { if (e.target === launcher) {

4
src/style.css
View File

@ -5,7 +5,7 @@
html, html,
body, body,
#app { #app {
@apply w-full min-h-screen max-h-dvh relative bg-gray-900 overflow-hidden p-0; @apply w-full h-screen max-h-dvh relative bg-gray-900 overflow-hidden p-0;
} }
.background { .background {
@ -45,7 +45,7 @@ body,
} }
.quick-launch .items { .quick-launch .items {
@apply bg-white/10 backdrop-blur-[3px] shadow-lg p-4 rounded-xl flex items-center gap-4; @apply bg-white/10 backdrop-blur-[3px] shadow-lg p-4 rounded-xl flex items-center gap-4 overflow-x-auto max-w-[90%];
} }
.quick-launch .item { .quick-launch .item {