Convert configurator to markdown (#644)

* Convert configurator to markdown

* Lint

* Change order
This commit is contained in:
Paulus Schoutsen 2017-11-20 21:41:53 -08:00 committed by GitHub
parent 8d790e9601
commit cb5c9b3f3f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 18 deletions

View File

@ -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',

View File

@ -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]]'>
<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>
<ha-markdown content='[[stateObj.attributes.description]]'></ha-markdown>
<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]]'

View File

@ -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();