Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-02 19:36:12 +01:00
Code Issues Packages Projects Releases Activity

feat(views/board): set up scroll via mouse wheel

Browse Source
This commit is contained in:
Elian Doran
2025-07-19 19:31:13 +03:00
parent 3e7dc71995
commit 8f8b9af862
3 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/client/src/widgets/tab_row.ts
View File

@@ -8,6 +8,7 @@ import appContext, { type CommandNames, type CommandListenerData, type EventData
import froca from "../services/froca.js"; import froca from "../services/froca.js";
import attributeService from "../services/attributes.js"; import attributeService from "../services/attributes.js";
import type NoteContext from "../components/note_context.js"; import type NoteContext from "../components/note_context.js";
import { setupHorizontalScrollViaWheel } from "./widget_utils.js";
const isDesktop = utils.isDesktop(); const isDesktop = utils.isDesktop();
@@ -386,15 +387,7 @@ export default class TabRowWidget extends BasicWidget {
}; };
setupScrollEvents() { setupScrollEvents() {
this.$tabScrollingContainer.on('wheel', (event) => { setupHorizontalScrollViaWheel(this.$tabScrollingContainer);
const wheelEvent = event.originalEvent as WheelEvent;
if (utils.isCtrlKey(event) || event.altKey || event.shiftKey) {
return;
}
event.preventDefault();
event.stopImmediatePropagation();
event.currentTarget.scrollLeft += wheelEvent.deltaY + wheelEvent.deltaX;
});
this.$scrollButtonLeft[0].addEventListener('click', () => this.scrollTabContainer(-210)); this.$scrollButtonLeft[0].addEventListener('click', () => this.scrollTabContainer(-210));
this.$scrollButtonRight[0].addEventListener('click', () => this.scrollTabContainer(210)); this.$scrollButtonRight[0].addEventListener('click', () => this.scrollTabContainer(210));

3
apps/client/src/widgets/view_widgets/board_view/index.ts
View File

@@ -1,3 +1,4 @@
import { setupHorizontalScrollViaWheel } from "../../widget_utils";
import ViewMode, { ViewModeArgs } from "../view_mode"; import ViewMode, { ViewModeArgs } from "../view_mode";
import { getBoardData } from "./data"; import { getBoardData } from "./data";
@@ -56,7 +57,9 @@ export default class BoardView extends ViewMode<StateInfo> {
super(args, "board"); super(args, "board");
this.$root = $(TPL); this.$root = $(TPL);
setupHorizontalScrollViaWheel(this.$root);
this.$container = this.$root.find(".board-view-container"); this.$container = this.$root.find(".board-view-container");
args.$parent.append(this.$root); args.$parent.append(this.$root);
} }

18
apps/client/src/widgets/widget_utils.ts Normal file
View File

@@ -0,0 +1,18 @@
import utils from "../services/utils.js";
/**
* Enables scrolling of a container horizontally using the mouse wheel, instead of having to use the scrollbar or keep Shift pressed.
*
* @param $container the jQuery-wrapped container element to enable horizontal scrolling for.
*/
export function setupHorizontalScrollViaWheel($container: JQuery<HTMLElement>) {
$container.on("wheel", (event) => {
const wheelEvent = event.originalEvent as WheelEvent;
if (utils.isCtrlKey(event) || event.altKey || event.shiftKey) {
return;
}
event.preventDefault();
event.stopImmediatePropagation();
event.currentTarget.scrollLeft += wheelEvent.deltaY + wheelEvent.deltaX;
});
}