nogafam
/
fedilove-ui
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

add emoji autosuggest

This commit is contained in:
Nolan Lawson 2018-03-25 12:24:38 -07:00
parent 143d80c94e
commit 7ce9a39119
9 changed files with 163 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
routes/_actions/emoji.js
View File

@ -25,3 +25,21 @@ export function insertEmoji (realm, emoji) {
let newText = `${pre}:${emoji.shortcode}: ${post}`
store.setComposeData(realm, {text: newText})
}
export function insertEmojiAtPosition (realm, emoji, startIndex, endIndex) {
let oldText = store.getComposeData(realm, 'text')
let pre = oldText ? substring(oldText, 0, startIndex) : ''
let post = oldText ? substring(oldText, endIndex) : ''
let newText = `${pre}:${emoji.shortcode}: ${post}`
store.setComposeData(realm, {text: newText})
}
export async function clickSelectedAutosuggestionEmoji (realm) {
let selectionStart = store.get('composeSelectionStart')
let searchText = store.get('composeAutosuggestionSearchText')
let selection = store.get('composeAutosuggestionSelected') || 0
let emoji = store.get('composeAutosuggestionSearchResults')[selection]
let startIndex = selectionStart - searchText.length
let endIndex = selectionStart
await insertEmojiAtPosition(realm, emoji, startIndex, endIndex)
}

45
routes/_components/compose/ComposeAutosuggest.html
View File

