47 lines
1.5 KiB
JavaScript
47 lines
1.5 KiB
JavaScript
class RSVPControls extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
const shadow = this.attachShadow({ mode: 'open' })
|
|
// const shadow = document.createElement('div')
|
|
shadow.innerHTML = `
|
|
<button action="prevSentence"><<</button>
|
|
<button action="prevWord"><</button>
|
|
<button action="stop">stop</button>
|
|
<button action="playpause">start</button>
|
|
<button action="nextWord">></button>
|
|
<button action="nextSentence">>></button>
|
|
`
|
|
this._root = shadow
|
|
// this.appendChild(shadow)
|
|
}
|
|
|
|
connectedCallback() {
|
|
for (let button of this._root.querySelectorAll('button')) {
|
|
button.addEventListener('click', e => {
|
|
let action = e.target.getAttribute('action')
|
|
let evt = new CustomEvent('control-event', { detail: { action } })
|
|
this.dispatchEvent(evt)
|
|
})
|
|
}
|
|
}
|
|
|
|
updateUI(chapter, player) {
|
|
this.getButton('prevSentence').disabled = !chapter.hasPrevSentence()
|
|
this.getButton('prevWord').disabled = !chapter.hasPrevWord()
|
|
this.getButton('nextWord').disabled = !chapter.hasNextWord()
|
|
this.getButton('nextSentence').disabled = !chapter.hasNextSentence()
|
|
this.getButton('playpause').innerText = player.playing ? 'pause' : 'start'
|
|
}
|
|
|
|
getButton(name) {
|
|
for (let btn of this._root.querySelectorAll('button')) {
|
|
if (btn.getAttribute('action') === name) {
|
|
return btn
|
|
}
|
|
}
|
|
return null
|
|
}
|
|
}
|
|
|
|
window.customElements.define('rsvp-controls', RSVPControls)
|