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

fix(mobile): sidebar shown on taps

Browse Source
This commit is contained in:
Elian Doran 2025-01-04 00:20:22 +02: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
View File

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