github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-04 17:04:32 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Added ability for dropdown menu to be bottom of dom body

Browse Source 
- 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.
This commit is contained in:
Dan Brown
2019-05-05 14:43:26 +01:00
parent ad542f0407
commit adc866cb3d
12 changed files with 66 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
resources/assets/js/components/dropdown.js
View File

@ -6,24 +6,54 @@ class DropDown {
constructor(elem) {
this.container = elem;
this.menu = elem.querySelector('ul, [dropdown-menu]');
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() {
show(event) {
this.hide();
this.menu.style.display = 'block';
this.menu.classList.add('anim', 'menuIn');
this.container.addEventListener('mouseleave', this.hide.bind(this));
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() {

9
resources/assets/js/components/list-sort-control.js
View File

@ -6,20 +6,23 @@ class ListSortControl {
constructor(elem) {
this.elem = elem;
this.menu = elem.querySelector('ul');
this.sortInput = elem.querySelector('[name="sort"]');
this.orderInput = elem.querySelector('[name="order"]');
this.form = elem.querySelector('form');
this.elem.addEventListener('click', event => {
this.menu.addEventListener('click', event => {
if (event.target.closest('[data-sort-value]') !== null) {
this.sortOptionClick(event);
}
});
this.elem.addEventListener('click', event => {
if (event.target.closest('[data-sort-dir]') !== null) {
this.sortDirectionClick(event);
}
})
});
}
sortOptionClick(event) {