2
0
mirror of https://github.com/frappe/books.git synced 2024-12-23 19:39:07 +00:00
books/client/ui/dropdown.js

91 lines
2.6 KiB
JavaScript
Raw Normal View History

2018-01-16 06:09:17 +00:00
const frappe = require('frappejs');
2018-01-12 12:25:07 +00:00
class Dropdown {
constructor({parent, label, btn_class = 'btn-secondary', items = []}) {
Object.assign(this, arguments[0]);
this.dropdown_items = [];
this.setup_background_click();
this.make();
// init items
if (this.items) {
for (item of this.items) {
this.add_item(item.label, item.action);
}
}
}
setup_background_click() {
if (!document.dropdown_setup) {
frappe.dropdowns = [];
// setup hiding all dropdowns on click
document.addEventListener('click', (event) => {
for (let d of frappe.dropdowns) {
if (d.button !== event.target) {
d.collapse();
}
}
});
document.dropdown_setup = true;
}
frappe.dropdowns.push(this);
}
make() {
this.dropdown = frappe.ui.add('div', 'dropdown', this.parent);
this.make_button();
this.dropdown_menu = frappe.ui.add('div', 'dropdown-menu', this.dropdown);
}
make_button() {
this.button = frappe.ui.add('button', 'btn ' + this.btn_class,
this.dropdown);
frappe.ui.add_class(this.button, 'dropdown-toggle');
this.button.textContent = this.label;
this.button.addEventListener('click', () => {
this.toggle();
});
}
expand() {
this.dropdown.classList.add('show');
this.dropdown_menu.classList.add('show');
}
collapse() {
this.dropdown.classList.remove('show');
this.dropdown_menu.classList.remove('show');
}
toggle() {
this.dropdown.classList.toggle('show');
this.dropdown_menu.classList.toggle('show');
}
add_item(label, action) {
2018-01-16 06:09:17 +00:00
let item = frappe.ui.add('button', 'dropdown-item', this.dropdown_menu);
2018-01-12 12:25:07 +00:00
item.textContent = label;
2018-01-16 06:09:17 +00:00
item.setAttribute('type', 'button');
2018-01-12 12:25:07 +00:00
if (typeof action === 'string') {
item.src = action;
2018-01-16 06:09:17 +00:00
item.addEventListener('click', async () => {
await frappe.router.set_route(action);
2018-01-12 12:25:07 +00:00
this.toggle();
});
} else {
item.addEventListener('click', async () => {
await action();
this.toggle();
});
}
this.dropdown_items.push(item);
}
float_right() {
frappe.ui.add_class(this.dropdown, 'float-right');
frappe.ui.add_class(this.dropdown_menu, 'dropdown-menu-right');
}
}
module.exports = Dropdown;