Added hover vocabulary delay setting

uzluisf · Mar 16, 2024 · 98eda89 · 98eda89
1 parent 6f1906c
commit 98eda89
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 7 deletions.
diff --git a/resources/js/components/Text/TextBlock.vue b/resources/js/components/Text/TextBlock.vue
@@ -40,7 +40,7 @@
                     @mousemove.stop="updateSelectionMouse($event, wordIndex);" 
                     @touchend.stop="finishSelection($event)"
                     @mouseup.stop="finishSelection($event)"
-                    @mouseleave=";"
+                    @mouseleave="stopHoverTimeout"
                 ><!--
                     --><template v-if="language == 'japanese'"><!--
                         --><ruby class="rubyword" :wordindex="wordIndex"><!--
@@ -136,6 +136,9 @@
             this.updatePhraseBorders();
         },
         methods: {
+            stopHoverTimeout() {
+                this.$emit('stopHoverTimeout');
+            },
             hoverPhraseSelection: function(wordIndex) {
                 // collection for hover vocabulary box
                 var hoveredWords = [];

diff --git a/resources/js/components/Text/TextBlockGroup.vue b/resources/js/components/Text/TextBlockGroup.vue
@@ -54,6 +54,7 @@
             :updateLookupCount="updateLookupCount"
             :startSelection="startSelection"
             :updateHoveredWords="updateHoverVocabularyBox"
+            :stopHoverTimeout="clearHoverVocabularyBoxTimeout"
         >
             <text-block
                 :key="'text-block' + textBlockKey"
@@ -76,6 +77,7 @@
                 @updateLookupCount="updateLookupCount"
                 @startSelection="startSelection"
                 @updateHoveredWords="updateHoverVocabularyBox"
+                @stopHoverTimeout="clearHoverVocabularyBoxTimeout"
             ></text-block>
         </slot>
 
@@ -288,6 +290,10 @@
                 type: Boolean,
                 default: false
             },
+            vocabularyHoverBoxDelay: {
+                type: Number,
+                default: 300
+            },
             autoHighlightWords: {
                 type: Boolean,
                 default: true
@@ -326,7 +332,6 @@
         },
         methods: {
             hotkeyHandle(event) {
-                console.log(event.which);
                 if (!this.$props.hotkeysEnabled) {
                     return;
                 }
@@ -624,7 +629,6 @@
                 this.hoverVocabBox.disabledWhileSelecting = false;
             },
             updateHoverVocabularyBox(data) {
-                var hoverDelay = 300;
                 if (!this.$props.vocabularyHoverBox || data.hoveredWords === null) {
                     this.hoverVocabBox.dictionarySearchTerm = '';
                     this.hoverVocabBox.hoveredWords = null;
@@ -649,7 +653,7 @@
 
                     // clear previous delay timeout 
                     if (this.hoverVocabBox.hoverVocabularyDelayTimeout !== null) {
-                        clearTimeout(this.hoverVocabBox.hoverVocabularyDelayTimeout);
+                        this.clearHoverVocabularyBoxTimeout();
                     }
 
                     // check if dictionary search option is enabled
@@ -659,7 +663,7 @@
                             this.hoverVocabBox.deeplTranslation = '';
                             this.hoverVocabBox.active = true;
                             this.updateHoverVocabularyBoxPosition(data.hoveredWords);    
-                        }, hoverDelay);
+                        }, this.$props.vocabularyHoverBoxDelay);
                         return;
                     }
 
@@ -689,9 +693,12 @@
                         }
                         
                         this.makeHoverVocabularyBoxSearchRequest(term);
-                    }, hoverDelay);
+                    }, this.$props.vocabularyHoverBoxDelay);
                 }
             },
+            clearHoverVocabularyBoxTimeout() {
+                clearTimeout(this.hoverVocabBox.hoverVocabularyDelayTimeout);
+            },
             updateHoverVocabularyBoxPosition(hoveredWords) {
                 var margin = 8;
                 var hoverVocabBoxWidth = 300;

diff --git a/resources/js/components/TextReader/TextReader.vue b/resources/js/components/TextReader/TextReader.vue
@@ -88,6 +88,7 @@
                         :furigana-on-new-words="settings.furiganaOnNewWords"
                         :vocabulary-hover-box="settings.vocabularyHoverBox"
                         :vocabulary-hover-box-search="settings.vocabularyHoverBoxSearch"
+                        :vocabulary-hover-box-delay="settings.vocabularyHoverBoxDelay"
                         :vocabulary-sidebar="settings.vocabularySidebar"
                         :auto-highlight-words="settings.autoHighlightWords"
                         :vocabulary-sidebar-fits="vocabularySidebarFits"
@@ -196,6 +197,7 @@
                     mediaControlsVisible: true,
                     vocabularySidebar: true,
                     vocabularyHoverBox: true,
+                    vocabularyHoverBoxDelay: 300,
                     autoHighlightWords: true
                 },
                 fullscreenMode: false,

diff --git a/resources/js/components/TextReader/TextReaderSettings.vue b/resources/js/components/TextReader/TextReaderSettings.vue
@@ -255,7 +255,26 @@
                         ></v-switch>
                     </v-col>
                 </v-row>
-
+
+                <!-- Hover vocabulary delay -->
+                <v-row>
+                    <v-col cols="12" sm="3" class="d-flex align-center mt-0 mt-md-0 mb-md-5 pb-0 pb-sm-0 pb-md-3">Hover vocabulary delay:</v-col>
+                    <v-col class="slider-container d-flex pt-xs-0 pt-sm-0 pt-md-3 align-center">
+                        <v-slider
+                            v-model="settings.vocabularyHoverBoxDelay"
+                            :tick-labels="['200ms', '', '', '', '', '', '', '', '1000ms']"
+                            :tick-size="0"
+                            :min="200"
+                            :max="1000"
+                            thumb-label="always"
+                            thumb-size="38"
+                            step="100"
+                            track-color="#c5c5c5"
+                            @change="saveSettings"
+                        >
+                        </v-slider>
+                    </v-col>
+                </v-row>
             </v-card-text>
 
             <v-card-actions>
@@ -287,6 +306,7 @@
                     vocabularySidebar: 'vocabulary-sidebar',
                     vocabularyHoverBox: 'vocabulary-hover-box',
                     vocabularyHoverBoxSearch: 'vocabulary-hover-box-search',
+                    vocabularyHoverBoxDelay: 'vocabulary-hover-delay',
                     autoHighlightWords: 'auto-highlight-words'
                 },
                 settings: {},
@@ -325,6 +345,7 @@
             this.loadSetting('vocabularySidebar', 'boolean', true);
             this.loadSetting('vocabularyHoverBox', 'boolean', true);
             this.loadSetting('vocabularyHoverBoxSearch', 'boolean', true);
+            this.loadSetting('vocabularyHoverBoxDelay', 'integer', 300);
             this.loadSetting('autoHighlightWords', 'boolean', true);
             this.settingsLoaded = true;
             this.saveSettings();
@@ -358,6 +379,7 @@
                 this.saveSetting('vocabularySidebar');
                 this.saveSetting('vocabularyHoverBox');
                 this.saveSetting('vocabularyHoverBoxSearch');
+                this.saveSetting('vocabularyHoverBoxDelay');
                 this.saveSetting('autoHighlightWords');
 
                 this.$emit('changed', this.settings);