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

Sprucing up the demo page + scroll to top of option list on search

Browse source
This commit is contained in:
Josh Johnson 2016-07-31 22:48:36 +01:00
parent 4968d73ede
commit e898309fb1
7 changed files with 79 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/scripts/dist/choices.min.js vendored
View file

File diff suppressed because one or more lines are too long

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

@ -814,7 +814,7 @@ export class Choices {
this.store.dispatch(filterChoices(results));
}
};
handleFilter();
} else if(hasUnactiveChoices) {
// Otherwise reset choices to active
@ -973,7 +973,7 @@ export class Choices {
} else if(this.passedElement.type === 'select-one' && e.target === this.containerOuter && !hasActiveDropdown) {
this.containerOuter.classList.add(this.config.classNames.focusState);
this.showDropdown();
if(this.config.search) {
if(this.canSearch) {
this.input.focus();
}
}
@ -1394,6 +1394,7 @@ export class Choices {
});
});
// Join choices with preset choices and add them
allChoices
.concat(this.presetChoices)
.forEach((o, index) => {
@ -1428,26 +1429,25 @@ export class Choices {
renderGroups(groups, choices, fragment) {
const groupFragment = fragment || document.createDocumentFragment();
groups
.forEach((group, i) => {
// Grab options that are children of this group
const groupChoices = choices.filter((choice) => {
if(this.passedElement.type === 'select-one') {
return choice.groupId === group.id
} else {
return choice.groupId === group.id && !choice.selected;
}
});
if(groupChoices.length >= 1) {
const dropdownGroup = this._getTemplate('choiceGroup', group);
groupFragment.appendChild(dropdownGroup);
this.renderChoices(groupChoices, groupFragment);
groups.forEach((group, i) => {
// Grab options that are children of this group
const groupChoices = choices.filter((choice) => {
if(this.passedElement.type === 'select-one') {
return choice.groupId === group.id
} else {
return choice.groupId === group.id && !choice.selected;
}
});
if(groupChoices.length >= 1) {
const dropdownGroup = this._getTemplate('choiceGroup', group);
groupFragment.appendChild(dropdownGroup);
this.renderChoices(groupChoices, groupFragment);
}
});
return groupFragment;
}
@ -1462,16 +1462,15 @@ export class Choices {
// Create a fragment to store our list items (so we don't have to update the DOM for each item)
const choicesFragment = fragment || document.createDocumentFragment();
choices
.forEach((choice, i) => {
const dropdownItem = this._getTemplate('choice', choice);
choices.forEach((choice, i) => {
const dropdownItem = this._getTemplate('choice', choice);
if(this.passedElement.type === 'select-one') {
choicesFragment.appendChild(dropdownItem);
} else if(!choice.selected) {
choicesFragment.appendChild(dropdownItem);
}
});
if(this.passedElement.type === 'select-one') {
choicesFragment.appendChild(dropdownItem);
} else if(!choice.selected) {
choicesFragment.appendChild(dropdownItem);
}
});
return choicesFragment;
}
@ -1543,6 +1542,8 @@ export class Choices {
// Clear choices
this.choiceList.innerHTML = '';
// Scroll back to top of choices list
this.choiceList.scrollTop = 0;
// If we have grouped options
if(activeGroups.length >= 1 && this.isSearching !== true) {

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

@ -1,6 +1,10 @@
/*=============================================
= Generic styling =
=============================================*/
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
*, *:before, *:after {
box-sizing: border-box; }
@ -8,16 +12,20 @@ html {
font-size: 62.5%; }
html, body {
position: relative;
margin: 0;
height: 100%;
widows: 100%; }
width: 100%; }
body {
background-color: #333333;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 1.6rem;
line-height: 1.4;
color: #FFFFFF; }
color: #FFFFFF;
background-color: #333;
background: -webkit-linear-gradient(right top, #333, #262626);
background: linear-gradient(to left bottom, #333, #262626);
height: 100%;
overflow-x: hidden; }
label {
display: block;
@ -39,9 +47,9 @@ h1, h2, h3, h4, h5, h6 {
line-height: 1.2; }
a, a:visited, a:focus {
color: #00bcd4;
color: #FFFFFF;
text-decoration: none;
font-weight: bolder; }
font-weight: 600; }
h1, .h1 {
font-size: 3.2rem; }
@ -64,12 +72,17 @@ h6, .h6 {
.container {
display: block;
margin: auto;
max-width: 35em;
padding: 2.4rem; }
max-width: 40em;
padding: 4.8rem; }
@media (max-width: 620px) {
.container {
padding: 0; } }
.section {
background-color: #FFFFFF;
padding: 2.4rem;
color: #333; }
.section a, .section a:visited, .section a:focus {
color: #00bcd4; }
/*===== 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}a,a:focus,a:visited{color:#00bcd4;text-decoration:none;font-weight:bolder}.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}
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%}html{font-size:62.5%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:1.6rem;line-height:1.4;color:#fff;background-color:#333;background:-webkit-linear-gradient(right top,#333,#262626);background:linear-gradient(to left bottom,#333,#262626);height:100%;overflow-x:hidden}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}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.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:40em;padding:4.8rem}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:2.4rem;color:#333}.section a,.section a:focus,.section a:visited{color:#00bcd4}

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

@ -10,26 +10,33 @@ $global-font-size-h6: 1.4rem;
= Generic styling =
=============================================*/
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
*, *:before, *:after {
box-sizing: border-box
}
html {
font-size: 62.5%;
}
html { font-size: 62.5%; }
html, body {
position: relative;
margin: 0;
height: 100%;
widows: 100%;
width: 100%;
}
body {
background-color: #333333;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 1.6rem;
line-height: 1.4;
color: #FFFFFF;
background-color: #333;
background: linear-gradient(to left bottom,#333,#262626);
height: 100%;
overflow-x: hidden;
}
label {
@ -55,9 +62,9 @@ h1, h2, h3, h4, h5, h6 {
}
a, a:visited, a:focus {
color: #00bcd4;
color: #FFFFFF;
text-decoration: none;
font-weight: bolder;
font-weight: 600;
}
h1, .h1 { font-size: $global-font-size-h1; }
@ -70,14 +77,16 @@ h6, .h6 { font-size: $global-font-size-h6; }
.container {
display: block;
margin: auto;
max-width: 35em;
padding: $global-guttering;
max-width: 40em;
padding: $global-guttering*2;
@media (max-width: 620px) { padding: 0; }
}
.section {
background-color: #FFFFFF;
padding: $global-guttering;
color: #333;
a, a:visited, a:focus { color: #00bcd4; }
}
/*===== End of Section comment block ======*/

16
index.html
View file

@ -4,7 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Choices</title>
<meta name=description itemprop=description content="A lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.">
<!-- Ignore these -->
<link rel="stylesheet" href="assets/styles/css/base.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
@ -16,9 +17,10 @@
<body>
<div class="container">
<div class="section">
<h1>Choices</h1>
<h1>Choices.js</h1>
<p>A lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.</p>
<p>For all config options, visit the <a href="https://github.com/jshjohnson/Choices">GitHub repo</a>.</p>
<hr>
<h2>Text inputs</h2>
<label for="choices-1">Limited to 5 values</label>
<input id="choices-1" type="text" value="preset-1,preset-2" placeholder="Enter something">
@ -187,7 +189,7 @@
items: ['josh@joshuajohnson.co.uk', { value: 'joe@bloggs.co.uk', label: 'Joe Bloggs' } ],
});
var choices7 = new Choices('#choices-7', { search: false }).setValue(['Set value 1', 'Set value 2']);
var choices7 = new Choices('#choices-7', { search: false });
var choices10 = new Choices('#choices-10', {
placeholder: true,
@ -250,9 +252,7 @@
{value: 'Two', label: 'Label Two', disabled: true},
{value: 'Three', label: 'Label Three'},
],
});
choices15.setChoices([
}).setChoices([
{value: 'Four', label: 'Label Four', disabled: true},
{value: 'Five', label: 'Label Five'},
{value: 'Six', label: 'Label Six', selected: true},
@ -264,9 +264,7 @@
{value: 'Two', label: 'Label Two', disabled: true},
{value: 'Three', label: 'Label Three'},
],
});
choices16.setValueByChoice('Two');
}).setValueByChoice('Two');
});
</script>
</body>

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "choices.js",
"version": "1.0.2",
"version": "1.0.3",
"description": "A vanilla JS customisable text input/select box plugin",
"main": "./assets/scripts/dist/choices.min.js",
"scripts": {