Merge pull request #276 from NemesisRE/fix_hide_sidebar_companion_app

Fix hide_sidebar option in Companion App
NemesisRE · Sep 21, 2024 · beeffcd · beeffcd
2 parents 30525fb + b70b687
commit beeffcd
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 6 deletions.
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -132,6 +132,7 @@ export const CUSTOM_MOBILE_WIDTH_DEFAULT = 812;
 export const SUSCRIBE_EVENTS_TYPE = 'subscribe_events';
 export const STATE_CHANGED_EVENT = 'state_changed';
 export const TOGGLE_MENU_EVENT = 'hass-toggle-menu';
+export const MC_DRAWER_CLOSED_EVENT = 'MDCDrawer:closed';
 export const MAX_ATTEMPTS = 500;
 export const RETRY_DELAY = 50;
 export const WINDOW_RESIZE_DELAY = 250;
diff --git a/src/kiosk-mode.ts b/src/kiosk-mode.ts
@@ -14,6 +14,7 @@ import {
 	ConditionalKioskConfig,
 	SuscriberEvent,
 	EntitySetting,
+	HaSidebar,
 	Version
 } from '@types';
 import {
@@ -26,6 +27,7 @@ import {
 	SUSCRIBE_EVENTS_TYPE,
 	STATE_CHANGED_EVENT,
 	TOGGLE_MENU_EVENT,
+	MC_DRAWER_CLOSED_EVENT,
 	WINDOW_RESIZE_DELAY,
 	NAMESPACE,
 	NON_CRITICAL_WARNING
@@ -76,7 +78,7 @@ class KioskMode implements KioskModeRunner {
 			this.ha = await HOME_ASSISTANT.element as HomeAssistant;
 			this.main = await HOME_ASSISTANT_MAIN.selector.$.element;
 			this.huiRoot = await HUI_ROOT.selector.$.element;
-			this.drawerLayout = await HA_DRAWER.element;
+			this.drawerLayout = await HA_DRAWER.element as HaSidebar;
 			this.appToolbar = await HEADER.selector.query(ELEMENT.TOOLBAR).element;
 			this.sideBarRoot = await HA_SIDEBAR.selector.$.element;
 
@@ -116,7 +118,7 @@ class KioskMode implements KioskModeRunner {
 	private main: ShadowRoot;
 	private user: User;
 	private huiRoot: ShadowRoot;
-	private drawerLayout: Element;
+	private drawerLayout: HaSidebar;
 	private appToolbar: Element;
 	private sideBarRoot: ShadowRoot;
 	private menuTranslations: Record<string, string>;
@@ -277,10 +279,25 @@ class KioskMode implements KioskModeRunner {
 			this.options[OPTION.KIOSK] ||
 			this.options[OPTION.HIDE_SIDEBAR]
 		) {
-			this.main?.host?.addEventListener(TOGGLE_MENU_EVENT, this.blockEventHandler, true);
-			addStyle(STYLES.SIDEBAR, this.drawerLayout);
-			addStyle(STYLES.ASIDE, this.drawerLayout.shadowRoot);
-			if (queryString(SPECIAL_QUERY_PARAMS.CACHE)) setCache(OPTION.HIDE_SIDEBAR, TRUE);
+
+			const hideSidebarCommands = (): void => {
+				this.main?.host?.addEventListener(TOGGLE_MENU_EVENT, this.blockEventHandler, true);
+				addStyle(STYLES.SIDEBAR, this.drawerLayout);
+				addStyle(STYLES.ASIDE, this.drawerLayout.shadowRoot);
+				if (queryString(SPECIAL_QUERY_PARAMS.CACHE)) setCache(OPTION.HIDE_SIDEBAR, TRUE);
+				this.drawerLayout.removeEventListener(MC_DRAWER_CLOSED_EVENT, hideSidebarCommands);
+			};
+
+			// Workaround for Companion App, before hiding the sidebar it is needed to wait for the MC Drawer to close
+			// Check the next issue: https://github.com/NemesisRE/kiosk-mode/issues/275
+			if (
+				this.drawerLayout.type === 'modal' &&
+				this.drawerLayout.appContent?.inert
+			) {
+				this.drawerLayout.addEventListener(MC_DRAWER_CLOSED_EVENT, hideSidebarCommands);
+			} else {
+				hideSidebarCommands();
+			}
 		} else {
 			removeStyle(this.drawerLayout);
 			removeStyle(this.drawerLayout.shadowRoot);

diff --git a/src/types/index.ts b/src/types/index.ts
@@ -75,6 +75,11 @@ export class Lovelace extends HTMLElement {
     };
 }
 
+export class HaSidebar extends HTMLElement {
+	type: 'modal' | '';
+	appContent: HTMLElement;
+}
+
 export type SuscriberEvent = {
     event_type: string;
     data: {