31 lines
1.2 KiB
JavaScript
31 lines
1.2 KiB
JavaScript
import { polyfillCountryFlagEmojis } from 'country-flag-emoji-polyfill'
|
|
import { store } from '../store.js'
|
|
|
|
let polyfilled = false
|
|
|
|
const COUNTRY_FLAG_FONT_URL = '/TwemojiCountryFlags.woff2'
|
|
|
|
export function countryFlagEmojiPolyfill () {
|
|
if (!polyfilled) {
|
|
polyfilled = true
|
|
const numStylesBefore = document.head.querySelectorAll('style').length
|
|
polyfillCountryFlagEmojis('Twemoji Mozilla', COUNTRY_FLAG_FONT_URL)
|
|
const numStylesAfter = document.head.querySelectorAll('style').length
|
|
// if a style was added, then the polyfill was activated
|
|
const polyfillActivated = numStylesAfter !== numStylesBefore
|
|
if (polyfillActivated) {
|
|
const style = document.createElement('style')
|
|
style.textContent = `
|
|
@font-face {
|
|
font-family: CountryFlagEmojiPolyfill;
|
|
src: url(${JSON.stringify(COUNTRY_FLAG_FONT_URL)});
|
|
}
|
|
`
|
|
document.head.appendChild(style)
|
|
// "Twemoji Mozilla" is for emoji-picker-element, since it lists that font first.
|
|
// "CountryFlagEmojiPolyfill" is for us so we can set it before everything else in our own font family lists.
|
|
}
|
|
store.set({ polyfilledCountryFlagEmoji: polyfillActivated })
|
|
}
|
|
}
|