mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-28 11:46:42 +00:00
Only enable drag scroll controller when needed (#25351)
This commit is contained in:
parent
8494d0542e
commit
80dddc9eef
@ -9,6 +9,7 @@ import type { LitElement } from "lit";
|
||||
*/
|
||||
export interface DragScrollControllerConfig {
|
||||
selector: string;
|
||||
enabled?: boolean;
|
||||
}
|
||||
|
||||
export class DragScrollController implements ReactiveController {
|
||||
@ -28,19 +29,47 @@ export class DragScrollController implements ReactiveController {
|
||||
|
||||
private _scrollContainer?: HTMLElement | null;
|
||||
|
||||
private _enabled = true;
|
||||
|
||||
public get enabled(): boolean {
|
||||
return this._enabled;
|
||||
}
|
||||
|
||||
public set enabled(value: boolean) {
|
||||
if (value === this._enabled) {
|
||||
return;
|
||||
}
|
||||
this._enabled = value;
|
||||
if (this._enabled) {
|
||||
this._attach();
|
||||
} else {
|
||||
this._detach();
|
||||
}
|
||||
this._host.requestUpdate();
|
||||
}
|
||||
|
||||
constructor(
|
||||
host: ReactiveControllerHost & LitElement,
|
||||
{ selector }: DragScrollControllerConfig
|
||||
{ selector, enabled }: DragScrollControllerConfig
|
||||
) {
|
||||
this._selector = selector;
|
||||
this._host = host;
|
||||
this.enabled = enabled ?? true;
|
||||
host.addController(this);
|
||||
}
|
||||
|
||||
hostUpdated() {
|
||||
if (this._scrollContainer) {
|
||||
if (!this.enabled || this._scrollContainer) {
|
||||
return;
|
||||
}
|
||||
this._attach();
|
||||
}
|
||||
|
||||
hostDisconnected() {
|
||||
this._detach();
|
||||
}
|
||||
|
||||
private _attach() {
|
||||
this._scrollContainer = this._host.renderRoot?.querySelector(
|
||||
this._selector
|
||||
);
|
||||
@ -49,9 +78,18 @@ export class DragScrollController implements ReactiveController {
|
||||
}
|
||||
}
|
||||
|
||||
hostDisconnected() {
|
||||
private _detach() {
|
||||
window.removeEventListener("mousemove", this._mouseMove);
|
||||
window.removeEventListener("mouseup", this._mouseUp);
|
||||
if (this._scrollContainer) {
|
||||
this._scrollContainer.removeEventListener("mousedown", this._mouseDown);
|
||||
this._scrollContainer = undefined;
|
||||
}
|
||||
this.scrolled = false;
|
||||
this.scrolling = false;
|
||||
this.mouseIsDown = false;
|
||||
this.scrollStartX = 0;
|
||||
this.scrollLeft = 0;
|
||||
}
|
||||
|
||||
private _mouseDown = (event: MouseEvent) => {
|
||||
|
@ -54,6 +54,7 @@ export class HuiViewHeader extends LitElement {
|
||||
|
||||
private _dragScrollController = new DragScrollController(this, {
|
||||
selector: ".scroll",
|
||||
enabled: false,
|
||||
});
|
||||
|
||||
connectedCallback(): void {
|
||||
@ -81,6 +82,11 @@ export class HuiViewHeader extends LitElement {
|
||||
this._checkHidden();
|
||||
}
|
||||
|
||||
if (changedProperties.has("config") || changedProperties.has("lovelace")) {
|
||||
this._dragScrollController.enabled =
|
||||
!this.lovelace.editMode && this.config?.badges_wrap === "scroll";
|
||||
}
|
||||
|
||||
if (changedProperties.has("config")) {
|
||||
if (this.config?.card) {
|
||||
this.card = this._createCardElement(this.config.card);
|
||||
|
Loading…
x
Reference in New Issue
Block a user