Set --epr-sheet-x/--epr-sheet-y CSS variables

scripts/prepare.js

@@ -8,6 +8,8 @@ const keys = {
   EMOJI_PROPERTY_SKIN_VARIATIONS: 'v',
   EMOJI_PROPERTY_GROUP: 'g',
   EMOJI_PROPERTY_ADDED_IN: 'a',
+  EMOJI_PROPERTY_X: 'x',
+  EMOJI_PROPERTY_Y: 'y',
   GROUP_NAME_PEOPLE: 'smileys_people',
   GROUP_NAME_NATURE: 'animals_nature',
   GROUP_NAME_FOOD: 'food_drink',
@@ -50,6 +52,8 @@ const cleanEmoji = (emoji) => {
   ].sort((a, b) => a.length - b.length);
   emoji[keys.EMOJI_PROPERTY_UNIFIED] = emoji.unified;
   emoji[keys.EMOJI_PROPERTY_ADDED_IN] = emoji.added_in;
+  emoji[keys.EMOJI_PROPERTY_X] = emoji.sheet_x;
+  emoji[keys.EMOJI_PROPERTY_Y] = emoji.sheet_y;
 
   if (emoji.skin_variations) {
     emoji[keys.EMOJI_PROPERTY_SKIN_VARIATIONS] = Object.values(
@@ -63,6 +67,8 @@ const cleanEmoji = (emoji) => {
     keys.EMOJI_PROPERTY_SKIN_VARIATIONS,
     keys.EMOJI_PROPERTY_SKIN_VARIATIONS,
     keys.EMOJI_PROPERTY_ADDED_IN,
+    keys.EMOJI_PROPERTY_X,
+    keys.EMOJI_PROPERTY_Y,
   ]);
 };
 

src/components/emoji/Emoji.tsx

@@ -146,6 +146,12 @@ function EmojiImg({
   return (
     <img
       src={getEmojiUrl(unified, emojiStyle)}
+      ref={(elem) => {
+        if (elem) {
+          elem.style.setProperty('--epr-sheet-x', emoji.x.toString());
+          elem.style.setProperty('--epr-sheet-y', emoji.y.toString());
+        }
+      }}
       alt={emojiName(emoji)}
       className={clsx(ClassNames.external, 'epr-emoji-img')}
       loading={lazyLoad ? 'lazy' : 'eager'}

src/dataUtils/DataTypes.ts

@@ -5,6 +5,8 @@ export type DataEmoji = {
   u: string;
   v?: string[];
   a: string;
+  x: number;
+  y: number;
 };
 export type DataEmojis = DataEmoji[];
 

src/dataUtils/emojiSelectors.ts

@@ -12,7 +12,9 @@ enum EmojiProperties {
   name = 'n',
   unified = 'u',
   variations = 'v',
-  added_in = 'a'
+  added_in = 'a',
+  sheet_x = 'x',
+  sheet_y = 'y',
 }
 
 export function emojiNames(emoji: DataEmoji): string[] {
@@ -23,6 +25,14 @@ export function addedIn(emoji: DataEmoji): number {
   return parseFloat(emoji[EmojiProperties.added_in]);
 }
 
+export function sheetX(emoji: DataEmoji): number {
+  return emoji[EmojiProperties.sheet_x];
+}
+
+export function sheetY(emoji: DataEmoji): number {
+  return emoji[EmojiProperties.sheet_y];
+}
+
 export function emojiName(emoji?: DataEmoji): string {
   if (!emoji) {
     return '';

src/hooks/useMouseDownHandlers.ts

@@ -23,6 +23,8 @@ import {
   emojiHasVariations,
   emojiNames,
   emojiUnified,
+  sheetX,
+  sheetY,
 } from '../dataUtils/emojiSelectors';
 import { parseNativeEmoji } from '../dataUtils/parseNativeEmoji';
 import { setsuggested } from '../dataUtils/suggested';
@@ -168,6 +170,8 @@ function emojiClickOutput(
       return getEmojiUrl(unified, emojiStyle);
     },
     names: emojiNames(emoji),
+    sheetX: sheetX(emoji),
+    sheetY: sheetY(emoji),
     unified,
     unifiedWithoutSkinTone: emojiUnified(emoji),
   };

src/types/exposedTypes.ts

@@ -2,6 +2,8 @@ export type EmojiClickData = {
   activeSkinTone: SkinTones;
   unified: string;
   unifiedWithoutSkinTone: string;
+  sheetX: number;
+  sheetY: number;
   emoji: string;
   names: string[];
   getImageUrl: (emojiStyle: EmojiStyle) => string;