From eaaf841a8731d934e1cedcf119c4fdf0adf20920 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Thu, 6 Dec 2018 14:12:00 +0100 Subject: [PATCH] Code split edit dialog (#2198) * Code split edit dialog * Code split edit view dialog --- .../lovelace/components/hui-card-options.ts | 2 +- .../lovelace/editor/hui-dialog-edit-card.ts | 27 +----------- .../lovelace/editor/hui-dialog-edit-view.ts | 35 ++-------------- .../lovelace/editor/show-edit-card-dialog.ts | 38 +++++++++++++++++ .../lovelace/editor/show-edit-view-dialog.ts | 42 +++++++++++++++++++ src/panels/lovelace/hui-root.js | 2 +- src/panels/lovelace/hui-view.js | 2 +- 7 files changed, 88 insertions(+), 60 deletions(-) create mode 100644 src/panels/lovelace/editor/show-edit-card-dialog.ts create mode 100644 src/panels/lovelace/editor/show-edit-view-dialog.ts diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts index d66297d7fe..c84761f2dd 100644 --- a/src/panels/lovelace/components/hui-card-options.ts +++ b/src/panels/lovelace/components/hui-card-options.ts @@ -1,7 +1,7 @@ import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element"; import "@polymer/paper-button/paper-button"; import { fireEvent } from "../../../common/dom/fire_event"; -import { showEditCardDialog } from "../editor/hui-dialog-edit-card"; +import { showEditCardDialog } from "../editor/show-edit-card-dialog"; import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin"; import { confDeleteCard } from "../editor/delete-card"; diff --git a/src/panels/lovelace/editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/hui-dialog-edit-card.ts index 0516753e64..0b5c3f7112 100644 --- a/src/panels/lovelace/editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/hui-dialog-edit-card.ts @@ -2,7 +2,7 @@ import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element"; import { TemplateResult } from "lit-html"; import { HomeAssistant } from "../../../types"; -import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event"; +import { HASSDomEvent } from "../../../common/dom/fire_event"; import { LovelaceCardConfig } from "../../../data/lovelace"; import "./hui-edit-card"; import "./hui-migrate-config"; @@ -11,7 +11,6 @@ declare global { // for fire event interface HASSDomEvents { "reload-lovelace": undefined; - "show-edit-card": EditCardDialogParams; } // for add event listener interface HTMLElementEventMap { @@ -19,10 +18,6 @@ declare global { } } -let registeredDialog = false; -const dialogShowEvent = "show-edit-card"; -const dialogTag = "hui-dialog-edit-card"; - export interface EditCardDialogParams { cardConfig?: LovelaceCardConfig; viewId?: string | number; @@ -30,24 +25,6 @@ export interface EditCardDialogParams { reloadLovelace: () => void; } -const registerEditCardDialog = (element: HTMLElement) => - fireEvent(element, "register-dialog", { - dialogShowEvent, - dialogTag, - dialogImport: () => import("./hui-dialog-edit-card"), - }); - -export const showEditCardDialog = ( - element: HTMLElement, - editCardDialogParams: EditCardDialogParams -) => { - if (!registeredDialog) { - registeredDialog = true; - registerEditCardDialog(element); - } - fireEvent(element, dialogShowEvent, editCardDialogParams); -}; - export class HuiDialogEditCard extends LitElement { protected hass?: HomeAssistant; private _params?: EditCardDialogParams; @@ -110,4 +87,4 @@ declare global { } } -customElements.define(dialogTag, HuiDialogEditCard); +customElements.define("hui-dialog-edit-card", HuiDialogEditCard); diff --git a/src/panels/lovelace/editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/hui-dialog-edit-view.ts index f962e4d43e..4959cd1227 100644 --- a/src/panels/lovelace/editor/hui-dialog-edit-view.ts +++ b/src/panels/lovelace/editor/hui-dialog-edit-view.ts @@ -2,16 +2,15 @@ import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element"; import { TemplateResult } from "lit-html"; import { HomeAssistant } from "../../../types"; -import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event"; -import { LovelaceViewConfig } from "../../../data/lovelace"; +import { HASSDomEvent } from "../../../common/dom/fire_event"; import "./hui-edit-view"; import "./hui-migrate-config"; +import { EditViewDialogParams } from "./show-edit-view-dialog"; declare global { // for fire event interface HASSDomEvents { "reload-lovelace": undefined; - "show-edit-view": EditViewDialogParams; } // for add event listener interface HTMLElementEventMap { @@ -19,34 +18,6 @@ declare global { } } -let registeredDialog = false; -const dialogShowEvent = "show-edit-view"; -const dialogTag = "hui-dialog-edit-view"; - -export interface EditViewDialogParams { - viewConfig?: LovelaceViewConfig; - add?: boolean; - reloadLovelace: () => void; -} - -const registerEditViewDialog = (element: HTMLElement) => - fireEvent(element, "register-dialog", { - dialogShowEvent, - dialogTag, - dialogImport: () => import("./hui-dialog-edit-view"), - }); - -export const showEditViewDialog = ( - element: HTMLElement, - editViewDialogParams: EditViewDialogParams -) => { - if (!registeredDialog) { - registeredDialog = true; - registerEditViewDialog(element); - } - fireEvent(element, dialogShowEvent, editViewDialogParams); -}; - export class HuiDialogEditView extends LitElement { protected hass?: HomeAssistant; private _params?: EditViewDialogParams; @@ -98,4 +69,4 @@ declare global { } } -customElements.define(dialogTag, HuiDialogEditView); +customElements.define("hui-dialog-edit-view", HuiDialogEditView); diff --git a/src/panels/lovelace/editor/show-edit-card-dialog.ts b/src/panels/lovelace/editor/show-edit-card-dialog.ts new file mode 100644 index 0000000000..dfd8ee379a --- /dev/null +++ b/src/panels/lovelace/editor/show-edit-card-dialog.ts @@ -0,0 +1,38 @@ +import { LovelaceCardConfig } from "../../../data/lovelace"; +import { fireEvent } from "../../../common/dom/fire_event"; + +declare global { + // for fire event + interface HASSDomEvents { + "show-edit-card": EditCardDialogParams; + } +} + +let registeredDialog = false; +const dialogShowEvent = "show-edit-card"; +const dialogTag = "hui-dialog-edit-card"; + +export interface EditCardDialogParams { + cardConfig?: LovelaceCardConfig; + viewId?: string | number; + add: boolean; + reloadLovelace: () => void; +} + +const registerEditCardDialog = (element: HTMLElement) => + fireEvent(element, "register-dialog", { + dialogShowEvent, + dialogTag, + dialogImport: () => import("./hui-dialog-edit-card"), + }); + +export const showEditCardDialog = ( + element: HTMLElement, + editCardDialogParams: EditCardDialogParams +) => { + if (!registeredDialog) { + registeredDialog = true; + registerEditCardDialog(element); + } + fireEvent(element, dialogShowEvent, editCardDialogParams); +}; diff --git a/src/panels/lovelace/editor/show-edit-view-dialog.ts b/src/panels/lovelace/editor/show-edit-view-dialog.ts new file mode 100644 index 0000000000..b2f76be9e6 --- /dev/null +++ b/src/panels/lovelace/editor/show-edit-view-dialog.ts @@ -0,0 +1,42 @@ +import { HASSDomEvent, fireEvent } from "../../../common/dom/fire_event"; +import { LovelaceViewConfig } from "../../../data/lovelace"; + +declare global { + // for fire event + interface HASSDomEvents { + "reload-lovelace": undefined; + "show-edit-view": EditViewDialogParams; + } + // for add event listener + interface HTMLElementEventMap { + "reload-lovelace": HASSDomEvent; + } +} + +let registeredDialog = false; +const dialogShowEvent = "show-edit-view"; +const dialogTag = "hui-dialog-edit-view"; + +export interface EditViewDialogParams { + viewConfig?: LovelaceViewConfig; + add?: boolean; + reloadLovelace: () => void; +} + +const registerEditViewDialog = (element: HTMLElement) => + fireEvent(element, "register-dialog", { + dialogShowEvent, + dialogTag, + dialogImport: () => import("./hui-dialog-edit-view"), + }); + +export const showEditViewDialog = ( + element: HTMLElement, + editViewDialogParams: EditViewDialogParams +) => { + if (!registeredDialog) { + registeredDialog = true; + registerEditViewDialog(element); + } + fireEvent(element, dialogShowEvent, editViewDialogParams); +}; diff --git a/src/panels/lovelace/hui-root.js b/src/panels/lovelace/hui-root.js index 33ffb3177b..257640826c 100644 --- a/src/panels/lovelace/hui-root.js +++ b/src/panels/lovelace/hui-root.js @@ -33,7 +33,7 @@ import "./hui-view"; import debounce from "../../common/util/debounce"; import createCardElement from "./common/create-card-element"; import { showSaveDialog } from "./editor/hui-dialog-save-config"; -import { showEditViewDialog } from "./editor/hui-dialog-edit-view"; +import { showEditViewDialog } from "./editor/show-edit-view-dialog"; import { confDeleteView } from "./editor/delete-view"; // CSS and JS should only be imported once. Modules and HTML are safe. diff --git a/src/panels/lovelace/hui-view.js b/src/panels/lovelace/hui-view.js index 0f75b0d75c..ea8c89f8ec 100644 --- a/src/panels/lovelace/hui-view.js +++ b/src/panels/lovelace/hui-view.js @@ -11,7 +11,7 @@ import EventsMixin from "../../mixins/events-mixin"; import localizeMixin from "../../mixins/localize-mixin"; import createCardElement from "./common/create-card-element"; import { computeCardSize } from "./common/compute-card-size"; -import { showEditCardDialog } from "./editor/hui-dialog-edit-card"; +import { showEditCardDialog } from "./editor/show-edit-card-dialog"; class HUIView extends localizeMixin(EventsMixin(PolymerElement)) { static get template() {