Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | 1x 5x 5x 5x 5x 5x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 2x 1x 1x 1x 1x 1x | window.customElements.define('h-route-display', class extends HTMLElement {
constructor() {
super()
}
connectedCallback() {
this.innerHTML = '<div class="route-display-content"></div>'
this.$content = this.querySelector('.route-display-content')
this.$content.style.transition = 'all 0.2s'
this.$content.style.transformStyle = 'preserve-3d'
}
empty() {
Eif (this.$content) {
this.$content.innerHTML = ''
}
}
async insertContent(content) {
Iif (!this.$content) {
return Promise.reject()
}
const transitionType = this.getAttribute('data-transition-type') || 'opacity'
const transitionStart = this.getAttribute('data-transition-start') || '0'
const transitionEnd = this.getAttribute('data-transition-end') || '1'
let transitionDisable = this.getAttribute('data-transition-enable')
transitionDisable = (transitionDisable && transitionDisable.toLowerCase() === 'false')
Iif (!transitionDisable) {
await this._transitionToPromise(this.$content, transitionType, transitionStart)
}
const doc = new DOMParser().parseFromString(content, 'text/html')
const template = doc.querySelector('template')
const style = doc.querySelector('style')
Eif (template) {
this.empty()
this.$content.innerHTML = template.innerHTML.toString()
}
if (style) {
this.$content.insertAdjacentHTML('afterbegin', style.outerHTML)
}
return transitionDisable ?
Promise.resolve() :
this._transitionToPromise(this.$content, transitionType, transitionEnd)
}
addElementToContent(element, position = 'beforeend') {
this.$content.insertAdjacentElement(position, element)
}
_transitionToPromise(el, property, value) {
return new Promise(resolve => {
const pascalCaseProperty = property.split(/(?=[A-Z])/g).map(prop => prop.charAt(0).toLowerCase() + prop.substring(1)).join('-')
const transitionEnded = evt => {
if (evt.propertyName !== pascalCaseProperty) {
return
}
el.removeEventListener('transitionend', transitionEnded)
resolve()
}
el.addEventListener('transitionend', transitionEnded)
el.style[property] = value
})
}
})
|