mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-19 05:56:33 +02:00
Seperate out element creation logic
This commit is contained in:
parent
54b8935aee
commit
bf1eb3b8ac
|
@ -186,8 +186,10 @@ class Choices {
|
||||||
|
|
||||||
// Set initialise flag
|
// Set initialise flag
|
||||||
this.initialised = true;
|
this.initialised = true;
|
||||||
// Create required elements
|
// Create required templates
|
||||||
this._createTemplates();
|
this._createTemplates();
|
||||||
|
// Create required elements
|
||||||
|
this._createElements();
|
||||||
// Generate input markup
|
// Generate input markup
|
||||||
this._createStructure();
|
this._createStructure();
|
||||||
// Subscribe store to render method
|
// Subscribe store to render method
|
||||||
|
@ -2059,9 +2061,7 @@ class Choices {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_clearChoices() {
|
_clearChoices() {
|
||||||
this.store.dispatch(
|
this.store.dispatch(clearChoices());
|
||||||
clearChoices(),
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -2149,11 +2149,9 @@ class Choices {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Create DOM structure around passed select element
|
* Create DOM elements using templates
|
||||||
* @return
|
|
||||||
* @private
|
|
||||||
*/
|
*/
|
||||||
_createStructure() {
|
_createElements() {
|
||||||
const direction = this.passedElement.element.getAttribute('dir') || 'ltr';
|
const direction = this.passedElement.element.getAttribute('dir') || 'ltr';
|
||||||
const containerOuter = this._getTemplate('containerOuter',
|
const containerOuter = this._getTemplate('containerOuter',
|
||||||
direction,
|
direction,
|
||||||
|
@ -2174,9 +2172,16 @@ class Choices {
|
||||||
this.choiceList = new List(this, choiceList, this.config.classNames);
|
this.choiceList = new List(this, choiceList, this.config.classNames);
|
||||||
this.itemList = new List(this, itemList, this.config.classNames);
|
this.itemList = new List(this, itemList, this.config.classNames);
|
||||||
this.dropdown = new Dropdown(this, dropdown, this.config.classNames);
|
this.dropdown = new Dropdown(this, dropdown, this.config.classNames);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create DOM structure around passed select element
|
||||||
|
* @return
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
_createStructure() {
|
||||||
|
// Hide original element
|
||||||
this.passedElement.conceal();
|
this.passedElement.conceal();
|
||||||
|
|
||||||
// Wrap input in container preserving DOM ordering
|
// Wrap input in container preserving DOM ordering
|
||||||
this.containerInner.wrap(this.passedElement.element);
|
this.containerInner.wrap(this.passedElement.element);
|
||||||
// Wrapper inner container with outer container
|
// Wrapper inner container with outer container
|
||||||
|
@ -2195,16 +2200,16 @@ class Choices {
|
||||||
|
|
||||||
this.containerOuter.element.appendChild(this.containerInner.element);
|
this.containerOuter.element.appendChild(this.containerInner.element);
|
||||||
this.containerOuter.element.appendChild(this.dropdown.element);
|
this.containerOuter.element.appendChild(this.dropdown.element);
|
||||||
this.containerInner.element.appendChild(itemList);
|
this.containerInner.element.appendChild(this.itemList.element);
|
||||||
|
|
||||||
if (!this.isTextElement) {
|
if (!this.isTextElement) {
|
||||||
dropdown.appendChild(choiceList);
|
this.dropdown.element.appendChild(this.choiceList.element);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!this.isSelectOneElement) {
|
if (!this.isSelectOneElement) {
|
||||||
this.containerInner.element.appendChild(this.input.element);
|
this.containerInner.element.appendChild(this.input.element);
|
||||||
} else if (this.canSearch) {
|
} else if (this.canSearch) {
|
||||||
dropdown.insertBefore(input, dropdown.firstChild);
|
this.dropdown.element.insertBefore(this.input.element, this.dropdown.element.firstChild);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.isSelectElement) {
|
if (this.isSelectElement) {
|
||||||
|
|
Loading…
Reference in a new issue