You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

52 lines
1.4 KiB
JavaScript

5 years ago
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; font-size: 2.4em;}.pivot{color:red}.prefix{flex:1}.suffix{flex:1}.prefix{text-align:right}'
5 years ago
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)