Dev to Master (#26)

* Hide menu button with sidebar, prep hass conditions

* check for hui-root

* Add user, admin, and non admin settings

* Update README.md

* Update README.md

* Update README.md

* Update README.md

README.md

@@ -6,7 +6,7 @@ Hides the header and/or sidebar drawer in [Home Assistant](https://www.home-assi
 
 ![image](example1.png)
 
-## Installation
+# Installation
 
 *If you previously used [custom-header](https://github.com/maykar/custom-header) you need to uninstall it from [HACS](https://hacs.xyz/)*<br>
 
@@ -52,7 +52,7 @@ resources:
 
 *If you have trouble installing please [read this guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins)*
 
-## Usage
+# Usage
 Add a query string such as `?kiosk` to the end of your URL:
 
 ```
@@ -79,17 +79,25 @@ This works for all query strings except for the utility strings listed below.
 * `?clear_km_cache` will clear all cached preferences
 * `?disable_km` will temporarily disable any modifications
 
-## Configuration in Lovelace
+# Configuration in Lovelace
 
-You can also set up kiosk-mode in your Lovelace config.
-
-* Query strings & cached options are used first & if any are set on a device, the config will be ignored.
 * Config is placed in the root of your Lovelace config (`kiosk_mode:` should not be indented) & is per dashboard.
 * If you want the same settings on other dashboards you'll need to repeat the config on those dashboards as well.
+
+There are 2 methods to setup config in Lovelace: Global and Conditional.
+
+The order in which the 3 config methods are used is this:
+* Conditional Lovelace config overrides Query Strings, Cached config, & Global config.
+* Query Strings & Cached configs override Global Lovelace config.
+
+## Global Lovelace Config
+
 * kisok-mode has 3 options: `kiosk`, `hide_header`, and `hide_sidebar`. Set any option to true to activate.
 * `kiosk` sets `hide_header` and `hide_sidebar` to true, no need to set either if you set `kiosk: true`.
 
-**Example:**
+<details>
+  <summary><b>Global Config Example</b></summary>
+<br>
 
 ```
 kiosk_mode:
@@ -99,6 +107,85 @@ views:
 ```
 *Note: `views:` is added in the example above to show where `kiosk_mode:` should be placed in your Lovelace config*
 
+<br>
+</details>
+
+## Conditional Lovelace Config
+
+This option uses the same options as global, but uses 3 conditions in order to use the options.
+
+<hr>
+
+**Admin Condition:**
+Sets the settings for every admin user.
+
+<details>
+  <summary><b>Admin Config Example</b></summary>
+<br>
+
+```
+kiosk_mode:
+  admin_settings:
+    hide_header: true
+
+views:
+```
+*Note: `views:` is added in the example above to show where `kiosk_mode:` should be placed in your Lovelace config*
+
+<br>
+</details>
+
+<hr>
+
+**Non-Admin Condition:**
+Sets the settings for every regular user.
+
+<details>
+  <summary><b>Non-Admin Config Example</b></summary>
+<br>
+
+```
+kiosk_mode:
+  non_admin_settings:
+    hide_header: true
+
+views:
+```
+*Note: `views:` is added in the example above to show where `kiosk_mode:` should be placed in your Lovelace config*
+
+<br>
+</details>
+
+<hr>
+
+**User Condition:**
+Sets the settings for specific users. **This uses a user's name, not their username (if they're different)**.
+
+<details>
+  <summary><b>User Config Condition</b></summary>
+<br>
+
+```
+kiosk_mode:
+  user_settings:
+    - users:
+        - "ryan meek"
+        - "maykar"
+      hide_sidebar: true
+    - users:
+        - "the wife"
+        - "another user"
+      kiosk: true
+
+views:
+```
+*Note: `views:` is added in the example above to show where `kiosk_mode:` should be placed in your Lovelace config*
+
+<br>
+</details>
+
+<hr>
+
 ### Related
 
 * [Fully Kiosk Browser](https://www.fully-kiosk.com/) - Great for wall mounted tablets

kiosk-mode.js

@@ -1,4 +1,5 @@
-const main = document.querySelector("home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot;
+const ha = document.querySelector("home-assistant");
+const main = ha.shadowRoot.querySelector("home-assistant-main").shadowRoot;
 const panel = main.querySelector("partial-panel-resolver");
 const drawerLayout = main.querySelector("app-drawer-layout");
 
@@ -44,6 +45,7 @@ if (window.location.href.includes("clear_km_cache")) {
 
 function kiosk_mode() {
   const url = window.location.href;
+  const hass = ha.hass;
 
   // Disable styling if "disable_km" in URL.
   if (url.includes("disable_km")) return;
@@ -53,16 +55,42 @@ function kiosk_mode() {
   let hide_sidebar = cacheAsBool("kmSidebar") || locIncludes(["kiosk", "hide_sidebar"]);
 
   const config = getConfig();
+  const adminConf = config.admin_settings;
+  const nonAdminConf = config.non_admin_settings;
+  let userConf = config.user_settings;
   const queryStringsSet = hide_sidebar || hide_header;
 
   // Use config values only if config strings and cache aren't used.
   hide_header = queryStringsSet ? hide_header : config.kiosk || config.hide_header;
   hide_sidebar = queryStringsSet ? hide_sidebar : config.kiosk || config.hide_sidebar;
 
+  if (adminConf && hass.user.is_admin) {
+    hide_header = adminConf.kiosk_mode || adminConf.hide_header;
+    hide_sidebar = adminConf.kiosk_mode || adminConf.hide_sidebar;
+  }
+
+  if (nonAdminConf && !hass.user.is_admin) {
+    hide_header = nonAdminConf.kiosk_mode || nonAdminConf.hide_header;
+    hide_sidebar = nonAdminConf.kiosk_mode || nonAdminConf.hide_sidebar;
+  }
+
+  if (userConf) {
+    if (!Array.isArray(userConf)) userConf = [userConf];
+    for (let conf of userConf) {
+      let users = conf.users;
+      if (!Array.isArray(conf.users)) users = [users];
+      if (users.map((u) => u.toLowerCase().includes(hass.user.name.toLowerCase()))) {
+        hide_header = conf.kiosk_mode || conf.hide_header;
+        hide_sidebar = conf.kiosk_mode || conf.hide_sidebar;
+      }
+    }
+  }
+
   // Only run if needed.
   if (hide_sidebar || hide_header) {
     const lovelace = main.querySelector("ha-panel-lovelace");
     const huiRoot = lovelace ? lovelace.shadowRoot.querySelector("hui-root").shadowRoot : null;
+    const toolbar = huiRoot ? huiRoot.querySelector("app-toolbar") : null;
 
     // Insert style element for kiosk or hide_header options.
     if (hide_header && styleCheck(huiRoot)) {
@@ -78,6 +106,9 @@ function kiosk_mode() {
       const css = ":host { --app-drawer-width: 0 !important } #drawer { display: none }";
       addStyles(css, drawerLayout);
 
+      // Hide menu button.
+      if (styleCheck(toolbar)) addStyles("ha-menu-button { display:none !important } ", toolbar);
+
       // Set localStorage cache for hiding sidebar.
       if (url.includes("cache")) setCache("kmSidebar", "true");
     }
@@ -131,7 +162,7 @@ function appLayoutWatch(mutations) {
 }
 
 // Overly complicated console tag.
-const conInfo = { header: "%c≡ kiosk-mode".padEnd(25), ver: "%cversion *DEV " };
+const conInfo = { header: "%c≡ kiosk-mode".padEnd(27), ver: "%cversion *DEV " };
 const br = "%c\n";
 const maxLen = Math.max(...Object.values(conInfo).map((el) => el.length));
 for (const [key] of Object.entries(conInfo)) {