world/book/_book/gitbook/@honkit/honkit-plugin-fontsettings/fontsettings.js

require(["gitbook", "jquery"], (gitbook, $) => {
    // Configuration
    const MAX_SIZE = 4;
    const MIN_SIZE = 0;
    let BUTTON_ID;

    // Current fontsettings state
    let fontState;

    // Default themes
    let THEMES = [
        {
            config: "white",
            text: "White",
            id: 0
        },
        {
            config: "sepia",
            text: "Sepia",
            id: 1
        },
        {
            config: "night",
            text: "Night",
            id: 2
        }
    ];

    // Default font families
    let FAMILIES = [
        {
            config: "serif",
            text: "Serif",
            id: 0
        },
        {
            config: "sans",
            text: "Sans",
            id: 1
        }
    ];

    // Return configured themes
    function getThemes() {
        return THEMES;
    }

    // Modify configured themes
    function setThemes(themes) {
        THEMES = themes;
        updateButtons();
    }

    // Return configured font families
    function getFamilies() {
        return FAMILIES;
    }

    // Modify configured font families
    function setFamilies(families) {
        FAMILIES = families;
        updateButtons();
    }

    // Save current font settings
    function saveFontSettings() {
        gitbook.storage.set("fontState", fontState);
        update();
    }

    // Increase font size
    function enlargeFontSize(e) {
        e.preventDefault();
        if (fontState.size >= MAX_SIZE) return;

        fontState.size++;
        saveFontSettings();
    }

    // Decrease font size
    function reduceFontSize(e) {
        e.preventDefault();
        if (fontState.size <= MIN_SIZE) return;

        fontState.size--;
        saveFontSettings();
    }

    // Change font family
    function changeFontFamily(configName, e) {
        if (e && e instanceof Event) {
            e.preventDefault();
        }

        const familyId = getFontFamilyId(configName);
        fontState.family = familyId;
        saveFontSettings();
    }

    // Change type of color theme
    function changeColorTheme(configName, e) {
        if (e && e instanceof Event) {
            e.preventDefault();
        }

        const $book = gitbook.state.$book;

        // Remove currently applied color theme
        if (fontState.theme !== 0) $book.removeClass(`color-theme-${fontState.theme}`);

        // Set new color theme
        const themeId = getThemeId(configName);
        fontState.theme = themeId;
        if (fontState.theme !== 0) $book.addClass(`color-theme-${fontState.theme}`);

        saveFontSettings();
    }

    // Return the correct id for a font-family config key
    // Default to first font-family
    function getFontFamilyId(configName) {
        // Search for plugin configured font family
        const configFamily = $.grep(FAMILIES, (family) => {
            return family.config == configName;
        })[0];

        // Fallback to default font family
        return (configFamily && configFamily.id) || 0;
    }

    // Return the correct id for a theme config key
    // Default to first theme
    function getThemeId(configName) {
        // Search for plugin configured theme
        const configTheme = $.grep(THEMES, (theme) => {
            return theme.config == configName;
        })[0];

        // Fallback to default theme
        return (configTheme && configTheme.id) || 0;
    }

    function update() {
        const $book = gitbook.state.$book;

        $(".font-settings .font-family-list li").removeClass("active");
        $(`.font-settings .font-family-list li:nth-child(${fontState.family + 1})`).addClass("active");

        $book[0].className = $book[0].className.replace(/\bfont-\S+/g, "");
        $book.addClass(`font-size-${fontState.size}`);
        $book.addClass(`font-family-${fontState.family}`);

        if (fontState.theme !== 0) {
            $book[0].className = $book[0].className.replace(/\bcolor-theme-\S+/g, "");
            $book.addClass(`color-theme-${fontState.theme}`);
        }
    }

    function init(config) {
        // Search for plugin configured font family
        const configFamily = getFontFamilyId(config.family);
        const configTheme = getThemeId(config.theme);

        // Instantiate font state object
        fontState = gitbook.storage.get("fontState", {
            size: config.size || 2,
            family: configFamily,
            theme: configTheme
        });

        update();
    }

    function updateButtons() {
        // Remove existing fontsettings buttons
        if (BUTTON_ID) {
            gitbook.toolbar.removeButton(BUTTON_ID);
        }

        // Create buttons in toolbar
        BUTTON_ID = gitbook.toolbar.createButton({
            icon: "fa fa-font",
            label: "Font Settings",
            className: "font-settings",
            dropdown: [
                [
                    {
                        text: "A",
                        className: "font-reduce",
                        onClick: reduceFontSize
                    },
                    {
                        text: "A",
                        className: "font-enlarge",
                        onClick: enlargeFontSize
                    }
                ],
                $.map(FAMILIES, (family) => {
                    family.onClick = function (e) {
                        return changeFontFamily(family.config, e);
                    };

                    return family;
                }),
                $.map(THEMES, (theme) => {
                    theme.onClick = function (e) {
                        return changeColorTheme(theme.config, e);
                    };

                    return theme;
                })
            ]
        });
    }

    // Init configuration at start
    gitbook.events.bind("start", (e, config) => {
        const opts = config.fontsettings;

        // Generate buttons at start
        updateButtons();

        // Init current settings
        init(opts);
    });

    // Expose API
    gitbook.fontsettings = {
        enlargeFontSize: enlargeFontSize,
        reduceFontSize: reduceFontSize,
        setTheme: changeColorTheme,
        setFamily: changeFontFamily,
        getThemes: getThemes,
        setThemes: setThemes,
        getFamilies: getFamilies,
        setFamilies: setFamilies
    };
});