mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-02 22:12:21 +02:00
Abstract various methods
This commit is contained in:
parent
920d41d0f5
commit
30c31a406c
|
@ -120,9 +120,9 @@ class Choices {
|
||||||
this.presetItems = this.config.items;
|
this.presetItems = this.config.items;
|
||||||
|
|
||||||
// Then add any values passed from attribute
|
// Then add any values passed from attribute
|
||||||
if (this.passedElement.element.value) {
|
if (this.passedElement.getValue()) {
|
||||||
this.presetItems = this.presetItems.concat(
|
this.presetItems = this.presetItems.concat(
|
||||||
this.passedElement.element.value.split(this.config.delimiter),
|
this.passedElement.getValue().split(this.config.delimiter),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -218,15 +218,7 @@ class Choices {
|
||||||
// Remove all event listeners
|
// Remove all event listeners
|
||||||
this._removeEventListeners();
|
this._removeEventListeners();
|
||||||
this.passedElement.reveal();
|
this.passedElement.reveal();
|
||||||
|
this.containerOuter.revert(this.passedElement.element);
|
||||||
// Move passed element back to original position
|
|
||||||
this.containerOuter.element.parentNode.insertBefore(
|
|
||||||
this.passedElement.element,
|
|
||||||
this.containerOuter.element,
|
|
||||||
);
|
|
||||||
|
|
||||||
// Remove added elements
|
|
||||||
this.containerOuter.element.parentNode.removeChild(this.containerOuter.element);
|
|
||||||
|
|
||||||
// Clear data store
|
// Clear data store
|
||||||
this.clearStore();
|
this.clearStore();
|
||||||
|
@ -1446,7 +1438,7 @@ class Choices {
|
||||||
this.canSearch = false;
|
this.canSearch = false;
|
||||||
if (
|
if (
|
||||||
this.config.removeItems &&
|
this.config.removeItems &&
|
||||||
!this.input.element.value &&
|
!this.input.getValue() &&
|
||||||
this.input.element === document.activeElement
|
this.input.element === document.activeElement
|
||||||
) {
|
) {
|
||||||
// Highlight items
|
// Highlight items
|
||||||
|
@ -1458,7 +1450,7 @@ class Choices {
|
||||||
const onEnterKey = () => {
|
const onEnterKey = () => {
|
||||||
// If enter key is pressed and the input has a value
|
// If enter key is pressed and the input has a value
|
||||||
if (this.isTextElement && target.value) {
|
if (this.isTextElement && target.value) {
|
||||||
const value = this.input.element.value;
|
const value = this.input.getValue();
|
||||||
const canAddItem = this._canAddItem(activeItems, value);
|
const canAddItem = this._canAddItem(activeItems, value);
|
||||||
|
|
||||||
// All is good, add
|
// All is good, add
|
||||||
|
@ -1585,7 +1577,7 @@ class Choices {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const value = this.input.element.value;
|
const value = this.input.getValue();
|
||||||
const activeItems = this.store.getItemsFilteredByActive();
|
const activeItems = this.store.getItemsFilteredByActive();
|
||||||
const canAddItem = this._canAddItem(activeItems, value);
|
const canAddItem = this._canAddItem(activeItems, value);
|
||||||
|
|
||||||
|
@ -1620,7 +1612,7 @@ class Choices {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
} else if (this.canSearch && canAddItem.response) {
|
} else if (this.canSearch && canAddItem.response) {
|
||||||
this._handleSearch(this.input.element.value);
|
this._handleSearch(this.input.getValue());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Re-establish canSearch value from changes in _onKeyDown
|
// Re-establish canSearch value from changes in _onKeyDown
|
||||||
|
|
|
@ -13,6 +13,10 @@ export default class Container {
|
||||||
this.onBlur = this.onBlur.bind(this);
|
this.onBlur = this.onBlur.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getElement() {
|
||||||
|
return this.element;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add event listeners
|
* Add event listeners
|
||||||
*/
|
*/
|
||||||
|
@ -155,6 +159,16 @@ export default class Container {
|
||||||
this.isDisabled = true;
|
this.isDisabled = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
revert(originalElement) {
|
||||||
|
// Move passed element back to original position
|
||||||
|
this.element.parentNode.insertBefore(
|
||||||
|
originalElement,
|
||||||
|
this.element,
|
||||||
|
);
|
||||||
|
// Remove container
|
||||||
|
this.element.parentNode.removeChild(this.element);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Add loading state to element
|
* Add loading state to element
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -8,6 +8,10 @@ export default class Dropdown {
|
||||||
this.isActive = false;
|
this.isActive = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getElement() {
|
||||||
|
return this.element;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Determine how far the top of our element is from
|
* Determine how far the top of our element is from
|
||||||
* the top of the window
|
* the top of the window
|
||||||
|
|
|
@ -15,6 +15,10 @@ export default class Input {
|
||||||
this.onBlur = this.onBlur.bind(this);
|
this.onBlur = this.onBlur.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getElement() {
|
||||||
|
return this.element;
|
||||||
|
}
|
||||||
|
|
||||||
addEventListeners() {
|
addEventListeners() {
|
||||||
this.element.addEventListener('input', this.onInput);
|
this.element.addEventListener('input', this.onInput);
|
||||||
this.element.addEventListener('paste', this.onPaste);
|
this.element.addEventListener('paste', this.onPaste);
|
||||||
|
|
|
@ -8,6 +8,10 @@ export default class List {
|
||||||
this.hasChildren = !!this.element.children;
|
this.hasChildren = !!this.element.children;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getElement() {
|
||||||
|
return this.element;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Clear List contents
|
* Clear List contents
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -8,6 +8,14 @@ export default class WrappedElement {
|
||||||
this.isDisabled = false;
|
this.isDisabled = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getElement() {
|
||||||
|
return this.element;
|
||||||
|
}
|
||||||
|
|
||||||
|
getValue() {
|
||||||
|
return this.element.value;
|
||||||
|
}
|
||||||
|
|
||||||
conceal() {
|
conceal() {
|
||||||
// Hide passed input
|
// Hide passed input
|
||||||
this.element.classList.add(
|
this.element.classList.add(
|
||||||
|
|
|
@ -8,6 +8,10 @@ export default class WrappedInput extends WrappedElement {
|
||||||
this.classNames = classNames;
|
this.classNames = classNames;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getElement() {
|
||||||
|
super.getElement();
|
||||||
|
}
|
||||||
|
|
||||||
conceal() {
|
conceal() {
|
||||||
super.conceal();
|
super.conceal();
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,6 +8,10 @@ export default class WrappedSelect extends WrappedElement {
|
||||||
this.classNames = classNames;
|
this.classNames = classNames;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getElement() {
|
||||||
|
super.getElement();
|
||||||
|
}
|
||||||
|
|
||||||
conceal() {
|
conceal() {
|
||||||
super.conceal();
|
super.conceal();
|
||||||
}
|
}
|
||||||
|
@ -40,5 +44,4 @@ export default class WrappedSelect extends WrappedElement {
|
||||||
getOptionGroups() {
|
getOptionGroups() {
|
||||||
return Array.from(this.element.getElementsByTagName('OPTGROUP'));
|
return Array.from(this.element.getElementsByTagName('OPTGROUP'));
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue