mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-09-20 00:06:42 +00:00
adc866cb3d
- Used when a dropdown is within a scrollable section such as editor toolbar on mobile. - Also made mobile page save button more obvious by increasing size and inverting color.
78 lines
2.5 KiB
JavaScript
78 lines
2.5 KiB
JavaScript
/**
|
|
* Dropdown
|
|
* Provides some simple logic to create simple dropdown menus.
|
|
*/
|
|
class DropDown {
|
|
|
|
constructor(elem) {
|
|
this.container = elem;
|
|
this.menu = elem.querySelector('.dropdown-menu, [dropdown-menu]');
|
|
this.moveMenu = elem.hasAttribute('dropdown-move-menu');
|
|
this.toggle = elem.querySelector('[dropdown-toggle]');
|
|
this.body = document.body;
|
|
this.setupListeners();
|
|
}
|
|
|
|
show(event) {
|
|
this.hide();
|
|
|
|
this.menu.style.display = 'block';
|
|
this.menu.classList.add('anim', 'menuIn');
|
|
|
|
if (this.moveMenu) {
|
|
// Move to body to prevent being trapped within scrollable sections
|
|
this.rect = this.menu.getBoundingClientRect();
|
|
this.body.appendChild(this.menu);
|
|
this.menu.style.position = 'fixed';
|
|
this.menu.style.left = `${this.rect.left}px`;
|
|
this.menu.style.top = `${this.rect.top}px`;
|
|
this.menu.style.width = `${this.rect.width}px`;
|
|
}
|
|
|
|
// Set listener to hide on mouse leave or window click
|
|
this.menu.addEventListener('mouseleave', this.hide.bind(this));
|
|
window.addEventListener('click', event => {
|
|
if (!this.menu.contains(event.target)) {
|
|
this.hide();
|
|
}
|
|
});
|
|
|
|
// Focus on first input if existing
|
|
let input = this.menu.querySelector('input');
|
|
if (input !== null) input.focus();
|
|
|
|
event.stopPropagation();
|
|
}
|
|
|
|
hide() {
|
|
this.menu.style.display = 'none';
|
|
this.menu.classList.remove('anim', 'menuIn');
|
|
if (this.moveMenu) {
|
|
this.menu.style.position = '';
|
|
this.menu.style.left = '';
|
|
this.menu.style.top = '';
|
|
this.menu.style.width = '';
|
|
this.container.appendChild(this.menu);
|
|
}
|
|
}
|
|
|
|
setupListeners() {
|
|
// Hide menu on option click
|
|
this.container.addEventListener('click', event => {
|
|
let possibleChildren = Array.from(this.menu.querySelectorAll('a'));
|
|
if (possibleChildren.indexOf(event.target) !== -1) this.hide();
|
|
});
|
|
// Show dropdown on toggle click
|
|
this.toggle.addEventListener('click', this.show.bind(this));
|
|
// Hide menu on enter press
|
|
this.container.addEventListener('keypress', event => {
|
|
if (event.keyCode !== 13) return true;
|
|
event.preventDefault();
|
|
this.hide();
|
|
return false;
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
export default DropDown; |