| gitbook.require(["gitbook", "lodash", "jQuery"], function(gitbook, _, $) { |
| var fontState; |
| |
| var THEMES = { |
| "white": 0, |
| "sepia": 1, |
| "night": 2 |
| }; |
| |
| var FAMILY = { |
| "serif": 0, |
| "sans": 1 |
| }; |
| |
| // Save current font settings |
| function saveFontSettings() { |
| gitbook.storage.set("fontState", fontState); |
| update(); |
| } |
| |
| // Increase font size |
| function enlargeFontSize(e) { |
| e.preventDefault(); |
| if (fontState.size >= 4) return; |
| |
| fontState.size++; |
| saveFontSettings(); |
| }; |
| |
| // Decrease font size |
| function reduceFontSize(e) { |
| e.preventDefault(); |
| if (fontState.size <= 0) return; |
| |
| fontState.size--; |
| saveFontSettings(); |
| }; |
| |
| // Change font family |
| function changeFontFamily(index, e) { |
| e.preventDefault(); |
| |
| fontState.family = index; |
| saveFontSettings(); |
| }; |
| |
| // Change type of color |
| function changeColorTheme(index, e) { |
| e.preventDefault(); |
| |
| var $book = $(".book"); |
| |
| if (fontState.theme !== 0) |
| $book.removeClass("color-theme-"+fontState.theme); |
| |
| fontState.theme = index; |
| if (fontState.theme !== 0) |
| $book.addClass("color-theme-"+fontState.theme); |
| |
| saveFontSettings(); |
| }; |
| |
| 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) { |
| var $bookBody, $book; |
| |
| //Find DOM elements. |
| $book = gitbook.state.$book; |
| $bookBody = $book.find(".book-body"); |
| |
| // Instantiate font state object |
| fontState = gitbook.storage.get("fontState", { |
| size: config.size || 2, |
| family: FAMILY[config.family || "sans"], |
| theme: THEMES[config.theme || "white"] |
| }); |
| |
| update(); |
| }; |
| |
| |
| gitbook.events.bind("start", function(e, config) { |
| var opts = config.fontsettings; |
| |
| // Create buttons in toolbar |
| 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 |
| } |
| ], |
| [ |
| { |
| text: 'Serif', |
| onClick: _.partial(changeFontFamily, 0) |
| }, |
| { |
| text: 'Sans', |
| onClick: _.partial(changeFontFamily, 1) |
| } |
| ], |
| [ |
| { |
| text: 'White', |
| onClick: _.partial(changeColorTheme, 0) |
| }, |
| { |
| text: 'Sepia', |
| onClick: _.partial(changeColorTheme, 1) |
| }, |
| { |
| text: 'Night', |
| onClick: _.partial(changeColorTheme, 2) |
| } |
| ] |
| ] |
| }); |
| |
| |
| // Init current settings |
| init(opts); |
| }); |
| }); |
| |
| |