melch/rsvp-reader
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Remove old components

Browse Source
This commit is contained in:
Alfred Melch 2019-12-14 20:08:32 +01:00
parent 9ef8dc2eac
commit b5903bfca7
9 changed files with 0 additions and 386 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
components/generic/Consumer.js
View File

@ -1,52 +0,0 @@
import { createParentsIterator } from './ParentsIterator.js'
import { StateProvider } from './Provider.js'
class StateConsumer extends HTMLElement {
constructor() {
super()
this.provider = null
this.appendChild(document.createElement('slot'))
}
get name() {
return this.getAttribute('name')
}
/** Returns the value of the corresponding provider */
get value() {
return this.provider ? this.provider.value : null
}
connectedCallback() {
this.provider = this.findProvider()
if (this.provider) {
this.provider.addObserver(this)
}
this.update(this.provider)
}
disconnectedCallback() {
this.provider.removeObserver(this)
}
/**
* Traverses tree upwards until a Provider with the same name is found
* Returns the closest provider or null if none is existent
*/
findProvider() {
for (let node of createParentsIterator(this)) {
if (node instanceof StateProvider && node.name === this.name) {
return node
}
}
return null
}
update({ value }) {
if (typeof this.onChange === 'function') {
this.onChange(value)
}
}
}
window.customElements.define('state-consumer', StateConsumer)

28
components/generic/ParentsIterator.js
View File

@ -1,28 +0,0 @@
/**
* Returns the parent of a node.
* Breaks through shadow roots.
* Returns null if node has no parent.
* @param {Node} node
*/
function getParent(node) {
let parent = node.parentNode
if (!parent) return null
return parent.host ? parent.host : parent
}
/**
* Returns an Iterator that walks the DOM tree upwards.
* @param {Node} node
*/
export function createParentsIterator(node) {
let curNode = node
return {
next: function() {
curNode = getParent(curNode)
return curNode ? { value: curNode } : { done: true }
},
[Symbol.iterator]: function() {
return this
}
}
}

53
components/generic/Provider.js
View File

@ -1,53 +0,0 @@
export class StateProvider extends HTMLElement {
constructor() {
super()
this.appendChild(document.createElement('slot'))
this.observers = []
}
connectedCallback() {
this.value = this.getAttribute('value')
}
get name() {
return this.getAttribute('name')
}
get value() {
return this._val
}
set value(newValue) {
// if (this.value !== newValue) {
this._val = newValue
this.notifyObservers()
// }
}
static get observedAttributes() {
return ['value']
}
attributeChangedCallback(name, oldValue, newValue) {
// console.log('attrChange', name, oldValue, newValue)
if (name === 'value') {
this.value = newValue
}
}
notifyObservers() {
for (let obs of this.observers) {
obs.update(this)
}
}
addObserver(obs) {
this.observers.push(obs)
}
removeObserver(obs) {
this.observers = this.observers.filter(el => el !== obs)
}
}
window.customElements.define('state-provider', StateProvider)

43
components/rsvp-component.js
View File

@ -1,43 +0,0 @@
import { RSVPProvider } from './rsvp-provider.js'
export class RSVPComponent extends HTMLElement {
constructor() {
super()
this._root = this.attachShadow({ mode: 'open' })
const provider = this.findProvider()
provider.addObserver(this)
}
connectedCallback() {}
render() {}
update(state) {}
fireEvent(action, payload) {
let evt = new CustomEvent('rsvp-event', {
bubbles: true,
composed: true,
detail: { action, payload }
})
this.dispatchEvent(evt)
}
/**
* Traverses tree upwards until a RSVPProvider node is found
* Returns the closest provider or null if none is existent
*/
findProvider() {
let curNode = this
while (curNode.parentNode) {
curNode = curNode.parentNode
if (curNode.host) {
curNode = curNode.host
}
if (curNode instanceof RSVPProvider) {
break
}
}
return curNode instanceof RSVPProvider ? curNode : null
}
}

70
components/rsvp-controls.js
View File

