@imposium-hub/components 1.56.0 → 1.57.0

package/src/components/font-picker/font-manager/FontManager.ts

@@ -0,0 +1,138 @@
+import { Font, FontList, Options, OPTIONS_DEFAULTS, Script } from './types';
+import { FONT_FAMILY_DEFAULT, LIST_BASE_URL } from './constants';
+import { getFontId, get } from './utils';
+
+interface FontResponse extends Font {
+    subsets: Script[];
+}
+
+export default class FontManager {
+    private readonly apiKey: string;
+
+    private readonly options: Options;
+
+    private onChange: (font: string) => void;
+
+    private fonts: FontList = new Map<string, Font>();
+
+    constructor(
+        apiKey: string,
+        defaultFamily: string = FONT_FAMILY_DEFAULT,
+        {
+            families = OPTIONS_DEFAULTS.families,
+            categories = OPTIONS_DEFAULTS.categories,
+            scripts = OPTIONS_DEFAULTS.scripts,
+            variants = OPTIONS_DEFAULTS.variants,
+            filter = OPTIONS_DEFAULTS.filter,
+            limit = OPTIONS_DEFAULTS.limit
+        }: Options,
+
+        onChange: (font: string) => void
+    ) {
+        // Save parameters as class variables
+        this.apiKey = apiKey;
+        this.options = {
+            families,
+            categories,
+            scripts,
+            variants,
+            filter,
+            limit
+        };
+        this.onChange = onChange;
+
+        // Download default font and add it to the empty font list
+        this.addFont(defaultFamily);
+        this.setActiveFont(defaultFamily);
+    }
+
+    /**
+     * Fetch list of all fonts from Google Fonts API, filter it according to the class parameters and
+     * save them to the font map
+     */
+    public async init(): Promise<FontList> {
+        // Get list of all fonts
+        const fonts = await this.getFontList(this.apiKey);
+        // Save desired fonts in the font map
+        for (const font of fonts) {
+            // const font = fonts[i];
+            // Exit once specified limit of number of fonts is reached
+            if (this.fonts.size >= this.options.limit) {
+                break;
+            }
+
+            if (
+                // Skip default font if it is also contained in the list
+                !this.fonts.has(font.family) &&
+                // `families` parameter: Only keep fonts whose names are included in the provided array
+                (this.options.families.length === 0 ||
+                    this.options.families.includes(font.family)) &&
+                // `categories` parameter: only keep fonts in categories from the provided array
+                (this.options.categories.length === 0 ||
+                    this.options.categories.includes(font.category)) &&
+                // `scripts` parameter: Only keep fonts which are available in all specified scripts
+                this.options.scripts.every((script): boolean => font.scripts.includes(script)) &&
+                // `variants` parameter: Only keep fonts which contain all specified variants
+                this.options.variants.every((variant): boolean =>
+                    font.variants.includes(variant)
+                ) &&
+                // `filter` parameter: Only keep fonts for which the `filter` function evaluates to `true`
+                this.options.filter(font) === true
+            ) {
+                // Font fulfils all requirements: Add it to font map
+                this.fonts.set(font.family, font);
+            }
+        }
+
+        return this.fonts;
+    }
+
+    private async getFontList(apiKey: string): Promise<Font[]> {
+        const url = new URL(LIST_BASE_URL);
+        url.searchParams.append('sort', 'popularity');
+        url.searchParams.append('key', apiKey);
+        const response = await get(url.href);
+        const fontsOriginal = JSON.parse(response).items;
+        return fontsOriginal.map((fontOriginal: FontResponse): Font => {
+            const { family, subsets, ...others } = fontOriginal;
+            return {
+                ...others,
+                family,
+                id: getFontId(family),
+                scripts: subsets
+            };
+        });
+    }
+
+    /**
+     * Add a new font to the font map and download its preview characters
+     */
+    private addFont(fontFamily: string): void {
+        const font: Font = {
+            family: fontFamily,
+            id: getFontId(fontFamily),
+            variants: [],
+            category: 'display',
+            scripts: []
+        };
+        this.fonts.set(fontFamily, font);
+    }
+
+    /**
+     * Set the specified font as the active font and download it
+     */
+    public setActiveFont(fontFamily: string): void {
+        const runOnChange = fontFamily !== 'Font not found';
+
+        if (runOnChange) {
+            this.onChange(fontFamily);
+        }
+    }
+
+    /**
+     * Update the onChange function (executed when changing the active font)
+     */
+    public setOnChange(onChange: (font: string) => void): void {
+        this.onChange = onChange;
+    }
+}

