diff --git a/cast/src/launcher/layout/hc-cast.ts b/cast/src/launcher/layout/hc-cast.ts index 25c1d3bdb2..a63ad71787 100644 --- a/cast/src/launcher/layout/hc-cast.ts +++ b/cast/src/launcher/layout/hc-cast.ts @@ -29,6 +29,7 @@ import { } from "../../../../src/data/lovelace"; import "./hc-layout"; import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config"; +import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute"; @customElement("hc-cast") class HcCast extends LitElement { @@ -158,7 +159,8 @@ class HcCast extends LitElement { protected updated(changedProps) { super.updated(changedProps); - this.toggleAttribute( + toggleAttribute( + this, "hide-icons", this.lovelaceConfig ? !this.lovelaceConfig.views.some((view) => view.icon) diff --git a/src/common/dom/toggle_attribute.ts b/src/common/dom/toggle_attribute.ts new file mode 100644 index 0000000000..c37be7a4f8 --- /dev/null +++ b/src/common/dom/toggle_attribute.ts @@ -0,0 +1,25 @@ +// Toggle Attribute Polyfill because it's too new for some browsers +export const toggleAttribute = ( + el: HTMLElement, + name: string, + force?: boolean +) => { + if (force !== undefined) { + force = !!force; + } + + if (el.hasAttribute(name)) { + if (force) { + return true; + } + + el.removeAttribute(name); + return false; + } + if (force === false) { + return false; + } + + el.setAttribute(name, ""); + return true; +}; diff --git a/src/components/user/ha-user-badge.ts b/src/components/user/ha-user-badge.ts index 586e6c4b26..842b89c4ad 100644 --- a/src/components/user/ha-user-badge.ts +++ b/src/components/user/ha-user-badge.ts @@ -9,6 +9,7 @@ import { } from "lit-element"; import { User } from "../../data/user"; import { CurrentUser } from "../../types"; +import { toggleAttribute } from "../../common/dom/toggle_attribute"; const computeInitials = (name: string) => { if (!name) { @@ -40,7 +41,8 @@ class StateBadge extends LitElement { protected updated(changedProps) { super.updated(changedProps); - this.toggleAttribute( + toggleAttribute( + this, "long", (this.user ? computeInitials(this.user.name) : "?").length > 2 ); diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts index a63f247035..70b99e022f 100644 --- a/src/layouts/home-assistant-main.ts +++ b/src/layouts/home-assistant-main.ts @@ -21,6 +21,7 @@ import { PolymerChangedEvent } from "../polymer-types"; // tslint:disable-next-line: no-duplicate-imports import { AppDrawerLayoutElement } from "@polymer/app-layout/app-drawer-layout/app-drawer-layout"; import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer"; +import { toggleAttribute } from "../common/dom/toggle_attribute"; const NON_SWIPABLE_PANELS = ["kiosk", "map"]; @@ -114,7 +115,8 @@ class HomeAssistantMain extends LitElement { protected updated(changedProps: PropertyValues) { super.updated(changedProps); - this.toggleAttribute( + toggleAttribute( + this, "expanded", this.narrow || this.hass.dockedSidebar !== "auto" ); diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts index fa37f98076..2245716652 100644 --- a/src/panels/lovelace/components/hui-generic-entity-row.ts +++ b/src/panels/lovelace/components/hui-generic-entity-row.ts @@ -17,6 +17,7 @@ import "../components/hui-warning"; import { HomeAssistant } from "../../../types"; import { computeRTL } from "../../../common/util/compute_rtl"; import { EntitiesCardEntityConfig } from "../cards/types"; +import { toggleAttribute } from "../../../common/dom/toggle_attribute"; class HuiGenericEntityRow extends LitElement { @property() public hass?: HomeAssistant; @@ -80,7 +81,7 @@ class HuiGenericEntityRow extends LitElement { protected updated(changedProps: PropertyValues): void { super.updated(changedProps); if (changedProps.has("hass")) { - this.toggleAttribute("rtl", computeRTL(this.hass!)); + toggleAttribute(this, "rtl", computeRTL(this.hass!)); } }