/**
* Copyright (c) 2001-present, Vonage. * * Dropdowns (requires core) */
'use strict';
Volta.dropdown = function () {
var _class = { wrapper: 'Vlt-dropdown', block: 'Vlt-dropdown__block', btn: 'Vlt-dropdown__trigger', btnLegacy: 'Vlt-dropdown__btn', dismissed: 'Vlt-callout--dismissed', expanded: 'Vlt-dropdown--expanded', label: 'Vlt-dropdown__label', link: 'Vlt-dropdown__link', noCloseLink: 'Vlt-dropdown__link--noclose', noCloseBlock: 'Vlt-dropdown__block--noclose', panel: 'Vlt-dropdown__panel', panelContent: 'Vlt-dropdown__panel__content', selection: 'Vlt-dropdown__selection', switch: 'Vlt-switch', switchSlider: 'Vlt-switch__slider' } function Dropdown() {} Dropdown.prototype = { init: function(element, supressClickHandler) { this.dropdown = element; this.selection = this.dropdown.querySelector('.' + _class.selection); this.isSelectionVisible = !!this.selection; this.btn = this.dropdown.querySelector('.' + _class.btn) || this.dropdown.querySelector('.' + _class.btnLegacy); this._suppress = supressClickHandler; if(!this._suppress) { this._addEventListener(); } }, _addEventListener: function(){ var openHandler = this.open.bind(this); this.dropdown.addEventListener('click', openHandler, { once: true }) }, close: function(text) { if(text) { this._setDropdownSelectionText(text); } this.dropdown.classList.remove(_class.expanded); if(!this._suppress){ this._addEventListener(); } }, _closeEventHandler: undefined, _closeEvent: function(e) { var targetIsPanel = Volta._hasClass(e.target, _class.panel); var parentIsPanel = Volta._closest(e.target, '.' + _class.panelContent, _class.panel) !== null; var parentLink = Volta._closest(e.target, '.' + _class.link, _class.wrapper); var parentIsLink = parentLink && parentLink.length === 1; var isSwitchSlider = Volta._hasClass(e.target, _class.switchSlider); var isParentSwitch = Volta._closest(e.target,'.' + _class.switch, _class.link); var isNoClose = Volta._hasClass(e.target, _class.noCloseLink) || Volta._hasClass(e.target, _class.noCloseBlock); var isNoCloseParent = Volta._closest(e.target,'.' + _class.noCloseLink, _class.link) || Volta._closest(e.target,'.' + _class.noCloseBlock, _class.noCloseBlock); var isInput = e.target instanceof HTMLInputElement; if(!targetIsPanel && !parentIsPanel && !parentIsLink && !isNoClose && !isInput && !isNoCloseParent) { e.preventDefault(); e.stopPropagation(); } if(isSwitchSlider || isParentSwitch || isNoClose || isInput || isNoCloseParent) { return null; } var text; if(parentIsPanel && Volta._hasClass(e.target, _class.label)) { text = e.target.innerHTML; } else if (parentIsPanel) { var label = e.target.querySelector('.' + _class.label); if(label) { text = label.innerHTML; } } this.close(text); document.querySelector('body').removeEventListener('click', this._closeEventHandler ); }, open: function(event) { if(event) { event.preventDefault(); event.stopPropagation(); } this.dropdown.classList.add(_class.expanded); if(!this._suppress){ this._closeEventHandler = this._closeEvent.bind(this); document.querySelector('body').addEventListener('click', this._closeEventHandler ); } }, _setDropdownSelectionText: function(text) { if(this.isSelectionVisible) { this.selection.innerText = text; } else { this.btn.innerText = text; this.btn.value = text; } }, _suppress: false } return { create: create, init: attachDropdownHandlers } /** * @public * * @description Attach a listeners to dropdowns */ function attachDropdownHandlers() { document.querySelectorAll('.' + _class.wrapper).forEach(attachHandler); function attachHandler(dropdown) { create(dropdown); } } /** * @private * * @description Create a dropdown element * @param {HTMLElement} element */ function create(element){ var dropdown = Object.create(Dropdown.prototype, {}) dropdown.init(element); return dropdown; }
}();