package/src/components/font-picker/font-manager/constants.ts

@@ -0,0 +1,7 @@
+export const FONT_BASE_URL = 'https://fonts.googleapis.com/css2';
+
+export const LIST_BASE_URL = 'https://www.googleapis.com/webfonts/v1/webfonts';
+
+export const FONT_FACE_REGEX = /@font-face {([\s\S]*?)}/gm;
+
+export const FONT_FAMILY_DEFAULT = 'Open Sans';

package/src/components/font-picker/font-manager/fontStyle.ts

@@ -0,0 +1,78 @@
+import { FONT_BASE_URL, FONT_FACE_REGEX } from './constants';
+import { get, getMatches } from './utils';
+
+export const createFontStyleSheets = (
+    defaultFonts: any,
+    uniqueFonts: any,
+    availableFonts?: any
+): void => {
+    defaultFonts.map((font: any) => {
+        const fonts = uniqueFonts.find((f: any) => f.family === font.family);
+        const fontId = font.name.toLowerCase().split(' ').join('-');
+
+        // non Google Font style
+        if (fonts?.file) {
+            fillFontStyleSheets(fontId, font);
+        }
+
+        // google font style
+        if (fonts?.files) {
+            const fontURL = new URL(FONT_BASE_URL);
+            fontURL.searchParams.append('family', `${font.family}:wght@${font.weight}`);
+            fontURL.searchParams.append('text', font.name);
+            fontURL.searchParams.append('font-display', 'swap');
+            get(fontURL.href)
+                .then((res) => {
+                    const rule = getMatches(FONT_FACE_REGEX, res);
+                    const updateFont = rule[rule.length - 1].replace(font.family, font.name);
+                    fillFontStyleSheets(fontId, updateFont, font.name);
+                })
+                .catch((e) => console.error(e));
+        }
+    });
+
+    // custom font style
+    if (availableFonts) {
+        availableFonts.map((font: any) => {
+            const fontId = font.name.toLowerCase();
+            fillFontStyleSheets(fontId, font);
+        });
+    }
+};
+
+const fillFontStyleSheets = (fontId: string, font: any, fontName?: any) => {
+    let stylesheetNode = document.getElementById(`font-${fontId}`);
+    const { weight, file, url, name, family } = font;
+
+    const fontFamily = name !== family ? name : family;
+    const fontWeight = weight ? `font-weight: ${weight};` : '';
+    const fontUrl = file ? `fonts/${file}` : `${url}`;
+
+    if (stylesheetNode === null) {
+        stylesheetNode = stylesheetNode;
+        stylesheetNode = document.createElement('style');
+        if (stylesheetNode !== null) {
+            stylesheetNode.id = `font-${fontId}`;
+            stylesheetNode.setAttribute('data-is-preview', 'true');
+
+            // non-google and custom fonts style
+            if (fontFamily && fontFamily && fontUrl) {
+                stylesheetNode.textContent = `
+                @font-face {
+                    font-family: ${fontFamily};
+                    ${fontWeight}
+                    src: url(${fontUrl});
+                }`;
+            }
+
+            if (fontName) {
+                stylesheetNode.textContent = `
+                @font-face {
+                    ${font.replace(`'${fontName}'`, fontName)}
+                }`;
+            }
+
+            document.head.appendChild(stylesheetNode);
+        }
+    }
+};

