Add new options to manage the header history button

package.json

@@ -23,6 +23,6 @@
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "home-assistant-query-selector": "^3.0.0"
+    "home-assistant-query-selector": "^4.0.0"
   }
 }

src/constants/index.ts

@@ -9,11 +9,36 @@ export const RETRY_DELAY = 50;
 export enum SELECTOR {
     HUI_VIEW = 'hui-view',
     MORE_INFO_CONTENT = 'more-info-content',
-    MORE_INFO_HSTORY = 'ha-more-info-history',
+    MORE_INFO_HISTORY = 'ha-more-info-history',
     MORE_INFO_LOGBOOK = 'ha-more-info-logbook',
-    HA_ATTRIBUTES = 'ha-attributes'
+    HA_ATTRIBUTES = 'ha-attributes',
+    MENU_ITEM = 'ha-icon-button',
+    MENU_ITEM_ICON = 'mwc-icon-button',
+    MORE_INFO_HEADER = 'ha-dialog-header',
+    MORE_INFO_HEADER_HISTORY = 'ha-icon-button[data-custom-selector="DIALOG_HISTORY"]'
 }
 
+export enum MENU {
+    SEARCH = 'SEARCH',
+    ASSIST = 'ASSIST',
+    REFRESH = 'REFRESH',
+    UNUSED_ENTITIES = 'UNUSED_ENTITIES',
+    RELOAD_RESOURCES = 'RELOAD_RESOURCES',
+    EDIT_DASHBOARD = 'EDIT_DASHBOARD',
+    DIALOG_DISMISS = 'DIALOG_DISMISS',
+    DIALOG_HISTORY = 'DIALOG_HISTORY',
+    DIALOG_SETTINGS = 'DIALOG_SETTINGS'
+}
+
+const UI_PREFIX = 'ui';
+const DIALOGS_PREFIX = `${UI_PREFIX}.dialogs.more_info_control`;
+
+export const MENU_REFERENCES = Object.freeze({
+	[MENU.DIALOG_HISTORY]: `${DIALOGS_PREFIX}.history`,
+	[MENU.DIALOG_SETTINGS]: `${DIALOGS_PREFIX}.settings`,
+	[MENU.DIALOG_DISMISS]: `${DIALOGS_PREFIX}.dismiss`
+});
+
 export const ESCAPE_REG_EXP = /[.?+^$[\]\\(){}|-]/g;
 
 export const ALL_FILTER = 'all';

src/custom-more-info.ts

