Add support for hash switching

README.md

@@ -17,11 +17,11 @@ For installation instructions [see this guide](https://github.com/thomasloven/ha
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------
 | type | string | **Required** | `custom:state-switch`
-| entity | string | **Required** | Controlling entity id, `user` or `browser`
+| entity | string | **Required** | Controlling entity id, `hash`, `user` or `browser`
 | states | object | **Required** | Map of states to cards to display
 | default | string | none | State to use as default
 
-The `entity` parameter can take three different types of value
+The `entity` parameter can take four different types of value
 
 ### Entity\_id
 If the `entity` parameter is set to an entity id, which card is displayed will depend on the state of that entity.
@@ -72,6 +72,48 @@ Note that the words `on` and `off` are magic in yaml, so if the entity is e.g. a
               Light is off
 ```
 
+### hash
+If the `entity` parameter is set to `hash`, which card is displayed will depend on the "hash" part of the current URL - i.e. whatever comes after an optional `#` symbol in the current page URL.
+
+This allows for controlling the view on a browser-window to browser-window basis, and without needing a controlling entity.
+
+```yaml
+    cards:
+      - type: horizontal-stack
+        cards:
+          - type: entity-button
+            entity: light.my_dummy
+            tap_action:
+              action: navigate
+              navigation_path: "#p1"
+          - type: entity-button
+            entity: light.my_dummy
+            tap_action:
+              action: navigate
+              navigation_path: "#p2"
+          - type: entity-button
+            entity: light.my_dummy
+            tap_action:
+              action: navigate
+              navigation_path: "#p2"
+      - type: custom:state-switch
+        entity: hash
+        default: p1
+        states:
+          p1:
+            type: markdown
+            content: |
+              # Page 1
+          p2:
+            type: markdown
+            content: |
+              # Page 2
+          p3:
+            type: markdown
+            content: |
+              # Page 3
+```
+
 ### user
 If the `entity` parameter is set to `user`, which card is displayed will depend on the currently logged in users username.
 

state-switch.js

@@ -18,6 +18,10 @@ class StateSwitch extends cardTools.litElement() {
       title: "Device ID",
       content: `Your device id is: \`${cardTools.deviceID()}\``,
     });
+
+    if(config.entity === 'hash') {
+      window.addEventListener("location-changed", () => this.updateCard());
+    }
   }
 
   render() {
@@ -26,9 +30,7 @@ class StateSwitch extends cardTools.litElement() {
     `;
   }
 
-  set hass(hass) {
-    if(!hass) return;
-
+  updateCard() {
     const lastCard = this.currentCard;
     if (this.config.entity === 'user') {
       this.currentCard = this.cards[hass.user.name]
@@ -38,6 +40,9 @@ class StateSwitch extends cardTools.litElement() {
         || ((this.config.default)
           ? this.cards[this.config.default]
           : this.idCard);
+    } else if(this.config.entity == 'hash') {
+        this.currentCard = this.cards[location.hash.substr(1)]
+          || this.cards[this.config.default];
     } else {
       let state = hass.states[this.config.entity];
       this.currentCard = ((state)?this.cards[state.state]:null)
@@ -45,6 +50,12 @@ class StateSwitch extends cardTools.litElement() {
     }
 
     if(this.currentCard != lastCard) this.requestUpdate();
+  }
+
+  set hass(hass) {
+    if(!hass) return;
+
+    this.updateCard();
 
     for(var k in this.cards)
       this.cards[k].hass = hass;