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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
define([
'jQuery',
'lodash',
'core/events'
], function($, _, events) {
// List of created buttons
var buttons = [];
// Default click handler
function defaultOnClick(e) {
e.preventDefault();
}
// Create a dropdown menu
function createDropdownMenu(dropdown) {
var $menu = $('<div>', {
'class': 'dropdown-menu',
'html': '<div class="dropdown-caret"><span class="caret-outer"></span><span class="caret-inner"></span></div>'
});
if (_.isString(dropdown)) {
$menu.append(dropdown);
} else {
var groups = _.map(dropdown, function(group) {
if (_.isArray(group)) return group;
else return [group];
});
// Create buttons groups
_.each(groups, function(group) {
var $group = $('<div>', {
'class': 'buttons'
});
var sizeClass = 'size-'+group.length;
// Append buttons
_.each(group, function(btn) {
btn = _.defaults(btn || {}, {
text: '',
className: '',
onClick: defaultOnClick
});
var $btn = $('<button>', {
'class': 'button '+sizeClass+' '+btn.className,
'text': btn.text
});
$btn.click(btn.onClick);
$group.append($btn);
});
$menu.append($group);
});
}
return $menu;
}
// Create a new button in the toolbar
function createButton(opts) {
opts = _.defaults(opts || {}, {
// Aria label for the button
label: '',
// Icon to show
icon: '',
// Inner text
text: '',
// Right or left position
position: 'left',
// Other class name to add to the button
className: '',
// Triggered when user click on the button
onClick: defaultOnClick,
// Button is a dropdown
dropdown: null
});
buttons.push(opts);
updateButton(opts);
}
// Update a button
function updateButton(opts) {
var $toolbar = $('.book-header');
var $title = $toolbar.find('h1');
// Build class name
var positionClass = 'pull-'+opts.position;
// Create button
var $btn = $('<a>', {
'class': 'btn',
'text': opts.text,
'aria-label': opts.label,
'href': '#'
});
// Bind click
$btn.click(opts.onClick);
// Prepend icon
if (opts.icon) {
$('<i>', {
'class': opts.icon
}).prependTo($btn);
}
// Prepare dropdown
if (opts.dropdown) {
var $container = $('<div>', {
'class': 'dropdown '+positionClass+' '+opts.className
});
// Add button to container
$btn.addClass('toggle-dropdown');
$container.append($btn);
// Create inner menu
var $menu = createDropdownMenu(opts.dropdown);
$container.append($menu);
$container.insertBefore($title);
} else {
$btn.addClass(positionClass);
$btn.addClass(opts.className);
$btn.insertBefore($title);
}
}
// Update all buttons
function updateAllButtons() {
_.each(buttons, updateButton);
}
// When page changed, reset buttons
events.bind('page.change', function() {
updateAllButtons();
});
return {
createButton: createButton
};
});
|
