mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-03 06:22:25 +02:00
Use single generate input function
This commit is contained in:
parent
1f547bb065
commit
f661661565
4
assets/scripts/dist/bundle.js
vendored
4
assets/scripts/dist/bundle.js
vendored
File diff suppressed because one or more lines are too long
|
@ -787,64 +787,11 @@ export class Choices {
|
||||||
|
|
||||||
/* Rendering */
|
/* Rendering */
|
||||||
|
|
||||||
/**
|
|
||||||
* Create DOM structure around passed text element
|
|
||||||
* @return
|
|
||||||
*/
|
|
||||||
generateTextInput() {
|
|
||||||
let containerOuter = strToEl(`<div class="${ this.options.classNames.containerOuter }"></div>`);
|
|
||||||
let containerInner = strToEl(`<div class="${ this.options.classNames.containerInner }"></div>`);
|
|
||||||
|
|
||||||
// Hide passed input
|
|
||||||
this.passedElement.classList.add(this.options.classNames.input, this.options.classNames.hiddenState);
|
|
||||||
this.passedElement.tabIndex = '-1';
|
|
||||||
this.passedElement.setAttribute('style', 'display:none;');
|
|
||||||
this.passedElement.setAttribute('aria-hidden', 'true');
|
|
||||||
|
|
||||||
// Wrap input in container preserving DOM ordering
|
|
||||||
wrap(this.passedElement, containerInner);
|
|
||||||
|
|
||||||
// Wrapper inner container with outer container
|
|
||||||
wrap(containerInner, containerOuter);
|
|
||||||
|
|
||||||
let list = strToEl(`<ul class="${ this.options.classNames.list } ${ this.options.classNames.listItems }"></ul>`);
|
|
||||||
let input = strToEl(`<input type="text" class="${ this.options.classNames.input } ${ this.options.classNames.inputCloned }">`);
|
|
||||||
|
|
||||||
// If placeholder has been enabled
|
|
||||||
if (this.options.placeholder) {
|
|
||||||
// ...and we have a value to set
|
|
||||||
const placeholderValue = this.options.placeholderValue || this.passedElement.placeholder;
|
|
||||||
if(placeholderValue) {
|
|
||||||
input.placeholder = placeholderValue;
|
|
||||||
input.style.width = getWidthOfInput(input);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if(!this.options.addItems) {
|
|
||||||
input.disabled = true;
|
|
||||||
containerOuter.classList.add(this.options.classNames.disabledState);
|
|
||||||
}
|
|
||||||
|
|
||||||
containerOuter.appendChild(containerInner);
|
|
||||||
containerInner.appendChild(list);
|
|
||||||
containerInner.appendChild(input);
|
|
||||||
|
|
||||||
this.containerOuter = containerOuter;
|
|
||||||
this.containerInner = containerInner;
|
|
||||||
this.input = input;
|
|
||||||
this.list = list;
|
|
||||||
|
|
||||||
// Add any preset values seperated by delimiter
|
|
||||||
this.presetItems.forEach((value) => {
|
|
||||||
this.addItem(value);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Create DOM structure around passed select element
|
* Create DOM structure around passed select element
|
||||||
* @return
|
* @return
|
||||||
*/
|
*/
|
||||||
generateMultipleSelectInput() {
|
generateInput() {
|
||||||
const containerOuter = strToEl(`<div class="${ this.options.classNames.containerOuter }"></div>`);
|
const containerOuter = strToEl(`<div class="${ this.options.classNames.containerOuter }"></div>`);
|
||||||
const containerInner = strToEl(`<div class="${ this.options.classNames.containerInner }"></div>`);
|
const containerInner = strToEl(`<div class="${ this.options.classNames.containerInner }"></div>`);
|
||||||
|
|
||||||
|
@ -862,7 +809,7 @@ export class Choices {
|
||||||
|
|
||||||
const list = strToEl(`<ul class="${ this.options.classNames.list } ${ this.options.classNames.listItems }"></ul>`);
|
const list = strToEl(`<ul class="${ this.options.classNames.list } ${ this.options.classNames.listItems }"></ul>`);
|
||||||
const input = strToEl(`<input type="text" class="${ this.options.classNames.input } ${ this.options.classNames.inputCloned }">`);
|
const input = strToEl(`<input type="text" class="${ this.options.classNames.input } ${ this.options.classNames.inputCloned }">`);
|
||||||
const dropdown = strToEl(`<div class="${ this.options.classNames.list } ${ this.options.classNames.listDropdown }"></div>`);
|
|
||||||
|
|
||||||
// If placeholder has been enabled and we have a value
|
// If placeholder has been enabled and we have a value
|
||||||
if (this.options.placeholder && this.options.placeholderValue) {
|
if (this.options.placeholder && this.options.placeholderValue) {
|
||||||
|
@ -872,78 +819,65 @@ export class Choices {
|
||||||
|
|
||||||
if(!this.options.addItems) {
|
if(!this.options.addItems) {
|
||||||
input.disabled = true;
|
input.disabled = true;
|
||||||
|
containerOuter.classList.add(this.options.classNames.disabledState);
|
||||||
}
|
}
|
||||||
|
|
||||||
containerOuter.appendChild(containerInner);
|
containerOuter.appendChild(containerInner);
|
||||||
containerOuter.appendChild(dropdown);
|
|
||||||
containerInner.appendChild(list);
|
containerInner.appendChild(list);
|
||||||
containerInner.appendChild(input);
|
containerInner.appendChild(input);
|
||||||
|
|
||||||
|
if(this.passedElement.type === 'select-multiple') {
|
||||||
|
this.highlightPosition = 0;
|
||||||
|
const dropdown = strToEl(`<div class="${ this.options.classNames.list } ${ this.options.classNames.listDropdown }"></div>`);
|
||||||
|
const passedGroups = Array.from(this.passedElement.getElementsByTagName('OPTGROUP'));
|
||||||
|
|
||||||
|
containerOuter.appendChild(dropdown);
|
||||||
|
|
||||||
|
this.dropdown = dropdown;
|
||||||
|
|
||||||
|
if(passedGroups.length) {
|
||||||
|
passedGroups.forEach((group, index) => {
|
||||||
|
const groupOptions = Array.from(group.getElementsByTagName('OPTION'));
|
||||||
|
const groupId = index;
|
||||||
|
|
||||||
|
if(groupOptions) {
|
||||||
|
this.addGroup(group.label, groupId, true, group.disabled);
|
||||||
|
groupOptions.forEach((option, optionIndex) => {
|
||||||
|
// We want to pre-highlight the first option
|
||||||
|
const highlighted = index === 0 && optionIndex === 0 ? true : false;
|
||||||
|
|
||||||
|
// If group is disabled, disable all of its children
|
||||||
|
if(group.disabled) {
|
||||||
|
this.addOption(option, groupId, true);
|
||||||
|
} else {
|
||||||
|
this.addOption(option, groupId);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.addGroup(group.label, groupId, false, group.disabled);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
const passedOptions = Array.from(this.passedElement.options);
|
||||||
|
|
||||||
|
passedOptions.forEach((option) => {
|
||||||
|
this.addOption(option);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else if(this.passedElement.type === 'text') {
|
||||||
|
// Add any preset values seperated by delimiter
|
||||||
|
this.presetItems.forEach((value) => {
|
||||||
|
this.addItem(value);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
this.containerOuter = containerOuter;
|
this.containerOuter = containerOuter;
|
||||||
this.containerInner = containerInner;
|
this.containerInner = containerInner;
|
||||||
this.input = input;
|
this.input = input;
|
||||||
this.list = list;
|
this.list = list;
|
||||||
this.dropdown = dropdown;
|
|
||||||
this.highlightPosition = 0;
|
|
||||||
|
|
||||||
const passedGroups = Array.from(this.passedElement.getElementsByTagName('OPTGROUP'));
|
|
||||||
|
|
||||||
if(passedGroups.length) {
|
|
||||||
passedGroups.forEach((group, index) => {
|
|
||||||
const groupOptions = Array.from(group.getElementsByTagName('OPTION'));
|
|
||||||
const groupId = index;
|
|
||||||
|
|
||||||
if(groupOptions) {
|
|
||||||
this.addGroup(group.label, groupId, true, group.disabled);
|
|
||||||
groupOptions.forEach((option, optionIndex) => {
|
|
||||||
// We want to pre-highlight the first option
|
|
||||||
const highlighted = index === 0 && optionIndex === 0 ? true : false;
|
|
||||||
|
|
||||||
// If group is disabled, disable all of its children
|
|
||||||
if(group.disabled) {
|
|
||||||
this.addOption(option, groupId, true);
|
|
||||||
} else {
|
|
||||||
this.addOption(option, groupId);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.addGroup(group.label, groupId, false, group.disabled);
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
const passedOptions = Array.from(this.passedElement.options);
|
|
||||||
|
|
||||||
passedOptions.forEach((option) => {
|
|
||||||
this.addOption(option);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Trigger event listeners
|
|
||||||
*/
|
|
||||||
addEventListeners() {
|
|
||||||
document.addEventListener('keyup', this.onKeyUp);
|
|
||||||
document.addEventListener('keydown', this.onKeyDown);
|
|
||||||
document.addEventListener('click', this.onClick);
|
|
||||||
document.addEventListener('paste', this.onPaste);
|
|
||||||
|
|
||||||
this.input.addEventListener('focus', this.onFocus);
|
|
||||||
this.input.addEventListener('blur', this.onBlur);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Destroy event listeners
|
|
||||||
*/
|
|
||||||
removeEventListeners() {
|
|
||||||
document.removeEventListener('keyup', this.onKeyUp);
|
|
||||||
document.removeEventListener('keydown', this.onKeyDown);
|
|
||||||
document.removeEventListener('click', this.onClick);
|
|
||||||
document.removeEventListener('paste', this.onPaste);
|
|
||||||
|
|
||||||
this.input.removeEventListener('focus', this.onFocus);
|
|
||||||
this.input.removeEventListener('blur', this.onBlur);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1041,26 +975,29 @@ export class Choices {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Determine how an input should be rendered
|
* Trigger event listeners
|
||||||
* @return {Element} Input to test
|
|
||||||
*/
|
*/
|
||||||
renderInput(input) {
|
addEventListeners() {
|
||||||
if (this.options.debug) console.debug('Render');
|
document.addEventListener('keyup', this.onKeyUp);
|
||||||
|
document.addEventListener('keydown', this.onKeyDown);
|
||||||
|
document.addEventListener('click', this.onClick);
|
||||||
|
document.addEventListener('paste', this.onPaste);
|
||||||
|
|
||||||
switch (input.type) {
|
this.input.addEventListener('focus', this.onFocus);
|
||||||
case "text":
|
this.input.addEventListener('blur', this.onBlur);
|
||||||
this.generateTextInput();
|
}
|
||||||
break;
|
|
||||||
case "select-one":
|
/**
|
||||||
// this.generateSelectInput();
|
* Destroy event listeners
|
||||||
break;
|
*/
|
||||||
case "select-multiple":
|
removeEventListeners() {
|
||||||
this.generateMultipleSelectInput();
|
document.removeEventListener('keyup', this.onKeyUp);
|
||||||
break;
|
document.removeEventListener('keydown', this.onKeyDown);
|
||||||
default:
|
document.removeEventListener('click', this.onClick);
|
||||||
console.error('renderInput: Input type is not supported');
|
document.removeEventListener('paste', this.onPaste);
|
||||||
break;
|
|
||||||
}
|
this.input.removeEventListener('focus', this.onFocus);
|
||||||
|
this.input.removeEventListener('blur', this.onBlur);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1070,8 +1007,8 @@ export class Choices {
|
||||||
init(callback = this.options.callbackOnInit) {
|
init(callback = this.options.callbackOnInit) {
|
||||||
this.initialised = true;
|
this.initialised = true;
|
||||||
|
|
||||||
// Render input
|
// Generate input markup
|
||||||
this.renderInput(this.passedElement);
|
this.generateInput();
|
||||||
|
|
||||||
// Subscribe to store
|
// Subscribe to store
|
||||||
this.store.subscribe(this.render);
|
this.store.subscribe(this.render);
|
||||||
|
|
Loading…
Reference in a new issue