123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240 |
- 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;
- // Remove currently applied color theme
- if (fontState.theme !== 0)
- $book.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);
- 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
- };
- });
|