fontsettings.js 6.3 KB

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