yomichan/ext/js/dom/css-style-applier.js

/*
 * Copyright (C) 2021  Yomichan Authors
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

/**
 * This class is used to apply CSS styles to elements using a consistent method
 * that is the same across different browsers.
 */
class CssStyleApplier {
    /**
     * Creates a new instance of the class.
     * @param styleDataUrl The local URL to the JSON file continaing the style rules.
     *   The style rules should be of the format:
     *   [
     *     {
     *       selectors: [(selector:string)...],
     *       styles: [
     *         [(property:string), (value:string)]...
     *       ]
     *     }...
     *   ]
     */
    constructor(styleDataUrl) {
        this._styleDataUrl = styleDataUrl;
        this._styleData = [];
        this._cachedRules = new Map();
    }

    /**
     * Loads the data file for use.
     */
    async prepare() {
        this._styleData = await this._fetchJsonAsset(this._styleDataUrl);
    }

    /**
     * Applies CSS styles directly to the "style" attribute using the "class" attribute.
     * This only works for elements with a single class.
     * @param elements An iterable collection of HTMLElement objects.
     */
    applyClassStyles(elements) {
        const elementStyles = [];
        for (const element of elements) {
            const {className} = element;
            if (className.length === 0) { continue; }
            let cssTextNew = '';
            for (const {selectorText, styles} of this._getRulesForClass(className)) {
                if (!element.matches(selectorText)) { continue; }
                cssTextNew += this._getCssText(styles);
            }
            cssTextNew += element.style.cssText;
            elementStyles.push({element, style: cssTextNew});
        }
        for (const {element, style} of elementStyles) {
            element.removeAttribute('class');
            if (style.length > 0) {
                element.setAttribute('style', style);
            } else {
                element.removeAttribute('style');
            }
        }
    }

    // Private

    async _fetchJsonAsset(url) {
        const response = await fetch(url, {
            method: 'GET',
            mode: 'no-cors',
            cache: 'default',
            credentials: 'omit',
            redirect: 'follow',
            referrerPolicy: 'no-referrer'
        });
        if (!response.ok) {
            throw new Error(`Failed to fetch ${url}: ${response.status}`);
        }
        return await response.json();
    }

    _getRulesForClass(className) {
        let rules = this._cachedRules.get(className);
        if (typeof rules !== 'undefined') { return rules; }

        rules = [];
        this._cachedRules.set(className, rules);

        const classNamePattern = new RegExp(`.${className}(?![0-9a-zA-Z-])`, '');
        for (const {selectors, styles} of this._styleData) {
            const selectorText = selectors.join(',');
            if (!classNamePattern.test(selectorText)) { continue; }
            rules.push({selectorText, styles});
        }

        return rules;
    }

    _getCssText(styles) {
        let cssText = '';
        for (const [property, value] of styles) {
            cssText += `${property}:${value};`;
        }
        return cssText;
    }
}