Allow using custom state cards. (#175)

* Allow using custom state cards from www/

* Use importHref

* Check if element loaded before loading it again dynamically.

* load custom_ui according to data provided at bootstrap via Nuclear

* Switch card custom UI to using local www path.

* Switch custom UI to use /local/ path

src/components/ha-attributes.html

@@ -36,6 +36,7 @@
     'entity_picture', 'friendly_name', 'icon', 'unit_of_measurement',
     'emulated_hue', 'emulated_hue_name', 'haaska_hidden', 'haaska_name',
     'homebridge_hidden', 'homebridge_name', 'supported_features', 'attribution',
+    'custom_ui_state_card',
   ];
   Polymer({
     is: 'ha-attributes',

src/state-summary/state-card-content.html

@@ -35,13 +35,40 @@ Polymer({
     'inputChanged(hass, inDialog, stateObj)',
   ],
 
-  inputChanged: function (hass, inDialog, stateObj) {
+  _isLoaded: function (name) {
-    if (!stateObj || !hass) return;
+    var elem = document.createElement(name);
+    // If Polymer was already loaded for <name> - it replaced the constructor.
+    return (elem.constructor !== HTMLElement);
+  },
 
+  _maybeLoadCustomUi: function (stateType) {
+    var isLoaded = this._isLoaded('STATE-CARD-' + stateType.toUpperCase());
+    // If Polymer component for the required element is not loaded try to load it.
+    // Don't try to load unconditionally because it cause onflict between vulcanized
+    // and non-vulacanized versions.
+    if (!isLoaded) {
+      this.importHref(
+          '/local/custom_ui/state-card-' + stateType + '.html',
+          function () {},
+          /* eslint-disable no-console */
+          function () { console.error('Error loading %s from /local/custom_ui/state-card-%s.html', stateType, stateType); },
+          /* eslint-enable no-console */
+          true);
+    }
+  },
+
+  inputChanged: function (hass, inDialog, stateObj) {
+    var stateCardType;
+    if (!stateObj || !hass) return;
+    if (stateObj.state !== 'unavailable' && 'custom_ui_state_card' in stateObj.attributes) {
+      stateCardType = stateObj.attributes.custom_ui_state_card;
+      this._maybeLoadCustomUi(stateCardType);
+    } else {
+      stateCardType = window.hassUtil.stateCardType(hass, stateObj);
+    }
     window.hassUtil.dynamicContentUpdater(
       this,
-      ('STATE-CARD-' +
+      ('STATE-CARD-' + stateCardType.toUpperCase()),
-       window.hassUtil.stateCardType(hass, stateObj).toUpperCase()),
       {
         hass: hass,
         stateObj: stateObj,