選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

plugin-fontsettings.js 3.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  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. // Create buttons in toolbar
  76. gitbook.toolbar.createButton({
  77. icon: 'fa fa-font',
  78. label: 'Font Settings',
  79. className: 'font-settings',
  80. dropdown: [
  81. [
  82. {
  83. text: 'A',
  84. className: 'font-reduce',
  85. onClick: reduceFontSize
  86. },
  87. {
  88. text: 'A',
  89. className: 'font-enlarge',
  90. onClick: enlargeFontSize
  91. }
  92. ],
  93. [
  94. {
  95. text: 'Serif',
  96. onClick: _.partial(changeFontFamily, 0)
  97. },
  98. {
  99. text: 'Sans',
  100. onClick: _.partial(changeFontFamily, 1)
  101. }
  102. ],
  103. [
  104. {
  105. text: 'White',
  106. onClick: _.partial(changeColorTheme, 0)
  107. },
  108. {
  109. text: 'Sepia',
  110. onClick: _.partial(changeColorTheme, 1)
  111. },
  112. {
  113. text: 'Night',
  114. onClick: _.partial(changeColorTheme, 2)
  115. }
  116. ]
  117. ]
  118. });
  119. // Init current settings
  120. init(opts);
  121. });
  122. });