PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Convert FontManager to TS

Browse source
This commit is contained in:
Michael Telatynski 2021-07-12 20:45:19 +01:00
parent 1b39dbdb53
commit d3652996d6
4 changed files with 16 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -126,6 +126,7 @@
"@types/classnames": "^2.2.11", "@types/classnames": "^2.2.11",
"@types/commonmark": "^0.27.4", "@types/commonmark": "^0.27.4",
"@types/counterpart": "^0.18.1", "@types/counterpart": "^0.18.1",
"@types/css-font-loading-module": "^0.0.6",
"@types/diff-match-patch": "^1.0.32", "@types/diff-match-patch": "^1.0.32",
"@types/flux": "^3.1.9", "@types/flux": "^3.1.9",
"@types/jest": "^26.0.20", "@types/jest": "^26.0.20",

2
src/@types/global.d.ts vendored
View file

@ -15,6 +15,8 @@ limitations under the License.
*/ */
import "matrix-js-sdk/src/@types/global"; // load matrix-js-sdk's type extensions first import "matrix-js-sdk/src/@types/global"; // load matrix-js-sdk's type extensions first
// Load types for the WG CSS Font Loading APIs https://github.com/Microsoft/TypeScript/issues/13569
import "@types/css-font-loading-module";
import "@types/modernizr"; import "@types/modernizr";
import ContentMessages from "../ContentMessages"; import ContentMessages from "../ContentMessages";

16
src/utils/FontManager.js → src/utils/FontManager.ts
View file

@ -1,5 +1,5 @@
/* /*
Copyright 2019 The Matrix.org Foundation C.I.C. Copyright 2019 - 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License"); Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. you may not use this file except in compliance with the License.
@ -21,7 +21,7 @@ limitations under the License.
* MIT license * MIT license
*/ */
function safariVersionCheck(ua) { function safariVersionCheck(ua: string): boolean {
console.log("Browser is Safari - checking version for COLR support"); console.log("Browser is Safari - checking version for COLR support");
try { try {
const safariVersionMatch = ua.match(/Mac OS X ([\d|_]+).*Version\/([\d|.]+).*Safari/); const safariVersionMatch = ua.match(/Mac OS X ([\d|_]+).*Version\/([\d|.]+).*Safari/);
@ -44,7 +44,7 @@ function safariVersionCheck(ua) {
return false; return false;
} }
async function isColrFontSupported() { async function isColrFontSupported(): Promise<boolean> {
console.log("Checking for COLR support"); console.log("Checking for COLR support");
const { userAgent } = navigator; const { userAgent } = navigator;
@ -101,7 +101,7 @@ async function isColrFontSupported() {
} }
let colrFontCheckStarted = false; let colrFontCheckStarted = false;
export async function fixupColorFonts() { export async function fixupColorFonts(): Promise<void> {
if (colrFontCheckStarted) { if (colrFontCheckStarted) {
return; return;
} }
@ -112,14 +112,14 @@ export async function fixupColorFonts() {
document.fonts.add(new FontFace("Twemoji", path, {})); document.fonts.add(new FontFace("Twemoji", path, {}));
// For at least Chrome on Windows 10, we have to explictly add extra // For at least Chrome on Windows 10, we have to explictly add extra
// weights for the emoji to appear in bold messages, etc. // weights for the emoji to appear in bold messages, etc.
document.fonts.add(new FontFace("Twemoji", path, { weight: 600 })); document.fonts.add(new FontFace("Twemoji", path, { weight: "600" }));
document.fonts.add(new FontFace("Twemoji", path, { weight: 700 })); document.fonts.add(new FontFace("Twemoji", path, { weight: "700" }));
} else { } else {
// fall back to SBIX, generated via https://github.com/matrix-org/twemoji-colr/tree/matthew/sbix // fall back to SBIX, generated via https://github.com/matrix-org/twemoji-colr/tree/matthew/sbix
const path = `url('${require("../../res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2")}')`; const path = `url('${require("../../res/fonts/Twemoji_Mozilla/TwemojiMozilla-sbix.woff2")}')`;
document.fonts.add(new FontFace("Twemoji", path, {})); document.fonts.add(new FontFace("Twemoji", path, {}));
document.fonts.add(new FontFace("Twemoji", path, { weight: 600 })); document.fonts.add(new FontFace("Twemoji", path, { weight: "600" }));
document.fonts.add(new FontFace("Twemoji", path, { weight: 700 })); document.fonts.add(new FontFace("Twemoji", path, { weight: "700" }));
} }
// ...and if SBIX is not supported, the browser will fall back to one of the native fonts specified. // ...and if SBIX is not supported, the browser will fall back to one of the native fonts specified.
} }

5
yarn.lock
View file

@ -1488,6 +1488,11 @@
resolved "https://registry.yarnpkg.com/@types/counterpart/-/counterpart-0.18.1.tgz#b1b784d9e54d9879f0a8cb12f2caedab65430fe8" resolved "https://registry.yarnpkg.com/@types/counterpart/-/counterpart-0.18.1.tgz#b1b784d9e54d9879f0a8cb12f2caedab65430fe8"
integrity sha512-PRuFlBBkvdDOtxlIASzTmkEFar+S66Ek48NVVTWMUjtJAdn5vyMSN8y6IZIoIymGpR36q2nZbIYazBWyFxL+IQ== integrity sha512-PRuFlBBkvdDOtxlIASzTmkEFar+S66Ek48NVVTWMUjtJAdn5vyMSN8y6IZIoIymGpR36q2nZbIYazBWyFxL+IQ==
"@types/css-font-loading-module@^0.0.6":
version "0.0.6"
resolved "https://registry.yarnpkg.com/@types/css-font-loading-module/-/css-font-loading-module-0.0.6.tgz#1ac3417ed31eeb953134d29b56bca921644b87c0"
integrity sha512-MBvSMSxXFtIukyXRU3HhzL369rIWaqMVQD5kmDCYIFFD6Fe3lJ4c9UnLD02MLdTp7Z6ti7rO3SQtuDo7C80mmw==
"@types/diff-match-patch@^1.0.32": "@types/diff-match-patch@^1.0.32":
version "1.0.32" version "1.0.32"
resolved "https://registry.yarnpkg.com/@types/diff-match-patch/-/diff-match-patch-1.0.32.tgz#d9c3b8c914aa8229485351db4865328337a3d09f" resolved "https://registry.yarnpkg.com/@types/diff-match-patch/-/diff-match-patch-1.0.32.tgz#d9c3b8c914aa8229485351db4865328337a3d09f"