Make ha-markdown use no polymer (#662)

This commit is contained in:
Paulus Schoutsen 2017-11-21 21:15:04 -08:00 committed by GitHub
parent ea4fd25330
commit 3a100bff23
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,35 +1,39 @@
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
<link rel='import' href='../util/hass-mixins.html'> <link rel='import' href='../util/hass-mixins.html'>
<script> <script>
class HaMarkdown extends window.hassMixins.EventsMixin(Polymer.Element) { class HaMarkdown extends window.hassMixins.EventsMixin(HTMLElement) {
static get is() { return 'ha-markdown'; } static get is() { return 'ha-markdown'; }
static get properties() { connectedCallback() {
return {
content: {
type: String,
},
scriptLoaded: {
type: Number,
// 0 = not loaded, 1 = success, 2 = error // 0 = not loaded, 1 = success, 2 = error
value: 0, this._scriptLoaded = 0;
}, this._renderScheduled = false;
}; this._resize = () => this.fire('iron-resize');
Polymer.importHref(
'/static/pagedown-js.html',
() => { this._scriptLoaded = 1; this._render(); },
() => { this._scriptLoaded = 2; this._render(); },
);
} }
static get observers() { set content(value) {
return [ this._content = value;
'updateContent(content, scriptLoaded)', this._render();
];
} }
updateContent(content, scriptLoaded) { _render() {
if (scriptLoaded === 1) { if (this._scriptLoaded === 0 || this._renderScheduled) return;
this._renderScheduled = true;
// debounce it to next microtask.
Promise.resolve().then(() => {
this._renderScheduled = false;
if (this._scriptLoaded === 1) {
const converter = window.Markdown.getSanitizingConverter(); const converter = window.Markdown.getSanitizingConverter();
this.innerHTML = converter.makeHtml(content); this.innerHTML = converter.makeHtml(this._content);
const walker = document.createTreeWalker(this, 1 /* SHOW_ELEMENT */, null, false); const walker = document.createTreeWalker(this, 1 /* SHOW_ELEMENT */, null, false);
@ -43,23 +47,13 @@ class HaMarkdown extends window.hassMixins.EventsMixin(Polymer.Element) {
// Fire a resize event when images loaded to notify content resized // Fire a resize event when images loaded to notify content resized
} else if (node.tagName === 'IMG') { } else if (node.tagName === 'IMG') {
node.addEventListener('load', this.resize); node.addEventListener('load', this._resize);
} }
} }
} else if (scriptLoaded === 2) { } else if (this._scriptLoaded === 2) {
this.innerText = content; this.innerText = this._content;
} }
} });
ready() {
super.ready();
this.resize = () => this.fire('iron-resize');
Polymer.importHref(
'/static/pagedown-js.html',
() => { this.scriptLoaded = 1; },
() => { this.scriptLoaded = 2; },
);
} }
} }