deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-02 14:02:46 +02:00
Code Issues Projects Releases Wiki Activity

Handle optgroups - initial foundation work

Browse source
This commit is contained in:
Josh Johnson 2016-03-21 22:45:49 +00:00
parent a3bda138a9
commit ff7521b090
3 changed files with 56 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/scripts/dist/bundle.js vendored
View file

File diff suppressed because one or more lines are too long

67
assets/scripts/src/choices.js
View file

@ -123,10 +123,12 @@ export class Choices {
// Handle select all
if (ctrlDown && e.keyCode === 65) {
for (let i = 0; i < this.list.children.length; i++) {
let listItem = this.list.children[i];
if(this.list && this.list.children) {
for (let i = 0; i < this.list.children.length; i++) {
let listItem = this.list.children[i];
listItem.classList.add('is-selected');
listItem.classList.add('is-selected');
}
}
}
@ -224,26 +226,13 @@ export class Choices {
}
/* Methods */
setValue() {}
setPlaceholder() {
getValue() {}
}
getValues() {}
setValue() {
}
getValue() {
}
getPlaceholder() {
}
search() {
}
getPlaceholder() {}
updateInputValue(value) {
if (this.options.debug) console.debug('Update input value');
@ -298,6 +287,16 @@ export class Choices {
}
renderTextInput() {
// Template:
//
// <div class="choices choices--active">
// <div class="choices__inner">
// <input id="1" type="text" data-choice="" class="choices__input choices__input--hidden" tabindex="-1" style="display:none;" aria-hidden="true">
// <ul class="choices__list choices__list--items"></ul>
// <input type="text" class="choices__input choices__input--cloned">
// </div>
// </div>
let containerOuter = document.createElement('div');
containerOuter.className = 'choices choices--active';
@ -383,13 +382,21 @@ export class Choices {
this.list = null;
this.options = options;
let initialOptions = this.element.options;
let initialOptions = this.element.children;
if (initialOptions) {
// Add any preset values
for (let i = 0; i < initialOptions.length; i++) {
let option = initialOptions[i];
this.addItem(this.options, option.innerHTML);
let parentOption = initialOptions[i];
if(parentOption.tagName === 'OPTGROUP') {
this.addItem(this.options, parentOption.label);
for (let j = 0; j < parentOption.children.length; j++) {
let childOption = parentOption.children[j];
this.addItem(this.options, childOption.innerHTML);
}
} else if(parentOption.tagName === 'OPTION') {
this.addItem(this.options, parentOption.innerHTML);
}
}
}
@ -397,6 +404,10 @@ export class Choices {
this.addEventListeners(this.input);
}
renderMultipleSelectInput() {
}
render() {
if (this.options.debug) console.debug('Render');
@ -408,7 +419,7 @@ export class Choices {
this.renderSelectInput();
break;
case "select-multiple":
console.warn('Choices does not support multiple select boxes');
this.renderMultipleSelectInput();
break;
default:
rthis.renderTextInput();
@ -429,6 +440,7 @@ export class Choices {
let input1 = document.getElementById(1);
let input2 = document.getElementById(2);
let input3 = document.getElementById(3);
let input4 = document.getElementById(4);
let choices1 = new Choices({
element : input1,
@ -445,4 +457,9 @@ export class Choices {
let choices3 = new Choices({
element : input3
});
let choices4 = new Choices({
element : input4
});
})();

13
index.html
View file

@ -22,6 +22,19 @@
<option value="Value 6">Value 6</option>
</select>
<select id="4" name="4" data-choice>
<optgroup label="Group 1">
<option value="Value 1">Value 1</option>
<option value="Value 2">Value 2</option>
<option value="Value 3">Value 3</option>
</optgroup>
<optgroup label="Group 2">
<option value="Value 4">Value 4</option>
<option value="Value 5">Value 5</option>
<option value="Value 6">Value 6</option>
</optgroup>
</select>
<!-- <label for="4">Multiple select input with two options</label>
<select id="4" name="4" data-choice multiple>
<option value="Value 1">Value 1</option>