| Hao Zhu | c145088 | 2018-10-03 17:56:26 -0400 | [diff] [blame] | 1 | gitbook.require(["gitbook", "lodash", "jQuery"], function(gitbook, _, $) { | 
|  | 2 | var fontState; | 
|  | 3 |  | 
|  | 4 | var THEMES = { | 
|  | 5 | "white": 0, | 
|  | 6 | "sepia": 1, | 
|  | 7 | "night": 2 | 
|  | 8 | }; | 
|  | 9 |  | 
|  | 10 | var FAMILY = { | 
|  | 11 | "serif": 0, | 
|  | 12 | "sans": 1 | 
|  | 13 | }; | 
|  | 14 |  | 
|  | 15 | // Save current font settings | 
|  | 16 | function saveFontSettings() { | 
|  | 17 | gitbook.storage.set("fontState", fontState); | 
|  | 18 | update(); | 
|  | 19 | } | 
|  | 20 |  | 
|  | 21 | // Increase font size | 
|  | 22 | function enlargeFontSize(e) { | 
|  | 23 | e.preventDefault(); | 
|  | 24 | if (fontState.size >= 4) return; | 
|  | 25 |  | 
|  | 26 | fontState.size++; | 
|  | 27 | saveFontSettings(); | 
|  | 28 | }; | 
|  | 29 |  | 
|  | 30 | // Decrease font size | 
|  | 31 | function reduceFontSize(e) { | 
|  | 32 | e.preventDefault(); | 
|  | 33 | if (fontState.size <= 0) return; | 
|  | 34 |  | 
|  | 35 | fontState.size--; | 
|  | 36 | saveFontSettings(); | 
|  | 37 | }; | 
|  | 38 |  | 
|  | 39 | // Change font family | 
|  | 40 | function changeFontFamily(index, e) { | 
|  | 41 | e.preventDefault(); | 
|  | 42 |  | 
|  | 43 | fontState.family = index; | 
|  | 44 | saveFontSettings(); | 
|  | 45 | }; | 
|  | 46 |  | 
|  | 47 | // Change type of color | 
|  | 48 | function changeColorTheme(index, e) { | 
|  | 49 | e.preventDefault(); | 
|  | 50 |  | 
|  | 51 | var $book = $(".book"); | 
|  | 52 |  | 
|  | 53 | if (fontState.theme !== 0) | 
|  | 54 | $book.removeClass("color-theme-"+fontState.theme); | 
|  | 55 |  | 
|  | 56 | fontState.theme = index; | 
|  | 57 | if (fontState.theme !== 0) | 
|  | 58 | $book.addClass("color-theme-"+fontState.theme); | 
|  | 59 |  | 
|  | 60 | saveFontSettings(); | 
|  | 61 | }; | 
|  | 62 |  | 
|  | 63 | function update() { | 
|  | 64 | var $book = gitbook.state.$book; | 
|  | 65 |  | 
|  | 66 | $(".font-settings .font-family-list li").removeClass("active"); | 
|  | 67 | $(".font-settings .font-family-list li:nth-child("+(fontState.family+1)+")").addClass("active"); | 
|  | 68 |  | 
|  | 69 | $book[0].className = $book[0].className.replace(/\bfont-\S+/g, ''); | 
|  | 70 | $book.addClass("font-size-"+fontState.size); | 
|  | 71 | $book.addClass("font-family-"+fontState.family); | 
|  | 72 |  | 
|  | 73 | if(fontState.theme !== 0) { | 
|  | 74 | $book[0].className = $book[0].className.replace(/\bcolor-theme-\S+/g, ''); | 
|  | 75 | $book.addClass("color-theme-"+fontState.theme); | 
|  | 76 | } | 
|  | 77 | }; | 
|  | 78 |  | 
|  | 79 | function init(config) { | 
|  | 80 | var $bookBody, $book; | 
|  | 81 |  | 
|  | 82 | //Find DOM elements. | 
|  | 83 | $book = gitbook.state.$book; | 
|  | 84 | $bookBody = $book.find(".book-body"); | 
|  | 85 |  | 
|  | 86 | // Instantiate font state object | 
|  | 87 | fontState = gitbook.storage.get("fontState", { | 
|  | 88 | size: config.size || 2, | 
|  | 89 | family: FAMILY[config.family || "sans"], | 
|  | 90 | theme: THEMES[config.theme || "white"] | 
|  | 91 | }); | 
|  | 92 |  | 
|  | 93 | update(); | 
|  | 94 | }; | 
|  | 95 |  | 
|  | 96 |  | 
|  | 97 | gitbook.events.bind("start", function(e, config) { | 
|  | 98 | var opts = config.fontsettings; | 
|  | 99 |  | 
|  | 100 | // Create buttons in toolbar | 
|  | 101 | gitbook.toolbar.createButton({ | 
|  | 102 | icon: 'fa fa-font', | 
|  | 103 | label: 'Font Settings', | 
|  | 104 | className: 'font-settings', | 
|  | 105 | dropdown: [ | 
|  | 106 | [ | 
|  | 107 | { | 
|  | 108 | text: 'A', | 
|  | 109 | className: 'font-reduce', | 
|  | 110 | onClick: reduceFontSize | 
|  | 111 | }, | 
|  | 112 | { | 
|  | 113 | text: 'A', | 
|  | 114 | className: 'font-enlarge', | 
|  | 115 | onClick: enlargeFontSize | 
|  | 116 | } | 
|  | 117 | ], | 
|  | 118 | [ | 
|  | 119 | { | 
|  | 120 | text: 'Serif', | 
|  | 121 | onClick: _.partial(changeFontFamily, 0) | 
|  | 122 | }, | 
|  | 123 | { | 
|  | 124 | text: 'Sans', | 
|  | 125 | onClick: _.partial(changeFontFamily, 1) | 
|  | 126 | } | 
|  | 127 | ], | 
|  | 128 | [ | 
|  | 129 | { | 
|  | 130 | text: 'White', | 
|  | 131 | onClick: _.partial(changeColorTheme, 0) | 
|  | 132 | }, | 
|  | 133 | { | 
|  | 134 | text: 'Sepia', | 
|  | 135 | onClick: _.partial(changeColorTheme, 1) | 
|  | 136 | }, | 
|  | 137 | { | 
|  | 138 | text: 'Night', | 
|  | 139 | onClick: _.partial(changeColorTheme, 2) | 
|  | 140 | } | 
|  | 141 | ] | 
|  | 142 | ] | 
|  | 143 | }); | 
|  | 144 |  | 
|  | 145 |  | 
|  | 146 | // Init current settings | 
|  | 147 | init(opts); | 
|  | 148 | }); | 
|  | 149 | }); | 
|  | 150 |  | 
|  | 151 |  |