345 lines
9.9 KiB
TypeScript
345 lines
9.9 KiB
TypeScript
import { LitElement, TemplateResult, html, CSSResultGroup, unsafeCSS } from 'lit';
|
|
import { HomeAssistant } from 'custom-card-helpers';
|
|
import { customElement, property, query } from 'lit/decorators.js';
|
|
|
|
import {
|
|
ExtendedHomeAssistant,
|
|
FrigateConditional,
|
|
MenuButton,
|
|
MenuIcon,
|
|
MenuStateIcon,
|
|
PictureElements,
|
|
MenuSubmenu,
|
|
} from '../types.js';
|
|
import {
|
|
dispatchErrorMessageEvent,
|
|
dispatchFrigateCardEvent,
|
|
} from '../common.js';
|
|
|
|
import elementsStyle from '../scss/elements.scss';
|
|
import { localize } from '../localize/localize.js';
|
|
import { ConditionState, fetchStateAndEvaluateCondition } from '../card-condition.js';
|
|
|
|
/* A note on picture element rendering:
|
|
*
|
|
* To avoid needing to deal with the rendering of all the picture elements
|
|
* ourselves, instead the card relies on a stock conditional element (with no
|
|
* conditions) to render elements (this._root). This has a few advantages:
|
|
*
|
|
* - Does not depend on (much of!) an internal API -- conditional picture
|
|
* elements are unlikely to go away or change.
|
|
* - Forces usage of elements that HA understands. If the rendering is done
|
|
* directly, it is (ask me how I know!) very tempting to render things in such
|
|
* a way that a nested conditional element would not be able to render, i.e.
|
|
* the custom rendering logic would only apply at the first level.
|
|
*/
|
|
|
|
/* A note on custom elements:
|
|
*
|
|
* The native HA support for custom elements is used for the menu-icon and
|
|
* menu-state-icon elements. This ensures multi-nested conditionals will work
|
|
* correctly. These custom elements 'render' by firing events that are caught by
|
|
* the card to call for inclusion/exclusion of the menu icon in question.
|
|
*
|
|
* One major complexity here is that the top <frigate-card-elements> element
|
|
* will not necessarily know when a menu icon is no longer rendered because of a
|
|
* conditional that no-longer evaluates to true. As such, it cannot know when to
|
|
* signal for the menu icon removal. Furthermore, the menu icon element itself
|
|
* will only know it's been removed _after_ it's been disconnected from the DOM,
|
|
* so normal event propagation at that point will not work. Instead, we must
|
|
* catch the menu icon _addition_ and register the eventhandler for the removal
|
|
* directly on the child (which will have no parent at time of calling). That
|
|
* then triggers <frigate-card-elements> to re-dispatch a removal event for
|
|
* upper layers to handle correctly.
|
|
*/
|
|
|
|
// A small wrapper around a HA conditional element used to render a set of
|
|
// picture elements.
|
|
@customElement('frigate-card-elements-core')
|
|
class FrigateCardElementsCore extends LitElement {
|
|
@property({ attribute: false })
|
|
protected elements: PictureElements;
|
|
|
|
/**
|
|
* Need to ensure card re-renders when conditionState changes, hence having it
|
|
* as a property even though it is not currently directly used by this class.
|
|
*/
|
|
@property({ attribute: false })
|
|
protected conditionState?: ConditionState;
|
|
|
|
protected _root: HTMLElement | null = null;
|
|
protected _hass?: HomeAssistant & ExtendedHomeAssistant;
|
|
|
|
/**
|
|
* Set Home Assistant object.
|
|
*/
|
|
set hass(hass: HomeAssistant & ExtendedHomeAssistant) {
|
|
if (this._root) {
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
(this._root as any).hass = hass;
|
|
}
|
|
this._hass = hass;
|
|
}
|
|
|
|
/**
|
|
* Create a transparent render root.
|
|
*/
|
|
createRenderRoot(): LitElement {
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Create the root node for our picture elements.
|
|
* @returns
|
|
*/
|
|
protected _createRoot(): HTMLElement {
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const elementConstructor = customElements.get('hui-conditional-element') as any;
|
|
if (!elementConstructor || !this._hass) {
|
|
throw new Error(localize('error.could_not_render_elements'));
|
|
}
|
|
|
|
const element = new elementConstructor();
|
|
element.hass = this._hass;
|
|
const config = {
|
|
type: 'conditional',
|
|
conditions: [],
|
|
elements: this.elements,
|
|
};
|
|
try {
|
|
element.setConfig(config);
|
|
} catch (e) {
|
|
console.error(e, (e as Error).stack);
|
|
throw new Error(localize('error.invalid_elements_config'));
|
|
}
|
|
return element;
|
|
}
|
|
|
|
/**
|
|
* Render the elements.
|
|
* @returns A rendered template or void.
|
|
*/
|
|
protected render(): TemplateResult | void {
|
|
try {
|
|
// Recreate the root on each render to ensure conditional ancestors
|
|
// re-fire events as necessary.
|
|
this._root = this._createRoot();
|
|
} catch (e) {
|
|
return dispatchErrorMessageEvent(this, (e as Error).message);
|
|
}
|
|
return html`${this._root || ''}`;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* The master <frigate-card-elements> class, handles event listeners and styles.
|
|
*/
|
|
@customElement('frigate-card-elements')
|
|
export class FrigateCardElements extends LitElement {
|
|
@property({ attribute: false })
|
|
protected elements: PictureElements;
|
|
|
|
@property({ attribute: false })
|
|
protected conditionState?: ConditionState;
|
|
|
|
protected _hass?: HomeAssistant & ExtendedHomeAssistant;
|
|
|
|
@query('frigate-card-elements-core')
|
|
_core!: FrigateCardElementsCore;
|
|
|
|
/**
|
|
* Set the Home Assistant object.
|
|
*/
|
|
set hass(hass: HomeAssistant & ExtendedHomeAssistant) {
|
|
if (this._core) {
|
|
this._core.hass = hass;
|
|
}
|
|
this._hass = hass;
|
|
}
|
|
|
|
/**
|
|
* Handle a picture element to be removed from the menu.
|
|
* @param ev The event.
|
|
*/
|
|
protected _menuRemoveHandler(ev: Event): void {
|
|
// Re-dispatch event from this element (instead of the disconnected one, as
|
|
// there is no parent of the disconnected element).
|
|
dispatchFrigateCardEvent<MenuButton>(
|
|
this,
|
|
'menu-remove',
|
|
(ev as CustomEvent).detail,
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Handle a picture element to be added to the menu.
|
|
* @param ev The event.
|
|
*/
|
|
protected _menuAddHandler(ev: Event): void {
|
|
ev = ev as CustomEvent<MenuButton>;
|
|
const path = ev.composedPath();
|
|
if (!path.length) {
|
|
return;
|
|
}
|
|
|
|
// See 'A note on custom elements' above to explain what's going on here.
|
|
|
|
// Ensure listener is only attached 1 time by removing it first.
|
|
path[0].removeEventListener(
|
|
'frigate-card:menu-remove',
|
|
this._menuRemoveHandler.bind(this),
|
|
);
|
|
|
|
path[0].addEventListener(
|
|
'frigate-card:menu-remove',
|
|
this._menuRemoveHandler.bind(this),
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Connected callback.
|
|
*/
|
|
connectedCallback(): void {
|
|
super.connectedCallback();
|
|
|
|
// Catch icons being added to the menu (so their removal can be subsequently
|
|
// handled).
|
|
this.addEventListener('frigate-card:menu-add', this._menuAddHandler);
|
|
}
|
|
|
|
/**
|
|
* Disconnected callback.
|
|
*/
|
|
disconnectedCallback(): void {
|
|
this.removeEventListener('frigate-card:menu-add', this._menuAddHandler);
|
|
super.disconnectedCallback();
|
|
}
|
|
|
|
/**
|
|
* Render the template.
|
|
* @returns A rendered template.
|
|
*/
|
|
protected render(): TemplateResult {
|
|
return html` <frigate-card-elements-core
|
|
.hass=${this._hass}
|
|
.conditionState=${this.conditionState}
|
|
.elements=${this.elements}
|
|
>
|
|
</frigate-card-elements-core>`;
|
|
}
|
|
|
|
/**
|
|
* Get styles.
|
|
*/
|
|
static get styles(): CSSResultGroup {
|
|
return unsafeCSS(elementsStyle);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* An element that can render others based on Frigate state (e.g. only show
|
|
* overlays in particular views). This is the Frigate Card equivalent to the HA
|
|
* conditional card.
|
|
*/
|
|
@customElement('frigate-card-conditional')
|
|
export class FrigateCardElementsConditional extends LitElement {
|
|
protected _config?: FrigateConditional;
|
|
protected _hass?: HomeAssistant & ExtendedHomeAssistant;
|
|
|
|
@query('frigate-card-elements-core')
|
|
_core?: FrigateCardElementsCore;
|
|
|
|
/**
|
|
* Set the Home Assistant object.
|
|
*/
|
|
set hass(hass: HomeAssistant & ExtendedHomeAssistant) {
|
|
if (this._core) {
|
|
this._core.hass = hass;
|
|
}
|
|
this._hass = hass;
|
|
}
|
|
|
|
/**
|
|
* Set the card configuration.
|
|
* @param config The card configuration.
|
|
*/
|
|
public setConfig(config: FrigateConditional): void {
|
|
this._config = config;
|
|
}
|
|
|
|
/**
|
|
* Create a root into which to render. This card is "transparent".
|
|
* @returns
|
|
*/
|
|
createRenderRoot(): LitElement {
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Connected callback.
|
|
*/
|
|
connectedCallback(): void {
|
|
super.connectedCallback();
|
|
|
|
// HA will automatically attach the 'element' class to picture elements. As
|
|
// this is a transparent 'conditional' element (just like the stock HA
|
|
// 'conditional' element), it should not have positioning.
|
|
this.className = '';
|
|
}
|
|
|
|
/**
|
|
* Render the card.
|
|
*/
|
|
protected render(): TemplateResult | void {
|
|
if (fetchStateAndEvaluateCondition(this, this._config.conditions)) {
|
|
return html` <frigate-card-elements-core
|
|
.hass=${this._hass}
|
|
.elements=${this._config.elements}
|
|
>
|
|
</frigate-card-elements-core>`;
|
|
}
|
|
}
|
|
}
|
|
|
|
// A base class for rendering menu icons / menu state icons.
|
|
export class FrigateCardElementsBaseMenuIcon<T> extends LitElement {
|
|
@property({ attribute: false })
|
|
protected _config: T | null = null;
|
|
|
|
/**
|
|
* Set the card config.
|
|
* @param config The configuration.
|
|
*/
|
|
public setConfig(config: T): void {
|
|
this._config = config;
|
|
}
|
|
|
|
/**
|
|
* Connected callback.
|
|
*/
|
|
connectedCallback(): void {
|
|
super.connectedCallback();
|
|
if (this._config) {
|
|
dispatchFrigateCardEvent<T>(this, 'menu-add', this._config);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Disconnected callback.
|
|
*/
|
|
disconnectedCallback(): void {
|
|
if (this._config) {
|
|
dispatchFrigateCardEvent<T>(this, 'menu-remove', this._config);
|
|
}
|
|
super.disconnectedCallback();
|
|
}
|
|
}
|
|
|
|
@customElement('frigate-card-menu-icon')
|
|
export class FrigateCardElementsMenuIcon extends FrigateCardElementsBaseMenuIcon<MenuIcon> {}
|
|
|
|
@customElement('frigate-card-menu-state-icon')
|
|
export class FrigateCardElementsMenuStateIcon extends FrigateCardElementsBaseMenuIcon<MenuStateIcon> {}
|
|
|
|
@customElement('frigate-card-menu-submenu')
|
|
export class FrigateCardElementsMenuSubmenu extends FrigateCardElementsBaseMenuIcon<MenuSubmenu> {} |