-
-
Notifications
You must be signed in to change notification settings - Fork 10
/
EmojiPicker.js
116 lines (104 loc) · 3.86 KB
/
EmojiPicker.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/**
* Creates and manages the Emoji picker.
*
* @public
*/
import * as EmojiSelect from "./EmojiSelect.js";
let emojiPicker = null;
const EMOJI_SHEET_DIR = "/popup/img/emoji-images";
/**
* Hardcoded settings for emoji-mart picker
*
* @private
* @type {Object}
*/
export const hardcodedSettings = Object.freeze({
color: "#ffb03b", // or #d42ecc ?
i18n: getEmojiMartLocalised(),
autoFocus: true,
onSelect: EmojiSelect.triggerOnSelect,
onClick: EmojiSelect.saveClickPosition,
style: { border: "none" },
theme: "auto",
backgroundImageFn: getEmojiSheet,
title: browser.i18n.getMessage("extensionNameShort"), // show the extension name by default
emoji: "star-struck" // default emoji
});
/**
* Return the translated strings for emoji-mart.
*
* @private
* @returns {Object}
* @see https://github.com/missive/emoji-mart#i18n
*/
function getEmojiMartLocalised() {
return {
search: browser.i18n.getMessage("emojiMartSearch"),
clear: browser.i18n.getMessage("emojiMartClear"), // Accessible label on "clear" button
notfound: browser.i18n.getMessage("emojiMartNoEmojiFound"),
skintext: browser.i18n.getMessage("emojiMartSkinText"),
categories: {
search: browser.i18n.getMessage("emojiMartCategorySearch"),
recent: browser.i18n.getMessage("emojiMartCategoryRecent"),
people: browser.i18n.getMessage("emojiMartCategoryPeople"),
nature: browser.i18n.getMessage("emojiMartCategoryNature"),
foods: browser.i18n.getMessage("emojiMartCategoryFoods"),
activity: browser.i18n.getMessage("emojiMartCategoryActivity"),
places: browser.i18n.getMessage("emojiMartCategoryPlaces"),
objects: browser.i18n.getMessage("emojiMartCategoryObjects"),
symbols: browser.i18n.getMessage("emojiMartCategorySymbols"),
flags: browser.i18n.getMessage("emojiMartCategoryFlags"),
custom: browser.i18n.getMessage("emojiMartCategoryCustom")
},
categorieslabel: browser.i18n.getMessage("emojiMartCategoriesLabel"), // Accessible title for the list of categories
skintones: {
1: browser.i18n.getMessage("emojiMartSkintone1"),
2: browser.i18n.getMessage("emojiMartSkintone2"),
3: browser.i18n.getMessage("emojiMartSkintone3"),
4: browser.i18n.getMessage("emojiMartSkintone4"),
5: browser.i18n.getMessage("emojiMartSkintone5"),
6: browser.i18n.getMessage("emojiMartSkintone6")
}
};
}
/**
* Return the emoji sheet to use.
*
* @private
* @param {string} set
* @param {string} sheetSize
* @returns {string} the URL to the emoji sheet
*/
function getEmojiSheet(set, sheetSize) {
// returns local saved version to speed up loading
return browser.runtime.getURL(`${EMOJI_SHEET_DIR}/${set}-${sheetSize}.png`);
// default online source would be this one
// const EMOJI_DATASOURCE_VERSION = "latest"; // with a fixed version, however
// return `https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets-256/${sheetSize}.png`;
}
/**
* Change the properties of the Emoji selector.
*
* @public
* @param {Object} properties
* @returns {void}
*/
export function setAttribute(properties) {
emojiPicker.setAttribute("props-json", JSON.stringify(properties));
}
/**
* Creates the emoji picker.
*
* @public
* @param {Object} settings
* @returns {Promise}
*/
export function init(settings) {
const initProperties = Object.assign(settings, hardcodedSettings);
console.debug("Using these emoji-mart settings:", initProperties);
const promiseCreateElement = window.emojiMart.definePicker("emoji-picker", initProperties);
return promiseCreateElement.then(() => {
emojiPicker = document.createElement("emoji-picker");
document.body.append(emojiPicker);
});
}