Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-10 10:22:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(mobile): basic swipe mechanism for sidebar

Browse Source
This commit is contained in:
Elian Doran 2025-01-03 23:44:20 +02:00
parent 2b7d591822
commit 2c9ca397e4
No known key found for this signature in database
1 changed files with 58 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/public/app/widgets/mobile_widgets/sidebar_container.js
View File

@ -6,6 +6,7 @@ export default class SidebarContainer extends FlexContainer {
super(direction);
this.screenName = screenName;
this.currentTranslate = -100;
}
doRender() {
@ -16,6 +17,63 @@ export default class SidebarContainer extends FlexContainer {
screen: "detail"
});
});
document.addEventListener("touchstart", (e) => this.#onDragStart(e), {
passive: false
});
document.addEventListener("touchmove", (e) => this.#onDragMove(e));
document.addEventListener("touchend", (e) => this.#onDragEnd(e));
}
#onDragStart(e) {
if (!this.sidebarContainer) {
this.sidebarContainer = document.getElementById("mobile-sidebar-container");
this.sidebarWrapper = document.getElementById("mobile-sidebar-wrapper");
}
const x = e.touches ? e.touches[0].clientX : e.clientX;
if (x > 30 && this.currentTranslate === -100) {
return;
}
this.isDragging = true;
this.startX = x;
this.sidebarContainer.style.zIndex = 1000;
this.sidebarWrapper.style.transition = "none";
e.preventDefault();
}
#onDragMove(e) {
if (!this.isDragging) {
return;
}
const x = e.touches ? e.touches[0].clientX : e.clientX;
const deltaX = x - this.startX;
const width = this.sidebarWrapper.offsetWidth;
const translatePercentage = Math.min(0, Math.max(this.currentTranslate + (deltaX / width) * 100, -100));
this.sidebarWrapper.style.transform = `translateX(${translatePercentage}%)`;
}
#onDragEnd(e) {
if (!this.isDragging) {
return;
}
const translateX = parseFloat(this.sidebarWrapper.style.transform.match(/-?\d+/)[0]);
const isOpen = translateX > -50;
this.sidebarWrapper.classList.toggle("show", isOpen);
this.sidebarWrapper.style.transform = isOpen ? 'translateX(0)' : 'translateX(-100%)';
this.currentTranslate = isOpen ? 0 : -100;
if (!isOpen) {
this.sidebarContainer.style.zIndex = -1000;
}
}
activeScreenChangedEvent({activeScreen}) {