From feea15b5878edd01935c2bde8d8e472441489dd4 Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Wed, 30 Aug 2017 15:04:30 +0300 Subject: www: autocomplete tags in message form --- juick-www/package-lock.json | 5 +++++ juick-www/package.json | 1 + juick-www/src/main/static/scripts.js | 20 +++++++++++++++++++- juick-www/webpack.config.js | 3 ++- 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() {
${i18n('postForm.or')} ${i18n('postForm.upload')}
-
+
@@ -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: { -- cgit v1.2.3