From d64b295d8e845127a5a51c50a511f113318794b1 Mon Sep 17 00:00:00 2001
From: Ryan Meek <25127328+maykar@users.noreply.github.com>
Date: Sat, 7 Nov 2020 16:05:28 -0500
Subject: [PATCH] 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 | 101 ++++++++++++++++++++++++++++++++++++++++++++++----
kiosk-mode.js | 35 ++++++++++++++++-
2 files changed, 127 insertions(+), 9 deletions(-)
diff --git a/README.md b/README.md
index fa42611..b506828 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ Hides the header and/or sidebar drawer in [Home Assistant](https://www.home-assi
-## Installation
+# Installation
*If you previously used [custom-header](https://github.com/maykar/custom-header) you need to uninstall it from [HACS](https://hacs.xyz/)*
@@ -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:**
+
+ Global Config Example
+
```
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*
+
+
+
+## Conditional Lovelace Config
+
+This option uses the same options as global, but uses 3 conditions in order to use the options.
+
+
+
+**Admin Condition:**
+Sets the settings for every admin user.
+
+
+ Admin Config Example
+
+
+```
+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*
+
+
+
+
+
+
+**Non-Admin Condition:**
+Sets the settings for every regular user.
+
+
+ Non-Admin Config Example
+
+
+```
+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*
+
+
+
+
+
+
+**User Condition:**
+Sets the settings for specific users. **This uses a user's name, not their username (if they're different)**.
+
+
+ User Config Condition
+
+
+```
+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*
+
+
+
+
+
+
### Related
* [Fully Kiosk Browser](https://www.fully-kiosk.com/) - Great for wall mounted tablets
diff --git a/kiosk-mode.js b/kiosk-mode.js
index 8867808..d7b8c6c 100644
--- a/kiosk-mode.js
+++ b/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)) {