@ -1,70 +0,0 @@
import { RSVPComponent } from './rsvp-component.js'
class RSVPButton extends RSVPComponent {
constructor() {
super()
const btn = document.createElement('button')
const slot = document.createElement('slot')
btn.addEventListener('click', this.handleClick.bind(this))
btn.appendChild(slot)
this._root.appendChild(btn)
}
handleClick(e) {
this.fireEvent(this.getAttribute('action'))
}
}
window.customElements.define('rsvp-button', RSVPButton)
class RSVPControls extends HTMLElement {
constructor() {
super()
const shadow = this.attachShadow({ mode: 'open' })
// const shadow = document.createElement('div')
shadow.innerHTML = `
<rsvp-button action="prevSentence">&lt;&lt;</rsvp-button>
<rsvp-button action="prevWord">&lt;</rsvp-button>
<rsvp-button action="stop">stop</rsvp-button>
<rsvp-button action="playpause">start</rsvp-button>
<rsvp-button action="nextWord">&gt;</rsvp-button>
<rsvp-button action="nextSentence">&gt;&gt;</rsvp-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', {
bubbles: true,
composed: true,
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)

23
components/rsvp-provider.js
View File

@ -1,23 +0,0 @@
import { RSVPController } from '../src/RSVPController.js'
export class RSVPProvider extends HTMLElement {
constructor() {
super()
const shadow = this.attachShadow({ mode: 'open' })
const provider = document.createElement('state-provider')
const slot = document.createElement('slot')
provider.setAttribute('name', 'rsvp-controller')
provider.appendChild(slot)
shadow.appendChild(provider)
const controller = new RSVPController()
controller.onChange = this.provider.notifyObservers()
this.addEventListener('rsvp-event', function(e) {
let { action, payload } = e.detail
controller.handleAction(action, payload)
})
}
}
window.customElements.define('rsvp-provider', RSVPProvider)

20
components/rsvp-reader.js
View File

@ -1,20 +0,0 @@
import './rsvp-word.js'
import './rsvp-controls.js'
import './rsvp-word-markers.js'
import './rsvp-provider.js'
class RSVPReader extends HTMLElement {
constructor() {
super()
const shadow = this.attachShadow({ mode: 'open' })
shadow.innerHTML = `
<rsvp-provider>
<rsvp-word></rsvp-word>
<rsvp-controls></rsvp-controls>
</rsvp-provider>
`
}
}
window.customElements.define('rsvp-reader', RSVPReader)

44
components/rsvp-word-markers.js
View File

@ -1,44 +0,0 @@
class RSVPPipeMarker extends HTMLElement {
constructor() {
super()
const shadow = this.attachShadow({ mode: 'open' })
shadow.innerHTML = `
<style>
:host {display: block}
.marker { text-align: center }
</style>
<div class="marker">|</div>
<slot></slot>
<div class="marker">|</div>
`
}
}
class RSVPBorderMarker extends HTMLElement {
constructor() {
super()
const shadow = this.attachShadow({ mode: 'open' })
shadow.innerHTML = `
<style>
:host {display: block; margin: 5px 0;}
.top, .bottom { display: flex;}
.a {flex:1} .b {flex:1}
.bottom { align-items: flex-end; }
.side { background-color: black; height: 2px;}
.center { background-color: black; height: 6px; width: 2px}
</style>
<div class="top">
<div class="side a"></div><div class="center"></div><div class="side b"></div>
</div>
<slot></slot>
<div class="bottom">
<div class="side a"></div><div class="center"></div><div class="side b"></div>
</div>
<div class="marker"></div>
`
}
}
window.customElements.define('rsvp-pipe-marker', RSVPPipeMarker)
window.customElements.define('rsvp-border-marker', RSVPBorderMarker)

53
components/rsvp-word.js
View File

@ -1,53 +0,0 @@
import { pivotize } from '../src/textProcessing/pivotize.js'
import { RSVPComponent } from './rsvp-component.js'
class RSVPWord extends RSVPComponent {
constructor() {
super()
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}'
word.appendChild(prefix)
word.appendChild(pivot)
word.appendChild(suffix)
this._root.appendChild(style)
this._root.appendChild(word)
this.wordParts = { prefix, pivot, suffix }
}
update({ chapter }) {
const [prefix, pivot, suffix] = pivotize(chapter.currentSegment)
this.wordParts.prefix.innerText = prefix
this.wordParts.pivot.innerText = pivot
this.wordParts.suffix.innerText = suffix
}
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)