From d96c3033b291a01269fbde75d82e10cc6063e6d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Fri, 17 Aug 2018 09:32:51 +0200
Subject: [PATCH] Allow hiding slider when off. Resolves #1

---
 README.md            |  2 ++
 slider-entity-row.js | 65 ++++++++++++++++++++++++--------------------
 2 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/README.md b/README.md
index 053cf18..d69d496 100644
--- a/README.md
+++ b/README.md
@@ -32,3 +32,5 @@ views:
 `hide_control: true` - Remove toggle
 
 `break_slider: true` - Put slider on separate row
+
+`hide_when_off: true` - Hide the slider when the light is off
diff --git a/slider-entity-row.js b/slider-entity-row.js
index 4f5bd29..e73f310 100644
--- a/slider-entity-row.js
+++ b/slider-entity-row.js
@@ -1,5 +1,8 @@
 class SliderEntityRow extends Polymer.Element {
   static get template() {
+    let slider = Polymer.html`
+      <paper-slider min="[[min]]" max="[[max]]" value="{{value}}" on-change="selectedValue" on-click="stopPropagation"></paper-slider>
+      `
     return Polymer.html`
     <style>
       hui-generic-entity-row {
@@ -13,16 +16,16 @@ class SliderEntityRow extends Polymer.Element {
       }
     </style>
     <hui-generic-entity-row config="[[_config]]" hass="[[_hass]]">
-      <template is='dom-if' if='{{!breakSlider}}'>
-      <paper-slider min="[[min]]" max="[[max]]" value="{{value}}" on-change="selectedValue" on-click="stopPropagation"></paper-slider>
+      <template is='dom-if' if='{{showTop}}'>
+      ${slider}
       </template>
       <template is='dom-if' if='{{!hideControl}}'>
       <ha-entity-toggle state-obj="[[stateObj]]" hass="[[_hass]]"></ha-entity-toggle>
       </template>
       </hui-generic-entity-row>
-      <template is='dom-if' if='{{breakSlider}}'>
+      <template is='dom-if' if='{{showBottom}}'>
       <div class="second-line">
-      <paper-slider min="[[min]]" max="[[max]]" value="{{value}}" on-change="selectedValue" on-click="stopPropagation"></paper-slider>
+      ${slider}
       </div>
       </template>
     `
@@ -32,30 +35,14 @@ class SliderEntityRow extends Polymer.Element {
     return {
       _hass: Object,
       _config: Object,
-      hideControl: {
-        type: Boolean,
-        value: false,
-      },
-      breakSlider: {
-        type: Boolean,
-        value: false,
-      },
-      stateObj: {
-        type: Object,
-        value: null,
-      },
-      min: {
-        type: Number,
-        value: 0,
-      },
-      max: {
-        type: Number,
-        value: 255,
-      },
-      attribute: {
-        type: String,
-        value: 'brightness',
-      },
+      hideControl: { type: Boolean, value: false },
+      breakSlider: { type: Boolean, value: false },
+      hideWhenOff: { type: Boolean, value: false },
+      isOn: { type: Boolean },
+      stateObj: { type: Object, value: null },
+      min: { type: Number, value: 0 },
+      max: { type: Number, value: 255 },
+      attribute: { type: String, value: 'brightness' },
       value: Number,
     };
   }
@@ -67,16 +54,34 @@ class SliderEntityRow extends Polymer.Element {
       this.hideControl = true;
     if('break_slider' in config && config.break_slider)
       this.breakSlider = true;
+    if('hide_when_off' in config && config.hide_when_off)
+      this.hideWhenOff = true;
+  }
+
+  updateSliders()
+  {
+    this.showTop = false;
+    this.showBottom = false;
+    if(!(this.hideWhenOff && !this.isOn)) {
+      if(this.breakSlider)
+        this.showBottom = true;
+      else
+        this.showTop = true;
+    }
   }
 
   set hass(hass) {
     this._hass = hass;
     this.stateObj = this._config.entity in hass.states ? hass.states[this._config.entity] : null;
     if(this.stateObj) {
-      if(this.stateObj.state === 'on')
+      if(this.stateObj.state === 'on') {
         this.value = this.stateObj.attributes[this.attribute];
-      else
+        this.isOn = true;
+      } else {
         this.value = this.min;
+        this.isOn = false;
+      }
+      this.updateSliders();
     }
   }