Add auto complete for tags

go-shiori · Jun 7, 2018 · 9fa4cb2 · 9fa4cb2
1 parent 2d10415
commit 9fa4cb2
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 28 deletions.
diff --git a/cmd/serve/assets-prod.go b/cmd/serve/assets-prod.go
diff --git a/view/css/stylesheet.css b/view/css/stylesheet.css
diff --git a/view/css/yla-dialog.css b/view/css/yla-dialog.css
diff --git a/view/index.html b/view/index.html
@@ -271,11 +271,16 @@
                             }
                         })
                         .then((response) => {
-                            this.loading = false;
-                            this.bookmarks = response.data;
                             this.page = 0;
+                            this.bookmarks = response.data;
                             this.maxPage = Math.ceil(this.bookmarks.length / pageSize) - 1;
                             window.scrollTo(0, 0);
+
+                            return rest.get('/api/tags');
+                        })
+                        .then((response) => {
+                            this.tags = response.data;
+                            this.loading = false;
                         })
                         .catch((error) => {
                             var errorMsg = (error.response ? error.response.data : error.message).trim();
@@ -359,7 +364,9 @@
                             type: 'area'
                         }, {
                             name: 'tags',
-                            label: 'Comma separated tags (optional)'
+                            label: 'Comma separated tags (optional)',
+                            separator: ',',
+                            dictionary: this.tags.map(tag => tag.name)
                         }, ],
                         mainText: 'OK',
                         secondText: 'Cancel',

diff --git a/view/js/component/yla-dialog.js b/view/js/component/yla-dialog.js
@@ -30,7 +30,7 @@ var YlaDialog = function () {
                                    @focus="$event.target.select()"
                                    @keyup="handleInput(index)"
                                    @keyup.enter="handleInputEnter(index)">
-                            <span ref="suggestion" v-if="field.suggestion" class="suggestion">{{field.suggestion}}</span>
+                            <span :ref="'suggestion-'+index" v-if="field.suggestion" class="suggestion">{{field.suggestion}}</span>
                         </template>
                     </slot>
                 </div>
@@ -112,6 +112,7 @@ var YlaDialog = function () {
                             value: '',
                             type: 'text',
                             dictionary: [],
+                            separator: ' ',
                             suggestion: undefined
                         }
 
@@ -121,6 +122,7 @@ var YlaDialog = function () {
                             value: field.value || '',
                             type: field.type || 'text',
                             dictionary: field.dictionary instanceof Array ? field.dictionary : [],
+                            separator: field.separator || ' ',
                             suggestion: undefined
                         }
                     });
@@ -161,7 +163,7 @@ var YlaDialog = function () {
                 if (dictionary.length === 0) return;
 
                 // Fetch suggestion from dictionary
-                var words = field.value.split(' '),
+                var words = field.value.split(field.separator),
                     lastWord = words[words.length - 1].toLowerCase(),
                     suggestion;
 
@@ -179,7 +181,7 @@ var YlaDialog = function () {
                 // Display suggestion
                 this.$nextTick(() => {
                     var input = this.$refs.input[index],
-                        span = this.$refs.suggestion[index],
+                        span = this.$refs['suggestion-' + index][0],
                         inputRect = input.getBoundingClientRect();
 
                     span.style.top = (inputRect.bottom - 1) + 'px';
@@ -194,11 +196,13 @@ var YlaDialog = function () {
                     return;
                 }
 
-                var words = this.formFields[index].value.split(' ');
+                var separator = this.formFields[index].separator,
+                    words = this.formFields[index].value.split(separator);
+
                 words.pop();
                 words.push(suggestion);
 
-                this.formFields[index].value = words.join(' ') + ' ';
+                this.formFields[index].value = words.join(separator) + separator;
                 this.formFields[index].suggestion = undefined;
             },
             focus() {

diff --git a/view/less/stylesheet.less b/view/less/stylesheet.less
@@ -30,6 +30,10 @@
                 border-color: var(--border);
                 background-color: var(--contentBg);
             }
+            >.suggestion {
+                border-color: var(--border);
+                background-color: var(--bg);
+            }
         }
         >.yla-dialog__footer {
             border-color: var(--border);

diff --git a/view/less/yla-dialog.less b/view/less/yla-dialog.less
@@ -81,6 +81,7 @@
                 padding: 8px;
                 background-color: @bg;
                 border: 1px solid @border;
+                font-size: 0.9em;
             }
         }
         >.yla-dialog__footer {