Polymer 1.0: Move attribute classnames logic to more info elements

homeassistant/components/frontend/www_static/polymer/more-infos/more-info-content.html

@@ -33,24 +33,13 @@
         type: Boolean,
         value: false,
       },
-
-      classNames: {
-        type: String,
-        value: '',
-      }
-    },
-    classNames: '',
-    dialogOpen: false,
-
-    observe: {
-      'stateObj.attributes': 'stateAttributesChanged',
     },
 
     dialogOpenChanged: function(newVal, oldVal) {
-      var moreInfoContainer = this.$.moreInfoContainer;
+      var root = Polymer.dom(this);
 
-      if (moreInfoContainer.lastChild) {
-        moreInfoContainer.lastChild.dialogOpen = newVal;
+      if (root.lastChild) {
+        root.lastChild.dialogOpen = newVal;
       }
     },
 
@@ -82,9 +71,6 @@
         root.lastChild.stateObj = newVal;
 
       }
-
-      this.classNames = Object.keys(newVal.attributes).map(
-        function(key) { return 'has-' + key; }).join(' ');
     },
   });
 })();

homeassistant/components/frontend/www_static/polymer/more-infos/more-info-light.html

@@ -28,16 +28,16 @@
       transition: max-height .5s ease-in .3s;
     }
 
-    /*:host-context(.has-brightness)*/ .brightness {
+    .has-brightness .brightness {
       max-height: 500px;
     }
 
-    /*:host-context(.has-xy_color)*/ color-picker {
+    .has-xy_color color-picker {
       max-height: 500px;
     }
   </style>
   <template>
-    <div>
+    <div class$='[[computeClassNames(stateObj)]]'>
       <div class='brightness'>
         <div center horizontal layout>
           <div>Brightness</div>
@@ -57,6 +57,8 @@
 <script>
 (function() {
   var serviceActions = window.hass.serviceActions;
+  var uiUtil = window.hass.uiUtil;
+  var ATTRIBUTE_CLASSES = ['brightness', 'xy_color'];
 
   Polymer({
     is: 'more-info-light',
@@ -79,6 +81,10 @@
       }
     },
 
+    computeClassNames: function(stateObj) {
+      return uiUtil.attributeClassNames(stateObj, ATTRIBUTE_CLASSES);
+    },
+
     brightnessSliderChanged: function(ev) {
       var bri = parseInt(ev.target.value);
 

homeassistant/components/frontend/www_static/polymer/more-infos/more-info-thermostat.html

@@ -13,25 +13,27 @@
       margin-top: 16px;
     }
 
-    /*:host-context(.has-away_mode)*/ .away-mode-toggle {
+    .has-away_mode .away-mode-toggle {
       display: block;
     }
   </style>
   <template>
-    <div>
-      <div>Target Temperature</div>
-      <paper-slider
-        min='[[tempMin]]' max='[[tempMax]]'
-        value='[[targetTemperatureSliderValue]]' pin
-        on-change='targetTemperatureSliderChanged'>
-      </paper-slider>
-    </div>
+    <div class$='[[computeClassNames(stateObj)]]'>
+      <div>
+        <div>Target Temperature</div>
+        <paper-slider
+          min='[[tempMin]]' max='[[tempMax]]'
+          value='[[targetTemperatureSliderValue]]' pin
+          on-change='targetTemperatureSliderChanged'>
+        </paper-slider>
+      </div>
 
-    <div class='away-mode-toggle'>
-      <div center horizontal layout>
-        <div flex>Away Mode</div>
-        <paper-toggle-button checked='[[awayToggleChecked]]' on-change='toggleChanged'>
-        </paper-toggle-button>
+      <div class='away-mode-toggle'>
+        <div center horizontal layout>
+          <div flex>Away Mode</div>
+          <paper-toggle-button checked='[[awayToggleChecked]]' on-change='toggleChanged'>
+          </paper-toggle-button>
+        </div>
       </div>
     </div>
   </template>
@@ -41,6 +43,8 @@
 (function() {
   var constants = window.hass.constants;
   var serviceActions = window.hass.serviceActions;
+  var uiUtil = window.hass.uiUtil;
+  var ATTRIBUTE_CLASSES = ['away_mode'];
 
   Polymer({
     is: 'more-info-thermostat',
@@ -81,6 +85,10 @@
       }
     },
 
+    computeClassNames: function(stateObj) {
+      return uiUtil.attributeClassNames(stateObj, ATTRIBUTE_CLASSES);
+    },
+
     targetTemperatureSliderChanged: function(ev) {
       var temp = parseInt(ev.target.value);
 

homeassistant/components/frontend/www_static/polymer/resources/home-assistant-js.html

@@ -81,6 +81,13 @@
           return 'default';
         }
       },
+
+      attributeClassNames: function(stateObj, attributes) {
+        if (!stateObj) return '';
+        return attributes.map(function(attribute) {
+          return attribute in stateObj.attributes ? 'has-' + attribute : '';
+        }).join(' ');
+      },
     };
   })();
 </script>