[pronouns] speed buttons for multiple pronouns

This commit is contained in:
Andrea Vos 2021-08-18 22:12:20 +02:00
parent 48a7ad5945
commit 3ef5747fd5

View File

@ -1,9 +1,16 @@
<template>
<NotFound v-if="!selectedPronoun"/>
<div v-else>
<h2>
<Icon v="tag"/>
<T>pronouns.intro</T>:
<h2 class="d-flex justify-content-between">
<span>
<Icon v="tag"/>
<T>pronouns.intro</T>:
</span>
<div v-if="nameOptions.length > 1" class="btn-group" role="group">
<button :class="['btn btn-sm', counterSpeed === 0 ? 'btn-primary' : 'btn-outline-primary']" @click="counterPause"><Icon v="pause"/></button>
<button :class="['btn btn-sm', counterSpeed === 3000 ? 'btn-primary' : 'btn-outline-primary']" @click="counterSlow"><Icon v="play"/></button>
<button :class="['btn btn-sm', counterSpeed === 1000 ? 'btn-primary' : 'btn-outline-primary']" @click="counterFast"><Icon v="forward"/></button>
</div>
</h2>
<section>
@ -136,6 +143,8 @@
pronounGroup: pronounLibrary.find(selectedPronoun),
counter: 0,
counterHandle: null,
counterSpeed: 1000,
}
},
async asyncData({app}) {
@ -145,7 +154,7 @@
},
mounted() {
if (process.client) {
setInterval(_ => this.counter++, 1000);
this.counterSlow();
}
},
head() {
@ -158,6 +167,27 @@
addSlash(link) {
return link + (['*', `'`].includes(link.substr(link.length - 1)) ? '/' : '');
},
counterClear() {
if (this.counterHandle) {
clearInterval(this.counterHandle);
}
},
counterPause() {
this.counterSpeed = 0;
this.counterClear();
},
counterSlow() {
this.counterSpeed = 3000;
this.counterClear();
this.counter++;
this.counterHandle = setInterval(_ => this.counter++, this.counterSpeed);
},
counterFast() {
this.counterSpeed = 1000;
this.counterClear();
this.counter++;
this.counterHandle = setInterval(_ => this.counter++, this.counterSpeed);
},
},
computed: {
sourceLibrary() {