56 lines
1.3 KiB
JavaScript
56 lines
1.3 KiB
JavaScript
import {
|
|
EVENT_PLAY_PAUSE,
|
|
TALL_CLASSNAME
|
|
} from '../config.js';
|
|
import {Tool} from '../tool.js';
|
|
|
|
export class PlayPause extends Tool {
|
|
playHTML = 'Play';
|
|
pauseHTML = 'Pause';
|
|
pauseButton = undefined;
|
|
playButton = undefined;
|
|
|
|
updateButtons() {
|
|
this.pauseButton.style.opacity = this.sim.playing ? '100%' : '50%';
|
|
this.playButton.style.opacity = this.sim.playing ? '50%' : '100%';
|
|
}
|
|
|
|
setContainer(container) {
|
|
super.setContainer(container);
|
|
this.updateButtons();
|
|
|
|
this.sim.div.addEventListener(EVENT_PLAY_PAUSE, () => {
|
|
this.updateButtons();
|
|
});
|
|
}
|
|
|
|
constructor(container) {
|
|
super(container);
|
|
|
|
const pauseButton = document.createElement('button');
|
|
const playButton = document.createElement('button');
|
|
|
|
this.pauseButton = pauseButton;
|
|
this.playButton = playButton;
|
|
|
|
this.div.appendChild(pauseButton);
|
|
this.div.appendChild(playButton);
|
|
|
|
pauseButton.innerHTML = this.pauseHTML;
|
|
playButton.innerHTML = this.playHTML;
|
|
|
|
playButton.classList.add(TALL_CLASSNAME);
|
|
pauseButton.classList.add(TALL_CLASSNAME);
|
|
|
|
pauseButton.addEventListener('click', () => {
|
|
this.sim.pause();
|
|
this.updateButtons();
|
|
});
|
|
|
|
playButton.addEventListener('click', () => {
|
|
this.sim.play();
|
|
this.updateButtons();
|
|
});
|
|
}
|
|
}
|