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 <25127328+maykar@users.noreply.github.com>

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
 

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;
   }