diff --git a/core/font/TwemojiCountryFlags.woff2 b/core/font/TwemojiCountryFlags.woff2 new file mode 100644 index 00000000..b9d6ea84 Binary files /dev/null and b/core/font/TwemojiCountryFlags.woff2 differ diff --git a/core/font/material-icons.css b/core/font/material-icons.css index a1c525ae..62b28ab7 100644 --- a/core/font/material-icons.css +++ b/core/font/material-icons.css @@ -101,3 +101,10 @@ local('PaytoneOne'), url(PaytoneOne.ttf) format('truetype'); } + +@font-face { + font-family: 'Twemoji Country Flags'; + src: url('TwemojiCountryFlags.woff2') format('woff2'); + font-weight: normal; + font-style: normal; +} \ No newline at end of file diff --git a/plugins/plugins/core/components/ChatEmojiFlags.js b/plugins/plugins/core/components/ChatEmojiFlags.js new file mode 100644 index 00000000..4956b6a5 --- /dev/null +++ b/plugins/plugins/core/components/ChatEmojiFlags.js @@ -0,0 +1,20 @@ +import { supportsEmojiFlags } from './ChatTestEmojiFlags' + +export function supportCountryFlagEmojis(fontName = "Twemoji Country Flags", fontUrl = "/font/TwemojiCountryFlags.woff2") { + if (typeof window !== "undefined" && supportsEmojiFlags("😊") && !supportsEmojiFlags("🇨🇭")) { + const style = document.createElement("style") + + style.textContent = `@font-face { + font-family: "${fontName}"; + unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F; + src: url('${fontUrl}') format('woff2'); + font-display: swap; + }` + + document.head.appendChild(style) + + return true + } + + return false +} \ No newline at end of file diff --git a/plugins/plugins/core/components/ChatTestEmojiFlags.js b/plugins/plugins/core/components/ChatTestEmojiFlags.js new file mode 100644 index 00000000..07e48083 --- /dev/null +++ b/plugins/plugins/core/components/ChatTestEmojiFlags.js @@ -0,0 +1,32 @@ +const FONT_FAMILY = '"Twemoji Mozilla","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji","EmojiOne Color","Android Emoji",sans-serif' + +function makeCtx() { + const canvas = document.createElement("canvas") + canvas.width = canvas.height = 1 + + const ctx = canvas.getContext("2d", { willReadFrequently: true }) + + ctx.textBaseline = "top" + ctx.font = `100px ${FONT_FAMILY}` + ctx.scale(0.01, 0.01) + + return ctx +} + +function getColor(ctx, text, color) { + ctx.clearRect(0, 0, 100, 100) + ctx.fillStyle = color + ctx.fillText(text, 0, 0) + + const bytes = ctx.getImageData(0, 0, 1, 1).data + + return bytes.join(",") +} + +export function supportsEmojiFlags(text) { + const ctx = makeCtx() + const white = getColor(ctx, text, "#fff") + const black = getColor(ctx, text, "#000") + + return black === white && !black.startsWith("0,0,0,") +} \ No newline at end of file diff --git a/plugins/plugins/core/q-chat/index.html b/plugins/plugins/core/q-chat/index.html index e6fab848..04e74a55 100644 --- a/plugins/plugins/core/q-chat/index.html +++ b/plugins/plugins/core/q-chat/index.html @@ -41,7 +41,7 @@ html, body { margin: 0; - font-family: "Roboto", sans-serif; + font-family: "Twemoji Country Flags", "Roboto", sans-serif; background: var(--plugback); overflow: hidden; } diff --git a/plugins/plugins/core/q-chat/q-chat.src.js b/plugins/plugins/core/q-chat/q-chat.src.js index 7a5b75d1..71b2f597 100644 --- a/plugins/plugins/core/q-chat/q-chat.src.js +++ b/plugins/plugins/core/q-chat/q-chat.src.js @@ -3,6 +3,7 @@ import { render } from 'lit/html.js' import { Epml } from '../../../epml' import { passiveSupport } from 'passive-events-support/src/utils' import { Editor, Extension } from '@tiptap/core' +import { supportCountryFlagEmojis } from '../components/ChatEmojiFlags' import { qchatStyles } from '../components/plugins-css' import isElectron from 'is-electron' import WebWorker from 'web-worker:./computePowWorker' @@ -24,7 +25,6 @@ import '@material/mwc-icon' import '@material/mwc-snackbar' import '@polymer/paper-spinner/paper-spinner-lite.js' import '@vaadin/grid' -import '@vaadin/scroller' import '@vaadin/tooltip' // Multi language support @@ -36,6 +36,7 @@ registerTranslateConfig({ const parentEpml = new Epml({ type: 'WINDOW', source: window.parent }) passiveSupport({ events: ['touchstart'] }) +supportCountryFlagEmojis() class Chat extends LitElement { static get properties() { @@ -150,14 +151,9 @@ class Chat extends LitElement { - - - +
this.scrollToBottom()}>