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

Ability to define choices in config + minor tweaks

Browse source
This commit is contained in:
Josh Johnson 2016-07-30 16:03:20 +01:00
parent 064d12400b
commit 1e249295ce
7 changed files with 31 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -97,7 +97,7 @@ A lightweight, configurable select box/text input plugin. Similar to Select2 and
### items
<strong>Type:</strong> `Array` <strong>Default:</strong> `[]`
<strong>Usage:</strong> Add pre-selected items to text input.
<strong>Usage:</strong> Add pre-selected items (see terminology) to text input.
<strong>Input types affected:</strong> `text`
@ -120,10 +120,10 @@ Pass an array of objects:
}]
```
### options
### choices
<strong>Type:</strong> `Array` <strong>Default:</strong> `[]`
<strong>Usage:</strong> Add options to select input.
<strong>Usage:</strong> Add choices (see terminology) to select input.
<strong>Input types affected:</strong> `select-one`, `select-multiple`

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

@ -26,7 +26,7 @@ export class Choices {
const defaultConfig = {
items: [],
options: [],
choices: [],
maxItemCount: -1,
addItems: true,
removeItems: true,
@ -91,8 +91,8 @@ export class Choices {
this.highlightPosition = 0;
this.canSearch = this.config.search;
// Assing preset optiosn from passed object
this.presetOptions = this.config.options;
// Assing preset choices from passed object
this.presetChoices = this.config.choices;
// Assign preset items from passed object first
this.presetItems = this.config.items;
@ -1266,11 +1266,11 @@ export class Choices {
});
} else {
const passedOptions = Array.from(this.passedElement.options);
let allOptions = [];
let allChoices = [];
// Create array of options from option elements
passedOptions.forEach((o) => {
allOptions.push({
allChoices.push({
value: o.value,
label: o.innerHTML,
selected: o.selected,
@ -1278,11 +1278,11 @@ export class Choices {
});
});
allOptions = allOptions.concat(this.presetOptions);
allOptions.forEach((o) => {
this._addChoice(o.selected ? o.selected : false, o.disabled ? o.disabled : false, o.value, o.label);
});
allChoices
.concat(this.presetChoices)
.forEach((o) => {
this._addChoice(o.selected ? o.selected : false, o.disabled ? o.disabled : false, o.value, o.label);
});
}
} else if(this.passedElement.type === 'text') {
// Add any preset values seperated by delimiter

4
assets/styles/css/base.css
View file

@ -66,5 +66,9 @@ h6, .h6 {
background-color: #FFFFFF;
padding: 2.4rem;
color: #333; }
.section > *:last-child,
.section > *:last-child > *:last-child,
.section > *:last-child > *:last-child > *:last-child {
margin-bottom: 0; }
/*===== End of Section comment block ======*/

2
assets/styles/css/base.min.css vendored
View file

@ -1 +1 @@
*,:after,:before{box-sizing:border-box}body,html{margin:0;height:100%;widows:100%}html{font-size:62.5%}body{background-color:#333;font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:1.6rem;line-height:1.4;color:#fff}hr,label{display:block}label{margin-bottom:.8rem;font-size:1.4rem;font-weight:500}hr{margin:3.6rem 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.2rem;font-weight:400;line-height:1.2}.h1,h1{font-size:3.2rem}.h2,h2{font-size:2.4rem}.h3,h3{font-size:2rem}.h4,h4{font-size:1.8rem}.h5,h5{font-size:1.6rem}.h6,h6{font-size:1.4rem}.container{display:block;margin:auto;max-width:35em;padding:2.4rem}.section{background-color:#fff;padding:2.4rem;color:#333}
*,:after,:before{box-sizing:border-box}body,html{margin:0;height:100%;widows:100%}html{font-size:62.5%}body{background-color:#333;font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:1.6rem;line-height:1.4;color:#fff}hr,label{display:block}label{margin-bottom:.8rem;font-size:1.4rem;font-weight:500}hr{margin:3.6rem 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.2rem;font-weight:400;line-height:1.2}.h1,h1{font-size:3.2rem}.h2,h2{font-size:2.4rem}.h3,h3{font-size:2rem}.h4,h4{font-size:1.8rem}.h5,h5{font-size:1.6rem}.h6,h6{font-size:1.4rem}.container{display:block;margin:auto;max-width:35em;padding:2.4rem}.section{background-color:#fff;padding:2.4rem;color:#333}.section>:last-child,.section>:last-child>:last-child,.section>:last-child>:last-child>:last-child{margin-bottom:0}

3
assets/styles/scss/base.scss
View file

@ -72,6 +72,9 @@ h6, .h6 { font-size: $global-font-size-h6; }
background-color: #FFFFFF;
padding: $global-guttering;
color: #333;
& > *:last-child,
& > *:last-child > *:last-child,
& > *:last-child > *:last-child > *:last-child { margin-bottom: 0; }
}
/*===== End of Section comment block ======*/

6
index.html
View file

@ -228,10 +228,10 @@
removeButton: true
});
const choicesBug = new Choices('#choices-15', {
options: [
const choices15 = new Choices('#choices-15', {
choices: [
{value: 'One', label: 'Label One', selected: true, disabled: false},
{value: 'Two', label: 'Label Two'},
{value: 'Two', label: 'Label Two', disabled: true},
{value: 'Three', label: 'Label Three'},
],
});

9
tests/spec/choices_spec.js
View file

@ -259,6 +259,11 @@ describe('Choices', function() {
this.choices = new Choices(this.input, {
placeholderValue: 'Placeholder text',
choices: [
{value: 'One', label: 'Label One', selected: true, disabled: false},
{value: 'Two', label: 'Label Two', disabled: true},
{value: 'Three', label: 'Label Three'},
],
});;
});
@ -266,8 +271,8 @@ describe('Choices', function() {
expect(this.choices.currentState.items.length).toBeGreaterThan(1);
});
it('should add any unselected options as choices', function() {
expect(this.choices.currentState.choices.length).toBeGreaterThan(1);
it('should add options defined in the config + pre-defined options', function() {
expect(this.choices.currentState.choices.length).toEqual(6);
});
it('should add a placeholder (set in config) to the search input', function() {