yomichan/ext/js/dom/sandbox/css-style-applier.js
toasted-nutbread a33a00f5ae
CssStyleApplier updates (#2145)
* Update internal structure of _styleData

* Rename parameter

* Rename

* Add docs
2022-05-18 19:40:47 -04:00

209 lines
7.1 KiB
JavaScript

/*
* Copyright (C) 2021-2022 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 {
/**
* A CSS rule.
* @typedef {object} CssRule
* @property {string} selectors A CSS selector string representing one or more selectors.
* @property {CssDeclaration[]} styles A list of CSS property and value pairs.
*/
/**
* A single CSS property declaration.
* @typedef {object} CssDeclaration
* @property {string} property A CSS property's name, using kebab-case.
* @property {string} value The property's value.
*/
/**
* 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();
// eslint-disable-next-line no-control-regex
this._patternHtmlWhitespace = /[\t\r\n\x0C ]+/g;
this._patternClassNameCharacter = /[0-9a-zA-Z-_]/;
}
/**
* Loads the data file for use.
*/
async prepare() {
let rawData;
try {
rawData = await this._fetchJsonAsset(this._styleDataUrl);
} catch (e) {
console.error(e);
}
const styleData = this._styleData;
styleData.length = 0;
for (const {selectors, styles} of rawData) {
const selectors2 = selectors.join(',');
const styles2 = [];
for (const [property, value] of styles) {
styles2.push({property, value});
}
styleData.push({
selectors: selectors2,
styles: styles2
});
}
}
/**
* 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.getAttribute('class');
if (className.length === 0) { continue; }
let cssTextNew = '';
for (const {selectors, styles} of this._getCandidateCssRulesForClass(className)) {
if (!element.matches(selectors)) { 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
/**
* Fetches and parses a JSON file.
* @param {string} url The URL to the file.
* @returns {Promise<*>} A JSON object.
* @throws {Error} An error is thrown if the fetch fails.
*/
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();
}
/**
* Gets an array of candidate CSS rules which might match a specific class.
* @param {string} className A whitespace-separated list of classes.
* @returns {CssRule[]} An array of candidate CSS rules.
*/
_getCandidateCssRulesForClass(className) {
let rules = this._cachedRules.get(className);
if (typeof rules !== 'undefined') { return rules; }
rules = [];
this._cachedRules.set(className, rules);
const classList = this._getTokens(className);
for (const {selectors, styles} of this._styleData) {
if (!this._selectorMightMatch(selectors, classList)) { continue; }
rules.push({selectors, styles});
}
return rules;
}
/**
* Converts an array of CSS rules to a CSS string.
* @param {CssRule[]} styles An array of CSS rules.
* @returns {string} The CSS string.
*/
_getCssText(styles) {
let cssText = '';
for (const {property, value} of styles) {
cssText += `${property}:${value};`;
}
return cssText;
}
/**
* Checks whether or not a CSS string might match at least one class in a list.
* @param {string} selectors A CSS selector string.
* @param {string[]} classList An array of CSS classes.
* @returns {boolean} `true` if the selector string might match one of the classes in `classList`, false otherwise.
*/
_selectorMightMatch(selectors, classList) {
const pattern = this._patternClassNameCharacter;
for (const item of classList) {
const prefixedItem = `.${item}`;
let start = 0;
while (true) {
const index = selectors.indexOf(prefixedItem, start);
if (index < 0) { break; }
start = index + prefixedItem.length;
if (start >= selectors.length || !pattern.test(selectors[start])) { return true; }
}
}
return false;
}
/**
* Gets the whitespace-delimited tokens from a string.
* @param {string} tokenListString The string to parse.
* @returns {string[]} An array of tokens.
*/
_getTokens(tokenListString) {
let start = 0;
const pattern = this._patternHtmlWhitespace;
pattern.lastIndex = 0;
const result = [];
while (true) {
const match = pattern.exec(tokenListString);
const end = match === null ? tokenListString.length : match.index;
if (end > start) { result.push(tokenListString.substring(start, end)); }
if (match === null) { return result; }
start = end + match[0].length;
}
}
}