mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-02 14:02:17 +02:00
Move public assets into public foldeR
This commit is contained in:
Josh Johnson
commit
ff8dec597c
BIN
assets/images/android-chrome-192x192.png
Normal file
BIN
assets/images/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
assets/images/apple-touch-icon.png
Normal file
BIN
assets/images/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
9
assets/images/browserconfig.xml
Normal file
9
assets/images/browserconfig.xml
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square150x150logo src="/assets/images/mstile-150x150.png"/>
|
||||
<TileColor>#ffffff</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
BIN
assets/images/favicon-16x16.png
Normal file
BIN
assets/images/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 574 B |
BIN
assets/images/favicon-32x32.png
Normal file
BIN
assets/images/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 887 B |
BIN
assets/images/favicon.ico
Normal file
BIN
assets/images/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
assets/images/favicon.png
Normal file
BIN
assets/images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6 KiB |
10
assets/images/logo.svg
Normal file
10
assets/images/logo.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
12
assets/images/manifest.json
Normal file
12
assets/images/manifest.json
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"name": "Choices.js",
|
||||
"icons": [
|
||||
{
|
||||
"src": "\/assets\/images\/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image\/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#ffffff",
|
||||
"display": "standalone"
|
||||
}
|
||||
BIN
assets/images/mstile-150x150.png
Normal file
BIN
assets/images/mstile-150x150.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3 KiB |
28
assets/images/safari-pinned-tab.svg
Normal file
28
assets/images/safari-pinned-tab.svg
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="280.000000pt" height="280.000000pt" viewBox="0 0 280.000000 280.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.11, written by Peter Selinger 2001-2013
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,280.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M1108 2795 c-2 -1 -55 -6 -119 -9 -63 -4 -126 -8 -140 -11 -13 -2
|
||||
-60 -7 -104 -10 -44 -4 -91 -9 -105 -10 -14 -1 -59 -6 -100 -9 -41 -4 -82 -9
|
||||
-90 -11 -8 -2 -42 -6 -75 -10 -33 -3 -71 -8 -85 -10 -36 -5 -143 -17 -157 -18
|
||||
-7 0 -13 -2 -13 -4 0 -3 -29 -189 -45 -283 -5 -35 -23 -175 -29 -235 -3 -27
|
||||
-8 -75 -11 -105 -23 -212 -29 -354 -29 -645 -1 -255 8 -496 19 -567 2 -13 6
|
||||
-55 10 -95 6 -72 11 -115 20 -183 3 -19 7 -57 10 -85 3 -27 8 -57 10 -65 2 -8
|
||||
7 -37 10 -65 9 -83 34 -218 42 -226 7 -5 213 -40 328 -55 17 -2 68 -8 115 -14
|
||||
47 -6 99 -12 115 -15 17 -2 66 -7 110 -10 44 -4 96 -9 115 -11 214 -21 853
|
||||
-21 993 1 12 2 60 6 107 10 47 3 94 8 105 10 11 3 45 7 76 10 63 5 58 5 294
|
||||
41 94 14 176 26 183 27 6 0 12 5 13 11 0 6 2 18 4 26 1 8 6 35 9 60 4 25 9 52
|
||||
11 60 2 8 6 35 9 60 3 25 8 54 10 65 2 11 7 47 10 80 4 33 9 74 12 90 6 45 11
|
||||
92 19 170 4 39 8 86 11 105 25 232 25 905 -1 1105 -2 17 -7 64 -10 105 -6 69
|
||||
-39 341 -49 400 -3 14 -7 43 -11 65 -5 36 -10 68 -21 129 -5 29 -14 33 -79 40
|
||||
-61 7 -70 8 -210 25 -106 13 -168 20 -240 26 -33 3 -71 7 -85 10 -14 2 -61 7
|
||||
-105 10 -44 4 -107 8 -140 11 -66 6 -712 14 -717 9z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
7843
assets/scripts/choices.js
Normal file
7843
assets/scripts/choices.js
Normal file
File diff suppressed because it is too large
Load diff
1
assets/scripts/choices.js.map
Normal file
1
assets/scripts/choices.js.map
Normal file
File diff suppressed because one or more lines are too long
2
assets/scripts/choices.min.js
vendored
Normal file
2
assets/scripts/choices.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
156
assets/styles/base.css
Normal file
156
assets/styles/base.css
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
/*=============================================
|
||||
= Generic styling =
|
||||
=============================================*/
|
||||
* {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.4;
|
||||
color: #FFFFFF;
|
||||
background-color: #333;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
margin: 30px 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
a, a:visited, a:focus {
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #f9f9f9;
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 2.5px;
|
||||
font-size: 14px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
h1, .h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
h2, .h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h3, .h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h4, .h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h5, .h5 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h6, .h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: block;
|
||||
margin: auto;
|
||||
max-width: 40em;
|
||||
padding: 48px;
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.container {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
background-color: #FFFFFF;
|
||||
padding: 24px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.section a, .section a:visited, .section a:focus {
|
||||
color: #00bcd4;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.logo__img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
vertical-align: top;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.visible-ie {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.zero-bottom {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.zero-top {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*===== End of Section comment block ======*/
|
||||
357
assets/styles/choices.css
Normal file
357
assets/styles/choices.css
Normal file
|
|
@ -0,0 +1,357 @@
|
|||
/*===============================
|
||||
= Choices =
|
||||
===============================*/
|
||||
.choices {
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.choices:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.choices:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.choices.is-disabled .choices__inner, .choices.is-disabled .choices__input {
|
||||
background-color: #EAEAEA;
|
||||
cursor: not-allowed;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.choices.is-disabled .choices__item {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.choices[data-type*="select-one"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.choices[data-type*="select-one"] .choices__inner {
|
||||
padding-bottom: 7.5px;
|
||||
}
|
||||
|
||||
.choices[data-type*="select-one"] .choices__input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
background-color: #FFFFFF;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.choices[data-type*="select-one"] .choices__button {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
|
||||
padding: 0;
|
||||
background-size: 8px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
margin-top: -10px;
|
||||
margin-right: 25px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 10em;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.choices[data-type*="select-one"] .choices__button:hover, .choices[data-type*="select-one"] .choices__button:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.choices[data-type*="select-one"] .choices__button:focus {
|
||||
box-shadow: 0px 0px 0px 2px #00BCD4;
|
||||
}
|
||||
|
||||
.choices[data-type*="select-one"]:after {
|
||||
content: "";
|
||||
height: 0;
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-color: #333333 transparent transparent transparent;
|
||||
border-width: 5px;
|
||||
position: absolute;
|
||||
right: 11.5px;
|
||||
top: 50%;
|
||||
margin-top: -2.5px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.choices[data-type*="select-one"].is-open:after {
|
||||
border-color: transparent transparent #333333 transparent;
|
||||
margin-top: -7.5px;
|
||||
}
|
||||
|
||||
.choices[data-type*="select-one"][dir="rtl"]:after {
|
||||
left: 11.5px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.choices[data-type*="select-one"][dir="rtl"] .choices__button {
|
||||
right: auto;
|
||||
left: 0;
|
||||
margin-left: 25px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.choices[data-type*="select-multiple"] .choices__inner, .choices[data-type*="text"] .choices__inner {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.choices[data-type*="select-multiple"] .choices__button, .choices[data-type*="text"] .choices__button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-right: -4px;
|
||||
margin-bottom: 0;
|
||||
margin-left: 8px;
|
||||
padding-left: 16px;
|
||||
border-left: 1px solid #008fa1;
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
|
||||
background-size: 8px;
|
||||
width: 8px;
|
||||
line-height: 1;
|
||||
opacity: .75;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.choices[data-type*="select-multiple"] .choices__button:hover, .choices[data-type*="select-multiple"] .choices__button:focus, .choices[data-type*="text"] .choices__button:hover, .choices[data-type*="text"] .choices__button:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.choices__inner {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 100%;
|
||||
background-color: #f9f9f9;
|
||||
padding: 7.5px 7.5px 3.75px;
|
||||
border: 1px solid #DDDDDD;
|
||||
border-radius: 2.5px;
|
||||
font-size: 14px;
|
||||
min-height: 44px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.is-focused .choices__inner, .is-open .choices__inner {
|
||||
border-color: #b7b7b7;
|
||||
}
|
||||
|
||||
.is-open .choices__inner {
|
||||
border-radius: 2.5px 2.5px 0 0;
|
||||
}
|
||||
|
||||
.is-flipped.is-open .choices__inner {
|
||||
border-radius: 0 0 2.5px 2.5px;
|
||||
}
|
||||
|
||||
.choices__list {
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.choices__list--single {
|
||||
display: inline-block;
|
||||
padding: 4px 16px 4px 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[dir="rtl"] .choices__list--single {
|
||||
padding-right: 4px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.choices__list--single .choices__item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.choices__list--multiple {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.choices__list--multiple .choices__item {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-radius: 20px;
|
||||
padding: 4px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin-right: 3.75px;
|
||||
margin-bottom: 3.75px;
|
||||
background-color: #00BCD4;
|
||||
border: 1px solid #00a5bb;
|
||||
color: #FFFFFF;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.choices__list--multiple .choices__item[data-deletable] {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .choices__list--multiple .choices__item {
|
||||
margin-right: 0;
|
||||
margin-left: 3.75px;
|
||||
}
|
||||
|
||||
.choices__list--multiple .choices__item.is-highlighted {
|
||||
background-color: #00a5bb;
|
||||
border: 1px solid #008fa1;
|
||||
}
|
||||
|
||||
.is-disabled .choices__list--multiple .choices__item {
|
||||
background-color: #aaaaaa;
|
||||
border: 1px solid #919191;
|
||||
}
|
||||
|
||||
.choices__list--dropdown {
|
||||
display: none;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #DDDDDD;
|
||||
top: 100%;
|
||||
margin-top: -1px;
|
||||
border-bottom-left-radius: 2.5px;
|
||||
border-bottom-right-radius: 2.5px;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.choices__list--dropdown.is-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.is-open .choices__list--dropdown {
|
||||
border-color: #b7b7b7;
|
||||
}
|
||||
|
||||
.is-flipped .choices__list--dropdown {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: -1px;
|
||||
border-radius: .25rem .25rem 0 0;
|
||||
}
|
||||
|
||||
.choices__list--dropdown .choices__list {
|
||||
position: relative;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
will-change: scroll-position;
|
||||
}
|
||||
|
||||
.choices__list--dropdown .choices__item {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
[dir="rtl"] .choices__list--dropdown .choices__item {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.choices__list--dropdown .choices__item--selectable {
|
||||
padding-right: 100px;
|
||||
}
|
||||
.choices__list--dropdown .choices__item--selectable:after {
|
||||
content: attr(data-select-text);
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
[dir="rtl"] .choices__list--dropdown .choices__item--selectable {
|
||||
text-align: right;
|
||||
padding-left: 100px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
[dir="rtl"] .choices__list--dropdown .choices__item--selectable:after {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.choices__list--dropdown .choices__item--selectable.is-highlighted {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.choices__item {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.choices__item--selectable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.choices__item--disabled {
|
||||
cursor: not-allowed;
|
||||
user-select: none;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.choices__heading {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #f7f7f7;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.choices__button {
|
||||
text-indent: -9999px;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.choices__button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.choices__input {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
background-color: #f9f9f9;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
max-width: 100%;
|
||||
padding: 4px 0 4px 2px;
|
||||
}
|
||||
|
||||
.choices__input:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] .choices__input {
|
||||
padding-right: 2px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.choices__placeholder {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.choices__input.is-hidden,
|
||||
.choices[data-type*="select-one"] .choices__input.is-hidden,
|
||||
.choices[data-type*="select-multiple"] .choices__input.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*===== End of Choices ======*/
|
||||
540
index.html
Normal file
540
index.html
Normal file
|
|
@ -0,0 +1,540 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
<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.">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" href="assets/images/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="assets/images/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="manifest" href="assets/images/manifest.json">
|
||||
<link rel="mask-icon" href="assets/images/safari-pinned-tab.svg" color="#00bcd4">
|
||||
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
||||
<meta name="msapplication-config" content="/assets/images/browserconfig.xml">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<!-- Ignore these -->
|
||||
<link rel="stylesheet" href="assets/styles/base.min.css?version=3.0.2">
|
||||
<!-- End ignore these -->
|
||||
|
||||
<!-- Optional includes -->
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=es5,fetch,Element.prototype.classList,requestAnimationFrame,Node.insertBefore,Node.firstChild,Object.assign"></script>
|
||||
<!-- End optional includes -->
|
||||
|
||||
<!-- Choices includes -->
|
||||
<link rel="stylesheet" href="assets/styles/choices.min.css?version=3.0.2">
|
||||
<script src="assets/scripts/choices.min.js?version=2.8.8"></script>
|
||||
<!-- End Choices includes -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<style>
|
||||
.hidden-ie { display: none; }
|
||||
.visible-ie { display: block; }
|
||||
</style>
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="section">
|
||||
<a href="https://github.com/jshjohnson/Choices" class="logo">
|
||||
<img src="assets/images/logo.svg" alt="Choices.js logo" class="logo__img hidden-ie">
|
||||
<h1 class="visible-ie">Choices.js</h1>
|
||||
</a>
|
||||
<p>Choices.js is 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>
|
||||
<p class="h4 text-center">
|
||||
<strong>Interested in writing your own ES6 JavaScript plugins? Check out <a href="https://ES6.io/friend/JOHNSON">ES6.io</a> for great tutorials! 💪🏼</strong>
|
||||
</p>
|
||||
<hr>
|
||||
|
||||
<h2>Text inputs</h2>
|
||||
<label for="choices-text-remove-button">Limited to 5 values with remove button</label>
|
||||
<input class="form-control" id="choices-text-remove-button" type="text" value="preset-1,preset-2" placeholder="Enter something">
|
||||
|
||||
<label for="choices-text-unique-values">Unique values only, no pasting</label>
|
||||
<input class="form-control" id="choices-text-unique-values" type="text" value="preset-1, preset-2" placeholder="This is a placeholder"
|
||||
class="custom class">
|
||||
|
||||
<label for="choices-text-email-filter">Email addresses only</label>
|
||||
<input class="form-control" id="choices-text-email-filter" type="text" placeholder="This is a placeholder">
|
||||
|
||||
<label for="choices-text-disabled">Disabled</label>
|
||||
<input class="form-control" id="choices-text-disabled" type="text" value="josh@joshuajohnson.co.uk, joe@bloggs.co.uk" placeholder="This is a placeholder">
|
||||
|
||||
<label for="choices-text-prepend-append-value">Prepends and appends a value to each items return value</label>
|
||||
<input class="form-control" id="choices-text-prepend-append-value" type="text" value="preset-1, preset-2" placeholder="This is a placeholder">
|
||||
|
||||
<label for="choices-text-preset-values">Preset values passed through options</label>
|
||||
<input class="form-control" id="choices-text-preset-values" type="text" value="Michael Smith" placeholder="This is a placeholder">
|
||||
|
||||
<label for="choices-text-i18n">I18N labels</label>
|
||||
<input class="form-control" data-trigger id="choices-text-i18n" type="text">
|
||||
|
||||
<label for="choices-text-rtl">Right-to-left</label>
|
||||
<input class="form-control" data-trigger id="choices-text-rtl" type="text" value="Value 1, Value 2" dir="rtl">
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Multiple select input</h2>
|
||||
<label for="choices-multiple-default">Default</label>
|
||||
<select class="form-control" data-trigger name="choices-multiple-default" id="choices-multiple-default" placeholder="This is a placeholder"
|
||||
multiple>
|
||||
<option value="Dropdown item 1" selected>Dropdown item 1</option>
|
||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
||||
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
|
||||
</select>
|
||||
|
||||
<label for="choices-multiple-remove-button">With remove button</label>
|
||||
<select class="form-control" name="choices-multiple-remove-button" id="choices-multiple-remove-button" placeholder="This is a placeholder"
|
||||
multiple>
|
||||
<option value="Dropdown item 1" selected>Dropdown item 1</option>
|
||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
||||
<option value="Dropdown item 4">Dropdown item 4</option>
|
||||
</select>
|
||||
|
||||
<label for="choices-multiple-groups">Option groups</label>
|
||||
<select class="form-control" name="choices-multiple-groups" id="choices-multiple-groups" placeholder="This is a placeholder"
|
||||
multiple>
|
||||
<optgroup label="UK">
|
||||
<option value="London">London</option>
|
||||
<option value="Manchester">Manchester</option>
|
||||
<option value="Liverpool">Liverpool</option>
|
||||
</optgroup>
|
||||
<optgroup label="FR">
|
||||
<option value="Paris">Paris</option>
|
||||
<option value="Lyon">Lyon</option>
|
||||
<option value="Marseille">Marseille</option>
|
||||
</optgroup>
|
||||
<optgroup label="DE" disabled>
|
||||
<option value="Hamburg">Hamburg</option>
|
||||
<option value="Munich">Munich</option>
|
||||
<option value="Berlin">Berlin</option>
|
||||
</optgroup>
|
||||
<optgroup label="US">
|
||||
<option value="New York">New York</option>
|
||||
<option value="Washington" disabled>Washington</option>
|
||||
<option value="Michigan">Michigan</option>
|
||||
</optgroup>
|
||||
<optgroup label="SP">
|
||||
<option value="Madrid">Madrid</option>
|
||||
<option value="Barcelona">Barcelona</option>
|
||||
<option value="Malaga">Malaga</option>
|
||||
</optgroup>
|
||||
<optgroup label="CA">
|
||||
<option value="Montreal">Montreal</option>
|
||||
<option value="Toronto">Toronto</option>
|
||||
<option value="Vancouver">Vancouver</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
|
||||
<p><small>If the following example do not load, the Discogs rate limit has probably been reached. Try again later!</small></p>
|
||||
|
||||
<label for="choices-multiple-remote-fetch">Options from remote source (Fetch API) & limited to 5</label>
|
||||
<select class="form-control" name="choices-multiple-remote-fetch" id="choices-multiple-remote-fetch" multiple></select>
|
||||
|
||||
<label for="choices-multiple-rtl">Right-to-left</label>
|
||||
<select class="form-control" data-trigger name="choices-multiple-rtl" id="choices-multiple-rtl" placeholder="This is a placeholder"
|
||||
multiple dir="rtl">
|
||||
<option value="Dropdown item 1" selected>Dropdown item 1</option>
|
||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
||||
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
|
||||
</select>
|
||||
|
||||
<label for="label-event">Use label in event (add/remove)</label>
|
||||
<p id="message"></p>
|
||||
<select id="choices-multiple-labels" multiple></select>
|
||||
<hr>
|
||||
|
||||
<h2>Single select input</h2>
|
||||
<label for="choices-single-default">Default</label>
|
||||
<select class="form-control" data-trigger name="choices-single-default" id="choices-single-default" placeholder="This is a search placeholder">
|
||||
<option placeholder>This is a placeholder</option>
|
||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
||||
</select>
|
||||
|
||||
<p><small>If the following two examples do not load, the Discogs rate limit has probably been reached. Try again later!</small></p>
|
||||
|
||||
<label for="choices-single-remote-fetch">Options from remote source (Fetch API)</label>
|
||||
<select class="form-control" name="choices-single-remote-fetch" id="choices-single-remote-fetch">
|
||||
<option placeholder>Pick an Arctic Monkeys' record</option>
|
||||
</select>
|
||||
|
||||
<label for="choices-single-remove-xhr">Options from remote source (XHR) & remove button</label>
|
||||
<select class="form-control" name="choices-single-remove-xhr" id="choices-single-remove-xhr">
|
||||
<option placeholder>Pick a Smiths' record</option>
|
||||
</select>
|
||||
|
||||
<label for="choices-single-groups">Option groups</label>
|
||||
<select class="form-control" data-trigger name="choices-single-groups" id="choices-single-groups" placeholder="This is a placeholder">
|
||||
<optgroup label="UK">
|
||||
<option value="London">London</option>
|
||||
<option value="Manchester">Manchester</option>
|
||||
<option value="Liverpool">Liverpool</option>
|
||||
</optgroup>
|
||||
<optgroup label="FR">
|
||||
<option value="Paris">Paris</option>
|
||||
<option value="Lyon">Lyon</option>
|
||||
<option value="Marseille">Marseille</option>
|
||||
</optgroup>
|
||||
<optgroup label="DE" disabled>
|
||||
<option value="Hamburg">Hamburg</option>
|
||||
<option value="Munich">Munich</option>
|
||||
<option value="Berlin">Berlin</option>
|
||||
</optgroup>
|
||||
<optgroup label="US">
|
||||
<option value="New York">New York</option>
|
||||
<option value="Washington" disabled>Washington</option>
|
||||
<option value="Michigan">Michigan</option>
|
||||
</optgroup>
|
||||
<optgroup label="SP">
|
||||
<option value="Madrid">Madrid</option>
|
||||
<option value="Barcelona">Barcelona</option>
|
||||
<option value="Malaga">Malaga</option>
|
||||
</optgroup>
|
||||
<optgroup label="CA">
|
||||
<option value="Montreal">Montreal</option>
|
||||
<option value="Toronto">Toronto</option>
|
||||
<option value="Vancouver">Vancouver</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
|
||||
<label for="choices-single-rtl">Right-to-left</label>
|
||||
<select class="form-control" data-trigger name="choices-single-rtl" id="choices-single-rtl" placeholder="This is a placeholder"
|
||||
dir="rtl">
|
||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
||||
</select>
|
||||
|
||||
<label for="choices-single-no-search">Options added via config with no search</label>
|
||||
<select class="form-control" name="choices-single-no-search" id="choices-single-no-search">
|
||||
<option value="0">Zero</option>
|
||||
</select>
|
||||
|
||||
<label for="choices-single-preset-options">Option and option groups added via config</label>
|
||||
<select class="form-control" name="choices-single-preset-options" id="choices-single-preset-options" placeholder="This is a placeholder"></select>
|
||||
|
||||
<label for="choices-single-selected-option">Option selected via config with custom properties</label>
|
||||
<p><small>Try searching for 'fantastic'</small></p>
|
||||
<select class="form-control" name="choices-single-selected-option" id="choices-single-selected-option" placeholder="This is a placeholder"></select>
|
||||
|
||||
<label for="choices-single-no-sorting">Options without sorting</label>
|
||||
<select class="form-control" name="choices-single-no-sorting" id="choices-single-no-sorting" placeholder="This is a placeholder">
|
||||
<option value="Madrid">Madrid</option>
|
||||
<option value="Toronto">Toronto</option>
|
||||
<option value="Vancouver">Vancouver</option>
|
||||
<option value="London">London</option>
|
||||
<option value="Manchester">Manchester</option>
|
||||
<option value="Liverpool">Liverpool</option>
|
||||
<option value="Paris">Paris</option>
|
||||
<option value="Malaga">Malaga</option>
|
||||
<option value="Washington" disabled>Washington</option>
|
||||
<option value="Lyon">Lyon</option>
|
||||
<option value="Marseille">Marseille</option>
|
||||
<option value="Hamburg">Hamburg</option>
|
||||
<option value="Munich">Munich</option>
|
||||
<option value="Barcelona">Barcelona</option>
|
||||
<option value="Berlin">Berlin</option>
|
||||
<option value="Montreal">Montreal</option>
|
||||
<option value="New York">New York</option>
|
||||
<option value="Michigan">Michigan</option>
|
||||
</select>
|
||||
|
||||
<label for="choices-single-custom-templates">Custom templates</label>
|
||||
<select class="form-control" name="choices-single-custom-templates" id="choices-single-custom-templates" placeholder="This is a placeholder">
|
||||
<option value="React">React</option>
|
||||
<option value="Angular">Angular</option>
|
||||
<option value="Ember">Ember</option>
|
||||
<option value="Vue">Vue</option>
|
||||
</select>
|
||||
|
||||
<p>Below is an example of how you could have two select inputs depend on eachother. 'Tube stations' will only be enabled if
|
||||
the value of 'Cities' is 'London'</p>
|
||||
<label for="cities">Cities</label>
|
||||
<select class="form-control" name="cities" id="cities" placeholder="Choose a city">
|
||||
<option value="Leeds">Leeds</option>
|
||||
<option value="Manchester">Manchester</option>
|
||||
<option value="London">London</option>
|
||||
<option value="Sheffield">Sheffield</option>
|
||||
<option value="Newcastle">Newcastle</option>
|
||||
</select>
|
||||
|
||||
<label for="tube-stations">Tube stations</label>
|
||||
<select class="form-control" name="tube-stations" id="tube-stations" placeholder="Choose a tube station">
|
||||
<option value="Moorgate">Moorgate</option>
|
||||
<option value="St Pauls">St Pauls</option>
|
||||
<option value="Old Street">Old Street</option>
|
||||
<option value="Liverpool Street">Liverpool Street</option>
|
||||
<option value="Kings Cross St. Pancras">Kings Cross St. Pancras</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var textRemove = new Choices(document.getElementById('choices-text-remove-button'), {
|
||||
delimiter: ',',
|
||||
editItems: true,
|
||||
maxItemCount: 5,
|
||||
removeItemButton: true,
|
||||
});
|
||||
|
||||
var textUniqueVals = new Choices('#choices-text-unique-values', {
|
||||
paste: false,
|
||||
duplicateItems: false,
|
||||
editItems: true,
|
||||
});
|
||||
|
||||
var texti18n = new Choices('#choices-text-i18n', {
|
||||
paste: false,
|
||||
duplicateItems: false,
|
||||
editItems: true,
|
||||
maxItemCount: 5,
|
||||
addItemText: function(value) {
|
||||
return 'Appuyez sur Entrée pour ajouter <b>"' + String(value) + '"</b>';
|
||||
},
|
||||
maxItemText: function(maxItemCount) {
|
||||
return String(maxItemCount) + 'valeurs peuvent être ajoutées';
|
||||
},
|
||||
uniqueItemText: 'Cette valeur est déjà présente',
|
||||
});
|
||||
|
||||
var textEmailFilter = new Choices('#choices-text-email-filter', {
|
||||
editItems: true,
|
||||
regexFilter: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
|
||||
}).setValue(['joe@bloggs.com']);
|
||||
|
||||
var textDisabled = new Choices('#choices-text-disabled', {
|
||||
addItems: false,
|
||||
removeItems: false,
|
||||
}).disable();
|
||||
|
||||
var textPrependAppendVal = new Choices('#choices-text-prepend-append-value', {
|
||||
prependValue: 'item-',
|
||||
appendValue: '-' + Date.now(),
|
||||
}).removeActiveItems();
|
||||
|
||||
var textPresetVal = new Choices('#choices-text-preset-values', {
|
||||
items: ['Josh Johnson', {
|
||||
value: 'joe@bloggs.co.uk',
|
||||
label: 'Joe Bloggs',
|
||||
customProperties: {
|
||||
description: 'Joe Blogg is such a generic name'
|
||||
}
|
||||
}],
|
||||
});
|
||||
|
||||
var multipleDefault = new Choices(document.getElementById('choices-multiple-groups'));
|
||||
|
||||
var multipleFetch = new Choices('#choices-multiple-remote-fetch', {
|
||||
placeholder: true,
|
||||
placeholderValue: 'Pick an Strokes record',
|
||||
maxItemCount: 5,
|
||||
}).ajax(function(callback) {
|
||||
fetch('https://api.discogs.com/artists/55980/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
|
||||
.then(function(response) {
|
||||
response.json().then(function(data) {
|
||||
callback(data.releases, 'title', 'title');
|
||||
});
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.error(error);
|
||||
});
|
||||
});
|
||||
|
||||
var multipleCancelButton = new Choices('#choices-multiple-remove-button', {
|
||||
removeItemButton: true,
|
||||
});
|
||||
|
||||
/* Use label on event */
|
||||
var choicesSelect = new Choices('#choices-multiple-labels', {
|
||||
removeItemButton: true,
|
||||
choices: [
|
||||
{ value: 'One', label: 'Label One' },
|
||||
{ value: 'Two', label: 'Label Two', disabled: true },
|
||||
{ value: 'Three', label: 'Label Three' },
|
||||
],
|
||||
}).setChoices([
|
||||
{ value: 'Four', label: 'Label Four', disabled: true },
|
||||
{ value: 'Five', label: 'Label Five' },
|
||||
{ value: 'Six', label: 'Label Six', selected: true },
|
||||
], 'value', 'label', false);
|
||||
|
||||
choicesSelect.passedElement.element.addEventListener('addItem', function(event) {
|
||||
document.getElementById('message').innerHTML = 'You just added "' + event.detail.label + '"';
|
||||
});
|
||||
|
||||
choicesSelect.passedElement.element.addEventListener('removeItem', function(event) {
|
||||
document.getElementById('message').innerHTML = 'You just removed "' + event.detail.label + '"';
|
||||
});
|
||||
|
||||
var singleFetch = new Choices('#choices-single-remote-fetch', {
|
||||
searchPlaceholderValue: 'Search for an Arctic Monkeys record',
|
||||
}).ajax(function(callback) {
|
||||
fetch('https://api.discogs.com/artists/391170/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
|
||||
.then(function(response) {
|
||||
response.json().then(function(data) {
|
||||
callback(data.releases, 'title', 'title');
|
||||
singleFetch.setChoiceByValue('Fake Tales Of San Francisco');
|
||||
});
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.error(error);
|
||||
});
|
||||
});
|
||||
|
||||
var singleXhrRemove = new Choices('#choices-single-remove-xhr', {
|
||||
removeItemButton: true,
|
||||
searchPlaceholderValue: 'Search for a Smiths\' record'
|
||||
}).ajax(function(callback) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('get', 'https://api.discogs.com/artists/83080/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW', true);
|
||||
request.onreadystatechange = function() {
|
||||
var status;
|
||||
var data;
|
||||
if (request.readyState === 4) {
|
||||
status = request.status;
|
||||
if (status === 200) {
|
||||
data = JSON.parse(request.responseText);
|
||||
callback(data.releases, 'title', 'title');
|
||||
singleXhrRemove.setChoiceByValue('How Soon Is Now?');
|
||||
} else {
|
||||
console.error(status);
|
||||
}
|
||||
}
|
||||
}
|
||||
request.send();
|
||||
});
|
||||
|
||||
var genericExamples = new Choices('[data-trigger]', {
|
||||
placeholderValue: 'This is a placeholder set in the config',
|
||||
searchPlaceholderValue: 'This is a search placeholder'
|
||||
});
|
||||
|
||||
var singleNoSearch = new Choices('#choices-single-no-search', {
|
||||
searchEnabled: false,
|
||||
removeItemButton: true,
|
||||
choices: [
|
||||
{ value: 'One', label: 'Label One' },
|
||||
{ value: 'Two', label: 'Label Two', disabled: true },
|
||||
{ value: 'Three', label: 'Label Three' },
|
||||
],
|
||||
}).setChoices([
|
||||
{ value: 'Four', label: 'Label Four', disabled: true },
|
||||
{ value: 'Five', label: 'Label Five' },
|
||||
{ value: 'Six', label: 'Label Six', selected: true },
|
||||
], 'value', 'label', false);
|
||||
|
||||
var singlePresetOpts = new Choices('#choices-single-preset-options', {
|
||||
placeholder: true,
|
||||
}).setChoices([{
|
||||
label: 'Group one',
|
||||
id: 1,
|
||||
disabled: false,
|
||||
choices: [
|
||||
{ value: 'Child One', label: 'Child One', selected: true },
|
||||
{ value: 'Child Two', label: 'Child Two', disabled: true },
|
||||
{ value: 'Child Three', label: 'Child Three' },
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Group two',
|
||||
id: 2,
|
||||
disabled: false,
|
||||
choices: [
|
||||
{ value: 'Child Four', label: 'Child Four', disabled: true },
|
||||
{ value: 'Child Five', label: 'Child Five' },
|
||||
{ value: 'Child Six', label: 'Child Six' },
|
||||
]
|
||||
}], 'value', 'label');
|
||||
|
||||
var singleSelectedOpt = new Choices('#choices-single-selected-option', {
|
||||
searchFields: ['label', 'value', 'customProperties.description'],
|
||||
choices: [
|
||||
{ value: 'One', label: 'Label One', selected: true },
|
||||
{ value: 'Two', label: 'Label Two', disabled: true },
|
||||
{
|
||||
value: 'Three', label: 'Label Three', customProperties: {
|
||||
description: 'This option is fantastic'
|
||||
}
|
||||
},
|
||||
],
|
||||
}).setChoiceByValue('Two');
|
||||
|
||||
var singleNoSorting = new Choices('#choices-single-no-sorting', {
|
||||
shouldSort: false,
|
||||
});
|
||||
|
||||
var cities = new Choices(document.getElementById('cities'));
|
||||
var tubeStations = new Choices(document.getElementById('tube-stations')).disable();
|
||||
|
||||
cities.passedElement.element.addEventListener('change', function(e) {
|
||||
if (e.detail.value === 'London') {
|
||||
tubeStations.enable();
|
||||
} else {
|
||||
tubeStations.disable();
|
||||
}
|
||||
});
|
||||
|
||||
var customTemplates = new Choices(document.getElementById('choices-single-custom-templates'), {
|
||||
callbackOnCreateTemplates: function(strToEl) {
|
||||
var classNames = this.config.classNames;
|
||||
var itemSelectText = this.config.itemSelectText;
|
||||
return {
|
||||
item: function(classNames, data) {
|
||||
return strToEl('\
|
||||
<div\
|
||||
class="'+ String(classNames.item) + ' ' + String(data.highlighted ? classNames.highlightedState : classNames.itemSelectable) + '"\
|
||||
data-item\
|
||||
data-id="'+ String(data.id) + '"\
|
||||
data-value="'+ String(data.value) + '"\
|
||||
'+ String(data.active ? 'aria-selected="true"' : '') + '\
|
||||
'+ String(data.disabled ? 'aria-disabled="true"' : '') + '\
|
||||
>\
|
||||
<span style="margin-right:10px;">🎉</span> ' + String(data.label) + '\
|
||||
</div>\
|
||||
');
|
||||
},
|
||||
choice: function(classNames, data) {
|
||||
return strToEl('\
|
||||
<div\
|
||||
class="'+ String(classNames.item) + ' ' + String(classNames.itemChoice) + ' ' + String(data.disabled ? classNames.itemDisabled : classNames.itemSelectable) + '"\
|
||||
data-select-text="'+ String(itemSelectText) + '"\
|
||||
data-choice \
|
||||
'+ String(data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable') + '\
|
||||
data-id="'+ String(data.id) + '"\
|
||||
data-value="'+ String(data.value) + '"\
|
||||
'+ String(data.groupId > 0 ? 'role="treeitem"' : 'role="option"') + '\
|
||||
>\
|
||||
<span style="margin-right:10px;">👉🏽</span> ' + String(data.label) + '\
|
||||
</div>\
|
||||
');
|
||||
},
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Google Analytics - Ignore me -->
|
||||
<script>
|
||||
window.ga = window.ga || function() { (ga.q = ga.q || []).push(arguments) }; ga.l = +new Date;
|
||||
ga('create', 'UA-31575166-1', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
<!-- End Google Analytics -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in a new issue