sascha
/
Notes
mirror of https://github.com/TriliumNext/Notes
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(mobile): sidebar shown on taps

pull/882/head
Elian Doran 2025-01-04 00:20:22 +07:00
parent aad5b6cdbd
commit 73828a195b
No known key found for this signature in database
1 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/public/app/widgets/mobile_widgets/sidebar_container.js
Unescape Escape View File

@ -1,5 +1,9 @@
import FlexContainer from "../containers/flex_container.js";
const DRAG_STATE_NONE = 0;
const DRAG_STATE_INITIAL_DRAG = 1;
const DRAG_STATE_DRAGGING = 2;
export default class SidebarContainer extends FlexContainer {
constructor(screenName, direction) {
@ -7,6 +11,7 @@ export default class SidebarContainer extends FlexContainer {
this.screenName = screenName;
this.currentTranslate = -100;
this.dragState = DRAG_STATE_NONE;
}
doRender() {
@ -32,37 +37,40 @@ export default class SidebarContainer extends FlexContainer {
}
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.originalTransition = this.sidebarWrapper.style.transition;
this.sidebarWrapper.style.transition = "none";
e.preventDefault();
this.dragState = DRAG_STATE_INITIAL_DRAG;
}
#onDragMove(e) {
if (!this.isDragging) {
if (this.dragState === DRAG_STATE_NONE) {
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.translatePercentage = translatePercentage;
this.sidebarWrapper.style.transform = `translateX(${translatePercentage}%)`;
if (this.dragState === DRAG_STATE_INITIAL_DRAG) {
if (deltaX > 5) {
this.sidebarContainer.style.zIndex = 1000;
this.originalTransition = this.sidebarWrapper.style.transition;
this.sidebarWrapper.style.transition = "none";
this.dragState = DRAG_STATE_DRAGGING;
}
} else if (this.dragState === DRAG_STATE_DRAGGING) {
const width = this.sidebarWrapper.offsetWidth;
const translatePercentage = Math.min(0, Math.max(this.currentTranslate + (deltaX / width) * 100, -100));
this.translatePercentage = translatePercentage;
this.sidebarWrapper.style.transform = `translateX(${translatePercentage}%)`;
}
e.preventDefault();
}
#onDragEnd(e) {
if (!this.isDragging) {
if (this.dragState === DRAG_STATE_NONE) {
return;
}
@ -75,6 +83,8 @@ export default class SidebarContainer extends FlexContainer {
if (!isOpen) {
this.sidebarContainer.style.zIndex = -1000;
}
this.dragState = DRAG_STATE_NONE;
}
activeScreenChangedEvent({activeScreen}) {