make it an option to track scrolling

remove-padding-from-badge-scroll
Bram Kragten 2025-05-07 13:08:53 +02:00
parent 3804a4c7cb
commit 957bf875ae
2 changed files with 16 additions and 6 deletions

View File

@ -10,6 +10,7 @@ import type { LitElement } from "lit";
export interface DragScrollControllerConfig { export interface DragScrollControllerConfig {
selector: string; selector: string;
enabled?: boolean; enabled?: boolean;
trackScroll?: boolean;
} }
export class DragScrollController implements ReactiveController { export class DragScrollController implements ReactiveController {
@ -35,6 +36,8 @@ export class DragScrollController implements ReactiveController {
private _enabled = true; private _enabled = true;
private _trackScroll = false;
public get enabled(): boolean { public get enabled(): boolean {
return this._enabled; return this._enabled;
} }
@ -54,10 +57,11 @@ export class DragScrollController implements ReactiveController {
constructor( constructor(
host: ReactiveControllerHost & LitElement, host: ReactiveControllerHost & LitElement,
{ selector, enabled }: DragScrollControllerConfig { selector, enabled, trackScroll }: DragScrollControllerConfig
) { ) {
this._selector = selector; this._selector = selector;
this._host = host; this._host = host;
this._trackScroll = trackScroll ?? false;
this.enabled = enabled ?? true; this.enabled = enabled ?? true;
host.addController(this); host.addController(this);
} }
@ -79,11 +83,14 @@ export class DragScrollController implements ReactiveController {
); );
if (this._scrollContainer) { if (this._scrollContainer) {
this._scrollContainer.addEventListener("mousedown", this._mouseDown); this._scrollContainer.addEventListener("mousedown", this._mouseDown);
if (this._trackScroll) {
this._scrollContainer.addEventListener("scroll", this._onScroll); this._scrollContainer.addEventListener("scroll", this._onScroll);
this.scrolledStart = this._scrollContainer.scrollLeft > 0; this.scrolledStart = this._scrollContainer.scrollLeft > 0;
this.scrolledEnd = this.scrolledEnd =
this._scrollContainer.scrollLeft + this._scrollContainer.offsetWidth < this._scrollContainer.scrollLeft + this._scrollContainer.offsetWidth <
this._scrollContainer.scrollWidth; this._scrollContainer.scrollWidth;
this._host.requestUpdate();
}
} }
} }
@ -97,6 +104,8 @@ export class DragScrollController implements ReactiveController {
} }
this.scrolled = false; this.scrolled = false;
this.scrolling = false; this.scrolling = false;
this.scrolledStart = false;
this.scrolledEnd = false;
this.mouseIsDown = false; this.mouseIsDown = false;
this.scrollStartX = 0; this.scrollStartX = 0;
this.scrollLeft = 0; this.scrollLeft = 0;

View File

@ -54,6 +54,7 @@ export class HuiViewHeader extends LitElement {
private _dragScrollController = new DragScrollController(this, { private _dragScrollController = new DragScrollController(this, {
selector: ".scroll", selector: ".scroll",
trackScroll: true,
enabled: false, enabled: false,
}); });