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

Build

Browse source
This commit is contained in:
Josh Johnson 2016-03-18 12:26:38 +00:00
parent a247c0c031
commit 6228463c71
5 changed files with 62 additions and 59 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

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

@ -10,9 +10,9 @@ import { hasClass, wrap, getSiblings, isType } from './lib/utils.js';
*/
class Choices {
export class Choices {
constructor(options) {
const fakeEl = document.createElement("fakeelement");
const FAKE_EL = document.createElement("FAKE_ELement");
const USER_OPTIONS = options || {};
const DEFAULT_OPTIONS = {
element: document.querySelector('[data-choice]'),
@ -34,12 +34,14 @@ class Choices {
// Merge options with user options
this.options = this.extend(DEFAULT_OPTIONS, USER_OPTIONS || {});
this.initialised = false;
this.supports = 'querySelector' in document && 'addEventListener' in document && 'classList' in fakeEl;
this.supports = 'querySelector' in document && 'addEventListener' in document && 'classList' in FAKE_EL;
// Retrieve elements
this.element = this.options.element;
// If input already has values, parse the array, otherwise create a blank array
this.valueArray = this.element.value !== '' ? this.cleanInputValue(this.element.value) : [];
// How many values in array
this.valueCount = this.valueArray.length;
// Bind methods
this.onClick = this.onClick.bind(this);
@ -47,9 +49,12 @@ class Choices {
this.onChange = this.onChange.bind(this);
this.onFocus = this.onFocus.bind(this);
this.onBlur = this.onChange.bind(this);
this.init();
}
cleanInputValue(value) {
// Remove spaces and split with delimiter
return value.replace(/\s/g, '').split(this.options.delimiter);
}
@ -99,7 +104,7 @@ class Choices {
}
isEmpty() {
return (this.valueCount.length === 0) ? true : false;
}
clearInput() {
@ -359,8 +364,7 @@ class Choices {
}
};
window.addEventListener('load', function() {
(function(){
let input1 = document.getElementById(1);
let input2 = document.getElementById(2);
let input3 = document.getElementById(3);
@ -379,9 +383,4 @@ window.addEventListener('load', function() {
let choices3 = new Choices({
element : input3
});
choices1.init();
choices2.init();
choices3.init();
});
})();

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

@ -62,6 +62,8 @@ label {
background-color: #00BCD4;
text-shadow: 0px 1px 0px #008fa1;
border: 1px solid #00a5bb;
color: #FFFFFF; }
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
color: #FFFFFF;
cursor: pointer; }
.choices__item.is-selected {
background-color: #00a5bb; }

2
assets/styles/css/choices.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:#fafafa;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;font-size:1.6rem;color:#222;padding:2.4rem}label{display:block;margin-bottom:.8rem}.choices{margin-bottom:2.4rem;position:relative}.choices__inner{background-color:#fff;padding:.75rem .75rem .375rem;border:1px solid #ddd;border-radius:.25rem;font-size:1.4rem}.choices__inner:focus{outline:1px solid #00bcd4;outline-offset:-1px}.choices__list{margin:0;padding-left:0;list-style-type:none;display:inline}.choices__input{font-size:1.4rem;padding:0;margin-bottom:.5rem;display:inline-block;vertical-align:baseline;border:0;border-radius:0;max-width:100%}.choices__input:focus{outline:0}.choices__item{display:inline-block;border-radius:.4rem;padding:.4rem .8rem;font-size:1.4rem;margin-right:.375rem;margin-bottom:.375rem;background-color:#00bcd4;text-shadow:0 1px 0 #008fa1;border:1px solid #00a5bb;color:#fff}.choices__item.is-selected{background-color:#00a5bb}
*,:after,:before{box-sizing:border-box}body,html{margin:0;height:100%;widows:100%}html{font-size:62.5%}body{background-color:#fafafa;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;font-size:1.6rem;color:#222;padding:2.4rem}label{display:block;margin-bottom:.8rem}.choices{margin-bottom:2.4rem;position:relative}.choices__inner{background-color:#fff;padding:.75rem .75rem .375rem;border:1px solid #ddd;border-radius:.25rem;font-size:1.4rem}.choices__inner:focus{outline:1px solid #00bcd4;outline-offset:-1px}.choices__list{margin:0;padding-left:0;list-style-type:none;display:inline}.choices__input{font-size:1.4rem;padding:0;margin-bottom:.5rem;display:inline-block;vertical-align:baseline;border:0;border-radius:0;max-width:100%}.choices__input:focus{outline:0}.choices__item{display:inline-block;border-radius:.4rem;padding:.4rem .8rem;font-size:1.4rem;margin-right:.375rem;margin-bottom:.375rem;background-color:#00bcd4;text-shadow:0 1px 0 #008fa1;border:1px solid #00a5bb;box-shadow:0 1px 1px rgba(0,0,0,.2);color:#fff;cursor:pointer}.choices__item.is-selected{background-color:#00a5bb}

2
assets/styles/scss/choices.scss
View file

@ -71,6 +71,8 @@ label {
background-color: #00BCD4;
text-shadow: 0px 1px 0px darken(#00BCD4, 10%);
border: 1px solid darken(#00BCD4, 5%);
box-shadow: 0px 1px 1px rgba(#000000, 0.2);
color: #FFFFFF;
cursor: pointer;
&.is-selected { background-color: darken(#00BCD4, 5%); }
}