3 * Provides some simple logic to create simple dropdown menus.
9 this.menu = elem.querySelector('.dropdown-menu, [dropdown-menu]');
10 this.moveMenu = elem.hasAttribute('dropdown-move-menu');
11 this.toggle = elem.querySelector('[dropdown-toggle]');
12 this.body = document.body;
13 this.setupListeners();
19 this.menu.style.display = 'block';
20 this.menu.classList.add('anim', 'menuIn');
23 // Move to body to prevent being trapped within scrollable sections
24 this.rect = this.menu.getBoundingClientRect();
25 this.body.appendChild(this.menu);
26 this.menu.style.position = 'fixed';
27 this.menu.style.left = `${this.rect.left}px`;
28 this.menu.style.top = `${this.rect.top}px`;
29 this.menu.style.width = `${this.rect.width}px`;
32 // Set listener to hide on mouse leave or window click
33 this.menu.addEventListener('mouseleave', this.hide.bind(this));
34 window.addEventListener('click', event => {
35 if (!this.menu.contains(event.target)) {
40 // Focus on first input if existing
41 let input = this.menu.querySelector('input');
42 if (input !== null) input.focus();
44 event.stopPropagation();
48 this.menu.style.display = 'none';
49 this.menu.classList.remove('anim', 'menuIn');
51 this.menu.style.position = '';
52 this.menu.style.left = '';
53 this.menu.style.top = '';
54 this.menu.style.width = '';
55 this.container.appendChild(this.menu);
60 // Hide menu on option click
61 this.container.addEventListener('click', event => {
62 let possibleChildren = Array.from(this.menu.querySelectorAll('a'));
63 if (possibleChildren.indexOf(event.target) !== -1) this.hide();
65 // Show dropdown on toggle click
66 this.toggle.addEventListener('click', this.show.bind(this));
67 // Hide menu on enter press
68 this.container.addEventListener('keypress', event => {
69 if (event.keyCode !== 13) return true;
70 event.preventDefault();
78 export default DropDown;