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

This commit is contained in:
Elian Doran 2025-07-19 19:31:13 +03:00
parent 3e7dc71995
commit 8f8b9af862
No known key found for this signature in database
3 changed files with 23 additions and 9 deletions

View File

@ -8,6 +8,7 @@ import appContext, { type CommandNames, type CommandListenerData, type EventData
import froca from "../services/froca.js";
import attributeService from "../services/attributes.js";
import type NoteContext from "../components/note_context.js";
import { setupHorizontalScrollViaWheel } from "./widget_utils.js";
const isDesktop = utils.isDesktop();
@ -386,15 +387,7 @@ export default class TabRowWidget extends BasicWidget {
};
setupScrollEvents() {
this.$tabScrollingContainer.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;
});
setupHorizontalScrollViaWheel(this.$tabScrollingContainer);
this.$scrollButtonLeft[0].addEventListener('click', () => this.scrollTabContainer(-210));
this.$scrollButtonRight[0].addEventListener('click', () => this.scrollTabContainer(210));

View File

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

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;
});
}