forked from AkkomaGang/akkoma-fe
Merge branch 'feature/completion' into 'develop'
Feature/completion See merge request !66
This commit is contained in:
commit
10d5dacd51
5 changed files with 217 additions and 4 deletions
|
@ -8,6 +8,7 @@
|
|||
"dev": "node build/dev-server.js",
|
||||
"build": "node build/build.js",
|
||||
"unit": "karma start test/unit/karma.conf.js --single-run",
|
||||
"unit:watch": "karma start test/unit/karma.conf.js --single-run=false",
|
||||
"e2e": "node test/e2e/runner.js",
|
||||
"test": "npm run unit && npm run e2e",
|
||||
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import statusPoster from '../../services/status_poster/status_poster.service.js'
|
||||
import MediaUpload from '../media_upload/media_upload.vue'
|
||||
import fileTypeService from '../../services/file_type/file_type.service.js'
|
||||
|
||||
import { reject, map, uniqBy } from 'lodash'
|
||||
import Completion from '../../services/completion/completion.js'
|
||||
import { take, filter, reject, map, uniqBy } from 'lodash'
|
||||
|
||||
const buildMentionsString = ({user, attentions}, currentUser) => {
|
||||
let allAttentions = [...attentions]
|
||||
|
@ -42,15 +42,48 @@ const PostStatusForm = {
|
|||
newStatus: {
|
||||
status: statusText,
|
||||
files: []
|
||||
}
|
||||
},
|
||||
caret: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
candidates () {
|
||||
if (this.textAtCaret.charAt(0) === '@') {
|
||||
const matchedUsers = filter(this.users, (user) => (user.name + user.screen_name).match(this.textAtCaret.slice(1)))
|
||||
if (matchedUsers.length <= 0) {
|
||||
return false
|
||||
}
|
||||
// eslint-disable-next-line camelcase
|
||||
return map(take(matchedUsers, 5), ({screen_name, name, profile_image_url_original}) => ({
|
||||
screen_name: screen_name,
|
||||
name: name,
|
||||
img: profile_image_url_original
|
||||
}))
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
},
|
||||
textAtCaret () {
|
||||
return (this.wordAtCaret || {}).word || ''
|
||||
},
|
||||
wordAtCaret () {
|
||||
const word = Completion.wordAtPosition(this.newStatus.status, this.caret - 1) || {}
|
||||
return word
|
||||
},
|
||||
users () {
|
||||
return this.$store.state.users.users
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
replace (replacement) {
|
||||
this.newStatus.status = Completion.replaceWord(this.newStatus.status, this.wordAtCaret, replacement)
|
||||
const el = this.$el.querySelector('textarea')
|
||||
el.focus()
|
||||
this.caret = 0
|
||||
},
|
||||
setCaret ({target: {selectionStart}}) {
|
||||
this.caret = selectionStart
|
||||
},
|
||||
postStatus (newStatus) {
|
||||
statusPoster.postStatus({
|
||||
status: newStatus.status,
|
||||
|
|
|
@ -2,7 +2,18 @@
|
|||
<div class="post-status-form">
|
||||
<form @submit.prevent="postStatus(newStatus)">
|
||||
<div class="form-group base03-border" >
|
||||
<textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="1" class="form-control" @keydown.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag" @input="resize"></textarea>
|
||||
<textarea @click="setCaret" @keyup="setCaret" v-model="newStatus.status" placeholder="Just landed in L.A." rows="1" class="form-control" @keydown.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag" @input="resize"></textarea>
|
||||
</div>
|
||||
<div style="position:relative;" v-if="candidates">
|
||||
<div class="autocomplete-panel base05-background">
|
||||
<div v-for="candidate in candidates" @click="replace('@' + candidate.screen_name + ' ')" class="autocomplete base01">
|
||||
<img :src="candidate.img"></img>
|
||||
<span>
|
||||
@{{candidate.screen_name}}
|
||||
<small class="base02">{{candidate.name}}</small>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='form-bottom'>
|
||||
<media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
|
||||
|
@ -108,6 +119,34 @@
|
|||
.icon-cancel {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.autocomplete-panel {
|
||||
margin: 0 0.5em 0 0.5em;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
min-width: 75%;
|
||||
}
|
||||
|
||||
.autocomplete {
|
||||
cursor: pointer;
|
||||
padding: 0.2em 0.4em 0.2em 0.4em;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
span {
|
||||
line-height: 24px;
|
||||
margin: 0 0.1em 0 0.2em;
|
||||
}
|
||||
small {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
70
src/services/completion/completion.js
Normal file
70
src/services/completion/completion.js
Normal file
|
@ -0,0 +1,70 @@
|
|||
import { reduce, find } from 'lodash'
|
||||
|
||||
export const replaceWord = (str, toReplace, replacement) => {
|
||||
return str.slice(0, toReplace.start) + replacement + str.slice(toReplace.end)
|
||||
}
|
||||
|
||||
export const wordAtPosition = (str, pos) => {
|
||||
const words = splitIntoWords(str)
|
||||
const wordsWithPosition = addPositionToWords(words)
|
||||
|
||||
return find(wordsWithPosition, ({start, end}) => start <= pos && end > pos)
|
||||
}
|
||||
|
||||
export const addPositionToWords = (words) => {
|
||||
return reduce(words, (result, word) => {
|
||||
const data = {
|
||||
word,
|
||||
start: 0,
|
||||
end: word.length
|
||||
}
|
||||
|
||||
if (result.length > 0) {
|
||||
const previous = result.pop()
|
||||
|
||||
data.start += previous.end
|
||||
data.end += previous.end
|
||||
|
||||
result.push(previous)
|
||||
}
|
||||
|
||||
result.push(data)
|
||||
|
||||
return result
|
||||
}, [])
|
||||
}
|
||||
|
||||
export const splitIntoWords = (str) => {
|
||||
// Split at word boundaries
|
||||
const regex = /\b/
|
||||
const triggers = /[@#]+$/
|
||||
|
||||
let split = str.split(regex)
|
||||
|
||||
// Add trailing @ and # to the following word.
|
||||
const words = reduce(split, (result, word) => {
|
||||
if (result.length > 0) {
|
||||
let previous = result.pop()
|
||||
const matches = previous.match(triggers)
|
||||
if (matches) {
|
||||
previous = previous.replace(triggers, '')
|
||||
word = matches[0] + word
|
||||
}
|
||||
result.push(previous)
|
||||
}
|
||||
result.push(word)
|
||||
|
||||
return result
|
||||
}, [])
|
||||
|
||||
return words
|
||||
}
|
||||
|
||||
const completion = {
|
||||
wordAtPosition,
|
||||
addPositionToWords,
|
||||
splitIntoWords,
|
||||
replaceWord
|
||||
}
|
||||
|
||||
export default completion
|
70
test/unit/specs/services/completion/completion.spec.js
Normal file
70
test/unit/specs/services/completion/completion.spec.js
Normal file
|
@ -0,0 +1,70 @@
|
|||
import { replaceWord, addPositionToWords, wordAtPosition, splitIntoWords } from '../../../../../src/services/completion/completion.js'
|
||||
|
||||
describe('addPositiontoWords', () => {
|
||||
it('adds the position to a word list', () => {
|
||||
const words = ['hey', 'this', 'is', 'fun']
|
||||
|
||||
const expected = [
|
||||
{
|
||||
word: 'hey',
|
||||
start: 0,
|
||||
end: 3
|
||||
},
|
||||
{
|
||||
word: 'this',
|
||||
start: 3,
|
||||
end: 7
|
||||
},
|
||||
{
|
||||
word: 'is',
|
||||
start: 7,
|
||||
end: 9
|
||||
},
|
||||
{
|
||||
word: 'fun',
|
||||
start: 9,
|
||||
end: 12
|
||||
}
|
||||
]
|
||||
|
||||
const res = addPositionToWords(words)
|
||||
|
||||
expect(res).to.eql(expected)
|
||||
})
|
||||
})
|
||||
|
||||
describe('splitIntoWords', () => {
|
||||
it('splits at whitespace boundaries', () => {
|
||||
const str = 'This is a #nice @test for you, @idiot.'
|
||||
const expected = ['This', ' ', 'is', ' ', 'a', ' ', '#nice', ' ', '@test', ' ', 'for', ' ', 'you', ', ', '@idiot', '.']
|
||||
const res = splitIntoWords(str)
|
||||
|
||||
expect(res).to.eql(expected)
|
||||
})
|
||||
})
|
||||
|
||||
describe('wordAtPosition', () => {
|
||||
it('returns the word for a given string and postion, plus the start and end position of that word', () => {
|
||||
const str = 'Hey this is fun'
|
||||
|
||||
const { word, start, end } = wordAtPosition(str, 4)
|
||||
|
||||
expect(word).to.eql('this')
|
||||
expect(start).to.eql(4)
|
||||
expect(end).to.eql(8)
|
||||
})
|
||||
})
|
||||
|
||||
describe('replaceWord', () => {
|
||||
it('replaces a word (with start and end) with another word in a given string', () => {
|
||||
const str = 'hey @take, how are you'
|
||||
const wordsWithPosition = addPositionToWords(splitIntoWords(str))
|
||||
const toReplace = wordsWithPosition[2]
|
||||
|
||||
expect(toReplace.word).to.eql('@take')
|
||||
|
||||
const expected = 'hey @takeshitakenji, how are you'
|
||||
const res = replaceWord(str, toReplace, '@takeshitakenji')
|
||||
expect(res).to.eql(expected)
|
||||
})
|
||||
})
|
Loading…
Reference in a new issue