52 lines
1.4 KiB
JavaScript
52 lines
1.4 KiB
JavaScript
import { pivotize } from '../src/textProcessing/pivotize.js'
|
|
|
|
class RSVPWord extends HTMLElement {
|
|
constructor() {
|
|
super()
|
|
const shadow = this.attachShadow({ mode: 'open' })
|
|
const style = document.createElement('style')
|
|
const word = document.createElement('div')
|
|
const prefix = document.createElement('span')
|
|
const pivot = document.createElement('span')
|
|
const suffix = document.createElement('span')
|
|
|
|
word.setAttribute('class', 'word')
|
|
prefix.setAttribute('class', 'prefix')
|
|
pivot.setAttribute('class', 'pivot')
|
|
suffix.setAttribute('class', 'suffix')
|
|
|
|
style.textContent =
|
|
'.word{display:flex}.pivot{color:red}.prefix,.suffix{flex:1}.prefix{text-align:right}'
|
|
|
|
word.appendChild(prefix)
|
|
word.appendChild(pivot)
|
|
word.appendChild(suffix)
|
|
shadow.appendChild(style)
|
|
shadow.appendChild(word)
|
|
|
|
this._root = shadow
|
|
this.wordParts = { prefix, pivot, suffix }
|
|
}
|
|
|
|
connectedCallback() {
|
|
this.updateDisplay()
|
|
}
|
|
|
|
static get observedAttributes() {
|
|
return ['word']
|
|
}
|
|
|
|
attributeChangedCallback() {
|
|
this.updateDisplay()
|
|
}
|
|
|
|
updateDisplay() {
|
|
const [prefix, pivot, suffix] = pivotize(this.getAttribute('word') || '')
|
|
this.wordParts.prefix.innerText = prefix
|
|
this.wordParts.pivot.innerText = pivot
|
|
this.wordParts.suffix.innerText = suffix
|
|
}
|
|
}
|
|
|
|
window.customElements.define('rsvp-word', RSVPWord)
|