gitbook/theme/javascript/core/font-settings.js

define([
  "jQuery",
  "utils/storage"
  ], function($, storage) {
  var fontState, toggle,bookBody,dropdown, book;

  var togglePopover = function(e) {
    dropdown.toggleClass("open");
    e.stopPropagation();
    e.preventDefault();
  };
  
  var closePopover = function(e) {
    dropdown.removeClass("open");
  }

  var enlargeFontSize = function(e){
    if (fontState.size < 4){
      bookBody.toggleClass("font-size-"+fontState.size);
      fontState.size++;
      bookBody.toggleClass("font-size-"+fontState.size);
      fontState.save();
    }
  };
  
  var reduceFontSize = function(e){
    if (fontState.size > 0){
      bookBody.toggleClass("font-size-"+fontState.size);
      fontState.size--;
      bookBody.toggleClass("font-size-"+fontState.size);
      fontState.save();
    }
  };

  var changeFontFamily = function(index,el){
      bookBody.toggleClass("font-family-"+fontState.family);
      $($(".font-settings .font-family-list li:nth-child("+(fontState.family+1)+")")[0])
        .removeClass("active");
  
      fontState.family = index;
      bookBody.toggleClass("font-family-"+fontState.family);
      el.addClass("active");
      fontState.save();
  }

  var changeColorTheme = function(index){
      if (fontState.theme !== 0)
        book.removeClass("color-theme-"+fontState.theme);
      fontState.theme = index;
      if (fontState.theme !== 0)
        book.addClass("color-theme-"+fontState.theme);
      fontState.save();
  }

  var init = function() {
    //Find and save DOM elements.
    book = $($(".book")[0]);
    toggle = $(book.find(".book-header .toggle-font-settings")[0]);
    dropdown = $(book.find("#font-settings-wrapper .dropdown-menu")[0]);
    bookBody = $(book.find(".book-body")[0]);
    //Instantiate font state object 
    fontState = storage.get("fontState", {size:1,family:0,theme:0});
    bookBody.addClass("font-size-"+fontState.size);
    bookBody.addClass("font-family-"+fontState.family);
    $($(".font-settings .font-family-list li:nth-child("+(fontState.family+1)+")")[0])
        .addClass("active");
    if(fontState.theme !== 0)
      book.addClass("color-theme-"+fontState.theme);
    fontState.save = function(){
      storage.set("fontState",fontState);
    };
    //Add event listeners
    $("#enlarge-font-size").on("click", enlargeFontSize);
    $("#reduce-font-size").on("click", reduceFontSize);
    $(dropdown.find(".font-family-list li")).each(function(i){
      $(this).on("click",function(){changeFontFamily(i,$(this))});
    });
    $(dropdown.find(".color-theme-list button")).each(function(i){
      $(this).on("click",function(){changeColorTheme(i)});
    });
    toggle.on("click", togglePopover);
    dropdown.on("click",function(e){e.stopPropagation();});
    $(document).on("click", closePopover);
  };
  
  return {
    init: init
  }
});