Fix #218: keep state of font settings

theme/javascript/core/font-settings.js

@@ -30,40 +30,23 @@ define([
     };
 
     var enlargeFontSize = function(e){
-        var $bookBody = $(".book-body");
-
         if (fontState.size < 4){
-            $bookBody.toggleClass("font-size-"+fontState.size, false);
             fontState.size++;
-
-            $bookBody.toggleClass("font-size-"+fontState.size, true);
             fontState.save();
         }
     };
 
     var reduceFontSize = function(e){
-        var $bookBody = $(".book-body");
-
         if (fontState.size > 0){
-            $bookBody.toggleClass("font-size-"+fontState.size);
             fontState.size--;
-
-            $bookBody.toggleClass("font-size-"+fontState.size);
             fontState.save();
         }
     };
 
     var changeFontFamily = function(){
-        var $bookBody = $(".book-body");
         var index = $(this).data("font");
 
-        $bookBody.toggleClass("font-family-"+fontState.family);
-        $(".font-settings .font-family-list li:nth-child("+(fontState.family+1)+")")
-            .removeClass("active");
-
         fontState.family = index;
-        $bookBody.toggleClass("font-family-"+fontState.family);
-        $(this).addClass("active");
         fontState.save();
     };
 
@@ -81,6 +64,22 @@ define([
         fontState.save();
     };
 
+    var update = function() {
+        var $book = $(".book");
+
+        $(".font-settings .font-family-list li").removeClass("active");
+        $(".font-settings .font-family-list li:nth-child("+(fontState.family+1)+")").addClass("active");
+
+        $book[0].className = $book[0].className.replace(/\bfont-\S+/g, '');
+        $book.addClass("font-size-"+fontState.size);
+        $book.addClass("font-family-"+fontState.family);
+
+        if(fontState.theme !== 0) {
+            $book[0].className = $book[0].className.replace(/\bcolor-theme-\S+/g, '');
+            $book.addClass("color-theme-"+fontState.theme);
+        }
+    };
+
     var init = function(config) {
         var $toggle, $bookBody, $dropdown, $book;
 
@@ -98,15 +97,10 @@ define([
         });
         fontState.save = function(){
             storage.set("fontState",fontState);
+            update();
         };
 
-        $bookBody.addClass("font-size-"+fontState.size);
-        $bookBody.addClass("font-family-"+fontState.family);
-
-        $(".font-settings .font-family-list li:nth-child("+(fontState.family+1)+")").addClass("active");
-
-        if(fontState.theme !== 0)
-            $book.addClass("color-theme-"+fontState.theme);
+        update();
 
         //Add event listeners
         $(document).on('click', "#enlarge-font-size", enlargeFontSize);
@@ -121,6 +115,7 @@ define([
     };
 
     return {
-        init: init
+        init: init,
+        update: update
     }
 });

theme/javascript/core/navigation.js

@@ -47,10 +47,12 @@ define([
             $("head").html(headContent);
 
             // Merge body
+            var bodyClass = $(".book").attr("class");
             var scrollPosition = $('.book-summary .summary').scrollTop();
             $pageBody.toggleClass("with-summary", $(".book").hasClass("with-summary"))
 
             $(".book").replaceWith($pageBody);
+            $(".book").attr("class", bodyClass);
             $('.book-summary .summary').scrollTop(scrollPosition);
 
             // Update state