anki/ts/html-filter/styling.ts

// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html

interface AllowPropertiesBlockValues {
    [property: string]: string[];
}

type BlockProperties = string[];

type StylingPredicate = (property: string, value: string) => boolean;

const stylingNightMode: AllowPropertiesBlockValues = {
    "font-weight": [],
    "font-style": [],
    "text-decoration-line": [],
};

const stylingLightMode: AllowPropertiesBlockValues = {
    color: [],
    "background-color": ["transparent"],
    ...stylingNightMode,
};

const stylingInternal: BlockProperties = [
    "background-color",
    "font-size",
    "font-family",
];

const allowPropertiesBlockValues =
    (allowBlock: AllowPropertiesBlockValues): StylingPredicate =>
    (property: string, value: string): boolean =>
        Object.prototype.hasOwnProperty.call(allowBlock, property) &&
        !allowBlock[property].includes(value);

const blockProperties =
    (block: BlockProperties): StylingPredicate =>
    (property: string): boolean =>
        !block.includes(property);

const filterStyling =
    (predicate: (property: string, value: string) => boolean) =>
    (element: HTMLElement): void => {
        for (const property of [...element.style]) {
            const value = element.style.getPropertyValue(property);

            if (!predicate(property, value)) {
                element.style.removeProperty(property);
            }
        }
    };

export const filterStylingNightMode = filterStyling(
    allowPropertiesBlockValues(stylingNightMode)
);
export const filterStylingLightMode = filterStyling(
    allowPropertiesBlockValues(stylingLightMode)
);
export const filterStylingInternal = filterStyling(blockProperties(stylingInternal));