From 023c66b137ea4a192de0bcbafd81faae9c3d0131 Mon Sep 17 00:00:00 2001 From: Dermot Duffy Date: Sat, 18 Sep 2021 20:35:22 -0700 Subject: [PATCH] Convert menu to a separate component file. --- rollup.config.js | 2 +- src/{main.ts => card.ts} | 130 ++------------------------------ src/components/menu.ts | 121 +++++++++++++++++++++++++++++ src/{ => components}/message.ts | 9 +-- 4 files changed, 134 insertions(+), 128 deletions(-) rename src/{main.ts => card.ts} (88%) create mode 100644 src/components/menu.ts rename src/{ => components}/message.ts (90%) diff --git a/rollup.config.js b/rollup.config.js index ab52b946..3b875029 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -44,7 +44,7 @@ const plugins = [ export default [ { - input: ['src/main.ts'], + input: ['src/card.ts'], output: { file: 'dist/frigate-hass-card.js', format: 'es', diff --git a/src/main.ts b/src/card.ts similarity index 88% rename from src/main.ts rename to src/card.ts index bfffab27..7de4addf 100644 --- a/src/main.ts +++ b/src/card.ts @@ -11,7 +11,8 @@ import { customElement, property, query, state } from 'lit/decorators'; import { classMap } from 'lit/directives/class-map.js'; import { until } from 'lit/directives/until.js'; -import { renderMessage, renderErrorMessage, renderProgressIndicator } from './message'; +import { FrigateCardMenu } from './components/menu'; +import { renderMessage, renderErrorMessage, renderProgressIndicator } from './components/message'; import { HomeAssistant, @@ -22,9 +23,11 @@ import { } from 'custom-card-helpers'; import './editor'; +import './components/menu' +import './components/message' -import frigate_card_style from './scss/card.scss'; -import frigate_card_menu_style from './scss/menu.scss'; + +import cardStyle from './scss/card.scss'; import { MenuButton, @@ -39,7 +42,6 @@ import type { ExtendedHomeAssistant, FrigateCardConfig, FrigateCardView, - FrigateMenuMode, ResolvedMedia, } from './types'; import { CARD_VERSION } from './const'; @@ -70,8 +72,6 @@ console.info( description: localize('common.frigate_card_description'), }); -type FrigateCardMenuCallback = (name: string) => any; - // Determine whether the card should be updated based on Home Assistant changes. function shouldUpdateBasedOnHass( newHass: HomeAssistant | null, @@ -100,119 +100,6 @@ function shouldUpdateBasedOnHass( return false; } -// A menu for the Frigate card. -@customElement('frigate-card-menu') -export class FrigateCardMenu extends LitElement { - static FRIGATE_CARD_MENU_ID: string = 'frigate-card-menu-id' as const; - - @property({ attribute: false }) - protected menuMode: FrigateMenuMode = 'hidden-top'; - - @property({ attribute: false }) - protected expand = false; - - @property({ attribute: false }) - protected actionCallback: FrigateCardMenuCallback | null = null; - - @property({ attribute: false }) - public buttons: Map = new Map(); - - // Call the callback. - protected _callAction(name: string): void { - if (this.menuMode.startsWith('hidden-')) { - if (name == 'frigate') { - this.expand = !this.expand; - return; - } - // Collapse menu after the user clicks on something. - this.expand = false; - } - - if (this.actionCallback) { - this.actionCallback(name); - } - } - - // Render a menu button. - protected _renderButton(name: string, button: MenuButton): TemplateResult { - const classes = { - button: true, - emphasize: button.emphasize ?? false, - }; - - return html` this._callAction(name)} - >`; - } - - // Render the Frigate menu button. - protected _renderFrigateButton(name: string, button: MenuButton): TemplateResult { - const icon = - this.menuMode.startsWith('hidden-') && !this.expand - ? 'mdi:alpha-f-box-outline' - : 'mdi:alpha-f-box'; - - return this._renderButton(name, Object.assign({}, button, { icon: icon })); - } - - // Render the menu. - protected render(): TemplateResult { - // If the menu is off, or if it's in hidden mode but there's no button to - // unhide it, just show nothing. - if ( - this.menuMode == 'none' || - (this.menuMode.startsWith('hidden-') && !this.buttons.get('frigate')) - ) { - return html``; - } - - const classes = { - 'frigate-card-menu': true, - 'overlay-hidden': - this.menuMode.startsWith('hidden-') || - this.menuMode.startsWith('overlay-') || - this.menuMode.startsWith('hover-'), - 'expanded-horizontal': - (this.menuMode.startsWith('overlay-') || - this.menuMode.startsWith('hover-') || - this.expand) && - (this.menuMode.endsWith('-top') || this.menuMode.endsWith('-bottom')), - 'expanded-vertical': - (this.menuMode.startsWith('overlay-') || - this.menuMode.startsWith('hover-') || - this.expand) && - (this.menuMode.endsWith('-left') || this.menuMode.endsWith('-right')), - full: ['above', 'below'].includes(this.menuMode), - left: this.menuMode.endsWith('-left'), - right: this.menuMode.endsWith('-right'), - top: this.menuMode.endsWith('-top'), - bottom: this.menuMode.endsWith('-bottom'), - }; - - return html` -
- ${Array.from(this.buttons.keys()).map((name) => { - const button = this.buttons.get(name); - if (button) { - return name === 'frigate' - ? this._renderFrigateButton(name, button) - : this._renderButton(name, button); - } - return html``; - })} -
- `; - } - - // Return compiled CSS styles (thus safe to use with unsafeCSS). - static get styles(): CSSResultGroup { - return unsafeCSS(frigate_card_menu_style); - } -} - interface ViewParameters { view?: FrigateCardView; target?: BrowseMediaSource; @@ -285,7 +172,7 @@ export class FrigateCard extends LitElement { // Whether or not there is an active clip being played. protected _clipPlaying = false; - @query(`#${FrigateCardMenu.FRIGATE_CARD_MENU_ID}`) + @query("frigate-card-menu") _menu!: FrigateCardMenu | null; // A small cache to avoid needing to create a new list of entities every time @@ -1039,7 +926,6 @@ export class FrigateCard extends LitElement { }; return html` void; + +// A menu for the Frigate card. +@customElement('frigate-card-menu') +export class FrigateCardMenu extends LitElement { + @property({ attribute: false }) + protected menuMode: FrigateMenuMode = 'hidden-top'; + + @property({ attribute: false }) + protected expand = false; + + @property({ attribute: false }) + protected actionCallback: FrigateCardMenuCallback | null = null; + + @property({ attribute: false }) + public buttons: Map = new Map(); + + // Call the callback. + protected _callAction(name: string): void { + if (this.menuMode.startsWith('hidden-')) { + if (name == 'frigate') { + this.expand = !this.expand; + return; + } + // Collapse menu after the user clicks on something. + this.expand = false; + } + + if (this.actionCallback) { + this.actionCallback(name); + } + } + + // Render a menu button. + protected _renderButton(name: string, button: MenuButton): TemplateResult { + const classes = { + button: true, + emphasize: button.emphasize ?? false, + }; + + return html` this._callAction(name)} + >`; + } + + // Render the Frigate menu button. + protected _renderFrigateButton(name: string, button: MenuButton): TemplateResult { + const icon = + this.menuMode.startsWith('hidden-') && !this.expand + ? 'mdi:alpha-f-box-outline' + : 'mdi:alpha-f-box'; + + return this._renderButton(name, Object.assign({}, button, { icon: icon })); + } + + // Render the menu. + protected render(): TemplateResult { + // If the menu is off, or if it's in hidden mode but there's no button to + // unhide it, just show nothing. + if ( + this.menuMode == 'none' || + (this.menuMode.startsWith('hidden-') && !this.buttons.get('frigate')) + ) { + return html``; + } + + const classes = { + 'frigate-card-menu': true, + 'overlay-hidden': + this.menuMode.startsWith('hidden-') || + this.menuMode.startsWith('overlay-') || + this.menuMode.startsWith('hover-'), + 'expanded-horizontal': + (this.menuMode.startsWith('overlay-') || + this.menuMode.startsWith('hover-') || + this.expand) && + (this.menuMode.endsWith('-top') || this.menuMode.endsWith('-bottom')), + 'expanded-vertical': + (this.menuMode.startsWith('overlay-') || + this.menuMode.startsWith('hover-') || + this.expand) && + (this.menuMode.endsWith('-left') || this.menuMode.endsWith('-right')), + full: ['above', 'below'].includes(this.menuMode), + left: this.menuMode.endsWith('-left'), + right: this.menuMode.endsWith('-right'), + top: this.menuMode.endsWith('-top'), + bottom: this.menuMode.endsWith('-bottom'), + }; + + return html` +
+ ${Array.from(this.buttons.keys()).map((name) => { + const button = this.buttons.get(name); + if (button) { + return name === 'frigate' + ? this._renderFrigateButton(name, button) + : this._renderButton(name, button); + } + return html``; + })} +
+ `; + } + + // Return compiled CSS styles (thus safe to use with unsafeCSS). + static get styles(): CSSResultGroup { + return unsafeCSS(menuStyle); + } +} diff --git a/src/message.ts b/src/components/message.ts similarity index 90% rename from src/message.ts rename to src/components/message.ts index 34ddd999..cb9683ec 100644 --- a/src/message.ts +++ b/src/components/message.ts @@ -1,8 +1,7 @@ import { CSSResultGroup, LitElement, TemplateResult, html, unsafeCSS } from 'lit'; import { customElement, property } from 'lit/decorators'; -import { localize } from './localize/localize'; - -import frigate_card_message_style from './scss/message.scss'; +import { localize } from '../localize/localize'; +import messageStyle from '../scss/message.scss'; const URL_TROUBLESHOOTING = 'https://github.com/dermotduffy/frigate-hass-card#troubleshooting'; @@ -26,7 +25,7 @@ export class FrigateCardMessage extends LitElement { } static get styles(): CSSResultGroup { - return unsafeCSS(frigate_card_message_style); + return unsafeCSS(messageStyle); } } @@ -54,7 +53,7 @@ export class FrigateCardProgressIndicator extends LitElement { } static get styles(): CSSResultGroup { - return unsafeCSS(frigate_card_message_style); + return unsafeCSS(messageStyle); } }