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;
let isLauncherOpen = false;
let startY = 0;
export const openLauncher = () => {
launcher.classList.add("open");
@ -196,19 +197,28 @@ export const closeLauncher = () => {
isLauncherOpen = false;
};
const onScroll = (e: WheelEvent) => {
if (e.deltaY > 10 && !isLauncherOpen) {
const onScroll = (deltaY: number) => {
if (deltaY > 10 && !isLauncherOpen) {
openLauncher();
return;
}
const curScroll = launcher.scrollTop;
if (e.deltaY < -50 && isLauncherOpen && curScroll <= 1) {
if (deltaY < -50 && isLauncherOpen && curScroll <= 1) {
closeLauncher();
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 = () => {
itemContainer.innerHTML = launcherItems
.filter((item) => item.disabled !== true)
@ -226,7 +236,9 @@ export const initLauncher = () => {
title.addEventListener("click", closeLauncher);
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) => {
if (e.target === launcher) {

4
src/style.css
View File

@ -5,7 +5,7 @@
html,
body,
#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 {
@ -45,7 +45,7 @@ body,
}
.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 {