WIP: gh-33, better object autocomplete box.

kingsdigitallab · Sep 1, 2023 · 6d249b9 · 6d249b9
1 parent f6ba989
commit 6d249b9
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/app/annotator.html b/app/annotator.html
@@ -67,7 +67,13 @@
                   <div class="field-body">
                     <div class="field">
                       <p class="control has-icons-left">
-                        <input class="input" type="text" placeholder="Search" v-model="searchPhrase" list="available-objects" @keyup.delete.stop>
+                        <input class="input" type="text" 
+                          placeholder="Search" v-model="searchPhrase" 
+                          list="available-objects" 
+                          @keyup.delete.stop
+                          @keyup.escape.stop="onEscapeObjectSearch()"
+                          @blur="onBlurObjectSearch()"
+                        >
                         <span class="icon is-left">
                           <i class="fas fa-search" aria-hidden="true"></i>
                         </span>

diff --git a/app/assets/annotator.js b/app/assets/annotator.js
@@ -574,7 +574,6 @@ createApp({
       }
       let filteredImages = this.filteredImages
       let img = this.image
-      console.log(img)
       if (!img) {
         img = filteredImages ? filteredImages[0] : null
       }
@@ -1412,6 +1411,19 @@ createApp({
       if (!this.description.tags) return;
       this.description.tags = this.description.tags.filter(t => t != tag)
       this.updateSelectedAnnotationFromDescription()
+    },
+    onBlurObjectSearch() {
+      this.resetSearchPhrase()
+    },
+    onEscapeObjectSearch() {
+      if (this.searchPhrase == '') {
+        this.resetSearchPhrase()
+      } else {
+        this.searchPhrase = ''
+      }
+    },
+    resetSearchPhrase() {
+      this.searchPhrase = this?.object?.title || ''
     }
   },
 }).mount('#annotator');
diff --git a/app/assets/main.css b/app/assets/main.css
@@ -266,3 +266,9 @@ br[data-tei-n="1"] {
 .image-loaded-1 {
   display: none;
 }
+
+#available-objects {
+  option {
+    color: red;
+  }
+}