Use individual images in emoji picker rather than a spritesheet
This commit is contained in:
parent
cc7b9da0cf
commit
dcf6a5f59c
5 changed files with 80 additions and 36 deletions
|
@ -18,6 +18,21 @@ export const skinTones = ['1F3FB', '1F3FC', '1F3FD', '1F3FE', '1F3FF'];
|
|||
|
||||
export type SkinToneKey = '1F3FB' | '1F3FC' | '1F3FD' | '1F3FE' | '1F3FF';
|
||||
|
||||
export type EmojiSkinVariation = {
|
||||
unified: string;
|
||||
non_qualified: null;
|
||||
image: string;
|
||||
sheet_x: number;
|
||||
sheet_y: number;
|
||||
added_in: string;
|
||||
has_img_apple: boolean;
|
||||
has_img_google: boolean;
|
||||
has_img_twitter: boolean;
|
||||
has_img_emojione: boolean;
|
||||
has_img_facebook: boolean;
|
||||
has_img_messenger: boolean;
|
||||
};
|
||||
|
||||
export type EmojiData = {
|
||||
name: string;
|
||||
unified: string;
|
||||
|
@ -43,24 +58,36 @@ export type EmojiData = {
|
|||
has_img_facebook: boolean;
|
||||
has_img_messenger: boolean;
|
||||
skin_variations?: {
|
||||
[key: string]: {
|
||||
unified: string;
|
||||
non_qualified: null;
|
||||
image: string;
|
||||
sheet_x: number;
|
||||
sheet_y: number;
|
||||
added_in: string;
|
||||
has_img_apple: boolean;
|
||||
has_img_google: boolean;
|
||||
has_img_twitter: boolean;
|
||||
has_img_emojione: boolean;
|
||||
has_img_facebook: boolean;
|
||||
has_img_messenger: boolean;
|
||||
};
|
||||
[key: string]: EmojiSkinVariation;
|
||||
};
|
||||
};
|
||||
|
||||
const data: Array<EmojiData> = untypedData;
|
||||
const data = (untypedData as Array<EmojiData>).filter(
|
||||
emoji => emoji.has_img_apple
|
||||
);
|
||||
|
||||
const makeImagePath = (src: string) => {
|
||||
return `node_modules/emoji-datasource-apple/img/apple/64/${src}`;
|
||||
};
|
||||
|
||||
export const images = new Set();
|
||||
|
||||
// Preload images
|
||||
const preload = (src: string) => {
|
||||
const img = new Image();
|
||||
img.src = src;
|
||||
images.add(img);
|
||||
};
|
||||
|
||||
data.forEach(emoji => {
|
||||
preload(makeImagePath(emoji.image));
|
||||
|
||||
if (emoji.skin_variations) {
|
||||
Object.values(emoji.skin_variations).forEach(variation => {
|
||||
preload(makeImagePath(variation.image));
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
export const dataByShortName = keyBy(data, 'short_name');
|
||||
|
||||
|
@ -112,20 +139,28 @@ export const dataByCategory = mapValues(
|
|||
arr => sortBy(arr, 'sort_order')
|
||||
);
|
||||
|
||||
export function getSheetCoordinates(
|
||||
export function getEmojiData(
|
||||
shortName: keyof typeof dataByShortName,
|
||||
skinTone?: SkinToneKey | number
|
||||
): [number, number] {
|
||||
): EmojiData | EmojiSkinVariation {
|
||||
const base = dataByShortName[shortName];
|
||||
|
||||
if (skinTone && base.skin_variations) {
|
||||
const variation = isNumber(skinTone) ? skinTones[skinTone - 1] : skinTone;
|
||||
const { sheet_x, sheet_y } = base.skin_variations[variation];
|
||||
|
||||
return [sheet_x, sheet_y];
|
||||
return base.skin_variations[variation];
|
||||
}
|
||||
|
||||
return [base.sheet_x, base.sheet_y];
|
||||
return base;
|
||||
}
|
||||
|
||||
export function getImagePath(
|
||||
shortName: keyof typeof dataByShortName,
|
||||
skinTone?: SkinToneKey | number
|
||||
): string {
|
||||
const { image } = getEmojiData(shortName, skinTone);
|
||||
|
||||
return makeImagePath(image);
|
||||
}
|
||||
|
||||
const fuse = new Fuse(data, {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue