spanish-quizzer

commit b8466aee7d278180270f1e9e484f8accc30625e9
parent c60167ef44616b4b5c65229b9add543312a4d73e
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Sat, 27 Mar 2021 13:40:26 -0700

Add search button to reference tables

Diffstat:
M
css/reference.css
 | 
17
+++++++++++++++--
M
js/reference.js
 | 
20
+++++++++++++++++---

2 files changed, 32 insertions(+), 5 deletions(-)
diff --git a/css/reference.css b/css/reference.css
@@ -6,10 +6,19 @@
     justify-content: center;
     margin: 15px 10px;
 }
-.referenceTableControls input {
+.referenceTableControls * {
+    height: 25px;
+}
+.referenceTableControls div {
     margin-left: 10px;
+}
+.referenceTableControls input {
+    margin-right: 10px;
     padding-left: 3px;
 }
+.referenceTableControls button {
+    padding: 0px 10px;
+}
 @media only screen and (max-width: 500px) {
     .referenceTableControls {
         flex-direction: column;
@@ -18,10 +27,14 @@
     .referenceTableControls * {
         height: 30px;
     }
-    .referenceTableControls input {
+    .referenceTableControls div {
+        display: flex;
         margin-left: 0px;
         margin-top: 10px;
     }
+    .referenceTableControls input {
+        width: 100%;
+    }
 }
 
 /* Table */
diff --git a/js/reference.js b/js/reference.js
@@ -60,6 +60,16 @@ const referenceTables = Vue.component("referenceTables", {
     },
     methods: {
         /**
+         * Search for a string in the table
+         * @param {Object} args - The event args (optional)
+         */
+        search: function(args) {
+            if (args) args.target.blur();
+            this.$refs.search.blur();
+            this.query = this.$refs.search.value;
+        },
+
+        /**
          * Set the table height.
          */
         setTableHeight: function() {
@@ -97,7 +107,9 @@ const referenceTables = Vue.component("referenceTables", {
          * @param {object} e - The event args.
          */
         keyup: function(e) {
-            if (this._inactive || this.$refs.search === document.activeElement) return;
+            if (this._inactive) return;
+            if (e.keyCode === 13 && this.$refs.search === document.activeElement) this.search();
+            if (this.$refs.search === document.activeElement) return;
             if (e.key === "h" || e.key == "/") {
                 try {
                     this.$refs.search.focus();
@@ -137,8 +149,10 @@ const referenceTables = Vue.component("referenceTables", {
                 <option value="verbs">Conjugations</option>
                 <option value="vocab">Vocab</option>
             </select>
-            <input type="text" aria-label="Search" v-model="query" placeholder="Search"
-                autocomplete="off" autocorrect="off" ref="search">
+            <div>
+                <input type="text" ref="search" aria-label="Search" placeholder="Search" autocomplete="off" autocorrect="off">
+                <button @click="search">Search</button>
+            </div>
         </div>
 
         <div class="referenceTable" ref="referenceTable">