mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-26 17:31:02 +02:00
e6882f3e4b
* Add wrapped element getters + fix some types * Remove comment * Add missing config options to types * Add types to constants * Rename sortFn to sorter * Update PR template * Add refactor to PR template * Add passed element types to constants * Add js doc comments to actions * Add "returns" to js doc comments * Add missing choice prop to type * Add types to store.js * Add jsdoc comments to components * Ignore strict null checks * Move loading action into misc.js * Further type def additions * Rename itemCompare to valueCompare * Update badges * Rename scrollToChoice to scrollToChildElement
71 lines
1.7 KiB
JavaScript
71 lines
1.7 KiB
JavaScript
import WrappedElement from './wrapped-element';
|
|
|
|
/**
|
|
* @typedef {import('../../../types/index').Choices.ClassNames} ClassNames
|
|
* @typedef {import('../../../types/index').Choices.Item} Item
|
|
* @typedef {import('../../../types/index').Choices.Choice} Choice
|
|
*/
|
|
|
|
export default class WrappedSelect extends WrappedElement {
|
|
/**
|
|
* @param {{
|
|
* element: HTMLSelectElement,
|
|
* classNames: ClassNames,
|
|
* delimiter: string
|
|
* template: function
|
|
* }} args
|
|
*/
|
|
constructor({ element, classNames, template }) {
|
|
super({ element, classNames });
|
|
this.template = template;
|
|
}
|
|
|
|
get placeholderOption() {
|
|
return (
|
|
this.element.querySelector('option[value=""]') ||
|
|
// Backward compatibility layer for the non-standard placeholder attribute supported in older versions.
|
|
this.element.querySelector('option[placeholder]')
|
|
);
|
|
}
|
|
|
|
/**
|
|
* @returns {Element[]}
|
|
*/
|
|
get optionGroups() {
|
|
return Array.from(this.element.getElementsByTagName('OPTGROUP'));
|
|
}
|
|
|
|
/**
|
|
* @returns {Item[] | Choice[]}
|
|
*/
|
|
get options() {
|
|
return Array.from(this.element.options);
|
|
}
|
|
|
|
/**
|
|
* @param {Item[] | Choice[]} options
|
|
*/
|
|
set options(options) {
|
|
const fragment = document.createDocumentFragment();
|
|
const addOptionToFragment = data => {
|
|
// Create a standard select option
|
|
const option = this.template(data);
|
|
// Append it to fragment
|
|
fragment.appendChild(option);
|
|
};
|
|
|
|
// Add each list item to list
|
|
options.forEach(optionData => addOptionToFragment(optionData));
|
|
|
|
this.appendDocFragment(fragment);
|
|
}
|
|
|
|
/**
|
|
* @param {DocumentFragment} fragment
|
|
*/
|
|
appendDocFragment(fragment) {
|
|
this.element.innerHTML = '';
|
|
this.element.appendChild(fragment);
|
|
}
|
|
}
|