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

Version 2.7.3

Browse source
This commit is contained in:
Josh Johnson 2017-02-21 20:47:12 +00:00
parent e35ef8040c
commit ea4c5ae1f8
6 changed files with 77 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
README.md
View file

@ -68,7 +68,7 @@ Or include Choices directly:
paste: true,
search: true,
searchFloor: 1,
flip: true,
position: 'auto',
resetScrollPosition: true,
regexFilter: null,
shouldSort: true,
@ -252,12 +252,12 @@ Pass an array of objects:
**Usage:** The minimum length a search value should be before choices are searched.
### flip
**Type:** `Boolean` **Default:** `true`
### position
**Type:** `Boolean` **Default:** `auto`
**Input types affected:** `select-one`, `select-multiple`
**Usage:** Whether the dropdown should appear above the input (rather than beneath) if there is not enough space within the window.
**Usage:** Whether the dropdown should appear above or below the input. By default, if there is not enough space within the window the dropdown will appear above the input, otherwise below it.
### resetScrollPosition
**Type:** `Boolean` **Default:** `true`

12
assets/scripts/dist/choices.js vendored
View file

@ -125,7 +125,7 @@ return /******/ (function(modules) { // webpackBootstrap
paste: true,
search: true,
searchFloor: 1,
flip: true,
position: 'auto',
resetScrollPosition: true,
regexFilter: null,
shouldSort: true,
@ -753,8 +753,14 @@ return /******/ (function(modules) { // webpackBootstrap
var dimensions = this.dropdown.getBoundingClientRect();
var dropdownPos = Math.ceil(dimensions.top + window.scrollY + dimensions.height);
// If flip is enabled and the dropdown bottom position is greater than the window height flip the dropdown.
var shouldFlip = this.config.flip ? dropdownPos >= winHeight : false;
var shouldFlip = false;
if (this.config.position === 'auto') {
shouldFlip = dropdownPos >= winHeight;
} else if (this.config.position === 'top') {
shouldFlip = true;
}
if (shouldFlip) {
this.containerOuter.classList.add(this.config.classNames.flippedState);
@ -854,7 +860,7 @@ return /******/ (function(modules) { // webpackBootstrap
/**
* Set value of input. If the input is a select box, a choice will be created and selected otherwise
* an item will created directly.
* @param {Array/String} args Array of value objects or value strings/Single value string
* @param {Array} args Array of value objects or value strings
* @return {Object} Class instance
* @public
*/

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

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

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

@ -60,7 +60,7 @@ class Choices {
paste: true,
search: true,
searchFloor: 1,
flip: true,
position: 'auto',
resetScrollPosition: true,
regexFilter: null,
shouldSort: true,
@ -615,8 +615,13 @@ class Choices {
showDropdown(focusInput = false) {
const body = document.body;
const html = document.documentElement;
const winHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight,
html.scrollHeight, html.offsetHeight);
const winHeight = Math.max(
body.scrollHeight,
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
html.offsetHeight
);
this.containerOuter.classList.add(this.config.classNames.openState);
this.containerOuter.setAttribute('aria-expanded', 'true');
@ -624,8 +629,14 @@ class Choices {
const dimensions = this.dropdown.getBoundingClientRect();
const dropdownPos = Math.ceil(dimensions.top + window.scrollY + dimensions.height);
// If flip is enabled and the dropdown bottom position is greater than the window height flip the dropdown.
const shouldFlip = this.config.flip ? dropdownPos >= winHeight : false;
let shouldFlip = false;
if (this.config.position === 'auto') {
shouldFlip = dropdownPos >= winHeight;
} else if (this.config.position === 'top') {
shouldFlip = true;
}
if (shouldFlip) {
this.containerOuter.classList.add(this.config.classNames.flippedState);

50
tests/spec/choices_spec.js
View file

@ -76,7 +76,7 @@ describe('Choices', () => {
expect(this.choices.config.paste).toEqual(jasmine.any(Boolean));
expect(this.choices.config.search).toEqual(jasmine.any(Boolean));
expect(this.choices.config.searchFloor).toEqual(jasmine.any(Number));
expect(this.choices.config.flip).toEqual(jasmine.any(Boolean));
expect(this.choices.config.position).toEqual(jasmine.any(String));
expect(this.choices.config.regexFilter).toEqual(null);
expect(this.choices.config.sortFilter).toEqual(jasmine.any(Function));
expect(this.choices.config.sortFields).toEqual(jasmine.any(Array) || jasmine.any(String));
@ -368,7 +368,8 @@ describe('Choices', () => {
it('should close the dropdown on double click', function() {
this.choices = new Choices(this.input);
const container = this.choices.containerOuter;
const container = this.choices.containerOuter,
openState = this.choices.config.classNames.openState;
this.choices._onClick({
target: container,
@ -382,7 +383,7 @@ describe('Choices', () => {
preventDefault: () => {}
});
expect(document.activeElement === this.choices.input && container.classList.contains('is-open')).toBe(false);
expect(document.activeElement === this.choices.input && container.classList.contains(openState)).toBe(false);
});
it('should filter choices when searching', function() {
@ -758,4 +759,47 @@ describe('Choices', () => {
expect(randomItem.active).toBe(false);
});
});
describe('should react to config options', function() {
beforeEach(function() {
this.input = document.createElement('select');
this.input.className = 'js-choices';
this.input.setAttribute('multiple', '');
for (let i = 1; i < 4; i++) {
const option = document.createElement('option');
option.value = `Value ${i}`;
option.innerHTML = `Value ${i}`;
if (i % 2) {
option.selected = true;
}
this.input.appendChild(option);
}
document.body.appendChild(this.input);
});
it('should flip the dropdown', function() {
this.choices = new Choices(this.input, {
position: 'top'
});
const container = this.choices.containerOuter;
this.choices.input.focus();
expect(container.classList.contains(this.choices.config.classNames.flippedState)).toBe(true);
});
it('shouldn\'t flip the dropdown', function() {
this.choices = new Choices(this.input, {
position: 'bottom'
});
const container = this.choices.containerOuter;
this.choices.input.focus();
expect(container.classList.contains(this.choices.config.classNames.flippedState)).toBe(false);
});
});
});