plugin-fontsettings.js 4.0 KB

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