Font settings, closes #102

theme/javascript/app.js

@@ -9,8 +9,9 @@ require([
     "core/navigation",
     "core/progress",
     "core/sidebar",
-    "core/search"
-], function($, storage, analytic, sharing, state, keyboard, navigation, progress, sidebar, search){
+    "core/search",
+    "core/font-settings"
+], function($, storage, analytic, sharing, state, keyboard, navigation, progress, sidebar, search, fontSettings){
     $(document).ready(function() {
         var $book;
         $book = state.$book;
@@ -34,5 +35,8 @@ require([
         
         // Init navigation
         navigation.init();
+
+        //Init font settings 
+        fontSettings.init();
     });
 });

theme/javascript/core/font-settings.js

@@ -0,0 +1,89 @@
+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
+  }
+});