Skip to content

Commit

Permalink
Merge pull request #13 from elchininet/fix_multiple_issues
Browse files Browse the repository at this point in the history 
Fix multiple issues with options
  • Loading branch information
@NemesisRE
NemesisRE authored Mar 12, 2023
2 parents 2109eff + 20a1e4b commit 6e21d5a
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 25 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ resources:
|`hide_overflow:` | Boolean | false | Hides the top right menu.
|`hide_account:` | Boolean | false | Hides the account icon.
|`hide_search:` | Boolean | false | Hides the search icon.
|`hide_assistant:` | Boolean | false | Hides the assistant icon.
|`ignore_entity_settings:` | Boolean | false | Useful for [conditional configs](#conditional-lovelace-config) and will cause `entity_settings` to be ignored.
|`ignore_mobile_settings:` | Boolean | false | Useful for [conditional configs](#conditional-lovelace-config) and will cause `mobile_settings` to be ignored.

Expand Down
92 changes: 67 additions & 25 deletions kiosk-mode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,18 +38,38 @@ class KioskMode {
processConfig(lovelace, config) {
const dash = this.ha.hass.panelUrl;
if (!window.kioskModeEntities[dash]) window.kioskModeEntities[dash] = [];
this.hideHeader = this.hideSidebar = this.hideOverflow = this.hideAccount = this.hideSearch = this.ignoreEntity = this.ignoreMobile = false;
this.hideHeader = this.hideSidebar = this.hideOverflow = this.hideAccount = this.hideSearch = this.hideAssistant = this.ignoreEntity = this.ignoreMobile = false;

// Retrieve localStorage values & query string options.
const queryStringsSet =
this.cached(["kmHeader", "kmSidebar", "kmOverflow", "kmMenuButton", "kmAccount", "kmSearch"]) || this.queryString(["kiosk", "hide_sidebar", "hide_header", "hide_overflow", "hide_menubutton", "hide_account", "hide_search"]);
const queryStringsSet = (
this.cached([
"kmHeader",
"kmSidebar",
"kmOverflow",
"kmMenuButton",
"kmAccount",
"kmSearch",
"kmAssistant"
]) ||
this.queryString([
"kiosk",
"hide_sidebar",
"hide_header",
"hide_overflow",
"hide_menubutton",
"hide_account",
"hide_search",
"hide_assistant"
])
);
if (queryStringsSet) {
this.hideHeader = this.cached("kmHeader") || this.queryString(["kiosk", "hide_header"]);
this.hideSidebar = this.cached("kmSidebar") || this.queryString(["kiosk", "hide_sidebar"]);
this.hideOverflow = this.cached("kmOverflow") || this.queryString(["kiosk", "hide_overflow"]);
this.hideMenuButton = this.cached("kmMenuButton") || this.queryString(["kiosk", "hide_menubutton"]);
this.hideAccount = this.cached("kmAccount") || this.queryString(["kiosk", "hide_account"]);
this.hideSearch = this.cached("kmSearch") || this.queryString(["kiosk", "hide_search"]);
this.hideAssistant = this.cached("kmAssistant") || this.queryString(["kiosk", "hide_assistant"]);
}

// Use config values only if config strings and cache aren't used.
Expand All @@ -59,6 +79,7 @@ class KioskMode {
this.hideMenuButton = queryStringsSet ? this.hideMenuButton : config.kiosk || config.hide_menubutton;
this.hideAccount = queryStringsSet ? this.hideAccount : config.kiosk || config.hide_account;
this.hideSearch = queryStringsSet ? this.hideSearch : config.kiosk || config.hide_search;
this.hideAssistant = queryStringsSet ? this.hideAssistant : config.kiosk || config.hide_assistant;

const adminConfig = this.user.is_admin ? config.admin_settings : config.non_admin_settings;
if (adminConfig) this.setOptions(adminConfig);
Expand Down Expand Up @@ -86,6 +107,7 @@ class KioskMode {
if ("hide_overflow" in conf) this.hideOverflow = conf.hide_overflow;
if ("hide_account" in conf) this.hideAccount = conf.hide_account;
if ("hide_search" in conf) this.hideSearch = conf.hide_search;
if ("hide_assistant" in conf) this.hideAssistant = config.hide_assistant;
if ("hide_menubutton" in conf) this.hideMenuButton = conf.hide_menubutton;
if ("kiosk" in conf) this.hideHeader = this.hideSidebar = conf.kiosk;
}
Expand All @@ -99,13 +121,19 @@ class KioskMode {
const huiRoot = lovelace.shadowRoot.querySelector("hui-root").shadowRoot;
const drawerLayout = this.main.querySelector("app-drawer-layout");
const appToolbar = huiRoot.querySelector("app-toolbar");
const overflowStyle = "ha-icon-button{display:none !important;}";
const appDrawerRoot = drawerLayout.querySelector("app-drawer").querySelector("ha-sidebar").shadowRoot;
const searchStyle = "ha-icon-button{display:none !important;}";
const overflowStyle = "app-toolbar > ha-button-menu{display:none !important;}";
const sideBarRoot = drawerLayout.querySelector("app-drawer").querySelector("ha-sidebar").shadowRoot;
const menuButtonStyle = "ha-menu-button{display:none !important;}";
const searchStyle = "app-toolbar > ha-icon-button:first-of-type{display:none !important;}";
const assistantStyle = "app-toolbar > ha-icon-button:nth-of-type(2){display:none !important;}";
const headerStyle = "#view{min-height:100vh !important;--header-height:0;}app-header{display:none;}";

if (this.hideHeader || this.hideOverflow) {
this.addStyle(`${this.hideHeader ? headerStyle : ""}${this.hideOverflow ? overflowStyle : ""}`, huiRoot);
const styles = [
this.hideHeader ? headerStyle : "",
this.hideOverflow ? overflowStyle : ""
];
this.addStyle(styles.join(""), huiRoot);
if (this.queryString("cache")) {
if (this.hideHeader) this.setCache("kmHeader", "true");
if (this.hideOverflow) this.setCache("kmOverflow", "true");
Expand All @@ -116,31 +144,44 @@ class KioskMode {

if (this.hideSidebar) {
this.addStyle(":host{--app-drawer-width:0 !important;}#drawer{display:none;}", drawerLayout);
this.addStyle("ha-menu-button{display:none !important;}", appToolbar);
if (this.queryString("cache")) this.setCache("kmSidebar", "true");
} else {
this.removeStyle([appToolbar, drawerLayout]);
this.removeStyle(drawerLayout);
}

if (this.hideMenuButton) {
this.addStyle("ha-menu-button{display:none !important;}", appToolbar);
if (this.queryString("cache")) this.setCache("kmMenuButton", "true");
if (
this.hideAccount ||
this.hideMenuButton
) {
const styles = [
this.hideAccount ? ".profile{display:none !important;}" : "",
this.hideMenuButton ? ".menu ha-icon-button{display:none !important;}" : ""
];
this.addStyle(styles.join(""), sideBarRoot);
if (this.hideAccount && this.queryString("cache")) this.setCache("kmAccount", "true");
} else {
this.removeStyle(appToolbar);
this.removeStyle(sideBarRoot);
}

if (this.hideAccount) {
this.addStyle(".profile{display:none !important;}", appDrawerRoot);
if (this.queryString("cache")) this.setCache("kmAccount", "true");
if (
this.hideSearch ||
this.hideAssistant ||
this.hideMenuButton ||
this.hideSidebar
) {
const styles = [
this.hideSearch ? searchStyle : "",
this.hideAssistant ? assistantStyle : "",
this.hideMenuButton || this.hideSidebar ? menuButtonStyle : ""
];
this.addStyle(styles.join(""), appToolbar);
if (this.queryString("cache")) {
if (this.hideSearch) this.setCache("kmSearch", "true");
if (this.hideAssistant) this.setCache("kmAssistant", "true");
if (this.hideMenuButton) this.setCache("kmMenuButton", "true");
}
} else {
this.removeStyle(appDrawerRoot);
}

if (this.hideSidebar || this.hideSearch) {
this.addStyle("ha-icon-button{display:none !important;}", appToolbar);
if (this.queryString("cache")) this.setCache("kmSearch", "true");
/* } else {
this.removeStyle(huiRoot); */
this.removeStyle(appToolbar);
}

// Resize window to "refresh" view.
Expand Down Expand Up @@ -183,6 +224,7 @@ class KioskMode {
this.hideMenuButton = config.kiosk || config.hide_menubutton;
this.hideAccount = config.kiosk || config.hide_account;
this.hideSearch = config.kiosk || config.hide_search;
this.hideAssistant = config.kiosk || config.hide_assistant;
this.ignoreEntity = config.ignore_entity_settings;
this.ignoreMobile = config.ignore_mobile_settings;
}
Expand Down

0 comments on commit 6e21d5a

Please sign in to comment.