92 lines
2.2 KiB
TypeScript
92 lines
2.2 KiB
TypeScript
import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit';
|
|
import { createRef, ref, Ref } from 'lit/directives/ref.js';
|
|
import { customElement, property } from 'lit/decorators.js';
|
|
|
|
import { TitleControlConfig } from '../types.js';
|
|
|
|
import titleStyle from '../scss/title-control.scss';
|
|
|
|
type PaperToast = HTMLElement & {
|
|
opened: boolean;
|
|
};
|
|
|
|
@customElement('frigate-card-title-control')
|
|
export class FrigateCardTitleControl extends LitElement {
|
|
@property({ attribute: false })
|
|
public config?: TitleControlConfig;
|
|
|
|
@property({ attribute: false })
|
|
public text?: string;
|
|
|
|
@property({ attribute: false })
|
|
public fitInto?: HTMLElement;
|
|
|
|
protected _toastRef: Ref<PaperToast> = createRef();
|
|
|
|
/**
|
|
* Master render method.
|
|
* @returns A rendered template.
|
|
*/
|
|
protected render(): TemplateResult {
|
|
if (!this.text || !this.config || this.config.mode == 'none' || !this.fitInto) {
|
|
return html``;
|
|
}
|
|
|
|
const verticalAlign = this.config.mode.match(/-top-/) ? 'top' : 'bottom';
|
|
const horizontalAlign = this.config.mode.match(/-left$/) ? 'left' : 'right';
|
|
|
|
return html` <paper-toast
|
|
${ref(this._toastRef)}
|
|
class="capsule"
|
|
.duration=${this.config.duration_seconds * 1000}
|
|
.verticalAlign=${verticalAlign}
|
|
.horizontalAlign=${horizontalAlign}
|
|
.text="${this.text}"
|
|
.fitInto=${this.fitInto}
|
|
>
|
|
</paper-toast>`;
|
|
}
|
|
|
|
/**
|
|
* Determine if the toast is visible.
|
|
* @returns `true` if the toast is visible, `false` otherwise.
|
|
*/
|
|
public isVisible(): boolean {
|
|
return this._toastRef.value?.opened ?? false;
|
|
}
|
|
|
|
/**
|
|
* Show the toast.
|
|
*/
|
|
public hide(): void {
|
|
if (this._toastRef.value) {
|
|
// Set it to false first, to ensure the timer resets.
|
|
this._toastRef.value.opened = false;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Show the toast.
|
|
*/
|
|
public show(): void {
|
|
if (this._toastRef.value) {
|
|
// Set it to false first, to ensure the timer resets.
|
|
this._toastRef.value.opened = false;
|
|
this._toastRef.value.opened = true;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get element styles.
|
|
*/
|
|
static get styles(): CSSResultGroup {
|
|
return unsafeCSS(titleStyle);
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"frigate-card-title-control": FrigateCardTitleControl
|
|
}
|
|
}
|