Add basic username completion.

We need to get users into the store, though.
This commit is contained in:
Roger Braun 2016-11-30 13:39:17 +01:00
parent 9681bb7bfd
commit e1d6174689
5 changed files with 93 additions and 2 deletions

View file

@ -56,7 +56,7 @@ module.exports = {
test: /\.js$/, test: /\.js$/,
loader: 'babel', loader: 'babel',
include: projectRoot, include: projectRoot,
exclude: /node_modules/ exclude: /node_modules\/(?!tributejs)/
}, },
{ {
test: /\.json$/, test: /\.json$/,

View file

@ -13,11 +13,13 @@
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
}, },
"dependencies": { "dependencies": {
"babel-plugin-add-module-exports": "^0.2.1",
"diff": "^3.0.1", "diff": "^3.0.1",
"karma-mocha-reporter": "^2.2.1", "karma-mocha-reporter": "^2.2.1",
"node-sass": "^3.10.1", "node-sass": "^3.10.1",
"sanitize-html": "^1.13.0", "sanitize-html": "^1.13.0",
"sass-loader": "^4.0.2", "sass-loader": "^4.0.2",
"tributejs": "^2.1.0",
"vue": "^2.0.1", "vue": "^2.0.1",
"vue-router": "^2.0.1", "vue-router": "^2.0.1",
"vue-timeago": "^3.1.2", "vue-timeago": "^3.1.2",

View file

@ -1,8 +1,10 @@
import statusPoster from '../../services/status_poster/status_poster.service.js' import statusPoster from '../../services/status_poster/status_poster.service.js'
import MediaUpload from '../media_upload/media_upload.vue' import MediaUpload from '../media_upload/media_upload.vue'
import fileTypeService from '../../services/file_type/file_type.service.js' import fileTypeService from '../../services/file_type/file_type.service.js'
import Tribute from '../../../node_modules/tributejs/src/Tribute.js'
require('../../../node_modules/tributejs/scss/tribute.scss')
import { reject, map, uniqBy } from 'lodash' import { merge, reject, map, uniqBy } from 'lodash'
const buildMentionsString = ({user, attentions}, currentUser) => { const buildMentionsString = ({user, attentions}, currentUser) => {
let allAttentions = [...attentions] let allAttentions = [...attentions]
@ -19,6 +21,51 @@ const buildMentionsString = ({user, attentions}, currentUser) => {
return mentions.join(' ') + ' ' return mentions.join(' ') + ' '
} }
const defaultCollection = {
// symbol that starts the lookup
trigger: '@',
// element to target for @mentions
iframe: null,
// class added in the flyout menu for active item
selectClass: 'highlight',
// function called on select that returns the content to insert
selectTemplate: function (item) {
return '@' + item.original.screen_name
},
// template for displaying item in menu
menuItemTemplate: function (item) {
return `<img src="${item.original.profile_image_url}"></img> <div class='name'>${item.string}</div>`
},
// template for when no match is found (optional),
// If no template is provided, menu is hidden.
noMatchTemplate: null,
// specify an alternative parent container for the menu
menuContainer: document.body,
// column to search against in the object (accepts function or string)
lookup: 'name',
// column that contains the content to insert by default
fillAttr: 'screen_name',
// REQUIRED: array of objects to match
values: [],
// specify whether a space is required before the trigger character
requireLeadingSpace: true,
// specify whether a space is allowed in the middle of mentions
allowSpaces: false
}
const tribute = new Tribute({ collection: [] })
const PostStatusForm = { const PostStatusForm = {
props: [ props: [
'replyTo', 'replyTo',
@ -44,6 +91,24 @@ const PostStatusForm = {
} }
} }
}, },
computed: {
completions () {
let users = map(this.$store.state.statuses.allStatuses, 'user')
users = uniqBy(users, 'id')
users = merge({values: users}, defaultCollection)
return [users]
}
},
watch: {
completions () {
tribute.collection = this.completions
}
},
mounted () {
const textarea = this.$el.querySelector('textarea')
tribute.collection = this.completions
tribute.attach(textarea)
},
methods: { methods: {
postStatus (newStatus) { postStatus (newStatus) {
statusPoster.postStatus({ statusPoster.postStatus({

View file

@ -24,6 +24,22 @@
<script src="./post_status_form.js"></script> <script src="./post_status_form.js"></script>
<style lang="scss"> <style lang="scss">
.tribute-container {
ul {
padding: 0px;
li {
display: flex;
align-items: center;
}
}
img {
padding: 3px;
width: 16px;
height: 16px;
border-radius: 50%;
}
}
.post-status-form, .login { .post-status-form, .login {
.form-bottom { .form-bottom {
display: flex; display: flex;

View file

@ -451,6 +451,10 @@ babel-messages@^6.8.0:
dependencies: dependencies:
babel-runtime "^6.0.0" babel-runtime "^6.0.0"
babel-plugin-add-module-exports:
version "0.2.1"
resolved "https://registry.yarnpkg.com/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-0.2.1.tgz#9ae9a1f4a8dc67f0cdec4f4aeda1e43a5ff65e25"
babel-plugin-check-es2015-constants@^6.3.13: babel-plugin-check-es2015-constants@^6.3.13:
version "6.8.0" version "6.8.0"
resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.8.0.tgz#dbf024c32ed37bfda8dee1e76da02386a8d26fe7" resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.8.0.tgz#dbf024c32ed37bfda8dee1e76da02386a8d26fe7"
@ -5482,6 +5486,10 @@ tough-cookie@~2.3.0:
dependencies: dependencies:
punycode "^1.4.1" punycode "^1.4.1"
tributejs:
version "2.1.0"
resolved "https://registry.yarnpkg.com/tributejs/-/tributejs-2.1.0.tgz#2015cf2cd5fe0b7cb35f203bf67c5880bb9255d7"
trim-newlines@^1.0.0: trim-newlines@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613" resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"