1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
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
}
});
|
