From ff2242e85dc89aa7479000cf469ca2bce5d60157 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Sat, 14 Aug 2021 21:23:45 -0400 Subject: Fix load more emoji action --- src/modules/instance.js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'src/modules/instance.js') diff --git a/src/modules/instance.js b/src/modules/instance.js index bfce6f38..23f534c3 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -164,6 +164,16 @@ const instance = { if (res.ok) { const result = await res.json() const values = Array.isArray(result) ? Object.assign({}, ...result) : result + const caseInsensitiveStrCmp = (a, b) => { + const la = a.toLowerCase() + const lb = b.toLowerCase() + return la > lb ? 1 : (la < lb ? -1 : 0) + } + const byPackThenByName = (a, b) => { + const packOf = emoji => (emoji.tags.filter(k => k.startsWith('pack:'))[0] || '').slice(5) + return caseInsensitiveStrCmp(packOf(a), packOf(b)) || caseInsensitiveStrCmp(a.displayText, b.displayText) + } + const emoji = Object.entries(values).map(([key, value]) => { const imageUrl = value.image_url return { @@ -174,7 +184,7 @@ const instance = { } // Technically could use tags but those are kinda useless right now, // should have been "pack" field, that would be more useful - }).sort((a, b) => a.displayText.toLowerCase() > b.displayText.toLowerCase() ? 1 : -1) + }).sort(byPackThenByName) commit('setInstanceOption', { name: 'customEmoji', value: emoji }) } else { throw (res) -- cgit v1.2.3-70-g09d2 From 123913f34ffd91917a9ed4dd1c9d406fb547ef87 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Sun, 15 Aug 2021 00:43:35 -0400 Subject: Optimise emoji picker loading process --- src/components/emoji_picker/emoji_picker.js | 83 +++++----------------------- src/components/emoji_picker/emoji_picker.vue | 4 +- src/modules/instance.js | 18 ++++++ 3 files changed, 34 insertions(+), 71 deletions(-) (limited to 'src/modules/instance.js') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 322bb8ba..67c6d0cc 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -106,6 +106,7 @@ const EmojiPicker = { }, triggerLoadMore (target) { Object.keys(this.allCustomGroups) + .filter(id => this.filteredEmojiGroups.filter(group => group.id === id).length > 0) .map(groupId => { const ref = this.$refs[`group-end-${groupId}`][0] if (!ref) return undefined @@ -123,9 +124,10 @@ const EmojiPicker = { const approachingBottom = bottom - scrollerBottom < LOAD_EMOJI_MARGIN // Always load when at the very top in case there's no scroll space yet const atTop = scrollerTop < top + target.clientHeight / 2 && top < scrollerBottom + const unscrollable = top - bottom < target.clientHeight // Don't load when looking at unicode category or at the very bottom const bottomAboveViewport = bottom < scrollerTop || scrollerBottom === scrollerMax - if (!bottomAboveViewport && (approachingBottom || atTop)) { + if (!bottomAboveViewport && (approachingBottom || atTop || unscrollable)) { return groupId } return undefined @@ -176,12 +178,6 @@ const EmojiPicker = { this.firstLoaded = true }) }) - const bufferSize = this.customEmojiBuffer.length - const bufferPrefilledAll = bufferSize === this.filteredEmoji.length - if (bufferPrefilledAll && !forceUpdate) { - return - } - this.customEmojiBufferSlice = LOAD_EMOJI_BY }, toggleStickers () { this.showingStickers = !this.showingStickers @@ -191,6 +187,9 @@ const EmojiPicker = { }, limitedEmojis (list, groupId) { return list.slice(0, this.loadedCount[groupId]) + }, + filterByKeyword (list, keyword) { + return filterByKeyword(list, keyword) } }, watch: { @@ -210,51 +209,8 @@ const EmojiPicker = { } return 0 }, - allEmojis () { - return this.$store.state.instance.customEmoji || [] - }, - filteredEmoji () { - return filterByKeyword( - this.allEmojis, - trim(this.keyword) - ) - }, - customEmojiBuffer () { - return this.filteredEmoji.slice(0, this.customEmojiBufferSlice) - }, - groupedCustomEmojis () { - return this.customEmojiBuffer.reduce((res, emoji) => { - const pack = packOf(emoji) - if (!res[pack]) { - res[pack] = { - id: `custom-${pack}`, - text: pack, - /// FIXME - // icon: 'smile-beam', - image: emoji.imageUrl, - emojis: [] - } - } - res[pack].emojis.push(emoji) - return res - }, {}) - }, allCustomGroups () { - return this.filteredEmoji - .reduce((res, emoji) => { - const packName = packOf(emoji) - const packId = `custom-${packName}` - if (!res[packId]) { - res[packId] = ({ - id: packId, - text: packName, - image: emoji.imageUrl, - emojis: [] - }) - } - res[packId].emojis.push(emoji) - return res - }, {}) + return this.$store.getters.groupedCustomEmojis }, sensibleInitialAmountForAGroup () { const groupCount = Object.keys(this.allCustomGroups).length @@ -271,21 +227,13 @@ const EmojiPicker = { emojis: filterByKeyword(standardEmojis, this.keyword) }) }, - emojis () { - const standardEmojis = this.$store.state.instance.emoji || [] - // const customEmojis = this.customEmojiBuffer - - return [ - ...Object - .keys(this.groupedCustomEmojis) - .map(k => this.groupedCustomEmojis[k]), - { - id: 'standard', - text: this.$t('emoji.unicode'), - icon: 'box-open', - emojis: filterByKeyword(standardEmojis, trim(this.keyword)) - } - ] + filteredEmojiGroups () { + return this.allEmojiGroups + .map(group => ({ + ...group, + emojis: filterByKeyword(group.emojis, this.keyword) + })) + .filter(group => group.emojis.length > 0) }, loadedCount () { return Object.keys(this.allCustomGroups) @@ -297,9 +245,6 @@ const EmojiPicker = { lastNonUnicodeGroupId () { return this.emojis[this.emojis.length - 2].id }, - emojisView () { - return this.emojis.filter(value => value.emojis.length > 0) - }, stickerPickerEnabled () { return (this.$store.state.instance.stickers || []).length !== 0 } diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 277d5bf6..7b2b7fc8 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -3,7 +3,7 @@
diff --git a/src/modules/instance.js b/src/modules/instance.js index 23f534c3..8aadce77 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -115,6 +115,24 @@ const instance = { .map(key => [key, state[key]]) .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}) }, + groupedCustomEmojis (state) { + return state.customEmoji + .reduce((res, emoji) => { + emoji.tags.forEach(packName => { + const packId = `custom-${packName}` + if (!res[packId]) { + res[packId] = ({ + id: packId, + text: packName, + image: emoji.imageUrl, + emojis: [] + }) + } + res[packId].emojis.push(emoji) + }) + return res + }, {}) + }, instanceDomain (state) { return new URL(state.server).hostname } -- cgit v1.2.3-70-g09d2 From d648a6f8dc37a2ceb851f1cecde34fd6c54d7d1f Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Fri, 8 Oct 2021 15:30:55 -0400 Subject: Group emojis only by pack and remove pack: prefix Ref: grouped-emoji-picker --- src/modules/instance.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'src/modules/instance.js') diff --git a/src/modules/instance.js b/src/modules/instance.js index 8aadce77..a7a91d99 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -116,9 +116,15 @@ const instance = { .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {}) }, groupedCustomEmojis (state) { + const packsOf = emoji => { + return emoji.tags + .filter(k => k.startsWith('pack:')) + .map(k => k.slice(5)) // remove 'pack:' prefix + } + return state.customEmoji .reduce((res, emoji) => { - emoji.tags.forEach(packName => { + packsOf(emoji).forEach(packName => { const packId = `custom-${packName}` if (!res[packId]) { res[packId] = ({ -- cgit v1.2.3-70-g09d2 From 8f4f02683f89129cf6f28f2059122cff7db02242 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Sat, 8 Jan 2022 16:55:00 -0500 Subject: Make emoji picker use grouped unicode emojis --- src/components/emoji_input/suggestor.js | 2 +- src/components/emoji_picker/emoji_picker.js | 16 +++++---- .../post_status_form/post_status_form.js | 6 ++-- src/components/react_button/react_button.js | 4 +-- src/components/settings_modal/tabs/profile_tab.js | 4 +-- src/modules/instance.js | 38 ++++++++++++++++++---- 6 files changed, 48 insertions(+), 22 deletions(-) (limited to 'src/modules/instance.js') diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js index 0ddb4d68..1765f843 100644 --- a/src/components/emoji_input/suggestor.js +++ b/src/components/emoji_input/suggestor.js @@ -2,7 +2,7 @@ * suggest - generates a suggestor function to be used by emoji-input * data: object providing source information for specific types of suggestions: * data.emoji - optional, an array of all emoji available i.e. - * (state.instance.emoji + state.instance.customEmoji) + * (getters.standardEmojiList + state.instance.customEmoji) * data.users - optional, an array of all known users * updateUsersList - optional, a function to search and append to users * diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 26c767ac..4990afb3 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -214,16 +214,18 @@ const EmojiPicker = { defaultGroup () { return Object.keys(this.allCustomGroups)[0] }, + unicodeEmojiGroups () { + return this.$store.getters.standardEmojiGroupList.map(group => ({ + id: `standard-${group.id}`, + text: this.$t(`emoji.unicode_groups.${group.id}`), + icon: 'box-open', + emojis: group.emojis + })) + }, allEmojiGroups () { - const standardEmojis = this.$store.state.instance.emoji || [] return Object.entries(this.allCustomGroups) .map(([_, v]) => v) - .concat({ - id: 'standard', - text: this.$t('emoji.unicode'), - icon: 'box-open', - emojis: filterByKeyword(standardEmojis, this.keyword) - }) + .concat(this.unicodeEmojiGroups) }, filteredEmojiGroups () { return this.allEmojiGroups diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 77f73d04..5c536b74 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -189,7 +189,7 @@ const PostStatusForm = { emojiUserSuggestor () { return suggestor({ emoji: [ - ...this.$store.state.instance.emoji, + ...this.$store.getters.standardEmojiList, ...this.$store.state.instance.customEmoji ], store: this.$store @@ -198,13 +198,13 @@ const PostStatusForm = { emojiSuggestor () { return suggestor({ emoji: [ - ...this.$store.state.instance.emoji, + ...this.$store.getters.standardEmojiList, ...this.$store.state.instance.customEmoji ] }) }, emoji () { - return this.$store.state.instance.emoji || [] + return this.$store.getters.standardEmojiList || [] }, customEmoji () { return this.$store.state.instance.customEmoji || [] diff --git a/src/components/react_button/react_button.js b/src/components/react_button/react_button.js index 5e052e1e..e65bfd93 100644 --- a/src/components/react_button/react_button.js +++ b/src/components/react_button/react_button.js @@ -59,7 +59,7 @@ const ReactButton = { if (this.filterWord !== '') { const filterWordLowercase = trim(this.filterWord.toLowerCase()) const orderedEmojiList = [] - for (const emoji of this.$store.state.instance.emoji) { + for (const emoji of this.$store.getters.standardEmojiList) { if (emoji.replacement === this.filterWord) return [emoji] const indexOfFilterWord = emoji.displayText.toLowerCase().indexOf(filterWordLowercase) @@ -72,7 +72,7 @@ const ReactButton = { } return orderedEmojiList.flat() } - return this.$store.state.instance.emoji || [] + return this.$store.getters.standardEmojiList || [] }, mergedConfig () { return this.$store.getters.mergedConfig diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js index 376248ef..b86faef0 100644 --- a/src/components/settings_modal/tabs/profile_tab.js +++ b/src/components/settings_modal/tabs/profile_tab.js @@ -64,7 +64,7 @@ const ProfileTab = { emojiUserSuggestor () { return suggestor({ emoji: [ - ...this.$store.state.instance.emoji, + ...this.$store.getters.standardEmojiList, ...this.$store.state.instance.customEmoji ], store: this.$store @@ -73,7 +73,7 @@ const ProfileTab = { emojiSuggestor () { return suggestor({ emoji: [ - ...this.$store.state.instance.emoji, + ...this.$store.getters.standardEmojiList, ...this.$store.state.instance.customEmoji ] }) diff --git a/src/modules/instance.js b/src/modules/instance.js index a7a91d99..2fcb059c 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -3,6 +3,18 @@ import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' import apiService from '../services/api/api.service.js' import { instanceDefaultProperties } from './config.js' +const SORTED_EMOJI_GROUP_IDS = [ + 'smileys-and-emotion', + 'people-and-body', + 'animals-and-nature', + 'food-and-drink', + 'travel-and-places', + 'activities', + 'objects', + 'symbols', + 'flags' +] + const defaultState = { // Stuff from apiConfig name: 'Pleroma FE', @@ -64,7 +76,7 @@ const defaultState = { // Nasty stuff customEmoji: [], customEmojiFetched: false, - emoji: [], + emoji: {}, emojiFetched: false, pleromaBackend: true, postFormats: [], @@ -139,6 +151,17 @@ const instance = { return res }, {}) }, + standardEmojiList (state) { + return SORTED_EMOJI_GROUP_IDS + .map(groupId => state.emoji[groupId] || []) + .reduce((a, b) => a.concat(b), []) + }, + standardEmojiGroupList (state) { + return SORTED_EMOJI_GROUP_IDS.map(groupId => ({ + id: groupId, + emojis: state.emoji[groupId] || [] + })) + }, instanceDomain (state) { return new URL(state.server).hostname } @@ -165,13 +188,14 @@ const instance = { const res = await window.fetch('/static/emoji.json') if (res.ok) { const values = await res.json() - const emoji = Object.keys(values).map((key) => { - return { - displayText: key, + const emoji = Object.keys(values).reduce((res, groupId) => { + res[groupId] = values[groupId].map(e => ({ + displayText: e.name, imageUrl: false, - replacement: values[key] - } - }).sort((a, b) => a.name > b.name ? 1 : -1) + replacement: e.emoji + })) + return res + }, {}) commit('setInstanceOption', { name: 'emoji', value: emoji }) } else { throw (res) -- cgit v1.2.3-70-g09d2 From 0445d7c882a5b1d213b0ff5e54e91d6225101c66 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Wed, 31 Aug 2022 16:03:15 -0400 Subject: Make unicode emoji phrases match with _ --- src/modules/instance.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/modules/instance.js') diff --git a/src/modules/instance.js b/src/modules/instance.js index 2fcb059c..9df01bfd 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -190,7 +190,7 @@ const instance = { const values = await res.json() const emoji = Object.keys(values).reduce((res, groupId) => { res[groupId] = values[groupId].map(e => ({ - displayText: e.name, + displayText: e.slug, imageUrl: false, replacement: e.emoji })) -- cgit v1.2.3-70-g09d2 From 1c3bdda14c0edf4ce321745bcf43e395635d6bf1 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Tue, 20 Sep 2022 20:15:32 -0400 Subject: Load unicode emoji annotations --- src/i18n/languages.js | 10 +++++++++- src/modules/config.js | 1 + src/modules/instance.js | 24 ++++++++++++++++++++++++ 3 files changed, 34 insertions(+), 1 deletion(-) (limited to 'src/modules/instance.js') diff --git a/src/i18n/languages.js b/src/i18n/languages.js index b1cb1d7e..40cf04f2 100644 --- a/src/i18n/languages.js +++ b/src/i18n/languages.js @@ -38,7 +38,15 @@ const specialJsonName = { const langCodeToJsonName = (code) => specialJsonName[code] || code +const langCodeToCldrName = (code) => code + +const ensureFinalFallback = codes => { + return codes.includes('en') ? codes : codes.concat(['en']) +} + module.exports = { languages, - langCodeToJsonName + langCodeToJsonName, + langCodeToCldrName, + ensureFinalFallback } diff --git a/src/modules/config.js b/src/modules/config.js index eeaac917..c966602e 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -183,6 +183,7 @@ const config = { break case 'interfaceLanguage': messages.setLanguage(this.getters.i18n, value) + dispatch('loadUnicodeEmojiData', value) Cookies.set(BACKEND_LANGUAGE_COOKIE_NAME, localeService.internalToBackendLocale(value)) break case 'thirdColumnMode': diff --git a/src/modules/instance.js b/src/modules/instance.js index 9df01bfd..c0c7cef0 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -2,6 +2,7 @@ import { getPreset, applyTheme } from '../services/style_setter/style_setter.js' import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js' import apiService from '../services/api/api.service.js' import { instanceDefaultProperties } from './config.js' +import { langCodeToCldrName, ensureFinalFallback } from '../i18n/languages.js' const SORTED_EMOJI_GROUP_IDS = [ 'smileys-and-emotion', @@ -78,6 +79,7 @@ const defaultState = { customEmojiFetched: false, emoji: {}, emojiFetched: false, + unicodeEmojiAnnotations: {}, pleromaBackend: true, postFormats: [], restrictedNicknames: [], @@ -109,6 +111,12 @@ const defaultState = { } } +const loadAnnotations = (lang) => { + return import( + `@kazvmoe-infra/unicode-emoji-json/annotations/${langCodeToCldrName(lang)}.json` + ) +} + const instance = { state: defaultState, mutations: { @@ -119,6 +127,9 @@ const instance = { }, setKnownDomains (state, domains) { state.knownDomains = domains + }, + setUnicodeEmojiAnnotations (state, { lang, annotations }) { + state.unicodeEmojiAnnotations[lang] = annotations } }, getters: { @@ -206,6 +217,19 @@ const instance = { } }, + loadUnicodeEmojiData ({ commit, state }, language) { + const langList = ensureFinalFallback(Array.isArray(language) ? language : [language]) + + return Promise.all( + langList + .forEach(async lang => { + if (!state.unicodeEmojiAnnotations[lang]) { + const annotations = await loadAnnotations(lang) + commit('setUnicodeEmojiAnnotations', { lang, annotations }) + } + })) + }, + async getCustomEmoji ({ commit, state }) { try { const res = await window.fetch('/api/pleroma/emoji.json') -- cgit v1.2.3-70-g09d2 From a73f9731f5ad78d1e6f1bd211ad2971d21fc1379 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Tue, 20 Sep 2022 20:44:52 -0400 Subject: Display localized unicode emoji names --- src/components/emoji_picker/emoji_picker.js | 20 ++++++++++++++++++++ src/components/emoji_picker/emoji_picker.vue | 2 +- src/i18n/languages.js | 3 ++- src/modules/instance.js | 18 +++++++++++++++--- 4 files changed, 38 insertions(+), 5 deletions(-) (limited to 'src/modules/instance.js') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index c2ae76f3..2ebead53 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -1,6 +1,7 @@ import { defineAsyncComponent } from 'vue' import Checkbox from '../checkbox/checkbox.vue' import StillImage from '../still-image/still-image.vue' +import { ensureFinalFallback } from '../../i18n/languages.js' import lozad from 'lozad' import { library } from '@fortawesome/fontawesome-svg-core' import { @@ -285,6 +286,25 @@ const EmojiPicker = { this.waitForDomAndInitializeLazyLoad() this.filteredEmojiGroups = this.getFilteredEmojiGroups() }, 500) + }, + languages () { + console.log('languages:', ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)) + return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage) + }, + maybeLocalizedEmojiName () { + return emoji => { + if (!emoji.annotations) { + return emoji.displayText + } + + for (const lang of this.languages) { + if (emoji.annotations[lang]?.name) { + return emoji.annotations[lang].name + } + } + + return emoji.displayText + } } } } diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 689138e6..57bb0037 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -88,7 +88,7 @@ diff --git a/src/i18n/languages.js b/src/i18n/languages.js index 40cf04f2..250b3b1a 100644 --- a/src/i18n/languages.js +++ b/src/i18n/languages.js @@ -41,7 +41,8 @@ const langCodeToJsonName = (code) => specialJsonName[code] || code const langCodeToCldrName = (code) => code const ensureFinalFallback = codes => { - return codes.includes('en') ? codes : codes.concat(['en']) + const codeList = Array.isArray(codes) ? codes : [codes] + return codeList.includes('en') ? codeList : codeList.concat(['en']) } module.exports = { diff --git a/src/modules/instance.js b/src/modules/instance.js index c0c7cef0..5a72a6d3 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -117,6 +117,18 @@ const loadAnnotations = (lang) => { ) } +const injectAnnotations = (emoji, annotations) => { + const availableLangs = Object.keys(annotations) + + return { + ...emoji, + annotations: availableLangs.reduce((acc, cur) => { + acc[cur] = annotations[cur][emoji.replacement] + return acc + }, {}) + } +} + const instance = { state: defaultState, mutations: { @@ -164,13 +176,13 @@ const instance = { }, standardEmojiList (state) { return SORTED_EMOJI_GROUP_IDS - .map(groupId => state.emoji[groupId] || []) + .map(groupId => (state.emoji[groupId] || []).map(k => injectAnnotations(k, state.unicodeEmojiAnnotations))) .reduce((a, b) => a.concat(b), []) }, standardEmojiGroupList (state) { return SORTED_EMOJI_GROUP_IDS.map(groupId => ({ id: groupId, - emojis: state.emoji[groupId] || [] + emojis: (state.emoji[groupId] || []).map(k => injectAnnotations(k, state.unicodeEmojiAnnotations)) })) }, instanceDomain (state) { @@ -218,7 +230,7 @@ const instance = { }, loadUnicodeEmojiData ({ commit, state }, language) { - const langList = ensureFinalFallback(Array.isArray(language) ? language : [language]) + const langList = ensureFinalFallback(language) return Promise.all( langList -- cgit v1.2.3-70-g09d2 From cc58b9b93d4346860e244d2093f0d406eb76954c Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Tue, 20 Sep 2022 21:50:40 -0400 Subject: Add regional indicators --- src/components/emoji_picker/emoji_picker.js | 15 +++++++++------ src/i18n/en.json | 3 ++- src/modules/instance.js | 29 +++++++++++++++++++++++++++-- 3 files changed, 38 insertions(+), 9 deletions(-) (limited to 'src/modules/instance.js') diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index bf5e0e43..fafc2af1 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -47,8 +47,8 @@ const UNICODE_EMOJI_GROUP_ICON = { flags: 'flag' } -const maybeLocalizedKeywords = (emoji, languages) => { - const res = [emoji.displayText] +const maybeLocalizedKeywords = (emoji, languages, nameLocalizer) => { + const res = [emoji.displayText, nameLocalizer(emoji)] if (emoji.annotations) { languages.forEach(lang => { const keywords = emoji.annotations[lang]?.keywords || [] @@ -59,13 +59,13 @@ const maybeLocalizedKeywords = (emoji, languages) => { return res } -const filterByKeyword = (list, keyword = '', languages) => { +const filterByKeyword = (list, keyword = '', languages, nameLocalizer) => { if (keyword === '') return list const keywordLowercase = keyword.toLowerCase() const orderedEmojiList = [] for (const emoji of list) { - const indices = maybeLocalizedKeywords(emoji, languages) + const indices = maybeLocalizedKeywords(emoji, languages, nameLocalizer) .map(k => k.toLowerCase().indexOf(keywordLowercase)) .filter(k => k > -1) @@ -189,7 +189,7 @@ const EmojiPicker = { this.showingStickers = value }, filterByKeyword (list, keyword) { - return filterByKeyword(list, keyword, this.languages) + return filterByKeyword(list, keyword, this.languages, this.maybeLocalizedEmojiName) }, initializeLazyLoad () { this.destroyLazyLoad() @@ -305,7 +305,6 @@ const EmojiPicker = { }, 500) }, languages () { - console.log('languages:', ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage)) return ensureFinalFallback(this.$store.getters.mergedConfig.interfaceLanguage) }, maybeLocalizedEmojiName () { @@ -314,6 +313,10 @@ const EmojiPicker = { return emoji.displayText } + if (emoji.displayTextI18n) { + return this.$t(emoji.displayTextI18n.key, emoji.displayTextI18n.args) + } + for (const lang of this.languages) { if (emoji.annotations[lang]?.name) { return emoji.annotations[lang].name diff --git a/src/i18n/en.json b/src/i18n/en.json index 2a665bd5..fb941c8d 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -211,7 +211,8 @@ "travel-and-places": "Travel & Places" }, "load_all_hint": "Loaded first {saneAmount} emoji, loading all emoji may cause performance issues.", - "load_all": "Loading all {emojiAmount} emoji" + "load_all": "Loading all {emojiAmount} emoji", + "regional_indicator": "Regional indicator {letter}" }, "errors": { "storage_unavailable": "Pleroma could not access browser storage. Your login or your local settings won't be saved and you might encounter unexpected issues. Try enabling cookies." diff --git a/src/modules/instance.js b/src/modules/instance.js index 5a72a6d3..9be35d88 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -16,6 +16,26 @@ const SORTED_EMOJI_GROUP_IDS = [ 'flags' ] +const REGIONAL_INDICATORS = (() => { + const start = 0x1F1E6 + const end = 0x1F1FF + const A = 'A'.codePointAt(0) + const res = new Array(end - start + 1) + for (let i = start; i <= end; ++i) { + const letter = String.fromCodePoint(A + i - start) + res[i - start] = { + replacement: String.fromCodePoint(i), + imageUrl: false, + displayText: 'regional_indicator_' + letter, + displayTextI18n: { + key: 'emoji.regional_indicator', + args: { letter } + } + } + } + return res +})() + const defaultState = { // Stuff from apiConfig name: 'Pleroma FE', @@ -129,6 +149,11 @@ const injectAnnotations = (emoji, annotations) => { } } +const injectRegionalIndicators = groups => { + groups.symbols.push(...REGIONAL_INDICATORS) + return groups +} + const instance = { state: defaultState, mutations: { @@ -219,7 +244,7 @@ const instance = { })) return res }, {}) - commit('setInstanceOption', { name: 'emoji', value: emoji }) + commit('setInstanceOption', { name: 'emoji', value: injectRegionalIndicators(emoji) }) } else { throw (res) } @@ -234,7 +259,7 @@ const instance = { return Promise.all( langList - .forEach(async lang => { + .map(async lang => { if (!state.unicodeEmojiAnnotations[lang]) { const annotations = await loadAnnotations(lang) commit('setUnicodeEmojiAnnotations', { lang, annotations }) -- cgit v1.2.3-70-g09d2 From 6fab7b9e3ffb4a9bce2788174ef0e9e6eef7b2c5 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Tue, 20 Sep 2022 22:03:31 -0400 Subject: Use import() for emoji.json --- build/update-emoji.js | 2 +- package.json | 1 - src/modules/instance.js | 27 ++++++++++++--------------- yarn.lock | 5 ----- 4 files changed, 13 insertions(+), 22 deletions(-) (limited to 'src/modules/instance.js') diff --git a/build/update-emoji.js b/build/update-emoji.js index fba7706e..9f4b4e67 100644 --- a/build/update-emoji.js +++ b/build/update-emoji.js @@ -1,7 +1,7 @@ module.exports = { updateEmoji () { - const emojis = require('unicode-emoji-json/data-by-group') + const emojis = require('@kazvmoe-infra/unicode-emoji-json/data-by-group') const fs = require('fs') Object.keys(emojis) diff --git a/package.json b/package.json index b0c06a61..260df573 100644 --- a/package.json +++ b/package.json @@ -117,7 +117,6 @@ "stylelint": "13.13.1", "stylelint-config-standard": "20.0.0", "stylelint-rscss": "0.4.0", - "unicode-emoji-json": "^0.3.0", "vue-loader": "17.0.0", "vue-style-loader": "4.1.3", "webpack": "5.74.0", diff --git a/src/modules/instance.js b/src/modules/instance.js index 9be35d88..9f326d26 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -135,6 +135,7 @@ const loadAnnotations = (lang) => { return import( `@kazvmoe-infra/unicode-emoji-json/annotations/${langCodeToCldrName(lang)}.json` ) + .then(k => k.default) } const injectAnnotations = (emoji, annotations) => { @@ -233,21 +234,17 @@ const instance = { }, async getStaticEmoji ({ commit }) { try { - const res = await window.fetch('/static/emoji.json') - if (res.ok) { - const values = await res.json() - const emoji = Object.keys(values).reduce((res, groupId) => { - res[groupId] = values[groupId].map(e => ({ - displayText: e.slug, - imageUrl: false, - replacement: e.emoji - })) - return res - }, {}) - commit('setInstanceOption', { name: 'emoji', value: injectRegionalIndicators(emoji) }) - } else { - throw (res) - } + const values = (await import('../../static/emoji.json')).default + + const emoji = Object.keys(values).reduce((res, groupId) => { + res[groupId] = values[groupId].map(e => ({ + displayText: e.slug, + imageUrl: false, + replacement: e.emoji + })) + return res + }, {}) + commit('setInstanceOption', { name: 'emoji', value: injectRegionalIndicators(emoji) }) } catch (e) { console.warn("Can't load static emoji") console.warn(e) diff --git a/yarn.lock b/yarn.lock index f1cfc7f3..a22ab65d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8138,11 +8138,6 @@ unicode-canonical-property-names-ecmascript@^2.0.0: resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc" integrity sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ== -unicode-emoji-json@^0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/unicode-emoji-json/-/unicode-emoji-json-0.3.0.tgz#965e097ef8a367081c5036f81873015a95a5c1ad" - integrity sha512-yImheILedqhZtVEEenRELu9AnX347ZTA3bVMWAU5WMUv7pdU2hcfpwo2mKN8Rns9uHLmOZP90/4B4SPS5aF/iw== - unicode-match-property-ecmascript@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3" -- cgit v1.2.3-70-g09d2 From a758e18dceb4cb11d84d6dff1cdfddb755af60db Mon Sep 17 00:00:00 2001 From: Tusooa Zhu Date: Tue, 20 Sep 2022 23:13:07 -0400 Subject: Make chunks named --- .babelrc | 2 +- build/webpack.base.conf.js | 3 ++- src/i18n/messages.js | 1 + src/modules/instance.js | 3 ++- 4 files changed, 6 insertions(+), 3 deletions(-) (limited to 'src/modules/instance.js') diff --git a/.babelrc b/.babelrc index 373d2c59..4ec10416 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,5 @@ { "presets": ["@babel/preset-env"], "plugins": ["@babel/plugin-transform-runtime", "lodash", "@vue/babel-plugin-jsx"], - "comments": false + "comments": true } diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index 78b75e3f..bf946922 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -24,7 +24,8 @@ module.exports = { output: { path: config.build.assetsRoot, publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, - filename: '[name].js' + filename: '[name].js', + chunkFilename: '[name].js' }, optimization: { splitChunks: { diff --git a/src/i18n/messages.js b/src/i18n/messages.js index 8cf25973..74a89ca8 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -14,6 +14,7 @@ const hasLanguageFile = (code) => languages.includes(code) const loadLanguageFile = (code) => { return import( /* webpackInclude: /\.json$/ */ + /* webpackChunkName: "i18n/[request]" */ `./${langCodeToJsonName(code)}.json` ) } diff --git a/src/modules/instance.js b/src/modules/instance.js index 9f326d26..b1bc9779 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -133,6 +133,7 @@ const defaultState = { const loadAnnotations = (lang) => { return import( + /* webpackChunkName: "emoji-annotations/[request]" */ `@kazvmoe-infra/unicode-emoji-json/annotations/${langCodeToCldrName(lang)}.json` ) .then(k => k.default) @@ -234,7 +235,7 @@ const instance = { }, async getStaticEmoji ({ commit }) { try { - const values = (await import('../../static/emoji.json')).default + const values = (await import(/* webpackChunkName: 'emoji' */ '../../static/emoji.json')).default const emoji = Object.keys(values).reduce((res, groupId) => { res[groupId] = values[groupId].map(e => ({ -- cgit v1.2.3-70-g09d2