customEmojiCategories as computed
This commit is contained in:
parent
f2a9194c79
commit
43956f3ffb
|
@ -88,7 +88,7 @@ import { deviceKind } from '@/scripts/device-kind';
|
||||||
import { instance } from '@/instance';
|
import { instance } from '@/instance';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
import { defaultStore } from '@/store';
|
import { defaultStore } from '@/store';
|
||||||
import { getCustomEmojiCategories, customEmojis } from '@/custom-emojis';
|
import { customEmojiCategories, customEmojis } from '@/custom-emojis';
|
||||||
|
|
||||||
const props = withDefaults(defineProps<{
|
const props = withDefaults(defineProps<{
|
||||||
showPinned?: boolean;
|
showPinned?: boolean;
|
||||||
|
@ -104,7 +104,6 @@ const emit = defineEmits<{
|
||||||
(ev: 'chosen', v: string): void;
|
(ev: 'chosen', v: string): void;
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const customEmojiCategories = getCustomEmojiCategories();
|
|
||||||
const searchEl = shallowRef<HTMLInputElement>();
|
const searchEl = shallowRef<HTMLInputElement>();
|
||||||
const emojisEl = shallowRef<HTMLDivElement>();
|
const emojisEl = shallowRef<HTMLDivElement>();
|
||||||
|
|
||||||
|
|
|
@ -1,10 +1,17 @@
|
||||||
import { apiGet } from './os';
|
import { apiGet } from './os';
|
||||||
import { miLocalStorage } from './local-storage';
|
import { miLocalStorage } from './local-storage';
|
||||||
import { shallowRef } from 'vue';
|
import { shallowRef, computed, markRaw } from 'vue';
|
||||||
import * as Misskey from 'misskey-js';
|
import * as Misskey from 'misskey-js';
|
||||||
|
|
||||||
const storageCache = miLocalStorage.getItem('emojis');
|
const storageCache = miLocalStorage.getItem('emojis');
|
||||||
export const customEmojis = shallowRef<Misskey.entities.CustomEmoji[]>(storageCache ? JSON.parse(storageCache) : []);
|
export const customEmojis = shallowRef<Misskey.entities.CustomEmoji[]>(storageCache ? JSON.parse(storageCache) : []);
|
||||||
|
export const customEmojiCategories = computed<string[]>(() => {
|
||||||
|
const categories = new Set<string>();
|
||||||
|
for (const emoji of customEmojis.value) {
|
||||||
|
categories.add(emoji.category);
|
||||||
|
}
|
||||||
|
return markRaw(Array.from(categories));
|
||||||
|
});
|
||||||
|
|
||||||
fetchCustomEmojis();
|
fetchCustomEmojis();
|
||||||
window.setInterval(fetchCustomEmojis, 1000 * 60 * 10);
|
window.setInterval(fetchCustomEmojis, 1000 * 60 * 10);
|
||||||
|
@ -21,19 +28,6 @@ export async function fetchCustomEmojis() {
|
||||||
miLocalStorage.setItem('lastEmojisFetchedAt', now.toString());
|
miLocalStorage.setItem('lastEmojisFetchedAt', now.toString());
|
||||||
}
|
}
|
||||||
|
|
||||||
let cachedCategories;
|
|
||||||
export function getCustomEmojiCategories() {
|
|
||||||
if (cachedCategories) return cachedCategories;
|
|
||||||
|
|
||||||
const categories = new Set();
|
|
||||||
for (const emoji of customEmojis.value) {
|
|
||||||
categories.add(emoji.category);
|
|
||||||
}
|
|
||||||
const res = Array.from(categories);
|
|
||||||
cachedCategories = res;
|
|
||||||
return res;
|
|
||||||
}
|
|
||||||
|
|
||||||
let cachedTags;
|
let cachedTags;
|
||||||
export function getCustomEmojiTags() {
|
export function getCustomEmojiTags() {
|
||||||
if (cachedTags) return cachedTags;
|
if (cachedTags) return cachedTags;
|
||||||
|
|
|
@ -39,11 +39,10 @@ import MkSelect from '@/components/MkSelect.vue';
|
||||||
import MkFoldableSection from '@/components/MkFoldableSection.vue';
|
import MkFoldableSection from '@/components/MkFoldableSection.vue';
|
||||||
import MkTab from '@/components/MkTab.vue';
|
import MkTab from '@/components/MkTab.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { customEmojis, getCustomEmojiCategories, getCustomEmojiTags } from '@/custom-emojis';
|
import { customEmojis, customEmojiCategories, getCustomEmojiTags } from '@/custom-emojis';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
import * as Misskey from 'misskey-js';
|
import * as Misskey from 'misskey-js';
|
||||||
|
|
||||||
const customEmojiCategories = getCustomEmojiCategories();
|
|
||||||
const customEmojiTags = getCustomEmojiTags();
|
const customEmojiTags = getCustomEmojiTags();
|
||||||
let q = $ref('');
|
let q = $ref('');
|
||||||
let searchEmojis = $ref<Misskey.entities.CustomEmoji[]>(null);
|
let searchEmojis = $ref<Misskey.entities.CustomEmoji[]>(null);
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
<MkInput v-model="name">
|
<MkInput v-model="name">
|
||||||
<template #label>{{ i18n.ts.name }}</template>
|
<template #label>{{ i18n.ts.name }}</template>
|
||||||
</MkInput>
|
</MkInput>
|
||||||
<MkInput v-model="category" :datalist="categories">
|
<MkInput v-model="category" :datalist="customEmojiCategories">
|
||||||
<template #label>{{ i18n.ts.category }}</template>
|
<template #label>{{ i18n.ts.category }}</template>
|
||||||
</MkInput>
|
</MkInput>
|
||||||
<MkInput v-model="aliases">
|
<MkInput v-model="aliases">
|
||||||
|
@ -36,7 +36,7 @@ import MkInput from '@/components/MkInput.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { unique } from '@/scripts/array';
|
import { unique } from '@/scripts/array';
|
||||||
import { i18n } from '@/i18n';
|
import { i18n } from '@/i18n';
|
||||||
import { getCustomEmojiCategories } from '@/custom-emojis';
|
import { customEmojiCategories } from '@/custom-emojis';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
emoji: any,
|
emoji: any,
|
||||||
|
@ -46,7 +46,6 @@ let dialog = $ref(null);
|
||||||
let name: string = $ref(props.emoji.name);
|
let name: string = $ref(props.emoji.name);
|
||||||
let category: string = $ref(props.emoji.category);
|
let category: string = $ref(props.emoji.category);
|
||||||
let aliases: string = $ref(props.emoji.aliases.join(' '));
|
let aliases: string = $ref(props.emoji.aliases.join(' '));
|
||||||
const categories = getCustomEmojiCategories();
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(ev: 'done', v: { deleted?: boolean, updated?: any }): void,
|
(ev: 'done', v: { deleted?: boolean, updated?: any }): void,
|
||||||
|
|
Loading…
Reference in New Issue