mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-17 13:06:34 +02:00
Update dropdown methods
This commit is contained in:
parent
b86b8f0ed0
commit
67fe5d7dda
|
@ -754,8 +754,7 @@ class Choices {
|
|||
|
||||
this.containerOuter.classList.add(this.config.classNames.openState);
|
||||
this.containerOuter.setAttribute('aria-expanded', 'true');
|
||||
this.dropdown.element.classList.add(this.config.classNames.activeState);
|
||||
this.dropdown.element.setAttribute('aria-expanded', 'true');
|
||||
this.dropdown.show();
|
||||
|
||||
const dimensions = this.dropdown.element.getBoundingClientRect();
|
||||
const dropdownPos = Math.ceil(dimensions.top + window.scrollY + this.dropdown.offsetHeight);
|
||||
|
@ -794,8 +793,7 @@ class Choices {
|
|||
|
||||
this.containerOuter.classList.remove(this.config.classNames.openState);
|
||||
this.containerOuter.setAttribute('aria-expanded', 'false');
|
||||
this.dropdown.element.classList.remove(this.config.classNames.activeState);
|
||||
this.dropdown.element.setAttribute('aria-expanded', 'false');
|
||||
this.dropdown.hide();
|
||||
|
||||
if (isFlipped) {
|
||||
this.containerOuter.classList.remove(this.config.classNames.flippedState);
|
||||
|
@ -817,13 +815,7 @@ class Choices {
|
|||
* @public
|
||||
*/
|
||||
toggleDropdown() {
|
||||
const hasActiveDropdown = this.dropdown.element.classList.contains(this.config.classNames.activeState);
|
||||
if (hasActiveDropdown) {
|
||||
this.hideDropdown();
|
||||
} else {
|
||||
this.showDropdown(true);
|
||||
}
|
||||
|
||||
this.dropdown.toggle();
|
||||
return this;
|
||||
}
|
||||
|
||||
|
@ -1246,7 +1238,7 @@ class Choices {
|
|||
const id = element.getAttribute('data-id');
|
||||
const choice = this.store.getChoiceById(id);
|
||||
const passedKeyCode = activeItems[0] && activeItems[0].keyCode ? activeItems[0].keyCode : null;
|
||||
const hasActiveDropdown = this.dropdown.element.classList.contains(this.config.classNames.activeState);
|
||||
const hasActiveDropdown = this.dropdown.isActive;
|
||||
|
||||
// Update choice keyCode
|
||||
choice.keyCode = passedKeyCode;
|
||||
|
@ -1602,7 +1594,7 @@ class Choices {
|
|||
const target = e.target;
|
||||
const activeItems = this.store.getItemsFilteredByActive();
|
||||
const hasFocusedInput = this.input === document.activeElement;
|
||||
const hasActiveDropdown = this.dropdown.element.classList.contains(this.config.classNames.activeState);
|
||||
const hasActiveDropdown = this.dropdown.isActive;
|
||||
const hasItems = this.itemList && this.itemList.children;
|
||||
const keyString = String.fromCharCode(e.keyCode);
|
||||
|
||||
|
@ -1678,7 +1670,7 @@ class Choices {
|
|||
|
||||
const onEscapeKey = () => {
|
||||
if (hasActiveDropdown) {
|
||||
this.toggleDropdown();
|
||||
this.dropdown.hide();
|
||||
this.containerOuter.focus();
|
||||
}
|
||||
};
|
||||
|
@ -1843,7 +1835,7 @@ class Choices {
|
|||
*/
|
||||
_onTouchEnd(e) {
|
||||
const target = e.target || e.touches[0].target;
|
||||
const hasActiveDropdown = this.dropdown.element.classList.contains(this.config.classNames.activeState);
|
||||
const hasActiveDropdown = this.dropdown.isActive;
|
||||
|
||||
// If a user tapped within our container...
|
||||
if (this.wasTap === true && this.containerOuter.contains(target)) {
|
||||
|
@ -1911,7 +1903,7 @@ class Choices {
|
|||
*/
|
||||
_onClick(e) {
|
||||
const target = e.target;
|
||||
const hasActiveDropdown = this.dropdown.element.classList.contains(this.config.classNames.activeState);
|
||||
const hasActiveDropdown = this.dropdown.isActive;
|
||||
const activeItems = this.store.getItemsFilteredByActive();
|
||||
|
||||
// If target is something that concerns us
|
||||
|
@ -2707,7 +2699,7 @@ class Choices {
|
|||
this.input = input;
|
||||
this.choiceList = choiceList;
|
||||
this.itemList = itemList;
|
||||
this.dropdown = new Dropdown(this, dropdown);
|
||||
this.dropdown = new Dropdown(this, dropdown, this.config.classNames);
|
||||
|
||||
// Hide passed input
|
||||
this.passedElement.classList.add(
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
export default class Dropdown {
|
||||
constructor(instance, element) {
|
||||
constructor(instance, element, classNames) {
|
||||
this.instance = instance;
|
||||
this.element = element;
|
||||
this.classNames = classNames;
|
||||
this.dimensions = this.element.getBoundingClientRect();
|
||||
this.position = Math.ceil(this.dimensions.top + window.scrollY + this.element.offsetHeight);
|
||||
this.isActive = false;
|
||||
|
@ -14,9 +15,9 @@ export default class Dropdown {
|
|||
*/
|
||||
toggle() {
|
||||
if (this.isActive) {
|
||||
this.hideDropdown();
|
||||
this.hide();
|
||||
} else {
|
||||
this.showDropdown();
|
||||
this.show();
|
||||
}
|
||||
|
||||
return this.instance;
|
||||
|
@ -28,8 +29,8 @@ export default class Dropdown {
|
|||
* @public
|
||||
*/
|
||||
show() {
|
||||
this.dropdown.classList.add(this.config.classNames.activeState);
|
||||
this.dropdown.setAttribute('aria-expanded', 'true');
|
||||
this.element.classList.add(this.classNames.activeState);
|
||||
this.element.setAttribute('aria-expanded', 'true');
|
||||
this.isActive = true;
|
||||
return this.instance;
|
||||
}
|
||||
|
@ -40,7 +41,7 @@ export default class Dropdown {
|
|||
* @public
|
||||
*/
|
||||
hide() {
|
||||
this.element.classList.remove(this.config.classNames.activeState);
|
||||
this.element.classList.remove(this.classNames.activeState);
|
||||
this.element.setAttribute('aria-expanded', 'false');
|
||||
this.isActive = false;
|
||||
return this.instance;
|
||||
|
|
|
@ -763,10 +763,10 @@ describe('Choices', () => {
|
|||
});
|
||||
|
||||
it('should handle toggleDropdown()', function() {
|
||||
spyOn(this.choices, 'hideDropdown');
|
||||
this.choices.showDropdown();
|
||||
this.choices.toggleDropdown();
|
||||
expect(this.choices.hideDropdown).toHaveBeenCalled();
|
||||
spyOn(this.choices.dropdown, 'hide');
|
||||
this.choices.dropdown.show();
|
||||
this.choices.dropdown.toggle();
|
||||
expect(this.choices.dropdown.hide).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should handle hideDropdown()', function() {
|
||||
|
|
Loading…
Reference in a new issue