From 3ef5747fd54fbc7c851b525bbfdcc057b4937379 Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Wed, 18 Aug 2021 22:12:20 +0200
Subject: [PATCH] [pronouns] speed buttons for multiple pronouns

---
 routes/pronoun.vue | 38 ++++++++++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/routes/pronoun.vue b/routes/pronoun.vue
index 97c83141e..9d31a855d 100644
--- a/routes/pronoun.vue
+++ b/routes/pronoun.vue
@@ -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() {