https://helpdoc.touchsprite.com/gitbook/gitbook-plugin-fontsettings/fontsettings.js

1require(['gitbook', 'jquery'], function(gitbook, $) {
2    // Configuration
3    var MAX_SIZE       = 4,
4        MIN_SIZE       = 0,
5        BUTTON_ID;
6
7    // Current fontsettings state
8    var fontState;
9
10    // Default themes
11    var THEMES = [
12        {
13            config: 'white',
14            text: 'White',
15            id: 0
16        },
17        {
18            config: 'sepia',
19            text: 'Sepia',
20            id: 1
21        },
22        {
23            config: 'night',
24            text: 'Night',
25            id: 2
26        }
27    ];
28
29    // Default font families
30    var FAMILIES = [
31        {
32            config: 'serif',
33            text: 'Serif',
34            id: 0
35        },
36        {
37            config: 'sans',
38            text: 'Sans',
39            id: 1
40        }
41    ];
42
43    // Return configured themes
44    function getThemes() {
45        return THEMES;
46    }
47
48    // Modify configured themes
49    function setThemes(themes) {
50        THEMES = themes;
51        updateButtons();
52    }
53
54    // Return configured font families
55    function getFamilies() {
56        return FAMILIES;
57    }
58
59    // Modify configured font families
60    function setFamilies(families) {
61        FAMILIES = families;
62        updateButtons();
63    }
64
65    // Save current font settings
66    function saveFontSettings() {
67        gitbook.storage.set('fontState', fontState);
68        update();
69    }
70
71    // Increase font size
72    function enlargeFontSize(e) {
73        e.preventDefault();
74        if (fontState.size >= MAX_SIZE) return;
75
76        fontState.size++;
77        saveFontSettings();
78    }
79
80    // Decrease font size
81    function reduceFontSize(e) {
82        e.preventDefault();
83        if (fontState.size <= MIN_SIZE) return;
84
85        fontState.size--;
86        saveFontSettings();
87    }
88
89    // Change font family
90    function changeFontFamily(configName, e) {
91        if (e && e instanceof Event) {
92            e.preventDefault();
93        }
94
95        var familyId = getFontFamilyId(configName);
96        fontState.family = familyId;
97        saveFontSettings();
98    }
99
100    // Change type of color theme
101    function changeColorTheme(configName, e) {
102        if (e && e instanceof Event) {
103            e.preventDefault();
104        }
105
106        var $book = gitbook.state.$book;
107
108        // Remove currently applied color theme
109        if (fontState.theme !== 0)
110            $book.removeClass('color-theme-'+fontState.theme);
111
112        // Set new color theme
113        var themeId = getThemeId(configName);
114        fontState.theme = themeId;
115        if (fontState.theme !== 0)
116            $book.addClass('color-theme-'+fontState.theme);
117
118        saveFontSettings();
119    }
120
121    // Return the correct id for a font-family config key
122    // Default to first font-family
123    function getFontFamilyId(configName) {
124        // Search for plugin configured font family
125        var configFamily = $.grep(FAMILIES, function(family) {
126            return family.config == configName;
127        })[0];
128        // Fallback to default font family
129        return (!!configFamily)? configFamily.id : 0;
130    }
131
132    // Return the correct id for a theme config key
133    // Default to first theme
134    function getThemeId(configName) {
135        // Search for plugin configured theme
136        var configTheme = $.grep(THEMES, function(theme) {
137            return theme.config == configName;
138        })[0];
139        // Fallback to default theme
140        return (!!configTheme)? configTheme.id : 0;
141    }
142
143    function update() {
144        var $book = gitbook.state.$book;
145
146        $('.font-settings .font-family-list li').removeClass('active');
147        $('.font-settings .font-family-list li:nth-child('+(fontState.family+1)+')').addClass('active');
148
149        $book[0].className = $book[0].className.replace(/\bfont-\S+/g, '');
150        $book.addClass('font-size-'+fontState.size);
151        $book.addClass('font-family-'+fontState.family);
152
153        if(fontState.theme !== 0) {
154            $book[0].className = $book[0].className.replace(/\bcolor-theme-\S+/g, '');
155            $book.addClass('color-theme-'+fontState.theme);
156        }
157    }
158
159    function init(config) {
160        // Search for plugin configured font family
161        var configFamily = getFontFamilyId(config.family),
162            configTheme = getThemeId(config.theme);
163
164        // Instantiate font state object
165        fontState = gitbook.storage.get('fontState', {
166            size:   config.size || 2,
167            family: configFamily,
168            theme:  configTheme
169        });
170
171        update();
172    }
173
174    function updateButtons() {
175        // Remove existing fontsettings buttons
176        if (!!BUTTON_ID) {
177            gitbook.toolbar.removeButton(BUTTON_ID);
178        }
179
180        // Create buttons in toolbar
181        BUTTON_ID = gitbook.toolbar.createButton({
182            icon: 'fa fa-font',
183            label: 'Font Settings',
184            className: 'font-settings',
185            dropdown: [
186                [
187                    {
188                        text: 'A',
189                        className: 'font-reduce',
190                        onClick: reduceFontSize
191                    },
192                    {
193                        text: 'A',
194                        className: 'font-enlarge',
195                        onClick: enlargeFontSize
196                    }
197                ],
198                $.map(FAMILIES, function(family) {
199                    family.onClick = function(e) {
200                        return changeFontFamily(family.config, e);
201                    };
202
203                    return family;
204                }),
205                $.map(THEMES, function(theme) {
206                    theme.onClick = function(e) {
207                        return changeColorTheme(theme.config, e);
208                    };
209
210                    return theme;
211                })
212            ]
213        });
214    }
215
216    // Init configuration at start

217    gitbook.events.bind('start', function(e, config) {
218        var opts = config.fontsettings;
219
220        // Generate buttons at start
221        updateButtons();
222
223        // Init current settings
224        init(opts);
225    });
226
227    // Expose API
228    gitbook.fontsettings = {
229        enlargeFontSize: enlargeFontSize,
230        reduceFontSize:  reduceFontSize,
231        setTheme:        changeColorTheme,
232        setFamily:       changeFontFamily,
233        getThemes:       getThemes,
234        setThemes:       setThemes,
235        getFamilies:     getFamilies,
236        setFamilies:     setFamilies
237    };
238});
239
240