From e1679d94c8be799958c89d2811b9eabb2140491b Mon Sep 17 00:00:00 2001 From: Alfred Melch Date: Fri, 18 Oct 2019 22:17:12 +0900 Subject: [PATCH] Make Webcomponent --- components/rsvp-controls.js | 54 ++++++++++++++++++++++++++ components/rsvp-reader.js | 76 +++++++++++++++++++++++++++++++++++++ index.html | 51 +++++++------------------ index.js | 69 ++++----------------------------- src/Chapter.js | 4 ++ 5 files changed, 155 insertions(+), 99 deletions(-) diff --git a/components/rsvp-controls.js b/components/rsvp-controls.js index e69de29..e7cef29 100644 --- a/components/rsvp-controls.js +++ b/components/rsvp-controls.js @@ -0,0 +1,54 @@ +// class RSVPControlButton extends HTMLElement { +// constructor() { +// super() +// const shadow = this.attachShadow({mode: 'open'}) +// const button = document.createElement() +// } +// } + +class RSVPControls extends HTMLElement { + constructor() { + super() + const shadow = this.attachShadow({ mode: 'open' }) + // const shadow = document.createElement('div') + shadow.innerHTML = ` + + + + + + + ` + 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) diff --git a/components/rsvp-reader.js b/components/rsvp-reader.js index e69de29..c80f95c 100644 --- a/components/rsvp-reader.js +++ b/components/rsvp-reader.js @@ -0,0 +1,76 @@ +import './rsvp-word.js' +import './rsvp-controls.js' + +import { Chapter } from '../src/Chapter.js' +import { Player } from '../src/Player.js' + +class RSVPReader extends HTMLElement { + constructor() { + super() + const shadow = this.attachShadow({ mode: 'open' }) + const word = document.createElement('rsvp-word') + const controls = document.createElement('rsvp-controls') + + shadow.appendChild(word) + shadow.appendChild(controls) + + this._root = shadow + this._rsvpWord = word + this._rsvpControls = controls + + this.player = new Player() + this.player.subscribe('main', this.tick.bind(this)) + this.setText('Sample Text. Easy there.') + + this._rsvpControls.addEventListener( + 'control-event', + this.handleControlEvent.bind(this) + ) + } + + setText(text) { + this.chapter = new Chapter(text, 10) + this.updateChildrenUI() + } + + tick() { + if (!this.chapter.hasNext()) { + this.player.stop() + } else { + this.chapter.next() + } + this.updateChildrenUI() + } + + updateChildrenUI() { + this._rsvpWord.setAttribute('word', this.chapter.currentSegment) + this._rsvpControls.updateUI(this.chapter, this.player) + } + + handleControlEvent(e) { + switch (e.detail.action) { + case 'prevSentence': + this.chapter.prevSentence() + break + case 'nextSentence': + this.chapter.nextSentence() + break + case 'prevWord': + this.chapter.prevWord() + break + case 'nextWord': + this.chapter.nextWord() + break + case 'playpause': + this.player.toggle() + break + case 'stop': + this.player.stop() + this.chapter.reset() + break + } + this.updateChildrenUI() + } +} + +window.customElements.define('rsvp-reader', RSVPReader) diff --git a/index.html b/index.html index 7d5d04e..b38c1e6 100644 --- a/index.html +++ b/index.html @@ -1,47 +1,24 @@ - + + Document - + - -
- - -
- Info: -
-
-
-
|
- -
|
-
-
-
- - - - -
-
- -
-
+ + + + +
+ + - - + + + \ No newline at end of file diff --git a/index.js b/index.js index 9e5578d..b513f75 100644 --- a/index.js +++ b/index.js @@ -1,67 +1,12 @@ -import { Chapter } from './src/Chapter.js' -import { Player } from './src/Player.js' - -import './components/rsvp-word.js' +import './components/rsvp-reader.js' const inputText = document.getElementById('input') -const output = document.getElementById('output') +const rsvpReader = document.getElementsByTagName('rsvp-reader')[0] +const loadBtn = document.getElementById('load') -const prevSentenceButton = document.getElementById('prevSentence') -const prevWordButton = document.getElementById('prevWord') -const nextWordButton = document.getElementById('nextWord') -const nextSentenceButton = document.getElementById('nextSentence') - -const playButton = document.getElementById('play') - -let chapter = new Chapter(inputText.value, 10) -let player = new Player() - -function updateUI() { - prevSentenceButton.disabled = !chapter.hasPrevSentence() - prevWordButton.disabled = !chapter.hasPrevWord() - nextWordButton.disabled = !chapter.hasNextWord() - nextSentenceButton.disabled = !chapter.hasNextSentence() - - playButton.innerText = player.playing ? 'pause' : 'start' - - output.setAttribute('word', chapter.currentSegment) +function loadText() { + rsvpReader.setText(inputText.value) } -function tick() { - if (!chapter.hasNext()) { - player.stop() - } else { - chapter.next() - } - updateUI() -} - -function handleClick(e) { - switch (e.target.getAttribute('action')) { - case 'load': - chapter = new Chapter(inputText.value, 10) - break - case 'prevSentence': - chapter.prevSentence() - break - case 'nextSentence': - chapter.nextSentence() - break - case 'prevWord': - chapter.prevWord() - break - case 'nextWord': - chapter.nextWord() - break - case 'play-pause': - player.toggle() - break - } - updateUI() -} - -for (let button of document.getElementsByClassName('action')) { - button.onclick = handleClick -} -player.subscribe('main', tick) -updateUI() +loadBtn.addEventListener('click', loadText) +loadText() diff --git a/src/Chapter.js b/src/Chapter.js index cef71e9..a6abd41 100644 --- a/src/Chapter.js +++ b/src/Chapter.js @@ -6,6 +6,10 @@ export class Chapter { this.segments = segments this.words = words this.sentences = sentences + this.reset() + } + + reset() { this.currentIdx = 0 }