package/src/components/font-picker/font-manager/types.ts

@@ -0,0 +1,83 @@
+export type Category = 'sans-serif' | 'serif' | 'display' | 'handwriting' | 'monospace';
+
+export type Script =
+    | 'arabic'
+    | 'bengali'
+    | 'chinese-simplified'
+    | 'chinese-traditional'
+    | 'cyrillic'
+    | 'cyrillic-ext'
+    | 'devanagari'
+    | 'greek'
+    | 'greek-ext'
+    | 'gujarati'
+    | 'gurmukhi'
+    | 'hebrew'
+    | 'japanese'
+    | 'kannada'
+    | 'khmer'
+    | 'korean'
+    | 'latin'
+    | 'latin-ext'
+    | 'malayalam'
+    | 'myanmar'
+    | 'oriya'
+    | 'sinhala'
+    | 'tamil'
+    | '​telugu'
+    | 'thai'
+    | 'vietnamese';
+
+export type SortOption = 'alphabet' | 'popularity';
+
+export type Variant =
+    | '100'
+    | '100italic'
+    | '200'
+    | '200italic'
+    | '300'
+    | '300italic'
+    | 'regular'
+    | 'italic'
+    | '500'
+    | '500italic'
+    | '600'
+    | '600italic'
+    | '700'
+    | '700italic'
+    | '800'
+    | '800italic'
+    | '900'
+    | '900italic';
+
+export interface Font {
+    family: string;
+    id: string;
+    category: Category;
+    scripts: Script[];
+    variants: Variant[];
+    kind?: string;
+    version?: string;
+    lastModified?: string;
+    files?: Record<Variant, string>;
+}
+
+export type FontList = Map<string, Font>;
+
+export interface Options {
+    families: string[];
+    categories: Category[];
+    scripts: Script[];
+    variants: Variant[];
+    filter: (font: Font) => boolean;
+    limit: number;
+}
+
+export const OPTIONS_DEFAULTS: Options = {
+    families: [],
+    categories: [],
+    scripts: ['latin'],
+    variants: ['regular'],
+    filter: () => true,
+    limit: 50
+};

package/src/components/font-picker/font-manager/utils.ts

@@ -0,0 +1,36 @@
+export const getFontId = (fontFamily: string): string => {
+    return fontFamily.replace(/\s+/g, '-').toLowerCase();
+};
+
+export const get = (url: string): Promise<string> => {
+    return new Promise((resolve, reject): void => {
+        const request = new XMLHttpRequest();
+        request.overrideMimeType('application/json');
+        request.open('GET', url, true);
+        request.onreadystatechange = (): void => {
+            // Request has completed
+            if (request.readyState === 4) {
+                if (request.status !== 200) {
+                    // On error
+                    reject(new Error(`Response has status code ${request.status}`));
+                } else {
+                    // On success
+                    resolve(request.responseText);
+                }
+            }
+        };
+        request.send();
+    });
+};
+
+export const getMatches = (regex: RegExp, str: string): string[] => {
+    const matches: string[] = [];
+    let match;
+    do {
+        match = regex.exec(str);
+        if (match) {
+            matches.push(match[1]);
+        }
+    } while (match);
+    return matches;
+};

package/src/index.ts

@@ -142,6 +142,7 @@ import {
 import PublishStatusIndicator from './components/publish-wizard/publish/PublishStatusIndicator';
 import { getMediaPreviewStyle } from './utils/assets';
 import AdvancedNumberField from './components/advanced-number-field/AdvancedNumberField';
+import FontPicker from './components/font-picker/FontPicker';
 
 export {
     AppWrapper,
@@ -276,5 +277,6 @@ export {
     getMediaPreviewStyle,
     HEADER_HEIGHT,
     decoupleAssets,
-    updateAssetStory
+    updateAssetStory,
+    FontPicker
 };