/**
* Dropdown
* Provides some simple logic to create simple dropdown menus.
+ * @extends {Component}
*/
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]');
+ setup() {
+ this.container = this.$el;
+ this.menu = this.$refs.menu;
+ this.toggle = this.$refs.toggle;
+ this.moveMenu = this.$opts.moveMenu;
+ this.bubbleEscapes = this.$opts.bubbleEscapes === 'true';
+
this.direction = (document.dir === 'rtl') ? 'right' : 'left';
this.body = document.body;
this.showing = false;
this.setupListeners();
+ this.hide = this.hide.bind(this);
}
show(event = null) {
} else if (event.key === 'Escape') {
this.hide();
this.toggle.focus();
- event.stopPropagation();
+ if (!this.bubbleEscapes) {
+ event.stopPropagation();
+ }
}
};
this.container.addEventListener('keydown', keyboardNavigation);