Add markdown to persistent notifications (#128)

* Add micromarkdown.js and update persistent notifications

* Fixed my way wrong logic

* change to stateObj in call

* Move micromarkdown to bower. Update importHref.

* Add properties for importHref

* Fix importHref properties and add logging.

* Fix computeContent function

* Fix travis

* Fix computeContent function

* Fix markdown script

* Fix all markdown code.

* Add mmd.css

* Correct imports of stylesheets

* Fix Travis

* Move micromarkdown to HA

* Fix requests

* Fix importHref script location

src/cards/ha-persistent_notification-card.html

@@ -18,8 +18,8 @@
       }
     </style>
 
-    <ha-card header="[[computeTitle(stateObj)]]">
-      <div class='content'>[[stateObj.state]]</div>
+    <ha-card header='[[computeTitle(stateObj)]]'>
+      <div id='pnContent' class='content'></div>
       <paper-button on-tap='dismissTap'>DISMISS</paper-button>
     </ha-card>
   </template>
@@ -37,12 +37,51 @@ Polymer({
     stateObj: {
       type: Object,
     },
+
+    scriptLoaded: {
+      type: Boolean,
+      value: false,
+    },
   },
 
+  observers: [
+    'computeContent(stateObj, scriptLoaded)',
+  ],
+
   computeTitle: function (stateObj) {
     return stateObj.attributes.title || stateObj.entityDisplay;
   },
 
+  loadScript: function () {
+    var success = function () {
+      this.scriptLoaded = true;
+    }.bind(this);
+
+    var error = function () {
+      console.error('Micromarkdown was not loaded.');
+    };
+
+    this.importHref(
+      '/static/micromarkdown-js.html',
+      success, error
+    );
+  },
+
+  computeContent: function (stateObj, scriptLoaded) {
+    var el = '';
+    var message = '';
+    if (scriptLoaded) {
+      el = this.$.pnContent;
+      message = micromarkdown.parse(stateObj.state);
+      el.innerHTML = message;
+    }
+    return;
+  },
+
+  ready: function () {
+    this.loadScript();
+  },
+
   dismissTap: function (ev) {
     ev.preventDefault();