Convert configurator to markdown (#644)

* Convert configurator to markdown

* Lint

* Change order

src/components/ha-markdown.html

@@ -1,7 +1,9 @@
 <link rel='import' href='../../bower_components/polymer/polymer-element.html'>
 
+<link rel='import' href='../util/hass-mixins.html'>
+
 <script>
-class HaMarkdown extends Polymer.Element {
+class HaMarkdown extends window.hassMixins.EventsMixin(Polymer.Element) {
   static get is() { return 'ha-markdown'; }
 
   static get properties() {
@@ -28,6 +30,22 @@ class HaMarkdown extends Polymer.Element {
     if (scriptLoaded === 1) {
       const converter = window.Markdown.getSanitizingConverter();
       this.innerHTML = converter.makeHtml(content);
+
+      const walker = document.createTreeWalker(this, 1 /* SHOW_ELEMENT */, null, false);
+
+      while (walker.nextNode()) {
+        const node = walker.currentNode;
+
+        // Open external links in a new window
+        if (node.tagName === 'A' &&
+            node.host !== document.location.host) {
+          node.target = '_blank';
+
+        // Fire a resize event when images loaded to notify content resized
+        } else if (node.tagName === 'IMG') {
+          node.addEventListener('load', this.resize);
+        }
+      }
     } else if (scriptLoaded === 2) {
       this.innerText = content;
     }
@@ -35,6 +53,7 @@ class HaMarkdown extends Polymer.Element {
 
   ready() {
     super.ready();
+    this.resize = () => this.fire('iron-resize');
 
     Polymer.importHref(
       '/static/pagedown-js.html',

src/more-infos/more-info-configurator.html

@@ -5,6 +5,8 @@
 <link rel='import' href='../../bower_components/paper-button/paper-button.html'>
 <link rel='import' href='../../bower_components/paper-input/paper-input.html'>
 
+<link rel='import' href='../components/ha-markdown.html'>
+
 <dom-module id='more-info-configurator'>
   <template>
     <style is="custom-style" include="iron-flex"></style>
@@ -13,6 +15,10 @@
         margin: 8px 0;
       }
 
+      a {
+        color: var(--primary-color);
+      }
+
       p > img {
         max-width: 100%;
       }
@@ -43,27 +49,12 @@
 
     <div class='layout vertical'>
       <template is='dom-if' if='[[isConfigurable]]'>
-
+        <ha-markdown content='[[stateObj.attributes.description]]'></ha-markdown>
-        <p hidden$='[[!stateObj.attributes.description]]'>
-          [[stateObj.attributes.description]]
-          <p hidden$='[[!stateObj.attributes.link_url]]'>
-            <a
-              href='[[stateObj.attributes.link_url]]'
-              target='_blank'
-            >
-              [[stateObj.attributes.link_name]]
-            </a>
-          </p>
-        </p>
 
         <p class='error' hidden$='[[!stateObj.attributes.errors]]'>
           [[stateObj.attributes.errors]]
         </p>
 
-        <p class='center' hidden$='[[!stateObj.attributes.description_image]]'>
-          <img src='[[stateObj.attributes.description_image]]' />
-        </p>
-
         <template is='dom-repeat' items='[[stateObj.attributes.fields]]'>
           <paper-input
             label='[[item.name]]'

src/util/ha-url-sync.html

@@ -30,8 +30,12 @@
 
       if (newHass.moreInfoEntityId) {
         if (DEBUG) console.log('pushing state');
+        // We keep track of where we opened moreInfo from so that we don't
+        // pop the state when we close the modal if the modal has navigated
+        // us away.
+        this.moreInfoOpenedFromPath = window.location.pathname;
         history.pushState(null, null, window.location.pathname);
-      } else {
+      } else if (window.location.pathname === this.moreInfoOpenedFromPath) {
         if (DEBUG) console.log('history back');
         this.ignoreNextPopstate = true;
         history.back();