www: autocomplete tags in message form

1 files changed, 19 insertions, 1 deletions

diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js
index 4001dbb6..6b4d3f08 100644
--- a/juick-www/src/main/static/scripts.js
+++ b/juick-www/src/main/static/scripts.js
@@ -2,6 +2,7 @@ require('whatwg-fetch');
 require('element-closest');
 require('classlist.js');
 let killy = require('killy');
+let Awesomplete = require('awesomplete');
 
 if (!('remove' in Element.prototype)) { // Firefox <23
     Element.prototype.remove = function() {
@@ -504,7 +505,7 @@ function openPostDialog() {
             <div>
                 <input class="img" name="img" placeholder="${i18n('postForm.imageLink')} (${i18n('postForm.imageFormats')})"/>
                  ${i18n('postForm.or')} <a href="#">${i18n('postForm.upload')}</a><br/>
-                <input class="tags" name="tags" placeholder="${i18n('postForm.tags')}"/><br/>
+                <input id="tags_input" class="tags" name="tags" placeholder="${i18n('postForm.tags')}"/><br/>
                 <input type="submit" class="subm" value="${i18n('postForm.submit')}"/>
             </div>
         </form>
@@ -620,6 +621,22 @@ function setPrivacy(e, mid) {
         });
     return false;
 }
+
+function getTags() {
+    fetch('//api.juick.com/tags?hash=' + document.getElementById('body').getAttribute('data-hash'), {
+                credentials: 'same-origin'
+            })
+            .then(response => {
+                return response.json()
+            })
+            .then(json => {
+                let tags = json.map(t => t.tag);
+                let input = document.getElementById('tags_input');
+                new Awesomplete(input, {list : tags});
+            });
+        return false;
+}
+
 /******************************************************************************/
 
 function ready(fn) {
@@ -798,6 +815,7 @@ ready(function () {
     var post = document.getElementById('post');
     post.addEventListener('click', (e) => {
         openPostDialog();
+        getTags();
         var newMessageBlock = document.getElementById('newmessage');
         if (newMessageBlock) {
             var form = newMessageBlock.parentNode;