@@ -2,16 +2,17 @@ import {
     HAQuerySelector,
     HAQuerySelectorEvent,
     OnLovelacePanelLoadDetail,
-    OnLovelaceMoreInfoDialogOpenDetail,
-    OnLovelaceHistoryAndLogBookDialogOpenDetail
+    OnMoreInfoDialogOpenDetail,
+    OnHistoryAndLogBookDialogOpenDetail
 } from 'home-assistant-query-selector';
 import {
     Lovelace,
     CustomMoreInfoConfig,
     Attributes,
     InternalFilters,
     InternalVisibility,
-    MoreInfoDialog
+    MoreInfoDialog,
+    HomeAssistant
 } from '@types';
 import {
     NAME,
@@ -25,22 +26,20 @@ import {
     addStyle,
     removeStyle,
     getHiddenStyle,
-    getPromisableElement
+    getPromisableElement,
+    getTranslations,
+    addDataSelectors
 } from '@utilities';
 import { version } from '../package.json';
 
-console.info(
-    `%c  ${NAME}  \n%c  Version ${version} ${DESCRIPTION}`,
-    'color: gold; font-weight: bold; background: black',
-    'color: white; font-weight: bold; background: steelblue'
-);
-
 class CustomMoreInfo {
 
     constructor() {
-        this._selector = new HAQuerySelector();
-        this._selector.addEventListener(HAQuerySelectorEvent.ON_PANEL_LOAD, (event) => {
-            this._debug('lovelace panel has been rendered so loading the configuration');
+        this._selector = new HAQuerySelector({
+            retries: 5,
+            delay: 500
+        });
+        this._selector.addEventListener(HAQuerySelectorEvent.ON_LOVELACE_PANEL_LOAD, (event) => {
             this.storeConfig(event.detail);
         });
         this._selector.addEventListener(HAQuerySelectorEvent.ON_MORE_INFO_DIALOG_OPEN, (event) => {
@@ -59,6 +58,7 @@ class CustomMoreInfo {
     private _config: CustomMoreInfoConfig;
     private _filters: Record<string, InternalFilters>;
     private _visibility: Record<string, InternalVisibility>;
+    private _translations: Record<string, string>;
 
     private _insertAttributesGlobs(
         entityId: string,
@@ -144,7 +144,7 @@ class CustomMoreInfo {
 
     protected storeConfig(detail: OnLovelacePanelLoadDetail): void {
         detail.HA_PANEL_LOVELACE.element
-            .then((lovelacePanel: Lovelace) => {
+            .then((lovelacePanel: Lovelace): void => {
                 const config = lovelacePanel?.lovelace?.config?.custom_more_info;
                 if (config) {
                     this._config = config;
@@ -161,10 +161,24 @@ class CustomMoreInfo {
                 this._filters = {};
                 this._visibility = {};
                 this._debug(this._config);
+            })
+            .finally(() => {
+                detail.HOME_ASSISTANT.element
+                    .then((ha: HomeAssistant): void => {
+                        getTranslations(ha)
+                            .then((translations: Record<string, string>) => {
+                                this._translations = translations;
+                                this._debug('translations have been retrieved. printing the translations');
+                                this._debug(this._translations);
+                            })
+                            .catch(() => {
+                                this._debug('error getting the translations');
+                            });
+                    });
             });
     }
 
-    protected async queryAttributes(detail: OnLovelaceMoreInfoDialogOpenDetail): Promise<void> {
+    protected async queryAttributes(detail: OnMoreInfoDialogOpenDetail): Promise<void> {
 
         const { HA_MORE_INFO_DIALOG_INFO } = detail;
 
@@ -187,9 +201,10 @@ class CustomMoreInfo {
 
     }
 
-    protected async queryHistoryAndLogbook(detail: OnLovelaceMoreInfoDialogOpenDetail | OnLovelaceHistoryAndLogBookDialogOpenDetail): Promise<void> {
+    protected async queryHistoryAndLogbook(detail: OnMoreInfoDialogOpenDetail | OnHistoryAndLogBookDialogOpenDetail): Promise<void> {
 
         const {
+            HA_DIALOG,
             HA_MORE_INFO_DIALOG,
             HA_DIALOG_CONTENT
         } = detail;
@@ -201,12 +216,33 @@ class CustomMoreInfo {
         );
         const domain = entityId.replace(/^(.+)\..+$/, '$1');
         const deviceClass = dialog.___entry.original_device_class;
+
+        const visibility = this.getVisibility(
+            entityId,
+            domain,
+            deviceClass
+        );
+
+        HA_DIALOG
+            .selector
+            .query(SELECTOR.MORE_INFO_HEADER)
+            .element
+            .then((header: Element): void => {
+                if (header) {
+                    this._debug('finished the task of querying the header, the result is');
+                    this._debug(header);
+                    this._addDataSelectors(header);
+                    this._hideHeaderElements(header, visibility);
+                } else {
+                    this._debug('this dialog doesn‘t have a header or it has not been found');
+                }
+            });
 
         HA_DIALOG_CONTENT
             .selector
             .deepQuery(
                 [
-                    SELECTOR.MORE_INFO_HSTORY,
+                    SELECTOR.MORE_INFO_HISTORY,
                     SELECTOR.MORE_INFO_LOGBOOK
                 ].join(',')
             )
@@ -217,14 +253,9 @@ class CustomMoreInfo {
                     const container = element.parentElement || element.getRootNode() as ShadowRoot;
                     this._debug('history or logbook have been found');
                     this._debug(element);
-                    this.hideElements(
-                        container,
-                        entityId,
-                        domain,
-                        deviceClass
-                    );
+                    this.hideContentElements(container, visibility);
                 } else {
-                    this._debug('this dialog doesn‘t have history or logbook or they have not been found');
+                    this._debug('this dialog doesn‘t have history or logbook or they have not been found.');
                 }
             });
 
@@ -257,36 +288,55 @@ class CustomMoreInfo {
 
     }
 
-    protected hideElements(
+    protected hideContentElements(
         container: Element | ShadowRoot,
-        entityId: string,
-        domain: string,
-        deviceClass: string | undefined
+        visibility: InternalVisibility
     ): void {
 
-        const visibility = this.getVisibility(
-            entityId,
-            domain,
-            deviceClass
-        );
-
         const styles = [
             visibility.hide_history
-                ? getHiddenStyle(SELECTOR.MORE_INFO_HSTORY)
+                ? getHiddenStyle(SELECTOR.MORE_INFO_HISTORY)
                 : '',
             visibility.hide_logbook
                 ? getHiddenStyle(SELECTOR.MORE_INFO_LOGBOOK)
                 : ''
         ];
 
-        if (visibility.hide_history || visibility.hide_logbook) {
+        if (
+            visibility.hide_history ||
+            visibility.hide_logbook
+        ) {
             addStyle(container, styles.join(''));
         } else {
             removeStyle(container);
         }
 
     }
 
+    protected _addDataSelectors(header: Element): void {
+        addDataSelectors(
+            header.querySelectorAll(SELECTOR.MENU_ITEM),
+            this._translations
+        );
+    }
+
+    protected _hideHeaderElements(
+        content: Element,
+        visibility: InternalVisibility
+    ): void {
+
+        if (!this._translations) {
+            this._debug('skiping the header history task, because translations don‘t exist');
+            return;
+        }
+
+        if (visibility.hide_header_history) {
+            addStyle(content, getHiddenStyle(SELECTOR.MORE_INFO_HEADER_HISTORY));
+        } else {
+            removeStyle(content);
+        }
+    }
+
     protected getFilters(attributes: Attributes): InternalFilters {
 
         const entityId = attributes.__stateObj.entity_id;
@@ -380,7 +430,8 @@ class CustomMoreInfo {
 
         const hide = {
             history: false,
-            logbook: false
+            logbook: false,
+            header_history: false
         };
 
         if (
@@ -419,9 +470,33 @@ class CustomMoreInfo {
             hide.logbook = false;
         }
 
+        if (
+            this._anyGlobMatch(entityId, this._config?.hide_header_history?.by_glob) ||
+            this._config?.hide_header_history?.by_device_class?.includes(deviceClass) ||
+            this._config?.hide_header_history?.by_domain?.includes(domain) ||
+            this._config?.hide_header_history?.by_entity_id?.includes(entityId)
+        ) {
+            hide.header_history = true;
+        }
+
+        if (
+            this._anyGlobMatch(entityId, this._config?.unhide_header_history?.by_glob) ||
+            this._config?.unhide_header_history?.by_device_class?.includes(deviceClass) ||
+            this._config?.unhide_header_history?.by_domain?.includes(domain) ||
+            this._config?.unhide_header_history?.by_entity_id?.includes(entityId)
+        ) {
+            hide.header_history = false;
+        }
+
         this._visibility[entityId] = {
             hide_history: hide.history,
-            hide_logbook: hide.logbook
+            hide_logbook: hide.logbook,
+            hide_header_history: hide.header_history ||
+            (
+                !!this._config?.auto_hide_header_history &&
+                hide.history &&
+                hide.logbook
+            )
         };
 
         this._debug('finished the visibility retrieval, printing the visibility...');
@@ -433,8 +508,11 @@ class CustomMoreInfo {
 
 }
 
-// Ensure the DOM is fully loaded before running the script
-Promise.resolve(customElements.whenDefined(SELECTOR.HUI_VIEW))
-	.then(() => {
-		window.customMoreInfo = new CustomMoreInfo();
-	});
+if (!window.customMoreInfo) {
+    console.info(
+        `%c  ${NAME}  \n%c  Version ${version} ${DESCRIPTION}`,
+        'color: gold; font-weight: bold; background: black',
+        'color: white; font-weight: bold; background: steelblue'
+    );
+    window.customMoreInfo = new CustomMoreInfo();
+}

src/types/index.ts

@@ -1,6 +1,13 @@
 export interface CustomMoreInfoClass {
 }
 
+export interface HomeAssistant extends HTMLElement {
+	hass: {
+        language: string;
+        resources: Record<string, Record<string, string>>;
+    };
+}
+
 export enum BY_TYPES {
     by_entity_id,
     by_domain,
@@ -30,6 +37,9 @@ export interface CustomMoreInfoConfig {
     hide_logbook?: ElementsVisibility;
     unhide_history?: ElementsVisibility;
     unhide_logbook?: ElementsVisibility;
+    hide_header_history?: ElementsVisibility;
+    unhide_header_history?: ElementsVisibility;
+    auto_hide_header_history?: boolean;
 }
 
 export interface InternalFilters {
@@ -40,6 +50,7 @@ export interface InternalFilters {
 export interface InternalVisibility {
     hide_history: boolean;
     hide_logbook: boolean;
+    hide_header_history: boolean;
 }
 
 export interface Lovelace extends HTMLElement {