diff --git a/README.md b/README.md index 1b2572b..4f9b084 100644 --- a/README.md +++ b/README.md @@ -52,20 +52,24 @@ resources: *If you have trouble installing please [read this guide](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins)* -# Configuration +## Important Info * If you need to disable Kiosk-Mode temporarily add `?disable_km` to the end of your URL. * 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. * Refresh page after config changes. -## Simple Lovelace Config -The following config method will be ignored if any [query strings/cache](#query-strings) are used or a [conditional config](#conditional-lovelace-config) has a match. +## Config Options -* `kiosk_mode:` has 4 options: `kiosk`, `hide_header`, `hide_sidebar`, and `ignore_entity_settings`. -* Set any config option to true to activate. -* `kiosk: true` sets `hide_header` and `hide_sidebar` to true, no need to set either when it's used. -* `ignore_entity_settings` is useful only in [conditional configs](#conditional-lovelace-config) and will cause `entity_settings` to be ignored. +| Config Option | Type | Default | Description | +|:---------------|:---------------|:---------------|:----------| +|`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. +|`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. + +## Simple config example ``` kiosk_mode: @@ -81,7 +85,7 @@ These use the same options as above, but placed under one of the following user/ ### admin_settings: Sets the config for every admin user.
-*Overwritten by user_settings & entity_settings ( unless `ignore_entity_settings` is used ).*
+*Overwritten by user_settings, mobile_settings, and entity_settings ( unless one of the ignore options is used ).*
``` kiosk_mode: @@ -92,7 +96,7 @@ kiosk_mode: ### non_admin_settings: Sets the config for every regular user.
-*Overwritten by user_settings & entity_settings ( unless `ignore_entity_settings` is used ).*
+*Overwritten by user_settings, mobile_settings, and entity_settings ( unless one of the ignore options is used ).*
``` kiosk_mode: @@ -104,7 +108,7 @@ kiosk_mode: ### user_settings: Sets the config for specific users. **This uses a user's name, not their username (if they're different)**.
-*Overwritten by entity_settings if `ignore_entity_settings` is not used.*
+*Overwritten by mobile_settings, and entity_settings ( unless one of the ignore options is used ).*
``` kiosk_mode: @@ -120,6 +124,19 @@ kiosk_mode: ```
+### mobile_settings: +Sets the config for mobile devices. The default breakpoint is 812px, which can be changed by setting the `custom_width` option.
+*Overwritten by entity_settings, unless `ignore_entity_settings` is used, can be ignored with `ignore_mobile_settings`.*
+ +``` +kiosk_mode: + mobile_settings: + hide_header: true + ignore_entity_settings: true + custom_width: 768 +``` +
+ ### entity_settings: Dynamically change config on any entity's state. Under `entity:` list the entity followed by the state that will enable the config below. For more complex logic use this with a template sensor.
*Takes priority over all other config settings unless they use `ignore_entity_settings`.*
diff --git a/kiosk-mode.js b/kiosk-mode.js index 88a7f59..f6ba228 100644 --- a/kiosk-mode.js +++ b/kiosk-mode.js @@ -84,8 +84,10 @@ function kioskMode(lovelace, config, dash) { const adminConfig = config.admin_settings; const nonAdminConfig = config.non_admin_settings; const entityConfig = config.entity_settings; - let userConfig = config.user_settings; + const userConfig = config.user_settings; + const mobileConfig = config.mobile_settings; let ignoreEntity = false; + let ignoreMobile = false; // Retrieve localStorage values & query string options. let hideHeader = cached("kmHeader") || queryString(["kiosk", "hide_header"]); @@ -101,6 +103,7 @@ function kioskMode(lovelace, config, dash) { hideHeader = adminConfig.kiosk || adminConfig.hide_header; hideSidebar = adminConfig.kiosk || adminConfig.hide_sidebar; ignoreEntity = adminConfig.ignore_entity_settings; + ignoreMobile = adminConfig.ignore_mobile_settings; } // Non-Admin user settings. @@ -108,6 +111,7 @@ function kioskMode(lovelace, config, dash) { hideHeader = nonAdminConfig.kiosk || nonAdminConfig.hide_header; hideSidebar = nonAdminConfig.kiosk || nonAdminConfig.hide_sidebar; ignoreEntity = nonAdminConfig.ignore_entity_settings; + ignoreMobile = nonAdminConfig.ignore_mobile_settings; } // User Settings. @@ -117,10 +121,21 @@ function kioskMode(lovelace, config, dash) { hideHeader = conf.kiosk || conf.hide_header; hideSidebar = conf.kiosk || conf.hide_sidebar; ignoreEntity = conf.ignore_entity_settings; + ignoreMobile = conf.ignore_mobile_settings; } } } + // Mobile settings. + if (mobileConfig && !ignoreMobile) { + const mobileWidth = mobileConfig.custom_width ? mobileConfig.custom_width : 812; + if (window.innerWidth <= mobileWidth) { + hideHeader = mobileConfig.kiosk || mobileConfig.hide_header; + hideSidebar = mobileConfig.kiosk || mobileConfig.hide_sidebar; + ignoreEntity = mobileConfig.ignore_entity_settings; + } + } + // Entity Settings. if (entityConfig && !ignoreEntity) { for (let conf of entityConfig) {