www: autocomplete tags in message form

4 files changed, 27 insertions, 2 deletions

diff --git a/juick-www/package-lock.json b/juick-www/package-lock.json
index b47230b6..486cd28d 100644
--- a/juick-www/package-lock.json
+++ b/juick-www/package-lock.json
@@ -220,6 +220,11 @@
         "postcss-value-parser": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz"
       }
     },
+    "awesomplete": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/awesomplete/-/awesomplete-1.1.2.tgz",
+      "integrity": "sha1-tuJT9zR05GJ4u6Wuf4HUJiFg+3U="
+    },
     "babel-code-frame": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.22.0.tgz",
diff --git a/juick-www/package.json b/juick-www/package.json
index b4e14743..e69823d5 100644
--- a/juick-www/package.json
+++ b/juick-www/package.json
@@ -33,6 +33,7 @@
     "webpack-asset-pipeline": "^1.1.1"
   },
   "dependencies": {
+    "awesomplete": "^1.1.2",
     "classlist.js": "^1.1.20150312",
     "element-closest": "^2.0.2",
     "evil-icons": "^1.9.0",
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;
diff --git a/juick-www/webpack.config.js b/juick-www/webpack.config.js
index dc0373fe..54c9114d 100644
--- a/juick-www/webpack.config.js
+++ b/juick-www/webpack.config.js
@@ -12,7 +12,8 @@ module.exports = {
         ],
         "style" : [
             __dirname + "/src/main/static/style.css",
-            require.resolve('evil-icons/assets/evil-icons.css')
+            require.resolve('evil-icons/assets/evil-icons.css'),
+            require.resolve('awesomplete/awesomplete.css')
         ]
     },
     output: {