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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
|
var $ = require('jquery');
var _ = require('lodash');
var events = require('./events');
// List of created buttons
var buttons = [];
// Insert a jquery element at a specific position
function insertAt(parent, selector, index, element) {
var lastIndex = parent.children(selector).size();
if (index < 0) {
index = Math.max(0, lastIndex + 1 + index);
}
parent.append(element);
if (index < lastIndex) {
parent.children(selector).eq(index).before(parent.children(selector).last());
}
}
// 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,
// Position in the toolbar
index: null
});
buttons.push(opts);
updateButton(opts);
}
// Update a button
function updateButton(opts) {
var $result;
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? ' ' + 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);
// Menu position
$menu.addClass('dropdown-'+(opts.position == 'right'? 'left' : 'right'));
$container.append($menu);
$result = $container;
} else {
$btn.addClass(positionClass);
$btn.addClass(opts.className);
$result = $btn;
}
$result.addClass('js-toolbar-action');
if (_.isNumber(opts.index) && opts.index >= 0) {
insertAt($toolbar, '.btn, .dropdown, h1', opts.index, $result);
} else {
$result.insertBefore($title);
}
}
// Update all buttons
function updateAllButtons() {
$('.js-toolbar-action').remove();
_.each(buttons, updateButton);
}
// When page changed, reset buttons
events.bind('page.change', function() {
updateAllButtons();
});
module.exports = {
createButton: createButton
};
|
