require(['gitbook', 'jquery'], function(gitbook, $) { // Configuration var MAX_SIZE = 4, MIN_SIZE = 0, BUTTON_ID; // Current fontsettings state var fontState; // Default themes var THEMES = [ { config: 'white', text: 'White', id: 0 }, { config: 'sepia', text: 'Sepia', id: 1 }, { config: 'night', text: 'Night', id: 2 } ]; // Default font families var 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(); } var familyId = getFontFamilyId(configName); fontState.family = familyId; saveFontSettings(); } // Change type of color theme function changeColorTheme(configName, e) { if (e && e instanceof Event) { e.preventDefault(); } var $book = gitbook.state.$book; var $header = $('.book-body > .book-header'); // Remove currently applied color theme if (fontState.theme !== 0) { $book.removeClass('color-theme-'+fontState.theme); if ($header.length !== 0) { $header.removeClass('color-theme-'+fontState.theme); } } // Set new color theme var themeId = getThemeId(configName); fontState.theme = themeId; if (fontState.theme !== 0) { $book.addClass('color-theme-'+fontState.theme); if ($header.length !== 0) { $header.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 var configFamily = $.grep(FAMILIES, function(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 var configTheme = $.grep(THEMES, function(theme) { return theme.config == configName; })[0]; // Fallback to default theme return (!!configTheme)? configTheme.id : 0; } function update() { var $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 var configFamily = getFontFamilyId(config.family), 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, function(family) { family.onClick = function(e) { return changeFontFamily(family.config, e); }; return family; }), $.map(THEMES, function(theme) { theme.onClick = function(e) { return changeColorTheme(theme.config, e); }; return theme; }) ] }); } // Init configuration at start gitbook.events.bind('start', function(e, config) { var 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 }; });