Mastodon: emojis
This commit is contained in:
parent
539b15437c
commit
240ace2ced
|
@ -43,4 +43,12 @@ export default abstract class Lists {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static sort<T, U>(list: T[], mapper: (val: T) => U, comparer: (a: U, b: U) => number) {
|
||||||
|
return list.sort((a, b) => comparer(mapper(a), mapper(b)))
|
||||||
|
}
|
||||||
|
|
||||||
|
static stringCompare(a: string, b: string) {
|
||||||
|
return ('' + a).localeCompare(b)
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
|
@ -15,9 +15,15 @@
|
||||||
notification(v-for="notification in notifications.get()" :key="notification.id" :notification="notification"
|
notification(v-for="notification in notifications.get()" :key="notification.id" :notification="notification"
|
||||||
:showMedia="options.showMedia" @dismiss="onNotificationDismiss" @mark="onStatusMark")
|
:showMedia="options.showMedia" @dismiss="onNotificationDismiss" @mark="onStatusMark")
|
||||||
.compose-toggle(@click="showCompose = !showCompose") 🖉
|
.compose-toggle(@click="showCompose = !showCompose") 🖉
|
||||||
|
.emoji-list(v-show="showCompose && showEmojis")
|
||||||
|
img.emoji(v-for="emoji in emojis.get()" @click="addEmoji(emoji.shortcode)" :src="emoji.static_url" :alt="emoji.shortcode" :title="emoji.shortcode")
|
||||||
.compose(v-show="showCompose")
|
.compose(v-show="showCompose")
|
||||||
textarea.content(v-model="compose.status" placeholder="message")
|
textarea.content(v-model="compose.status" placeholder="message")
|
||||||
.options
|
.options
|
||||||
|
.emojis
|
||||||
|
button(v-if="options.showMedia" @click="showEmojis = !showEmojis") ☺
|
||||||
|
select(v-else @change="addEmoji($event.target.value)")
|
||||||
|
option(v-for="emoji in emojis.get()" :value="emoji.shortcode") {{ emoji.shortcode }}
|
||||||
.sens
|
.sens
|
||||||
label.note(for="sensitive") Sensitive:
|
label.note(for="sensitive") Sensitive:
|
||||||
input(id="sensitive" v-model="compose.sensitive" type="checkbox")
|
input(id="sensitive" v-model="compose.sensitive" type="checkbox")
|
||||||
|
@ -44,7 +50,7 @@ import AxiosLodableMore from '@/helpers/loadable/AxiosLoadableMore'
|
||||||
import { AUTH, getHeaders, getRest } from './Mastodon.vue'
|
import { AUTH, getHeaders, getRest } from './Mastodon.vue'
|
||||||
import Notification from './Notification.vue'
|
import Notification from './Notification.vue'
|
||||||
import Status from './Status.vue'
|
import Status from './Status.vue'
|
||||||
import { MarkMessage, Notification as INotification, Options, Status as IStatus, StatusPost, TimelineType } from './Types'
|
import { Emoji, MarkMessage, Notification as INotification, Options, Status as IStatus, StatusPost, TimelineType } from './Types'
|
||||||
|
|
||||||
const STREAMS = {
|
const STREAMS = {
|
||||||
home: 'user',
|
home: 'user',
|
||||||
|
@ -55,16 +61,11 @@ const STREAMS = {
|
||||||
@Component({ components: { Status, Notification } })
|
@Component({ components: { Status, Notification } })
|
||||||
export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient) {
|
export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient) {
|
||||||
|
|
||||||
/*
|
|
||||||
home: timelines/home
|
|
||||||
local: timelines/public?local=true
|
|
||||||
public: timelines/public?...
|
|
||||||
*/
|
|
||||||
|
|
||||||
rest = getRest(this.auth, this.options.timeout)
|
rest = getRest(this.auth, this.options.timeout)
|
||||||
|
|
||||||
statues = new AxiosLodableMore<IStatus[], object>()
|
statues = new AxiosLodableMore<IStatus[], object>()
|
||||||
notifications = new AxiosLodable<INotification[], object>()
|
notifications = new AxiosLodable<INotification[], object>()
|
||||||
|
emojis = new AxiosLodable<Emoji[], object>()
|
||||||
stream?: WebSocket = undefined
|
stream?: WebSocket = undefined
|
||||||
|
|
||||||
showCompose = false
|
showCompose = false
|
||||||
|
@ -74,6 +75,7 @@ export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient
|
||||||
sensitive: false,
|
sensitive: false,
|
||||||
spoiler_text: ''
|
spoiler_text: ''
|
||||||
}
|
}
|
||||||
|
showEmojis = false // MAYBE: show tabs with unicode emoticons
|
||||||
|
|
||||||
get hasNotifications() {
|
get hasNotifications() {
|
||||||
if(!this.notifications.isSuccess) {
|
if(!this.notifications.isSuccess) {
|
||||||
|
@ -91,6 +93,7 @@ export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient
|
||||||
created() {
|
created() {
|
||||||
this.$watch('options.timeline', this.init, { immediate: true })
|
this.$watch('options.timeline', this.init, { immediate: true })
|
||||||
this.notifications.load(this.get('/notifications'))
|
this.notifications.load(this.get('/notifications'))
|
||||||
|
this.emojis.load<Emoji[]>(this.get('/custom_emojis'), res => Lists.sort(res.data, e => e.shortcode, Lists.stringCompare))
|
||||||
}
|
}
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
|
@ -106,6 +109,10 @@ export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient
|
||||||
return this.catchEmit(this.rest.post(path, options))
|
return this.catchEmit(this.rest.post(path, options))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
addEmoji(code: string) {
|
||||||
|
this.compose.status += `:${code}:`
|
||||||
|
}
|
||||||
|
|
||||||
sendStatus() {
|
sendStatus() {
|
||||||
if(this.compose.status) {
|
if(this.compose.status) {
|
||||||
const post: StatusPost = {
|
const post: StatusPost = {
|
||||||
|
@ -212,15 +219,13 @@ export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient
|
||||||
height: 100%
|
height: 100%
|
||||||
overflow: hidden
|
overflow: hidden
|
||||||
position: relative
|
position: relative
|
||||||
.header
|
.header, .emoji-list
|
||||||
@include main-tile
|
@include main-tile
|
||||||
.list
|
.list
|
||||||
@include group-tile
|
@include group-tile
|
||||||
.statues
|
.statues, .notifications, .emoji-list
|
||||||
flex: 1
|
flex: 1
|
||||||
overflow-y: auto
|
overflow-y: auto
|
||||||
.notifications
|
|
||||||
max-width: 33%
|
|
||||||
.compose-toggle
|
.compose-toggle
|
||||||
position: absolute
|
position: absolute
|
||||||
bottom: .5em
|
bottom: .5em
|
||||||
|
@ -232,6 +237,10 @@ export default class Client extends Mixins<ServiceClient<Options>>(ServiceClient
|
||||||
width: 2em
|
width: 2em
|
||||||
text-align: center
|
text-align: center
|
||||||
line-height: 2em
|
line-height: 2em
|
||||||
|
.emoji-list
|
||||||
|
img
|
||||||
|
width: 2em
|
||||||
|
height: 2em
|
||||||
.compose
|
.compose
|
||||||
@include main-tile
|
@include main-tile
|
||||||
display: flex
|
display: flex
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
| {{ serviceName }}:
|
| {{ serviceName }}:
|
||||||
loadable-inline(:loadable="account")
|
loadable-inline(:loadable="account")
|
||||||
template(#success)
|
template(#success)
|
||||||
span(v-html="parseEmojis(account.data.display_name, account.data.emojis) + '@' + server", params.showMedia)
|
span(v-html="parseEmojis(account.data.display_name, account.data.emojis, params.showMedia) + '@' + server", params.showMedia)
|
||||||
template(#settings)
|
template(#settings)
|
||||||
setting-boolean(:id="'reconnect'" :title="'Reconnect'" :value="params.reconnect" @change="saveOptionCouple")
|
setting-boolean(:id="'reconnect'" :title="'Reconnect'" :value="params.reconnect" @change="saveOptionCouple")
|
||||||
setting-boolean(:id="'reblog'" :title="'Show reblogs'" :value="params.reblog" @change="saveOptionCouple")
|
setting-boolean(:id="'reblog'" :title="'Show reblogs'" :value="params.reblog" @change="saveOptionCouple")
|
||||||
|
|
|
@ -6,10 +6,12 @@ import { Emoji } from './Types'
|
||||||
export class ParseEmojisMixin extends Vue {
|
export class ParseEmojisMixin extends Vue {
|
||||||
|
|
||||||
parseEmojis(text: string, emojis: Emoji[], show = true) {
|
parseEmojis(text: string, emojis: Emoji[], show = true) {
|
||||||
for (const emoji of emojis) {
|
if (show) {
|
||||||
text = text.split(`:${emoji.shortcode}:`).join(
|
for (const emoji of emojis) {
|
||||||
show ? `<img draggable="false" class="icon" alt="${emoji.shortcode}" title="${emoji.shortcode}" src="${emoji.static_url}">` : emoji.shortcode
|
text = text.split(`:${emoji.shortcode}:`).join(
|
||||||
)
|
`<img draggable="false" class="icon" alt="${emoji.shortcode}" title="${emoji.shortcode}" src="${emoji.static_url}">`
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
return text
|
return text
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue