Skip to content
This repository has been archived by the owner on May 26, 2022. It is now read-only.

Added option to hide the sidebar menu icon. #70

Merged
merged 2 commits into from
Oct 15, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,8 @@ resources:
|:---------------|:---------------|:---------------|:----------|
|`kiosk:`| Boolean | false | Hides both the header and sidebar.
|`hide_header:` | Boolean | false | Hides only the header.
|`hide_sidebar:` | Boolean | false | Hides only the sidebar.
|`hide_sidebar:` | Boolean | false | Hides only the sidebar. Disables swipe to open.
|`hide_menubutton:` | Boolean | false | Hides only the sidebar menu icon. Does not disable swipe to open.
|`hide_overflow:` | Boolean | false | Hides the top right menu.
|`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 Expand Up @@ -183,6 +184,7 @@ The query string options are:
* `?hide_header` to hide only the header
* `?hide_sidebar` to hide only the sidebar
* `?hide_overflow` to hide the top right menu
* `?hide_menubutton` to hide sidebar menu button

## Query String Caching

Expand Down
19 changes: 15 additions & 4 deletions kiosk-mode.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
class KioskMode {
constructor() {
window.kioskModeEntities = {};
if (this.queryString("clear_km_cache")) this.setCache(["kmHeader", "kmSidebar", "kmOverflow"], "false");
if (this.queryString("clear_km_cache")) this.setCache(["kmHeader", "kmSidebar", "kmOverflow", "kmMenuButton"], "false");
this.ha = document.querySelector("home-assistant");
this.main = this.ha.shadowRoot.querySelector("home-assistant-main").shadowRoot;
this.user = this.ha.hass.user;
Expand Down Expand Up @@ -42,17 +42,19 @@ class KioskMode {

// Retrieve localStorage values & query string options.
const queryStringsSet =
this.cached(["kmHeader", "kmSidebar", "kmOverflow"]) || this.queryString(["kiosk", "hide_sidebar", "hide_header", "hide_overflow"]);
this.cached(["kmHeader", "kmSidebar", "kmOverflow", "kmMenuButton"]) || this.queryString(["kiosk", "hide_sidebar", "hide_header", "hide_overflow", "hide_menubutton"]);
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.hideOverflow = this.cached("kmOverflow") || this.queryString(["kiosk", "hide_overflow"]);
this.hideMenuButton = this.cached("kmMenuButton") || this.queryString(["kiosk", "hide_menubutton"]);
}

// Use config values only if config strings and cache aren't used.
this.hideHeader = queryStringsSet ? this.hideHeader : config.kiosk || config.hide_header;
this.hideSidebar = queryStringsSet ? this.hideSidebar : config.kiosk || config.hide_sidebar;
this.hideOverflow = queryStringsSet ? this.hideOverflow : config.kiosk || config.hide_overflow;
this.hideMenuButton = queryStringsSet ? this.hideMenuButton : config.kiosk || config.hide_menubutton;

const adminConfig = this.user.is_admin ? config.admin_settings : config.non_admin_settings;
if (adminConfig) this.setOptions(adminConfig);
Expand All @@ -78,6 +80,7 @@ class KioskMode {
if ("hide_header" in conf) this.hideHeader = conf.hide_header;
if ("hide_sidebar" in conf) this.hideSidebar = conf.hide_sidebar;
if ("hide_overflow" in conf) this.hideOverflow = conf.hide_overflow;
if ("hide_menubutton" in conf) this.hideMenuButton = conf.hide_menubutton;
if ("kiosk" in conf) this.hideHeader = this.hideSidebar = conf.kiosk;
}
}
Expand Down Expand Up @@ -111,6 +114,13 @@ class KioskMode {
this.removeStyle([appToolbar, drawerLayout]);
}

if (this.hideMenuButton) {
this.addStyle("ha-menu-button{display:none !important;}", appToolbar);
if (this.queryString("cache")) this.setCache("kmMenuButton", "true");
} else {
this.removeStyle(appToolbar);
}

// Resize window to "refresh" view.
window.dispatchEvent(new Event("resize"));

Expand Down Expand Up @@ -147,7 +157,8 @@ class KioskMode {
setOptions(config) {
this.hideHeader = config.kiosk || config.hide_header;
this.hideSidebar = config.kiosk || config.hide_sidebar;
this.hideOverflow = config.kiosk || config.hide_overflow
this.hideOverflow = config.kiosk || config.hide_overflow;
this.hideMenuButton = config.kiosk || config.hide_menubutton;
this.ignoreEntity = config.ignore_entity_settings;
this.ignoreMobile = config.ignore_mobile_settings;
}
Expand Down