mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-17 21:16:34 +02:00
RTL support + examples
This commit is contained in:
parent
188262f971
commit
4179ca038a
|
@ -10,6 +10,7 @@ A vanilla, lightweight (~15kb gzipped 🎉), configurable select box/text input
|
||||||
* Flexible styling
|
* Flexible styling
|
||||||
* Fast search/filtering
|
* Fast search/filtering
|
||||||
* Clean API
|
* Clean API
|
||||||
|
* Right-to-left support
|
||||||
|
|
||||||
## Setup
|
## Setup
|
||||||
|
|
||||||
|
|
32
assets/scripts/dist/choices.js
vendored
32
assets/scripts/dist/choices.js
vendored
|
@ -1,4 +1,4 @@
|
||||||
/*! choices.js v1.1.9 | (c) 2016 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
|
/*! choices.js v2.0.0 | (c) 2016 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
|
||||||
/******/ (function(modules) { // webpackBootstrap
|
/******/ (function(modules) { // webpackBootstrap
|
||||||
/******/ // The module cache
|
/******/ // The module cache
|
||||||
/******/ var installedModules = {};
|
/******/ var installedModules = {};
|
||||||
|
@ -179,6 +179,11 @@
|
||||||
// Retrieve triggering element (i.e. element with 'data-choice' trigger)
|
// Retrieve triggering element (i.e. element with 'data-choice' trigger)
|
||||||
this.passedElement = (0, _utils.isType)('String', element) ? document.querySelector(element) : element;
|
this.passedElement = (0, _utils.isType)('String', element) ? document.querySelector(element) : element;
|
||||||
|
|
||||||
|
if (!this.passedElement) {
|
||||||
|
console.error('Passed element not found');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
this.highlightPosition = 0;
|
this.highlightPosition = 0;
|
||||||
this.canSearch = this.config.search;
|
this.canSearch = this.config.search;
|
||||||
|
|
||||||
|
@ -731,6 +736,10 @@
|
||||||
if (this.passedElement.type !== 'select-one') {
|
if (this.passedElement.type !== 'select-one') {
|
||||||
this.input.style.width = (0, _utils.getWidthOfInput)(this.input);
|
this.input.style.width = (0, _utils.getWidthOfInput)(this.input);
|
||||||
}
|
}
|
||||||
|
if (this.passedElement.type !== 'text' && this.config.search) {
|
||||||
|
this.isSearching = false;
|
||||||
|
this.store.dispatch((0, _index3.activateChoices)(true));
|
||||||
|
}
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -949,7 +958,6 @@
|
||||||
// If we are clicking on an option
|
// If we are clicking on an option
|
||||||
var id = element.getAttribute('data-id');
|
var id = element.getAttribute('data-id');
|
||||||
var choice = this.store.getChoiceById(id);
|
var choice = this.store.getChoiceById(id);
|
||||||
var hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
|
||||||
|
|
||||||
if (choice && !choice.selected && !choice.disabled) {
|
if (choice && !choice.selected && !choice.disabled) {
|
||||||
var canAddItem = this._canAddItem(activeItems, choice.value);
|
var canAddItem = this._canAddItem(activeItems, choice.value);
|
||||||
|
@ -958,13 +966,6 @@
|
||||||
this._addItem(choice.value, choice.label, choice.id);
|
this._addItem(choice.value, choice.label, choice.id);
|
||||||
this._triggerChange(choice.value);
|
this._triggerChange(choice.value);
|
||||||
this.clearInput(this.passedElement);
|
this.clearInput(this.passedElement);
|
||||||
this.isSearching = false;
|
|
||||||
this.store.dispatch((0, _index3.activateChoices)(true));
|
|
||||||
|
|
||||||
// We only hide the dropdown on a choice selection for single select boxes
|
|
||||||
if (this.passedElement.type === 'select-one' && hasActiveDropdown) {
|
|
||||||
this.hideDropdown();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1012,7 +1013,7 @@
|
||||||
key: '_canAddItem',
|
key: '_canAddItem',
|
||||||
value: function _canAddItem(activeItems, value) {
|
value: function _canAddItem(activeItems, value) {
|
||||||
var canAddItem = true;
|
var canAddItem = true;
|
||||||
var notice = 'Press Enter to add "' + value + '"';
|
var notice = 'Press Enter to add <b>"' + value + '"</b>';
|
||||||
|
|
||||||
if (this.passedElement.type === 'select-multiple' || this.passedElement.type === 'text') {
|
if (this.passedElement.type === 'select-multiple' || this.passedElement.type === 'text') {
|
||||||
if (this.config.maxItemCount > 0 && this.config.maxItemCount <= this.itemList.children.length) {
|
if (this.config.maxItemCount > 0 && this.config.maxItemCount <= this.itemList.children.length) {
|
||||||
|
@ -1240,6 +1241,8 @@
|
||||||
// regardless of whether an item was added
|
// regardless of whether an item was added
|
||||||
if (hasActiveDropdown && _this15.passedElement.type === 'select-one') {
|
if (hasActiveDropdown && _this15.passedElement.type === 'select-one') {
|
||||||
_this15.hideDropdown();
|
_this15.hideDropdown();
|
||||||
|
_this15.clearInput();
|
||||||
|
_this15.containerOuter.focus();
|
||||||
}
|
}
|
||||||
} else if (_this15.passedElement.type === 'select-one') {
|
} else if (_this15.passedElement.type === 'select-one') {
|
||||||
// Open single select dropdown if it's not active
|
// Open single select dropdown if it's not active
|
||||||
|
@ -1989,8 +1992,8 @@
|
||||||
|
|
||||||
var classNames = this.config.classNames;
|
var classNames = this.config.classNames;
|
||||||
var templates = {
|
var templates = {
|
||||||
containerOuter: function containerOuter() {
|
containerOuter: function containerOuter(direction) {
|
||||||
return (0, _utils.strToEl)('\n <div class="' + classNames.containerOuter + '" data-type="' + _this21.passedElement.type + '" ' + (_this21.passedElement.type === 'select-one' ? 'tabindex="0"' : '') + ' aria-haspopup="true" aria-expanded="false"></div>\n ');
|
return (0, _utils.strToEl)('\n <div class="' + classNames.containerOuter + '" data-type="' + _this21.passedElement.type + '" ' + (_this21.passedElement.type === 'select-one' ? 'tabindex="0"' : '') + ' aria-haspopup="true" aria-expanded="false" dir="' + direction + '"></div>\n ');
|
||||||
},
|
},
|
||||||
containerInner: function containerInner() {
|
containerInner: function containerInner() {
|
||||||
return (0, _utils.strToEl)('\n <div class="' + classNames.containerInner + '"></div>\n ');
|
return (0, _utils.strToEl)('\n <div class="' + classNames.containerInner + '"></div>\n ');
|
||||||
|
@ -2044,12 +2047,14 @@
|
||||||
value: function _createInput() {
|
value: function _createInput() {
|
||||||
var _this22 = this;
|
var _this22 = this;
|
||||||
|
|
||||||
var containerOuter = this._getTemplate('containerOuter');
|
var direction = this.passedElement.getAttribute('dir') || 'ltr';
|
||||||
|
var containerOuter = this._getTemplate('containerOuter', direction);
|
||||||
var containerInner = this._getTemplate('containerInner');
|
var containerInner = this._getTemplate('containerInner');
|
||||||
var itemList = this._getTemplate('itemList');
|
var itemList = this._getTemplate('itemList');
|
||||||
var choiceList = this._getTemplate('choiceList');
|
var choiceList = this._getTemplate('choiceList');
|
||||||
var input = this._getTemplate('input');
|
var input = this._getTemplate('input');
|
||||||
var dropdown = this._getTemplate('dropdown');
|
var dropdown = this._getTemplate('dropdown');
|
||||||
|
var placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') : false;
|
||||||
|
|
||||||
this.containerOuter = containerOuter;
|
this.containerOuter = containerOuter;
|
||||||
this.containerInner = containerInner;
|
this.containerInner = containerInner;
|
||||||
|
@ -2072,7 +2077,6 @@
|
||||||
(0, _utils.wrap)(containerInner, containerOuter);
|
(0, _utils.wrap)(containerInner, containerOuter);
|
||||||
|
|
||||||
// If placeholder has been enabled and we have a value
|
// If placeholder has been enabled and we have a value
|
||||||
var placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') : false;
|
|
||||||
if (placeholder) {
|
if (placeholder) {
|
||||||
input.placeholder = placeholder;
|
input.placeholder = placeholder;
|
||||||
if (this.passedElement.type !== 'select-one') {
|
if (this.passedElement.type !== 'select-one') {
|
||||||
|
|
2
assets/scripts/dist/choices.js.map
vendored
2
assets/scripts/dist/choices.js.map
vendored
File diff suppressed because one or more lines are too long
6
assets/scripts/dist/choices.min.js
vendored
6
assets/scripts/dist/choices.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -115,6 +115,11 @@ export default class Choices {
|
||||||
// Retrieve triggering element (i.e. element with 'data-choice' trigger)
|
// Retrieve triggering element (i.e. element with 'data-choice' trigger)
|
||||||
this.passedElement = isType('String', element) ? document.querySelector(element) : element;
|
this.passedElement = isType('String', element) ? document.querySelector(element) : element;
|
||||||
|
|
||||||
|
if (!this.passedElement) {
|
||||||
|
console.error('Passed element not found');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
this.highlightPosition = 0;
|
this.highlightPosition = 0;
|
||||||
this.canSearch = this.config.search;
|
this.canSearch = this.config.search;
|
||||||
|
|
||||||
|
@ -582,6 +587,10 @@ export default class Choices {
|
||||||
if (this.passedElement.type !== 'select-one') {
|
if (this.passedElement.type !== 'select-one') {
|
||||||
this.input.style.width = getWidthOfInput(this.input);
|
this.input.style.width = getWidthOfInput(this.input);
|
||||||
}
|
}
|
||||||
|
if (this.passedElement.type !== 'text' && this.config.search) {
|
||||||
|
this.isSearching = false;
|
||||||
|
this.store.dispatch(activateChoices(true));
|
||||||
|
}
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -766,7 +775,6 @@ export default class Choices {
|
||||||
// If we are clicking on an option
|
// If we are clicking on an option
|
||||||
const id = element.getAttribute('data-id');
|
const id = element.getAttribute('data-id');
|
||||||
const choice = this.store.getChoiceById(id);
|
const choice = this.store.getChoiceById(id);
|
||||||
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
|
||||||
|
|
||||||
if (choice && !choice.selected && !choice.disabled) {
|
if (choice && !choice.selected && !choice.disabled) {
|
||||||
const canAddItem = this._canAddItem(activeItems, choice.value);
|
const canAddItem = this._canAddItem(activeItems, choice.value);
|
||||||
|
@ -775,13 +783,6 @@ export default class Choices {
|
||||||
this._addItem(choice.value, choice.label, choice.id);
|
this._addItem(choice.value, choice.label, choice.id);
|
||||||
this._triggerChange(choice.value);
|
this._triggerChange(choice.value);
|
||||||
this.clearInput(this.passedElement);
|
this.clearInput(this.passedElement);
|
||||||
this.isSearching = false;
|
|
||||||
this.store.dispatch(activateChoices(true));
|
|
||||||
|
|
||||||
// We only hide the dropdown on a choice selection for single select boxes
|
|
||||||
if (this.passedElement.type === 'select-one' && hasActiveDropdown) {
|
|
||||||
this.hideDropdown();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -819,7 +820,7 @@ export default class Choices {
|
||||||
*/
|
*/
|
||||||
_canAddItem(activeItems, value) {
|
_canAddItem(activeItems, value) {
|
||||||
let canAddItem = true;
|
let canAddItem = true;
|
||||||
let notice = `Press Enter to add "${value}"`;
|
let notice = `Press Enter to add <b>"${value}"</b>`;
|
||||||
|
|
||||||
if (this.passedElement.type === 'select-multiple' || this.passedElement.type === 'text') {
|
if (this.passedElement.type === 'select-multiple' || this.passedElement.type === 'text') {
|
||||||
if (this.config.maxItemCount > 0 && this.config.maxItemCount <= this.itemList.children.length) {
|
if (this.config.maxItemCount > 0 && this.config.maxItemCount <= this.itemList.children.length) {
|
||||||
|
@ -1026,6 +1027,8 @@ export default class Choices {
|
||||||
// regardless of whether an item was added
|
// regardless of whether an item was added
|
||||||
if (hasActiveDropdown && this.passedElement.type === 'select-one') {
|
if (hasActiveDropdown && this.passedElement.type === 'select-one') {
|
||||||
this.hideDropdown();
|
this.hideDropdown();
|
||||||
|
this.clearInput();
|
||||||
|
this.containerOuter.focus();
|
||||||
}
|
}
|
||||||
} else if (this.passedElement.type === 'select-one') {
|
} else if (this.passedElement.type === 'select-one') {
|
||||||
// Open single select dropdown if it's not active
|
// Open single select dropdown if it's not active
|
||||||
|
@ -1695,9 +1698,9 @@ export default class Choices {
|
||||||
_createTemplates() {
|
_createTemplates() {
|
||||||
const classNames = this.config.classNames;
|
const classNames = this.config.classNames;
|
||||||
const templates = {
|
const templates = {
|
||||||
containerOuter: () => {
|
containerOuter: (direction) => {
|
||||||
return strToEl(`
|
return strToEl(`
|
||||||
<div class="${classNames.containerOuter}" data-type="${this.passedElement.type}" ${this.passedElement.type === 'select-one' ? 'tabindex="0"' : ''} aria-haspopup="true" aria-expanded="false"></div>
|
<div class="${classNames.containerOuter}" data-type="${this.passedElement.type}" ${this.passedElement.type === 'select-one' ? 'tabindex="0"' : ''} aria-haspopup="true" aria-expanded="false" dir="${direction}"></div>
|
||||||
`);
|
`);
|
||||||
},
|
},
|
||||||
containerInner: () => {
|
containerInner: () => {
|
||||||
|
@ -1781,12 +1784,14 @@ export default class Choices {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
_createInput() {
|
_createInput() {
|
||||||
const containerOuter = this._getTemplate('containerOuter');
|
const direction = this.passedElement.getAttribute('dir') || 'ltr';
|
||||||
|
const containerOuter = this._getTemplate('containerOuter', direction);
|
||||||
const containerInner = this._getTemplate('containerInner');
|
const containerInner = this._getTemplate('containerInner');
|
||||||
const itemList = this._getTemplate('itemList');
|
const itemList = this._getTemplate('itemList');
|
||||||
const choiceList = this._getTemplate('choiceList');
|
const choiceList = this._getTemplate('choiceList');
|
||||||
const input = this._getTemplate('input');
|
const input = this._getTemplate('input');
|
||||||
const dropdown = this._getTemplate('dropdown');
|
const dropdown = this._getTemplate('dropdown');
|
||||||
|
const placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') : false;
|
||||||
|
|
||||||
this.containerOuter = containerOuter;
|
this.containerOuter = containerOuter;
|
||||||
this.containerInner = containerInner;
|
this.containerInner = containerInner;
|
||||||
|
@ -1809,7 +1814,6 @@ export default class Choices {
|
||||||
wrap(containerInner, containerOuter);
|
wrap(containerInner, containerOuter);
|
||||||
|
|
||||||
// If placeholder has been enabled and we have a value
|
// If placeholder has been enabled and we have a value
|
||||||
const placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') : false;
|
|
||||||
if (placeholder) {
|
if (placeholder) {
|
||||||
input.placeholder = placeholder;
|
input.placeholder = placeholder;
|
||||||
if (this.passedElement.type !== 'select-one') {
|
if (this.passedElement.type !== 'select-one') {
|
||||||
|
|
|
@ -63,6 +63,14 @@
|
||||||
.choices[data-type*="select-one"].is-open:after {
|
.choices[data-type*="select-one"].is-open:after {
|
||||||
border-color: transparent transparent #333333 transparent;
|
border-color: transparent transparent #333333 transparent;
|
||||||
margin-top: -7.5px; }
|
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 {
|
.choices[data-type*="select-multiple"] .choices__inner, .choices[data-type*="text"] .choices__inner {
|
||||||
cursor: text; }
|
cursor: text; }
|
||||||
|
@ -111,6 +119,9 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px 16px 4px 4px;
|
padding: 4px 16px 4px 4px;
|
||||||
width: 100%; }
|
width: 100%; }
|
||||||
|
[dir="rtl"] .choices__list--single {
|
||||||
|
padding-right: 4px;
|
||||||
|
padding-left: 16px; }
|
||||||
.choices__list--single .choices__item {
|
.choices__list--single .choices__item {
|
||||||
width: 100%; }
|
width: 100%; }
|
||||||
|
|
||||||
|
@ -131,6 +142,9 @@
|
||||||
word-break: break-all; }
|
word-break: break-all; }
|
||||||
.choices__list--multiple .choices__item[data-deletable] {
|
.choices__list--multiple .choices__item[data-deletable] {
|
||||||
padding-right: 5px; }
|
padding-right: 5px; }
|
||||||
|
[dir="rtl"] .choices__list--multiple .choices__item {
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 3.75px; }
|
||||||
.choices__list--multiple .choices__item.is-highlighted {
|
.choices__list--multiple .choices__item.is-highlighted {
|
||||||
background-color: #00a5bb;
|
background-color: #00a5bb;
|
||||||
border: 1px solid #008fa1; }
|
border: 1px solid #008fa1; }
|
||||||
|
@ -170,6 +184,8 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
font-size: 14px; }
|
font-size: 14px; }
|
||||||
|
[dir="rtl"] .choices__list--dropdown .choices__item {
|
||||||
|
text-align: right; }
|
||||||
@media (min-width: 640px) {
|
@media (min-width: 640px) {
|
||||||
.choices__list--dropdown .choices__item--selectable {
|
.choices__list--dropdown .choices__item--selectable {
|
||||||
padding-right: 100px; }
|
padding-right: 100px; }
|
||||||
|
@ -181,7 +197,14 @@
|
||||||
right: 10px;
|
right: 10px;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
-webkit-transform: translateY(-50%);
|
-webkit-transform: translateY(-50%);
|
||||||
transform: translateY(-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 {
|
.choices__list--dropdown .choices__item--selectable.is-highlighted {
|
||||||
background-color: #f2f2f2; }
|
background-color: #f2f2f2; }
|
||||||
.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
|
.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
|
||||||
|
@ -233,6 +256,9 @@
|
||||||
padding: 4px 0 4px 2px; }
|
padding: 4px 0 4px 2px; }
|
||||||
.choices__input:focus {
|
.choices__input:focus {
|
||||||
outline: 0; }
|
outline: 0; }
|
||||||
|
[dir="rtl"] .choices__input {
|
||||||
|
padding-right: 2px;
|
||||||
|
padding-left: 0; }
|
||||||
|
|
||||||
.choices__placeholder {
|
.choices__placeholder {
|
||||||
opacity: .5; }
|
opacity: .5; }
|
||||||
|
|
2
assets/styles/css/choices.min.css
vendored
2
assets/styles/css/choices.min.css
vendored
File diff suppressed because one or more lines are too long
|
@ -74,7 +74,7 @@ $choices-press-to-select-text: 'Press to select' !default;
|
||||||
border-color: $choices-text-color transparent transparent transparent;
|
border-color: $choices-text-color transparent transparent transparent;
|
||||||
border-width: 5px;
|
border-width: 5px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 7.5px + 4px;
|
right: 11.5px;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
margin-top: -2.5px;
|
margin-top: -2.5px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
@ -83,6 +83,18 @@ $choices-press-to-select-text: 'Press to select' !default;
|
||||||
border-color: transparent transparent $choices-text-color transparent;
|
border-color: transparent transparent $choices-text-color transparent;
|
||||||
margin-top: -7.5px;
|
margin-top: -7.5px;
|
||||||
}
|
}
|
||||||
|
&[dir="rtl"] {
|
||||||
|
&:after {
|
||||||
|
left: 11.5px;
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
|
.#{$choices-selector}__button {
|
||||||
|
right: auto;
|
||||||
|
left: 0;
|
||||||
|
margin-left: 25px;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$choices-selector}[data-type*="select-multiple"], .#{$choices-selector}[data-type*="text"] {
|
.#{$choices-selector}[data-type*="select-multiple"], .#{$choices-selector}[data-type*="text"] {
|
||||||
|
@ -131,6 +143,10 @@ $choices-press-to-select-text: 'Press to select' !default;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 4px 16px 4px 4px;
|
padding: 4px 16px 4px 4px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
[dir="rtl"] & {
|
||||||
|
padding-right: 4px;
|
||||||
|
padding-left: 16px;
|
||||||
|
}
|
||||||
.#{$choices-selector}__item { width: 100%; }
|
.#{$choices-selector}__item { width: 100%; }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -150,6 +166,10 @@ $choices-press-to-select-text: 'Press to select' !default;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
&[data-deletable] { padding-right: 5px; }
|
&[data-deletable] { padding-right: 5px; }
|
||||||
|
[dir="rtl"] & {
|
||||||
|
margin-right: 0;
|
||||||
|
margin-left: 3.75px;
|
||||||
|
}
|
||||||
&.is-highlighted {
|
&.is-highlighted {
|
||||||
background-color: darken($choices-primary-color, 5%);
|
background-color: darken($choices-primary-color, 5%);
|
||||||
border: 1px solid darken($choices-primary-color, 10%);
|
border: 1px solid darken($choices-primary-color, 10%);
|
||||||
|
@ -193,6 +213,7 @@ $choices-press-to-select-text: 'Press to select' !default;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
font-size: $choices-font-size-md;
|
font-size: $choices-font-size-md;
|
||||||
|
[dir="rtl"] & { text-align: right; }
|
||||||
}
|
}
|
||||||
.#{$choices-selector}__item--selectable {
|
.#{$choices-selector}__item--selectable {
|
||||||
@media (min-width: 640px) {
|
@media (min-width: 640px) {
|
||||||
|
@ -206,6 +227,15 @@ $choices-press-to-select-text: 'Press to select' !default;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
|
[dir="rtl"] & {
|
||||||
|
text-align: right;
|
||||||
|
padding-left: 100px;
|
||||||
|
padding-right: 10px;
|
||||||
|
&:after {
|
||||||
|
right: auto;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&.is-highlighted {
|
&.is-highlighted {
|
||||||
background-color: mix(#000000, #FFFFFF, 5%);
|
background-color: mix(#000000, #FFFFFF, 5%);
|
||||||
|
@ -255,8 +285,12 @@ $choices-press-to-select-text: 'Press to select' !default;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 4px 0 4px 2px;
|
padding: 4px 0 4px 2px;
|
||||||
&:focus { outline: 0; }
|
&:focus { outline: 0; }
|
||||||
|
[dir="rtl"] & {
|
||||||
|
padding-right: 2px;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$choices-selector}__placeholder { opacity: .5; }
|
.#{$choices-selector}__placeholder { opacity: .5; }
|
||||||
|
|
||||||
/*===== End of Choices ======*/
|
/*===== End of Choices ======*/
|
118
index.html
118
index.html
|
@ -19,7 +19,7 @@
|
||||||
<!-- End ignore these -->
|
<!-- End ignore these -->
|
||||||
|
|
||||||
<!-- Optional includes -->
|
<!-- Optional includes -->
|
||||||
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=es5,fetch,Element.prototype.classList,requestAnimationFrame,Node.insertBefore,Node.firstChild"></script>
|
<!-- <script src="https://cdn.polyfill.io/v2/polyfill.js?features=es5,fetch,Element.prototype.classList,requestAnimationFrame,Node.insertBefore,Node.firstChild"></script> -->
|
||||||
<!-- End optional includes -->
|
<!-- End optional includes -->
|
||||||
|
|
||||||
<!-- Choices includes -->
|
<!-- Choices includes -->
|
||||||
|
@ -45,37 +45,40 @@
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h2>Text inputs</h2>
|
<h2>Text inputs</h2>
|
||||||
<label for="choices-1">Limited to 5 values with remove button</label>
|
<label for="choices-text-remove-button">Limited to 5 values with remove button</label>
|
||||||
<input class="form-control" id="choices-1" type="text" value="preset-1,preset-2" placeholder="Enter something">
|
<input class="form-control" id="choices-text-remove-button" type="text" value="preset-1,preset-2" placeholder="Enter something">
|
||||||
|
|
||||||
<label for="choices-2">Unique values only, no pasting</label>
|
<label for="choices-text-unique-values">Unique values only, no pasting</label>
|
||||||
<input class="form-control" id="choices-2" type="text" value="preset-1, preset-2" placeholder="This is a placeholder" class="custom class">
|
<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-3">Email addresses only</label>
|
<label for="choices-text-email-filter">Email addresses only</label>
|
||||||
<input class="form-control" id="choices-3" type="text" placeholder="This is a placeholder">
|
<input class="form-control" id="choices-text-email-filter" type="text" placeholder="This is a placeholder">
|
||||||
|
|
||||||
<label for="choices-4">Disabled</label>
|
<label for="choices-text-disabled">Disabled</label>
|
||||||
<input class="form-control" id="choices-4" type="text" value="josh@joshuajohnson.co.uk, joe@bloggs.co.uk" placeholder="This is a placeholder">
|
<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-5">Prepends and appends a value to each items return value</label>
|
<label for="choices-text-prepend-append-value">Prepends and appends a value to each items return value</label>
|
||||||
<input class="form-control" id="choices-5" type="text" value="preset-1, preset-2" placeholder="This is a placeholder">
|
<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-6">Preset values passed through options</label>
|
<label for="choices-text-preset-values">Preset values passed through options</label>
|
||||||
<input class="form-control" id="choices-6" type="text" value="olivia@benson.com" placeholder="This is a placeholder">
|
<input class="form-control" id="choices-text-preset-values" type="text" value="olivia@benson.com" placeholder="This is a placeholder">
|
||||||
|
|
||||||
|
<label for="choices-text-preset-values">Right-to-left</label>
|
||||||
|
<input class="form-control" data-choice id="choices-text-rtl" type="text" value="Value 1, Value 2" dir="rtl">
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h2>Multiple select input</h2>
|
<h2>Multiple select input</h2>
|
||||||
<label for="choices-7">Default</label>
|
<label for="choices-multiple-default">Default</label>
|
||||||
<select class="form-control" data-choice name="choices-7" id="choices-7" placeholder="This is a placeholder" multiple>
|
<select class="form-control" data-choice 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 1" selected>Dropdown item 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Dropdown item 2">Dropdown item 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Dropdown item 3">Dropdown item 3</option>
|
||||||
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
|
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<label for="choices-9">Option groups</label>
|
<label for="choices-multiple-groups">Option groups</label>
|
||||||
<select class="form-control" data-choice name="choices-9" id="choices-9" placeholder="This is a placeholder" multiple>
|
<select class="form-control" data-choice name="choices-multiple-groups" id="choices-multiple-groups" placeholder="This is a placeholder" multiple>
|
||||||
<optgroup label="UK">
|
<optgroup label="UK">
|
||||||
<option value="London">London</option>
|
<option value="London">London</option>
|
||||||
<option value="Manchester">Manchester</option>
|
<option value="Manchester">Manchester</option>
|
||||||
|
@ -108,27 +111,35 @@
|
||||||
</optgroup>
|
</optgroup>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<label for="choices-10">Options from remote source (Fetch API) & limited to 5</label>
|
<label for="choices-multiple-remote-fetch">Options from remote source (Fetch API) & limited to 5</label>
|
||||||
<select class="form-control" name="choices-10" id="choices-10" multiple></select>
|
<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-choice 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>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h2>Single select input</h2>
|
<h2>Single select input</h2>
|
||||||
<label for="choices-11">Default</label>
|
<label for="choices-single-default">Default</label>
|
||||||
<select class="form-control" data-choice name="choices-11" id="choices-11" placeholder="This is a placeholder">
|
<select class="form-control" data-choice name="choices-single-default" id="choices-single-default" placeholder="This is a placeholder">
|
||||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
<option value="Dropdown item 1">Dropdown item 1</option>
|
||||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
<option value="Dropdown item 2">Dropdown item 2</option>
|
||||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
<option value="Dropdown item 3">Dropdown item 3</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<label for="choices-12">Options from remote source (Fetch API)</label>
|
<label for="choices-single-remote-fetch">Options from remote source (Fetch API)</label>
|
||||||
<select class="form-control" name="choices-12" id="choices-12" placeholder="Pick an Arctic Monkeys record"></select>
|
<select class="form-control" name="choices-single-remote-fetch" id="choices-single-remote-fetch" placeholder="Pick an Arctic Monkeys record"></select>
|
||||||
|
|
||||||
<label for="choices-14">Options from remote source (XHR) & remove button</label>
|
<label for="choices-single-remove-xhr">Options from remote source (XHR) & remove button</label>
|
||||||
<select class="form-control" name="choices-14" id="choices-14" placeholder="Pick a Smiths record"></select>
|
<select class="form-control" name="choices-single-remove-xhr" id="choices-single-remove-xhr" placeholder="Pick a Smiths record"></select>
|
||||||
|
|
||||||
<label for="choices-13">Option groups</label>
|
<label for="choices-single-groups">Option groups</label>
|
||||||
<select class="form-control" data-choice name="choices-13" id="choices-13" placeholder="This is a placeholder">
|
<select class="form-control" data-choice name="choices-single-groups" id="choices-single-groups" placeholder="This is a placeholder">
|
||||||
<optgroup label="UK">
|
<optgroup label="UK">
|
||||||
<option value="London">London</option>
|
<option value="London">London</option>
|
||||||
<option value="Manchester">Manchester</option>
|
<option value="Manchester">Manchester</option>
|
||||||
|
@ -161,19 +172,26 @@
|
||||||
</optgroup>
|
</optgroup>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<label for="choices-15">Options added via config with no search</label>
|
<label for="choices-single-rtl">Right-to-left</label>
|
||||||
<select class="form-control" name="choices-15" id="choices-15">
|
<select class="form-control" data-choice 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>
|
<option value="0">Zero</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<label for="choices-16">Option and option groups added via config</label>
|
<label for="choices-single-preset-options">Option and option groups added via config</label>
|
||||||
<select class="form-control" name="choices-16" id="choices-16" placeholder="This is a placeholder"></select>
|
<select class="form-control" name="choices-single-preset-options" id="choices-single-preset-options" placeholder="This is a placeholder"></select>
|
||||||
|
|
||||||
<label for="choices-17">Option selected via config</label>
|
<label for="choices-single-selected-option">Option selected via config</label>
|
||||||
<select class="form-control" name="choices-17" id="choices-17" placeholder="This is a placeholder"></select>
|
<select class="form-control" name="choices-single-selected-option" id="choices-single-selected-option" placeholder="This is a placeholder"></select>
|
||||||
|
|
||||||
<label for="choices-18">Options without sorting</label>
|
<label for="choices-single-no-sorting">Options without sorting</label>
|
||||||
<select class="form-control" name="choices-18" id="choices-18" placeholder="This is a placeholder">
|
<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="Madrid">Madrid</option>
|
||||||
<option value="Toronto">Toronto</option>
|
<option value="Toronto">Toronto</option>
|
||||||
<option value="Vancouver">Vancouver</option>
|
<option value="Vancouver">Vancouver</option>
|
||||||
|
@ -216,7 +234,7 @@
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
var example1 = new Choices(document.getElementById('choices-1'), {
|
var example1 = new Choices(document.getElementById('choices-text-remove-button'), {
|
||||||
delimiter: ',',
|
delimiter: ',',
|
||||||
editItems: true,
|
editItems: true,
|
||||||
maxItemCount: 5,
|
maxItemCount: 5,
|
||||||
|
@ -229,32 +247,32 @@
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
var example2 = new Choices('#choices-2', {
|
var example2 = new Choices('#choices-text-unique-values', {
|
||||||
paste: false,
|
paste: false,
|
||||||
duplicateItems: false,
|
duplicateItems: false,
|
||||||
editItems: true,
|
editItems: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
var example3 = new Choices('#choices-3', {
|
var example3 = new Choices('#choices-text-email-filter', {
|
||||||
editItems: true,
|
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,}))$/,
|
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,}))$/,
|
||||||
});
|
});
|
||||||
|
|
||||||
var example4 = new Choices('#choices-4', {
|
var example4 = new Choices('#choices-text-disabled', {
|
||||||
addItems: false,
|
addItems: false,
|
||||||
removeItems: false,
|
removeItems: false,
|
||||||
}).disable();
|
}).disable();
|
||||||
|
|
||||||
var example5 = new Choices('#choices-5', {
|
var example5 = new Choices('#choices-text-prepend-append-value', {
|
||||||
prependValue: 'item-',
|
prependValue: 'item-',
|
||||||
appendValue: '-' + Date.now(),
|
appendValue: '-' + Date.now(),
|
||||||
}).removeActiveItems();
|
}).removeActiveItems();
|
||||||
|
|
||||||
var example7 = new Choices('#choices-6', {
|
var example7 = new Choices('#choices-text-preset-values', {
|
||||||
items: ['josh@joshuajohnson.co.uk', { value: 'joe@bloggs.co.uk', label: 'Joe Bloggs' } ],
|
items: ['josh@joshuajohnson.co.uk', { value: 'joe@bloggs.co.uk', label: 'Joe Bloggs' } ],
|
||||||
});
|
});
|
||||||
|
|
||||||
var example9 = new Choices('#choices-10', {
|
var example9 = new Choices('#choices-multiple-remote-fetch', {
|
||||||
placeholder: true,
|
placeholder: true,
|
||||||
placeholderValue: 'Pick an Strokes record',
|
placeholderValue: 'Pick an Strokes record',
|
||||||
maxItemCount: 5,
|
maxItemCount: 5,
|
||||||
|
@ -271,7 +289,7 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
var example10 = new Choices('#choices-12', {
|
var example10 = new Choices('#choices-single-remote-fetch', {
|
||||||
placeholder: true,
|
placeholder: true,
|
||||||
placeholderValue: 'Pick an Arctic Monkeys record'
|
placeholderValue: 'Pick an Arctic Monkeys record'
|
||||||
}).ajax(function(callback) {
|
}).ajax(function(callback) {
|
||||||
|
@ -287,7 +305,7 @@
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
var example11 = new Choices('#choices-14', {
|
var example11 = new Choices('#choices-single-remove-xhr', {
|
||||||
removeItemButton: true,
|
removeItemButton: true,
|
||||||
}).ajax(function(callback) {
|
}).ajax(function(callback) {
|
||||||
var request = new XMLHttpRequest();
|
var request = new XMLHttpRequest();
|
||||||
|
@ -295,9 +313,9 @@
|
||||||
request.onreadystatechange = function() {
|
request.onreadystatechange = function() {
|
||||||
var status;
|
var status;
|
||||||
var data;
|
var data;
|
||||||
if (request.readyState == 4) {
|
if (request.readyState === 4) {
|
||||||
status = request.status;
|
status = request.status;
|
||||||
if (status == 200) {
|
if (status === 200) {
|
||||||
data = JSON.parse(request.responseText);
|
data = JSON.parse(request.responseText);
|
||||||
callback(data.releases, 'title', 'title');
|
callback(data.releases, 'title', 'title');
|
||||||
example11.setValueByChoice('How Soon Is Now?');
|
example11.setValueByChoice('How Soon Is Now?');
|
||||||
|
@ -314,7 +332,7 @@
|
||||||
removeButton: true,
|
removeButton: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
var example13 = new Choices('#choices-15', {
|
var example13 = new Choices('#choices-single-no-search', {
|
||||||
search: false,
|
search: false,
|
||||||
removeItemButton: true,
|
removeItemButton: true,
|
||||||
choices: [
|
choices: [
|
||||||
|
@ -328,7 +346,7 @@
|
||||||
{value: 'Six', label: 'Label Six', selected: true},
|
{value: 'Six', label: 'Label Six', selected: true},
|
||||||
], 'value', 'label');
|
], 'value', 'label');
|
||||||
|
|
||||||
var example14 = new Choices('#choices-16', {
|
var example14 = new Choices('#choices-single-preset-options', {
|
||||||
placeholder: true,
|
placeholder: true,
|
||||||
}).setChoices([{
|
}).setChoices([{
|
||||||
label: 'Group one',
|
label: 'Group one',
|
||||||
|
@ -351,7 +369,7 @@
|
||||||
]
|
]
|
||||||
}], 'value', 'label');
|
}], 'value', 'label');
|
||||||
|
|
||||||
var example15 = new Choices('#choices-17', {
|
var example15 = new Choices('#choices-single-selected-option', {
|
||||||
choices: [
|
choices: [
|
||||||
{value: 'One', label: 'Label One', selected: true},
|
{value: 'One', label: 'Label One', selected: true},
|
||||||
{value: 'Two', label: 'Label Two', disabled: true},
|
{value: 'Two', label: 'Label Two', disabled: true},
|
||||||
|
@ -359,7 +377,7 @@
|
||||||
],
|
],
|
||||||
}).setValueByChoice('Two');
|
}).setValueByChoice('Two');
|
||||||
|
|
||||||
var example16 = new Choices('#choices-18', {
|
var example16 = new Choices('#choices-single-no-sorting', {
|
||||||
shouldSort: false,
|
shouldSort: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue