Disabling 3 dots menu (#64)

* Disabling 3 dots menu * Change "3 dots menu" to "overflow menu" * "3 dots menu" to "overflow menu" & remove console.info * cleanup Co-authored-by: Ryan Meek <[email protected]>
maykar · Jun 24, 2021 · 927da7c · 927da7c
1 parent 840306c
commit 927da7c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -66,6 +66,7 @@ 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_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.
 
@@ -181,6 +182,7 @@ The query string options are:
 * `?kiosk` to hide both header and sidebar
 * `?hide_header` to hide only the header
 * `?hide_sidebar` to hide only the sidebar
+* `?hide_overflow` to hide the top right menu
 
 ## Query String Caching
 

diff --git a/kiosk-mode.js b/kiosk-mode.js
@@ -1,7 +1,7 @@
 class KioskMode {
  constructor() {
  window.kioskModeEntities = {};
- if (this.queryString("clear_km_cache")) this.setCache(["kmHeader", "kmSidebar"], "false");
+ if (this.queryString("clear_km_cache")) this.setCache(["kmHeader", "kmSidebar", "kmOverflow"], "false");
  this.ha = document.querySelector("home-assistant");
  this.main = this.ha.shadowRoot.querySelector("home-assistant-main").shadowRoot;
  this.user = this.ha.hass.user;
@@ -37,19 +37,21 @@ class KioskMode {
  processConfig(lovelace, config) {
  const dash = this.ha.hass.panelUrl;
  if (!window.kioskModeEntities[dash]) window.kioskModeEntities[dash] = [];
- this.hideHeader = this.hideSidebar = this.ignoreEntity = this.ignoreMobile = false;
+ this.hideHeader = this.hideSidebar = this.hideOverflow = this.ignoreEntity = this.ignoreMobile = false;
 
  // Retrieve localStorage values & query string options.
  const queryStringsSet =
- this.cached(["kmHeader", "kmSidebar"]) || this.queryString(["kiosk", "hide_sidebar", "hide_header"]);
+ this.cached(["kmHeader", "kmSidebar", "kmOverflow"]) || this.queryString(["kiosk", "hide_sidebar", "hide_header", "hide_overflow"]);
  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"])
  }
 
  // 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;
 
  const adminConfig = this.user.is_admin ? config.admin_settings : config.non_admin_settings;
  if (adminConfig) for (let conf of adminConfig) this.setOptions(conf);
@@ -74,6 +76,7 @@ class KioskMode {
  if (this.ha.hass.states[entity].state == conf.entity[entity]) {
  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 ("kiosk" in conf) this.hideHeader = this.hideSidebar = conf.kiosk;
  }
  }
@@ -101,6 +104,13 @@ class KioskMode {
  } else {
  this.removeStyle([appToolbar, drawerLayout]);
  }
+
+ if (this.hideOverflow) {
+ this.addStyle("ha-button-menu{display:none !important;}", huiRoot);
+ if (this.queryString("cache")) this.setCache("kmOverflow", "true");
+ } else {
+ this.removeStyle(appToolbar);
+ }
 
  // Resize window to "refresh" view.
  window.dispatchEvent(new Event("resize"));
@@ -138,6 +148,7 @@ 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.ignoreEntity = config.ignore_entity_settings;
  this.ignoreMobile = config.ignore_mobile_settings;
  }