jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use event for section visibility instead of mutation observer (#20967)

Browse Source
This commit is contained in:
Paul Bottein 2024-06-03 15:54:40 +02:00 committed by GitHub
parent c08d9a9166
commit 0add65feff
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/panels/lovelace/sections/hui-section.ts
View File

@ -26,6 +26,13 @@ import { parseLovelaceCardPath } from "../editor/lovelace-path";
import { generateLovelaceSectionStrategy } from "../strategies/get-strategy"; import { generateLovelaceSectionStrategy } from "../strategies/get-strategy";
import type { Lovelace } from "../types"; import type { Lovelace } from "../types";
import { DEFAULT_SECTION_LAYOUT } from "./const"; import { DEFAULT_SECTION_LAYOUT } from "./const";
import { fireEvent } from "../../../common/dom/fire_event";
declare global {
interface HASSDomEvents {
"section-visibility-changed": { value: boolean };
}
}
@customElement("hui-section") @customElement("hui-section")
export class HuiSection extends ReactiveElement { export class HuiSection extends ReactiveElement {
@ -219,8 +226,12 @@ export class HuiSection extends ReactiveElement {
!this.config.visibility || !this.config.visibility ||
checkConditionsMet(this.config.visibility, this.hass); checkConditionsMet(this.config.visibility, this.hass);
this.style.setProperty("display", visible ? "" : "none"); if (this.hidden !== !visible) {
this.toggleAttribute("hidden", !visible); this.style.setProperty("display", visible ? "" : "none");
this.toggleAttribute("hidden", !visible);
fireEvent(this, "section-visibility-changed", { value: visible });
}
if (!visible && this._layoutElement.parentElement) { if (!visible && this._layoutElement.parentElement) {
this.removeChild(this._layoutElement); this.removeChild(this._layoutElement);
} else if (visible && !this._layoutElement.parentElement) { } else if (visible && !this._layoutElement.parentElement) {

21
src/panels/lovelace/views/hui-sections-view.ts
View File

@ -54,29 +54,22 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
return this._sectionConfigKeys.get(sectionConfig)!; return this._sectionConfigKeys.get(sectionConfig)!;
} }
private _sectionObserver?: MutationObserver;
private _computeSectionsCount() { private _computeSectionsCount() {
this._sectionCount = this.sections.filter( this._sectionCount = this.sections.filter(
(section) => !section.hidden (section) => !section.hidden
).length; ).length;
} }
connectedCallback(): void {
super.connectedCallback();
this.addEventListener("section-visibility-changed", () => {
this._computeSectionsCount();
});
}
willUpdate(changedProperties: PropertyValues<typeof this>): void { willUpdate(changedProperties: PropertyValues<typeof this>): void {
if (!this._sectionObserver) {
this._sectionObserver = new MutationObserver(() => {
this._computeSectionsCount();
});
}
if (changedProperties.has("sections")) { if (changedProperties.has("sections")) {
this._computeSectionsCount(); this._computeSectionsCount();
this._sectionObserver.disconnect();
this.sections.forEach((section) => {
this._sectionObserver!.observe(section, {
attributes: true,
attributeFilter: ["hidden"],
});
});
} }
} }