@ -2,7 +2,8 @@
aria-hidden="true" >
<ComposeAutosuggestionList
items="{{searchResults}}"
on:click="onUserSelected(event)"
on:click="onClick(event)"
:type
:selected
/>
</div>
@ -32,6 +33,7 @@
import { store } from '../../_store/store'
import { database } from '../../_database/database'
import { insertUsername } from '../../_actions/compose'
import { insertEmojiAtPosition } from '../../_actions/emoji'
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
import { once } from '../../_utils/once'
import ComposeAutosuggestionList from './ComposeAutosuggestionList.html'
@ -39,7 +41,8 @@
const SEARCH_RESULTS_LIMIT = 4
const DATABASE_SEARCH_RESULTS_LIMIT = 30
const MIN_PREFIX_LENGTH = 1
const SEARCH_REGEX = new RegExp(`(?:\\s|^)(@\\S{${MIN_PREFIX_LENGTH},})$`)
const ACCOUNT_SEARCH_REGEX = new RegExp(`(?:\\s|^)(@\\S{${MIN_PREFIX_LENGTH},})$`)
const EMOJI_SEARCH_REGEX = new RegExp(`(?:\\s|^)(:[^:]{${MIN_PREFIX_LENGTH},})$`)
export default {
oncreate() {
@ -63,7 +66,7 @@
} else {
Promise.race([
new Promise(resolve => setTimeout(resolve, 200)),
new Promise(resolve => this.once('userSelected', resolve))
new Promise(resolve => this.once('autosuggestItemSelected', resolve))
]).then(updateFocusedState)
}
})
@ -71,11 +74,15 @@
if (!searchText) {
return
}
let results = await this.search(searchText)
let type = searchText.startsWith('@') ? 'account' : 'emoji'
let results = (type === 'account')
? await this.searchAccounts(searchText)
: await this.searchEmoji(searchText)
this.store.set({
composeAutosuggestionSelected: 0,
composeAutosuggestionSearchText: searchText,
composeAutosuggestionSearchResults: results
composeAutosuggestionSearchResults: results,
composeAutosuggestionType: type,
})
})
this.observe('shown', shown => {
@ -84,26 +91,41 @@
},
methods: {
once: once,
onUserSelected(account) {
this.fire('userSelected')
onClick(item) {
this.fire('autosuggestItemSelected')
let realm = this.get('realm')
let selectionStart = this.store.get('composeSelectionStart')
let searchText = this.store.get('composeAutosuggestionSearchText')
let startIndex = selectionStart - searchText.length
let endIndex = selectionStart
/* no await */ insertUsername(realm, account.acct, startIndex, endIndex)
if (item.acct) {
/* no await */ insertUsername(realm, item.acct, startIndex, endIndex)
} else {
/* no await */ insertEmojiAtPosition(realm, item, startIndex, endIndex)
}
},
async search(searchText) {
async searchAccounts(searchText) {
searchText = searchText.substring(1)
let currentInstance = this.store.get('currentInstance')
let results = await database.searchAccountsByUsername(
currentInstance, searchText.substring(1), DATABASE_SEARCH_RESULTS_LIMIT)
currentInstance, searchText, DATABASE_SEARCH_RESULTS_LIMIT)
return results.slice(0, SEARCH_RESULTS_LIMIT)
},
searchEmoji(searchText) {
searchText = searchText.toLowerCase().substring(1)
let customEmoji = this.store.get('currentCustomEmoji')
let results = customEmoji.filter(emoji => emoji.shortcode.toLowerCase().startsWith(searchText))
.sort((a, b) => a.shortcode.toLowerCase() < b.shortcode.toLowerCase() ? -1 : 1)
.slice(0, SEARCH_RESULTS_LIMIT)
return results
}
},
computed: {
composeSelectionStart: ($composeSelectionStart) => $composeSelectionStart,
composeFocused: ($composeFocused) => $composeFocused,
searchResults: ($composeAutosuggestionSearchResults) => $composeAutosuggestionSearchResults || [],
type: ($composeAutosuggestionType) => $composeAutosuggestionType || 'account',
selected: ($composeAutosuggestionSelected) => $composeAutosuggestionSelected || 0,
searchText: (text, composeSelectionStartDeferred) => {
let selectionStart = composeSelectionStartDeferred || 0
@ -111,7 +133,8 @@
return
}
let match = text.substring(0, selectionStart).match(SEARCH_REGEX)
let textUpToCursor = text.substring(0, selectionStart)
let match = textUpToCursor.match(ACCOUNT_SEARCH_REGEX) || textUpToCursor.match(EMOJI_SEARCH_REGEX)
return match && match[1]
},
shown: (composeFocusedDeferred, searchText, searchResults) => {

68
routes/_components/compose/ComposeAutosuggestionList.html
View File

@ -1,61 +1,76 @@
<ul class="generic-user-list">
{{#each items as account, i @id}}
<li class="generic-user-list-item">
<button class="generic-user-list-button {{i === selected ? 'selected' : ''}}"
<ul class="compose-autosuggest-list">
{{#each items as item, i}}
<li class="compose-autosuggest-list-item">
<button class="compose-autosuggest-list-button {{i === selected ? 'selected' : ''}}"
tabindex="0"
on:click="fire('click', account)">
<div class="generic-user-list-grid">
on:click="fire('click', item)">
<div class="compose-autosuggest-list-grid">
{{#if type === 'account'}}
<Avatar
className="generic-user-list-item-avatar"
className="compose-autosuggest-list-item-avatar"
size="small"
:account
account="{{item}}"
/>
<span class="generic-user-list-display-name">
{{account.display_name || account.acct}}
<span class="compose-autosuggest-list-display-name">
{{item.display_name || item.acct}}
</span>
<span class="generic-user-list-username">
{{'@' + account.acct}}
<span class="compose-autosuggest-list-username">
{{'@' + item.acct}}
</span>
{{else}}
<img src="{{$autoplayGifs ? item.url : item.static_url}}"
class="compose-autosuggest-list-item-icon"
alt="{{':' + item.shortcode + ':'}}"
/>
<span class="compose-autosuggest-list-display-name">
{{':' + item.shortcode + ':'}}
</span>
{{/if}}
</div>
</button>
</li>
{{/each}}
</ul>
<style>
.generic-user-list {
.compose-autosuggest-list {
list-style: none;
width: 100%;
border-radius: 2px;
box-sizing: border-box;
border: 1px solid var(--compose-autosuggest-outline);
}
.generic-user-list-item {
.compose-autosuggest-list-item {
border-bottom: 1px solid var(--compose-autosuggest-outline);
display: flex;
}
.generic-user-list-item:last-child {
.compose-autosuggest-list-item:last-child {
border-bottom: none;
}
.generic-user-list-button {
.compose-autosuggest-list-button {
padding: 10px;
background: var(--settings-list-item-bg);
border: none;
margin: 0;
flex: 1;
}
.generic-user-list-grid {
.compose-autosuggest-list-grid {
display: grid;
width: 100%;
grid-template-areas: "avatar display-name"
"avatar username";
grid-template-areas: "icon display-name"
"icon username";
grid-template-columns: min-content 1fr;
grid-column-gap: 10px;
grid-row-gap: 5px;
}
:global(.generic-user-list-item-avatar) {
grid-area: avatar;
:global(.compose-autosuggest-list-item-avatar) {
grid-area: icon;
}
.generic-user-list-display-name {
.compose-autosuggest-list-item-icon {
grid-area: icon;
width: 48px;
height: 48px;
}
.compose-autosuggest-list-display-name {
grid-area: display-name;
font-size: 1.1em;
white-space: nowrap;
@ -64,7 +79,7 @@
min-width: 0;
text-align: left;
}
.generic-user-list-username {
.compose-autosuggest-list-username {
grid-area: username;
font-size: 1em;
color: var(--deemphasized-text-color);
@ -73,16 +88,19 @@
text-overflow: ellipsis;
text-align: left;
}
.generic-user-list-button:hover, .generic-user-list-button.selected {
.compose-autosuggest-list-button:hover, .compose-autosuggest-list-button.selected {
background: var(--compose-autosuggest-item-hover);
}
.generic-user-list-button:active {
.compose-autosuggest-list-button:active {
background: var(--compose-autosuggest-item-active);
}
</style>
<script>
import Avatar from '../Avatar.html'
import { store } from '../../_store/store'
export default {
store: () => store,
components: {
Avatar
}

19
routes/_components/compose/ComposeInput.html
View File

@ -34,6 +34,7 @@
import { mark, stop } from '../../_utils/marks'
import { selectionChange } from '../../_utils/events'
import { clickSelectedAutosuggestionUsername } from '../../_actions/compose'
import { clickSelectedAutosuggestionEmoji } from '../../_actions/emoji'
export default {
oncreate() {
@ -49,16 +50,19 @@
let textarea = this.refs.textarea
let firstTime = true
this.observe('text', text => {
if (this.get('rawText') !== text) {
this.set({rawText: text})
// this next autosize is required to resize after
// the user clicks the "toot" button
mark('autosize.update()')
autosize.update(textarea)
stop('autosize.update()')
}
if (firstTime) {
firstTime = false
if (this.get('autoFocus')) {
textarea.focus()
}
} else {
mark('autosize.update()')
autosize.update(textarea)
stop('autosize.update()')
}
})
},
@ -116,7 +120,12 @@
if (!autosuggestionShown) {
return
}
clickSelectedAutosuggestionUsername(this.get('realm'))
let type = this.store.get('composeAutosuggestionType')
if (type === 'account') {
/* no await */ clickSelectedAutosuggestionUsername(this.get('realm'))
} else { // emoji
/* no await */ clickSelectedAutosuggestionEmoji(this.get('realm'))
}
event.preventDefault()
},
incrementAutosuggestSelected(increment, event) {

2
routes/_components/compose/ComposeToolbar.html
View File

@ -54,7 +54,6 @@
<script>
import IconButton from '../IconButton.html'
import { store } from '../../_store/store'
import { updateCustomEmojiForInstance } from '../../_actions/emoji'
import { importDialogs } from '../../_utils/asyncModules'
import { doMediaUpload } from '../../_actions/media'
import { toggleContentWarningShown } from '../../_actions/contentWarnings'
@ -79,7 +78,6 @@
store: () => store,
methods: {
async onEmojiClick() {
/* no await */ updateCustomEmojiForInstance(this.store.get('currentInstance'))
let dialogs = await importDialogs()
dialogs.showEmojiDialog(this.get('realm'))
},

2
routes/_store/observers/instanceObservers.js
View File

@ -1,6 +1,7 @@
import { updateInstanceInfo, updateVerifyCredentialsForInstance } from '../../_actions/instances'
import { updateLists } from '../../_actions/lists'
import { createStream } from '../../_actions/streaming'
import { updateCustomEmojiForInstance } from '../../_actions/emoji'
export function instanceObservers (store) {
// stream to watch for home timeline updates and notifications
@ -22,6 +23,7 @@ export function instanceObservers (store) {
}
updateVerifyCredentialsForInstance(currentInstance)
updateInstanceInfo(currentInstance)
updateCustomEmojiForInstance(currentInstance)
updateLists()
await updateInstanceInfo(currentInstance)

2
tests/roles.js
View File

@ -10,7 +10,7 @@ function login (t, username, password) {
.pressKey('enter')
.expect(getUrl()).contains('/oauth/authorize')
.click(authorizeInput)
.expect(getUrl()).eql('http://localhost:4002/')
.expect(getUrl()).eql('http://localhost:4002/', {timeout: 20000})
}
export const foobarRole = Role('http://localhost:4002/settings/instances/add', async t => {

46
tests/spec/018-compose-autosuggest.js Normal file
View File

@ -0,0 +1,46 @@
import {
composeInput, getNthAutosuggestionResult
} from '../utils'
import { foobarRole } from '../roles'
fixture`018-compose-autosuggest.js`
.page`http://localhost:4002`
test('autosuggests user handles', async t => {
await t.useRole(foobarRole)
.hover(composeInput)
.typeText(composeInput, 'hey @qu')
.click(getNthAutosuggestionResult(1))
.expect(composeInput.value).eql('hey @quux ')
.typeText(composeInput, 'and also @adm')
.click(getNthAutosuggestionResult(1))
.expect(composeInput.value).eql('hey @quux and also @admin ')
.typeText(composeInput, 'and also @AdM')
.expect(getNthAutosuggestionResult(1).innerText).contains('@admin')
.pressKey('tab')
.expect(composeInput.value).eql('hey @quux and also @admin and also @admin ')
.typeText(composeInput, 'and @QU')
.expect(getNthAutosuggestionResult(1).innerText).contains('@quux')
.pressKey('enter')
.expect(composeInput.value).eql('hey @quux and also @admin and also @admin and @quux ')
})
test('autosuggests custom emoji', async t => {
await t.useRole(foobarRole)
.hover(composeInput)
.typeText(composeInput, ':blob')
.click(getNthAutosuggestionResult(1))
.expect(composeInput.value).eql(':blobnom: ')
.typeText(composeInput, 'and :blob')
.expect(getNthAutosuggestionResult(1).innerText).contains(':blobnom:')
.expect(getNthAutosuggestionResult(2).innerText).contains(':blobpats:')
.expect(getNthAutosuggestionResult(3).innerText).contains(':blobpeek:')
.pressKey('down')
.pressKey('down')
.pressKey('enter')
.expect(composeInput.value).eql(':blobnom: and :blobpeek: ')
.typeText(composeInput, 'and also :blobpa')
.expect(getNthAutosuggestionResult(1).innerText).contains(':blobpats:')
.pressKey('tab')
.expect(composeInput.value).eql(':blobnom: and :blobpeek: and also :blobpats: ')
})

4
tests/utils.js
View File

@ -95,6 +95,10 @@ export const uploadKittenImage = i => (exec(() => {
}
}))
export function getNthAutosuggestionResult (n) {
return $(`.compose-autosuggest-list-item:nth-child(${n}) button`)
}
export function getNthSearchResult (n) {
return $(`.search-result:nth-child(${n}) a`)
}