mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-18 13:45:12 +02:00
Merge branch 'feature/modularise-code' of github.com:jshjohnson/Choices into update-fuse
This commit is contained in:
Jay Kid
commit
4a68f6acf3
17
.eslintrc
17
.eslintrc
|
|
@ -5,7 +5,22 @@
|
|||
},
|
||||
"env": {
|
||||
"browser": true,
|
||||
"node": true
|
||||
"node": true,
|
||||
"mocha": true,
|
||||
"jasmine": true
|
||||
},
|
||||
"globals": {
|
||||
"__DEV__": true,
|
||||
"describe": true,
|
||||
"it": true,
|
||||
"before": true,
|
||||
"after": true,
|
||||
"beforeEach": true,
|
||||
"afterEach": true,
|
||||
"expect": true,
|
||||
"browser": true,
|
||||
"by": true,
|
||||
"element": true
|
||||
},
|
||||
"parser": "babel-eslint",
|
||||
"rules": {
|
||||
|
|
|
|||
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -9,3 +9,5 @@ package-lock.json
|
|||
# Test
|
||||
tests/reports
|
||||
tests/results
|
||||
.nyc_output
|
||||
coverage
|
||||
|
|
|
|||
|
|
@ -408,7 +408,7 @@ const example = new Choices(element, {
|
|||
### renderSelectedChoices
|
||||
**Type:** `String` **Default:** `auto`
|
||||
|
||||
**Input types affected:** `select-one`, `select-multiple`
|
||||
**Input types affected:** `select-multiple`
|
||||
|
||||
**Usage:** Whether selected choices should be removed from the list. By default choices are removed when they are selected in multiple select box. To always render choices pass `always`.
|
||||
|
||||
|
|
|
|||
1
assets/scripts/dist/choices.js.map
vendored
1
assets/scripts/dist/choices.js.map
vendored
File diff suppressed because one or more lines are too long
4
assets/scripts/dist/choices.min.js
vendored
4
assets/scripts/dist/choices.min.js
vendored
File diff suppressed because one or more lines are too long
49
config/test.js
Normal file
49
config/test.js
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
const { JSDOM } = require('jsdom');
|
||||
|
||||
const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
|
||||
const { window } = jsdom;
|
||||
|
||||
function copyProps(src, target) {
|
||||
const props = Object.getOwnPropertyNames(src)
|
||||
.filter(prop => typeof target[prop] === 'undefined')
|
||||
.map(prop => Object.getOwnPropertyDescriptor(src, prop));
|
||||
Object.defineProperties(target, props);
|
||||
}
|
||||
|
||||
function ignoreExtensions(extensions = [], returnValue = {}) {
|
||||
function noop() {
|
||||
return returnValue;
|
||||
}
|
||||
|
||||
extensions.forEach((ext) => {
|
||||
require.extensions[ext] = noop;
|
||||
});
|
||||
}
|
||||
|
||||
function mockStorage() {
|
||||
return {
|
||||
removeItem: function(key) {
|
||||
delete this[key];
|
||||
},
|
||||
getItem: function(key) {
|
||||
return this[key];
|
||||
},
|
||||
setItem: function(key, value) {
|
||||
this[key] = value;
|
||||
},
|
||||
clear: function() {}
|
||||
}
|
||||
}
|
||||
|
||||
global.window = window;
|
||||
global.document = window.document;
|
||||
global.navigator = {
|
||||
userAgent: 'node.js'
|
||||
};
|
||||
global.HTMLElement = window.HTMLElement;
|
||||
global.window.localStorage = mockStorage;
|
||||
global.window.sessionStorage = mockStorage;
|
||||
|
||||
copyProps(window, global);
|
||||
ignoreExtensions(['.scss', '.css']);
|
||||
ignoreExtensions(['.jpg', '.png', '.svg'], '');
|
||||
22
index.html
22
index.html
|
|
@ -6,17 +6,17 @@
|
|||
<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">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="src/images/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" href="src/images/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="src/images/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="manifest" href="src/images/manifest.json">
|
||||
<link rel="mask-icon" href="src/images/safari-pinned-tab.svg" color="#00bcd4">
|
||||
<link rel="shortcut icon" href="src/images/favicon.ico">
|
||||
<meta name="msapplication-config" content="/src/images/browserconfig.xml">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
|
||||
<!-- Ignore these -->
|
||||
<link rel="stylesheet" href="assets/styles/css/base.min.css?version=3.0.2">
|
||||
<link rel="stylesheet" href="src/styles/css/base.min.css?version=3.0.2">
|
||||
<!-- End ignore these -->
|
||||
|
||||
<!-- Optional includes -->
|
||||
|
|
@ -24,8 +24,8 @@
|
|||
<!-- End optional includes -->
|
||||
|
||||
<!-- Choices includes -->
|
||||
<link rel="stylesheet" href="assets/styles/css/choices.min.css?version=3.0.2">
|
||||
<script src="assets/scripts/dist/choices.min.js?version=2.8.8"></script>
|
||||
<link rel="stylesheet" href="src/styles/css/choices.min.css?version=3.0.2">
|
||||
<script src="src/scripts/dist/choices.min.js?version=2.8.8"></script>
|
||||
<!-- End Choices includes -->
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<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">
|
||||
<img src="src/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
|
||||
|
|
|
|||
32
package.json
32
package.json
|
|
@ -2,18 +2,20 @@
|
|||
"name": "choices.js",
|
||||
"version": "3.0.2",
|
||||
"description": "A vanilla JS customisable text input/select box plugin",
|
||||
"main": "./assets/scripts/dist/choices.min.js",
|
||||
"main": "./src/scripts/dist/choices.min.js",
|
||||
"types": "./index.d.ts",
|
||||
"scripts": {
|
||||
"start": "node server.js",
|
||||
"lint": "eslint assets/**/*.js",
|
||||
"test": "karma start --single-run --no-auto-watch tests/karma.config.js",
|
||||
"test:watch": "karma start --auto-watch --no-single-run tests/karma.config.js",
|
||||
"test:mocha": "nyc mocha --require ./config/test.js --compilers babel-core/register \"./src/**/**/**/**/*.spec.js\"",
|
||||
"test:mocha:watch": "npm run test:mocha -- --watch",
|
||||
"css:watch": "nodemon -e scss -x \"npm run css:build\"",
|
||||
"css:build": "npm run css:sass -s && npm run css:prefix -s && npm run css:min -s",
|
||||
"css:sass": "node-sass --output-style expanded --include-path scss assets/styles/scss/base.scss assets/styles/css/base.css && node-sass --output-style expanded --include-path scss assets/styles/scss/choices.scss assets/styles/css/choices.css",
|
||||
"css:prefix": "postcss --use autoprefixer -b 'last 2 versions' assets/styles/css/*.css -d assets/styles/css/",
|
||||
"css:min": "csso assets/styles/css/base.css assets/styles/css/base.min.css && csso assets/styles/css/choices.css assets/styles/css/choices.min.css",
|
||||
"css:sass": "node-sass --output-style expanded --include-path scss src/styles/scss/base.scss src/styles/css/base.css && node-sass --output-style expanded --include-path scss src/styles/scss/choices.scss src/styles/css/choices.css",
|
||||
"css:prefix": "postcss --use autoprefixer -b 'last 2 versions' src/styles/css/*.css -d src/styles/css/",
|
||||
"css:min": "csso src/styles/css/base.css src/styles/css/base.min.css && csso src/styles/css/choices.css src/styles/css/choices.min.css",
|
||||
"js:build": "concurrently --prefix-colors yellow,green \"webpack --minimize --config webpack.config.prod.js\" \"webpack --config webpack.config.prod.js\"",
|
||||
"version": "node version.js --current $npm_package_version --new $npm_config_newVersion",
|
||||
"postversion": "npm run js:build",
|
||||
|
|
@ -31,13 +33,15 @@
|
|||
"homepage": "https://github.com/jshjohnson/Choices#readme",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.3.3",
|
||||
"babel-core": "^6.7.2",
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-eslint": "^7.2.3",
|
||||
"babel-loader": "^6.2.4",
|
||||
"babel-preset-es2015": "^6.6.0",
|
||||
"chai": "^4.1.0",
|
||||
"concurrently": "^3.1.0",
|
||||
"core-js": "^2.4.1",
|
||||
"csso": "^1.8.2",
|
||||
"custom-event-autopolyfill": "^0.1.3",
|
||||
"es6-promise": "^3.2.1",
|
||||
"eslint": "^3.19.0",
|
||||
"eslint-config-airbnb": "^15.1.0",
|
||||
|
|
@ -46,6 +50,7 @@
|
|||
"eslint-plugin-jsx-a11y": "^5.1.1",
|
||||
"eslint-plugin-react": "^7.2.1",
|
||||
"jasmine-core": "2.4.1",
|
||||
"jsdom": "^11.1.0",
|
||||
"karma": "^1.1.0",
|
||||
"karma-coverage": "^1.0.0",
|
||||
"karma-es6-shim": "^1.0.0",
|
||||
|
|
@ -54,10 +59,13 @@
|
|||
"karma-phantomjs-launcher": "^1.0.1",
|
||||
"karma-spec-reporter": "0.0.26",
|
||||
"karma-webpack": "^1.7.0",
|
||||
"mocha": "^3.4.2",
|
||||
"node-sass": "^3.4.2",
|
||||
"nodemon": "^1.9.1",
|
||||
"nyc": "^11.0.3",
|
||||
"opn-cli": "^3.1.0",
|
||||
"postcss-cli": "^2.5.1",
|
||||
"sinon": "^2.4.0",
|
||||
"webpack": "^1.12.14",
|
||||
"webpack-dashboard": "^0.1.8",
|
||||
"webpack-dev-server": "^1.14.1",
|
||||
|
|
@ -72,12 +80,20 @@
|
|||
"npmName": "choices.js",
|
||||
"npmFileMap": [
|
||||
{
|
||||
"basePath": "assets",
|
||||
"basePath": "src",
|
||||
"files": [
|
||||
"scripts/dist/*",
|
||||
"styles/css/*",
|
||||
"icons/*"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"nyc": {
|
||||
"include": [
|
||||
"src/**/**/**/**/**/*.js"
|
||||
],
|
||||
"exclude": [
|
||||
"src/**/**/**/**/**/*.spec.js"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 244 B After Width: | Height: | Size: 244 B |
|
Before Width: | Height: | Size: 244 B After Width: | Height: | Size: 244 B |
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 574 B After Width: | Height: | Size: 574 B |
|
Before Width: | Height: | Size: 887 B After Width: | Height: | Size: 887 B |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
|
Before Width: | Height: | Size: 6 KiB After Width: | Height: | Size: 6 KiB |
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 3 KiB After Width: | Height: | Size: 3 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
File diff suppressed because it is too large
Load diff
1
src/scripts/dist/choices.js.map
vendored
Normal file
1
src/scripts/dist/choices.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
4
src/scripts/dist/choices.min.js
vendored
Normal file
4
src/scripts/dist/choices.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
src/scripts/dist/choices.min.js.map
vendored
Normal file
1
src/scripts/dist/choices.min.js.map
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"file":"choices.min.js","sources":[],"mappings":";;;","sourceRoot":""}
|
||||
File diff suppressed because it is too large
Load diff
1192
src/scripts/src/choices.spec.js
Normal file
1192
src/scripts/src/choices.spec.js
Normal file
File diff suppressed because it is too large
Load diff
175
src/scripts/src/components/container.js
Normal file
175
src/scripts/src/components/container.js
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
export default class Container {
|
||||
constructor(instance, element) {
|
||||
this.instance = instance;
|
||||
this.element = element;
|
||||
this.config = instance.config;
|
||||
this.classNames = instance.config.classNames;
|
||||
this.isOpen = false;
|
||||
this.isFlipped = false;
|
||||
this.isFocussed = false;
|
||||
this.isDisabled = false;
|
||||
this.isLoading = false;
|
||||
this.onFocus = this.onFocus.bind(this);
|
||||
this.onBlur = this.onBlur.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add event listeners
|
||||
*/
|
||||
addEventListeners() {
|
||||
this.element.addEventListener('focus', this.onFocus);
|
||||
this.element.addEventListener('blur', this.onBlur);
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove event listeners
|
||||
*/
|
||||
|
||||
/** */
|
||||
removeEventListeners() {
|
||||
this.element.removeEventListener('focus', this.onFocus);
|
||||
this.element.removeEventListener('blur', this.onBlur);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set focussed state
|
||||
*/
|
||||
onFocus() {
|
||||
this.isFocussed = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove blurred state
|
||||
*/
|
||||
onBlur() {
|
||||
this.isFocussed = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine whether container should be flipped
|
||||
* based on passed dropdown position
|
||||
* @param {Number} dropdownPos
|
||||
* @returns
|
||||
*/
|
||||
shouldFlip(dropdownPos) {
|
||||
if (!dropdownPos) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const body = document.body;
|
||||
const html = document.documentElement;
|
||||
const winHeight = Math.max(
|
||||
body.scrollHeight,
|
||||
body.offsetHeight,
|
||||
html.clientHeight,
|
||||
html.scrollHeight,
|
||||
html.offsetHeight,
|
||||
);
|
||||
|
||||
// If flip is enabled and the dropdown bottom position is
|
||||
// greater than the window height flip the dropdown.
|
||||
let shouldFlip = false;
|
||||
if (this.config.position === 'auto') {
|
||||
shouldFlip = dropdownPos >= winHeight;
|
||||
} else if (this.config.position === 'top') {
|
||||
shouldFlip = true;
|
||||
}
|
||||
|
||||
return shouldFlip;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set active descendant attribute
|
||||
* @param {Number} activeDescendant ID of active descendant
|
||||
*/
|
||||
setActiveDescendant(activeDescendant) {
|
||||
this.element.setAttribute('aria-activedescendant', activeDescendant);
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove active descendant attribute
|
||||
*/
|
||||
removeActiveDescendant() {
|
||||
this.element.removeAttribute('aria-activedescendant');
|
||||
}
|
||||
|
||||
open(dropdownPos) {
|
||||
this.element.classList.add(this.classNames.openState);
|
||||
this.element.setAttribute('aria-expanded', 'true');
|
||||
this.isOpen = true;
|
||||
|
||||
if (this.shouldFlip(dropdownPos)) {
|
||||
this.element.classList.add(this.classNames.flippedState);
|
||||
this.isFlipped = true;
|
||||
}
|
||||
}
|
||||
|
||||
close() {
|
||||
this.element.classList.remove(this.classNames.openState);
|
||||
this.element.setAttribute('aria-expanded', 'false');
|
||||
this.removeActiveDescendant();
|
||||
this.isOpen = false;
|
||||
|
||||
// A dropdown flips if it does not have space within the page
|
||||
if (this.isFlipped) {
|
||||
this.element.classList.remove(this.classNames.flippedState);
|
||||
this.isFlipped = false;
|
||||
}
|
||||
}
|
||||
|
||||
focus() {
|
||||
if (!this.isFocussed) {
|
||||
this.element.focus();
|
||||
}
|
||||
}
|
||||
|
||||
addFocusState() {
|
||||
this.element.classList.add(this.classNames.focusState);
|
||||
}
|
||||
|
||||
removeFocusState() {
|
||||
this.element.classList.remove(this.classNames.focusState);
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove disabled state
|
||||
*/
|
||||
enable() {
|
||||
this.element.classList.remove(this.config.classNames.disabledState);
|
||||
this.element.removeAttribute('aria-disabled');
|
||||
if (this.instance.isSelectOneElement) {
|
||||
this.element.setAttribute('tabindex', '0');
|
||||
}
|
||||
this.isDisabled = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set disabled state
|
||||
*/
|
||||
disable() {
|
||||
this.element.classList.add(this.config.classNames.disabledState);
|
||||
this.element.setAttribute('aria-disabled', 'true');
|
||||
if (this.instance.isSelectOneElement) {
|
||||
this.element.setAttribute('tabindex', '-1');
|
||||
}
|
||||
this.isDisabled = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add loading state to element
|
||||
*/
|
||||
addLoadingState() {
|
||||
this.element.classList.add(this.classNames.loadingState);
|
||||
this.element.setAttribute('aria-busy', 'true');
|
||||
this.isLoading = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove loading state from element
|
||||
*/
|
||||
removeLoadingState() {
|
||||
this.element.classList.remove(this.classNames.loadingState);
|
||||
this.element.removeAttribute('aria-busy');
|
||||
this.isLoading = false;
|
||||
}
|
||||
}
|
||||
53
src/scripts/src/components/dropdown.js
Normal file
53
src/scripts/src/components/dropdown.js
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
export default class Dropdown {
|
||||
constructor(instance, element, classNames) {
|
||||
this.instance = instance;
|
||||
this.element = element;
|
||||
this.classNames = classNames;
|
||||
this.dimensions = null;
|
||||
this.position = null;
|
||||
this.isActive = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Determine how far the top of our element is from
|
||||
* the top of the window
|
||||
* @return {Number} Vertical position
|
||||
*/
|
||||
getVerticalPos() {
|
||||
this.dimensions = this.element.getBoundingClientRect();
|
||||
this.position = Math.ceil(this.dimensions.top + window.pageYOffset + this.element.offsetHeight);
|
||||
return this.position;
|
||||
}
|
||||
|
||||
/**
|
||||
* Find element that matches passed selector
|
||||
* @return {HTMLElement}
|
||||
*/
|
||||
getChild(selector) {
|
||||
return this.element.querySelector(selector);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show dropdown to user by adding active state class
|
||||
* @return {Object} Class instance
|
||||
* @public
|
||||
*/
|
||||
show() {
|
||||
this.element.classList.add(this.classNames.activeState);
|
||||
this.element.setAttribute('aria-expanded', 'true');
|
||||
this.isActive = true;
|
||||
return this.instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide dropdown from user
|
||||
* @return {Object} Class instance
|
||||
* @public
|
||||
*/
|
||||
hide() {
|
||||
this.element.classList.remove(this.classNames.activeState);
|
||||
this.element.setAttribute('aria-expanded', 'false');
|
||||
this.isActive = false;
|
||||
return this.instance;
|
||||
}
|
||||
}
|
||||
158
src/scripts/src/components/input.js
Normal file
158
src/scripts/src/components/input.js
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
import { getWidthOfInput } from '../lib/utils';
|
||||
|
||||
export default class Input {
|
||||
constructor(instance, element) {
|
||||
this.instance = instance;
|
||||
this.element = element;
|
||||
this.isFocussed = this.element === document.activeElement;
|
||||
this.isDisabled = false;
|
||||
|
||||
// Bind event listeners
|
||||
this.onPaste = this.onPaste.bind(this);
|
||||
this.onInput = this.onInput.bind(this);
|
||||
this.onFocus = this.onFocus.bind(this);
|
||||
this.onBlur = this.onBlur.bind(this);
|
||||
}
|
||||
|
||||
addEventListeners() {
|
||||
this.element.addEventListener('input', this.onInput);
|
||||
this.element.addEventListener('paste', this.onPaste);
|
||||
this.element.addEventListener('focus', this.onFocus);
|
||||
this.element.addEventListener('blur', this.onBlur);
|
||||
}
|
||||
|
||||
removeEventListeners() {
|
||||
this.element.removeEventListener('input', this.onInput);
|
||||
this.element.removeEventListener('paste', this.onPaste);
|
||||
this.element.removeEventListener('focus', this.onFocus);
|
||||
this.element.removeEventListener('blur', this.onBlur);
|
||||
}
|
||||
|
||||
/**
|
||||
* Input event
|
||||
* @return
|
||||
* @private
|
||||
*/
|
||||
onInput() {
|
||||
if (!this.instance.isSelectOneElement) {
|
||||
this.setWidth();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Paste event
|
||||
* @param {Object} e Event
|
||||
* @return
|
||||
* @private
|
||||
*/
|
||||
onPaste(e) {
|
||||
// Disable pasting into the input if option has been set
|
||||
if (e.target === this.element && !this.instance.config.paste) {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set focussed state
|
||||
*/
|
||||
onFocus() {
|
||||
this.isFocussed = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove focussed state
|
||||
*/
|
||||
onBlur() {
|
||||
this.isFocussed = false;
|
||||
}
|
||||
|
||||
activate(focusInput) {
|
||||
// Optionally focus the input if we have a search input
|
||||
if (focusInput && this.instance.canSearch && document.activeElement !== this.element) {
|
||||
this.element.focus();
|
||||
}
|
||||
}
|
||||
|
||||
deactivate(blurInput) {
|
||||
this.removeActiveDescendant();
|
||||
// Optionally blur the input if we have a search input
|
||||
if (blurInput && this.instance.canSearch && document.activeElement === this.element) {
|
||||
this.element.blur();
|
||||
}
|
||||
}
|
||||
|
||||
enable() {
|
||||
this.element.removeAttribute('disabled');
|
||||
this.isDisabled = false;
|
||||
}
|
||||
|
||||
disable() {
|
||||
this.element.setAttribute('disabled', '');
|
||||
this.isDisabled = true;
|
||||
}
|
||||
|
||||
focus() {
|
||||
if (!this.isFocussed) {
|
||||
this.element.focus();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set value of input to blank
|
||||
* @return {Object} Class instance
|
||||
* @public
|
||||
*/
|
||||
clear(setWidth = true) {
|
||||
if (this.element.value) {
|
||||
this.element.value = '';
|
||||
}
|
||||
|
||||
if (setWidth) {
|
||||
this.setWidth();
|
||||
}
|
||||
|
||||
return this.instance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the correct input width based on placeholder
|
||||
* value or input value
|
||||
* @return
|
||||
*/
|
||||
setWidth(enforceWidth) {
|
||||
if (this.instance.placeholder) {
|
||||
// If there is a placeholder, we only want to set the width of the input when it is a greater
|
||||
// length than 75% of the placeholder. This stops the input jumping around.
|
||||
if (
|
||||
(this.element.value &&
|
||||
this.element.value.length >= (this.instance.placeholder.length / 1.25)) ||
|
||||
enforceWidth
|
||||
) {
|
||||
this.element.style.width = getWidthOfInput(this.element);
|
||||
}
|
||||
} else {
|
||||
// If there is no placeholder, resize input to contents
|
||||
this.element.style.width = getWidthOfInput(this.element);
|
||||
}
|
||||
}
|
||||
|
||||
setPlaceholder(placeholder) {
|
||||
this.element.placeholder = placeholder;
|
||||
}
|
||||
|
||||
setValue(value) {
|
||||
this.element.value = value;
|
||||
}
|
||||
|
||||
getValue() {
|
||||
return this.element.value;
|
||||
}
|
||||
|
||||
setActiveDescendant(activeDescendant) {
|
||||
this.element.setAttribute('aria-activedescendant', activeDescendant);
|
||||
}
|
||||
|
||||
removeActiveDescendant() {
|
||||
this.element.removeAttribute('aria-activedescendant');
|
||||
}
|
||||
}
|
||||
39
src/scripts/src/components/list.js
Normal file
39
src/scripts/src/components/list.js
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
export default class List {
|
||||
constructor(instance, element) {
|
||||
this.instance = instance;
|
||||
this.element = element;
|
||||
this.classNames = this.instance.config.classNames;
|
||||
this.scrollPos = this.element.scrollTop;
|
||||
this.height = this.element.offsetHeight;
|
||||
this.hasChildren = !!this.element.children;
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear List contents
|
||||
*/
|
||||
clear() {
|
||||
this.element.innerHTML = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll to passed position on Y axis
|
||||
*/
|
||||
scrollTo(scrollPos) {
|
||||
this.element.scrollTop = scrollPos;
|
||||
}
|
||||
|
||||
/**
|
||||
* Append node to element
|
||||
*/
|
||||
append(node) {
|
||||
this.element.appendChild(node);
|
||||
}
|
||||
|
||||
/**
|
||||
* Find element that matches passed selector
|
||||
* @return {HTMLElement}
|
||||
*/
|
||||
getChild(selector) {
|
||||
return this.element.querySelector(selector);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
/* eslint-disable */
|
||||
var webpack = require('karma-webpack');
|
||||
|
||||
module.exports = function(config) {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
import 'whatwg-fetch';
|
||||
import 'es6-promise';
|
||||
import 'core-js/fn/object/assign';
|
||||
import Choices from '../../assets/scripts/src/choices.js';
|
||||
import itemReducer from '../../assets/scripts/src/reducers/items.js';
|
||||
import choiceReducer from '../../assets/scripts/src/reducers/choices.js';
|
||||
import 'core-js/fn/array/includes';
|
||||
import Choices from '../../src/scripts/src/choices';
|
||||
import itemReducer from '../../src/scripts/src/reducers/items';
|
||||
import choiceReducer from '../../src/scripts/src/reducers/choices';
|
||||
import {
|
||||
addItem as addItemAction,
|
||||
addChoice as addChoiceAction
|
||||
} from '../../assets/scripts/src/actions/index.js';
|
||||
addChoice as addChoiceAction,
|
||||
} from '../../src/scripts/src/actions/actions';
|
||||
|
||||
describe('Choices', () => {
|
||||
describe('should initialize Choices', () => {
|
||||
|
|
@ -115,27 +116,27 @@ describe('Choices', () => {
|
|||
});
|
||||
|
||||
it('should create an outer container', function() {
|
||||
expect(this.choices.containerOuter).toEqual(jasmine.any(HTMLElement));
|
||||
expect(this.choices.containerOuter.element).toEqual(jasmine.any(HTMLElement));
|
||||
});
|
||||
|
||||
it('should create an inner container', function() {
|
||||
expect(this.choices.containerInner).toEqual(jasmine.any(HTMLElement));
|
||||
expect(this.choices.containerInner.element).toEqual(jasmine.any(HTMLElement));
|
||||
});
|
||||
|
||||
it('should create a choice list', function() {
|
||||
expect(this.choices.choiceList).toEqual(jasmine.any(HTMLElement));
|
||||
expect(this.choices.choiceList.element).toEqual(jasmine.any(HTMLElement));
|
||||
});
|
||||
|
||||
it('should create an item list', function() {
|
||||
expect(this.choices.itemList).toEqual(jasmine.any(HTMLElement));
|
||||
expect(this.choices.itemList.element).toEqual(jasmine.any(HTMLElement));
|
||||
});
|
||||
|
||||
it('should create an input', function() {
|
||||
expect(this.choices.input).toEqual(jasmine.any(HTMLElement));
|
||||
expect(this.choices.input.element).toEqual(jasmine.any(HTMLElement));
|
||||
});
|
||||
|
||||
it('should create a dropdown', function() {
|
||||
expect(this.choices.dropdown).toEqual(jasmine.any(HTMLElement));
|
||||
expect(this.choices.dropdown.element).toEqual(jasmine.any(HTMLElement));
|
||||
});
|
||||
|
||||
it('should backup and recover original styles', function () {
|
||||
|
|
@ -157,7 +158,7 @@ describe('Choices', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('should accept text inputs', function() {
|
||||
describe('should accept text inputs', () => {
|
||||
beforeEach(function() {
|
||||
this.input = document.createElement('input');
|
||||
this.input.type = 'text';
|
||||
|
|
@ -173,33 +174,33 @@ describe('Choices', () => {
|
|||
|
||||
it('should apply placeholderValue to input', function() {
|
||||
this.choices = new Choices(this.input);
|
||||
expect(this.choices.input.placeholder).toEqual('Placeholder text');
|
||||
expect(this.choices.input.element.placeholder).toEqual('Placeholder text');
|
||||
});
|
||||
|
||||
it('should not apply searchPlaceholderValue to input', function() {
|
||||
this.choices = new Choices(this.input);
|
||||
expect(this.choices.input.placeholder).not.toEqual('Test');
|
||||
expect(this.choices.input.element.placeholder).not.toEqual('Test');
|
||||
});
|
||||
|
||||
it('should accept a user inputted value', function() {
|
||||
this.choices = new Choices(this.input);
|
||||
|
||||
this.choices.input.focus();
|
||||
this.choices.input.value = 'test';
|
||||
this.choices.input.element.focus();
|
||||
this.choices.input.element.value = 'test';
|
||||
|
||||
this.choices._onKeyDown({
|
||||
target: this.choices.input,
|
||||
target: this.choices.input.element,
|
||||
keyCode: 13,
|
||||
ctrlKey: false
|
||||
ctrlKey: false,
|
||||
});
|
||||
|
||||
expect(this.choices.currentState.items[0].value).toContain(this.choices.input.value);
|
||||
expect(this.choices.currentState.items[0].value).toContain(this.choices.input.element.value);
|
||||
});
|
||||
|
||||
it('should copy the passed placeholder to the cloned input', function() {
|
||||
this.choices = new Choices(this.input);
|
||||
|
||||
expect(this.choices.input.placeholder).toEqual(this.input.placeholder);
|
||||
expect(this.choices.input.element.placeholder).toEqual(this.input.placeholder);
|
||||
});
|
||||
|
||||
it('should not allow duplicates if duplicateItems is false', function() {
|
||||
|
|
@ -208,16 +209,18 @@ describe('Choices', () => {
|
|||
items: ['test 1'],
|
||||
});
|
||||
|
||||
this.choices.input.focus();
|
||||
this.choices.input.value = 'test 1';
|
||||
this.choices.input.element.focus();
|
||||
this.choices.input.element.value = 'test 1';
|
||||
|
||||
this.choices._onKeyDown({
|
||||
target: this.choices.input,
|
||||
target: this.choices.input.element,
|
||||
keyCode: 13,
|
||||
ctrlKey: false
|
||||
ctrlKey: false,
|
||||
});
|
||||
|
||||
expect(this.choices.currentState.items[this.choices.currentState.items.length - 1]).not.toContain(this.choices.input.value);
|
||||
expect(
|
||||
this.choices.currentState.items[this.choices.currentState.items.length - 1],
|
||||
).not.toContain(this.choices.input.element.value);
|
||||
});
|
||||
|
||||
it('should filter input if regexFilter is passed', function() {
|
||||
|
|
@ -225,22 +228,22 @@ describe('Choices', () => {
|
|||
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,}))$/,
|
||||
});
|
||||
|
||||
this.choices.input.focus();
|
||||
this.choices.input.value = 'josh@joshuajohnson.co.uk';
|
||||
this.choices.input.element.focus();
|
||||
this.choices.input.element.value = 'josh@joshuajohnson.co.uk';
|
||||
|
||||
this.choices._onKeyDown({
|
||||
target: this.choices.input,
|
||||
target: this.choices.input.element,
|
||||
keyCode: 13,
|
||||
ctrlKey: false
|
||||
ctrlKey: false,
|
||||
});
|
||||
|
||||
this.choices.input.focus();
|
||||
this.choices.input.value = 'not an email address';
|
||||
this.choices.input.element.focus();
|
||||
this.choices.input.element.value = 'not an email address';
|
||||
|
||||
this.choices._onKeyDown({
|
||||
target: this.choices.input,
|
||||
target: this.choices.input.element,
|
||||
keyCode: 13,
|
||||
ctrlKey: false
|
||||
ctrlKey: false,
|
||||
});
|
||||
|
||||
const lastItem = this.choices.currentState.items[this.choices.currentState.items.length - 1];
|
||||
|
|
@ -255,13 +258,13 @@ describe('Choices', () => {
|
|||
appendValue: '-value',
|
||||
});
|
||||
|
||||
this.choices.input.focus();
|
||||
this.choices.input.value = 'test';
|
||||
this.choices.input.element.focus();
|
||||
this.choices.input.element.value = 'test';
|
||||
|
||||
this.choices._onKeyDown({
|
||||
target: this.choices.input,
|
||||
target: this.choices.input.element,
|
||||
keyCode: 13,
|
||||
ctrlKey: false
|
||||
ctrlKey: false,
|
||||
});
|
||||
|
||||
const lastItem = this.choices.currentState.items[this.choices.currentState.items.length - 1];
|
||||
|
|
@ -271,7 +274,7 @@ describe('Choices', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('should accept single select inputs', function() {
|
||||
describe('should accept single select inputs', () => {
|
||||
beforeEach(function() {
|
||||
this.input = document.createElement('select');
|
||||
this.input.className = 'js-choices';
|
||||
|
|
@ -295,24 +298,26 @@ describe('Choices', () => {
|
|||
|
||||
it('should not apply placeholderValue to input', function() {
|
||||
this.choices = new Choices(this.input, {
|
||||
placeholderValue: 'Placeholder'
|
||||
placeholderValue: 'Placeholder',
|
||||
});
|
||||
|
||||
expect(this.choices.input.placeholder).not.toEqual('Placeholder');
|
||||
expect(this.choices.input.element.placeholder).not.toEqual('Placeholder');
|
||||
});
|
||||
|
||||
it('should apply searchPlaceholderValue to input', function() {
|
||||
this.choices = new Choices(this.input, {
|
||||
searchPlaceholderValue: 'Placeholder'
|
||||
searchPlaceholderValue: 'Placeholder',
|
||||
});
|
||||
|
||||
expect(this.choices.input.placeholder).toEqual('Placeholder');
|
||||
expect(this.choices.input.element.placeholder).toEqual('Placeholder');
|
||||
});
|
||||
|
||||
it('should open the choice list on focusing', function() {
|
||||
this.choices = new Choices(this.input);
|
||||
this.choices.input.focus();
|
||||
expect(this.choices.dropdown.classList).toContain(this.choices.config.classNames.activeState);
|
||||
this.choices.input.element.focus();
|
||||
expect(
|
||||
this.choices.dropdown.element.classList,
|
||||
).toContain(this.choices.config.classNames.activeState);
|
||||
});
|
||||
|
||||
it('should select the first choice', function() {
|
||||
|
|
@ -322,17 +327,17 @@ describe('Choices', () => {
|
|||
|
||||
it('should highlight the choices on keydown', function() {
|
||||
this.choices = new Choices(this.input, {
|
||||
renderChoiceLimit: -1
|
||||
renderChoiceLimit: -1,
|
||||
});
|
||||
this.choices.input.focus();
|
||||
this.choices.input.element.focus();
|
||||
|
||||
for (let i = 0; i < 2; i++) {
|
||||
// Key down to third choice
|
||||
this.choices._onKeyDown({
|
||||
target: this.choices.input,
|
||||
target: this.choices.input.element,
|
||||
keyCode: 40,
|
||||
ctrlKey: false,
|
||||
preventDefault: () => {}
|
||||
preventDefault: () => {},
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -341,22 +346,22 @@ describe('Choices', () => {
|
|||
|
||||
it('should select choice on enter key press', function() {
|
||||
this.choices = new Choices(this.input);
|
||||
this.choices.input.focus();
|
||||
this.choices.input.element.focus();
|
||||
|
||||
// Key down to second choice
|
||||
this.choices._onKeyDown({
|
||||
target: this.choices.input,
|
||||
target: this.choices.input.element,
|
||||
keyCode: 40,
|
||||
ctrlKey: false,
|
||||
preventDefault: () => {}
|
||||
preventDefault: () => {},
|
||||
});
|
||||
|
||||
// Key down to select choice
|
||||
this.choices._onKeyDown({
|
||||
target: this.choices.input,
|
||||
target: this.choices.input.element,
|
||||
keyCode: 13,
|
||||
ctrlKey: false,
|
||||
preventDefault: () => {}
|
||||
preventDefault: () => {},
|
||||
});
|
||||
|
||||
expect(this.choices.currentState.items.length).toBe(2);
|
||||
|
|
@ -372,22 +377,22 @@ describe('Choices', () => {
|
|||
passedElement.addEventListener('change', changeSpy);
|
||||
passedElement.addEventListener('addItem', addSpy);
|
||||
|
||||
this.choices.input.focus();
|
||||
this.choices.input.element.focus();
|
||||
|
||||
// Key down to second choice
|
||||
this.choices._onKeyDown({
|
||||
target: this.choices.input,
|
||||
target: this.choices.input.element,
|
||||
keyCode: 40,
|
||||
ctrlKey: false,
|
||||
preventDefault: () => {}
|
||||
preventDefault: () => {},
|
||||
});
|
||||
|
||||
// Key down to select choice
|
||||
this.choices._onKeyDown({
|
||||
target: this.choices.input,
|
||||
target: this.choices.input.element,
|
||||
keyCode: 13,
|
||||
ctrlKey: false,
|
||||
preventDefault: () => {}
|
||||
preventDefault: () => {},
|
||||
});
|
||||
|
||||
const returnValue = changeSpy.calls.mostRecent().args[0].detail.value;
|
||||
|
|
@ -398,34 +403,40 @@ describe('Choices', () => {
|
|||
|
||||
it('should open the dropdown on click', function() {
|
||||
this.choices = new Choices(this.input);
|
||||
const container = this.choices.containerOuter;
|
||||
const container = this.choices.containerOuter.element;
|
||||
this.choices._onClick({
|
||||
target: container,
|
||||
ctrlKey: false,
|
||||
preventDefault: () => {}
|
||||
preventDefault: () => {},
|
||||
});
|
||||
|
||||
expect(document.activeElement === this.choices.input && container.classList.contains('is-open')).toBe(true);
|
||||
expect(
|
||||
document.activeElement === this.choices.input.element &&
|
||||
container.classList.contains('is-open'),
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
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.element;
|
||||
const openState = this.choices.config.classNames.openState;
|
||||
|
||||
this.choices._onClick({
|
||||
target: container,
|
||||
ctrlKey: false,
|
||||
preventDefault: () => {}
|
||||
preventDefault: () => {},
|
||||
});
|
||||
|
||||
this.choices._onClick({
|
||||
target: container,
|
||||
ctrlKey: false,
|
||||
preventDefault: () => {}
|
||||
preventDefault: () => {},
|
||||
});
|
||||
|
||||
expect(document.activeElement === this.choices.input && container.classList.contains(openState)).toBe(false);
|
||||
expect(
|
||||
document.activeElement === this.choices.input.element &&
|
||||
container.classList.contains(openState),
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
it('should set scrolling flag and not hide dropdown when scrolling on IE', function() {
|
||||
|
|
@ -434,21 +445,21 @@ describe('Choices', () => {
|
|||
|
||||
spyOn(this.choices, 'hideDropdown');
|
||||
|
||||
const container = this.choices.containerOuter;
|
||||
const container = this.choices.containerOuter.element;
|
||||
const choiceList = this.choices.choiceList;
|
||||
|
||||
// Click to open dropdown
|
||||
this.choices._onClick({
|
||||
target: container,
|
||||
ctrlKey: false,
|
||||
preventDefault: () => {}
|
||||
preventDefault: () => {},
|
||||
});
|
||||
|
||||
// Hold mouse on scrollbar
|
||||
this.choices._onMouseDown({
|
||||
target: choiceList,
|
||||
ctrlKey: false,
|
||||
preventDefault: () => {}
|
||||
preventDefault: () => {},
|
||||
});
|
||||
|
||||
expect(this.choices.isScrollingOnIe).toBe(true);
|
||||
|
|
@ -457,19 +468,19 @@ describe('Choices', () => {
|
|||
|
||||
it('should trigger showDropdown on dropdown opening', function() {
|
||||
this.choices = new Choices(this.input);
|
||||
const container = this.choices.containerOuter;
|
||||
const container = this.choices.containerOuter.element;
|
||||
|
||||
const showDropdownSpy = jasmine.createSpy('showDropdownSpy');
|
||||
const passedElement = this.choices.passedElement;
|
||||
|
||||
passedElement.addEventListener('showDropdown', showDropdownSpy);
|
||||
|
||||
this.choices.input.focus();
|
||||
this.choices.input.element.focus();
|
||||
|
||||
this.choices._onClick({
|
||||
target: container,
|
||||
ctrlKey: false,
|
||||
preventDefault: () => {}
|
||||
preventDefault: () => {},
|
||||
});
|
||||
|
||||
expect(showDropdownSpy).toHaveBeenCalled();
|
||||
|
|
@ -477,25 +488,25 @@ describe('Choices', () => {
|
|||
|
||||
it('should trigger hideDropdown on dropdown closing', function() {
|
||||
this.choices = new Choices(this.input);
|
||||
const container = this.choices.containerOuter;
|
||||
const container = this.choices.containerOuter.element;
|
||||
|
||||
const hideDropdownSpy = jasmine.createSpy('hideDropdownSpy');
|
||||
const passedElement = this.choices.passedElement;
|
||||
|
||||
passedElement.addEventListener('hideDropdown', hideDropdownSpy);
|
||||
|
||||
this.choices.input.focus();
|
||||
this.choices.input.element.focus();
|
||||
|
||||
this.choices._onClick({
|
||||
target: container,
|
||||
ctrlKey: false,
|
||||
preventDefault: () => {}
|
||||
preventDefault: () => {},
|
||||
});
|
||||
|
||||
this.choices._onClick({
|
||||
target: container,
|
||||
ctrlKey: false,
|
||||
preventDefault: () => {}
|
||||
preventDefault: () => {},
|
||||
});
|
||||
|
||||
expect(hideDropdownSpy).toHaveBeenCalled();
|
||||
|
|
@ -509,19 +520,17 @@ describe('Choices', () => {
|
|||
|
||||
passedElement.addEventListener('search', searchSpy);
|
||||
|
||||
this.choices.input.focus();
|
||||
this.choices.input.value = '3 ';
|
||||
this.choices.input.element.focus();
|
||||
this.choices.input.element.value = '3 ';
|
||||
|
||||
// Key down to search
|
||||
this.choices._onKeyUp({
|
||||
target: this.choices.input,
|
||||
target: this.choices.input.element,
|
||||
keyCode: 13,
|
||||
ctrlKey: false
|
||||
ctrlKey: false,
|
||||
});
|
||||
|
||||
const mostAccurateResult = this.choices.currentState.choices.filter(function (choice) {
|
||||
return choice.active;
|
||||
});
|
||||
const mostAccurateResult = this.choices.currentState.choices.filter(choice => choice.active);
|
||||
|
||||
expect(this.choices.isSearching && mostAccurateResult[0].value === 'Value 3').toBe(true);
|
||||
expect(searchSpy).toHaveBeenCalled();
|
||||
|
|
@ -529,7 +538,7 @@ describe('Choices', () => {
|
|||
|
||||
it('shouldn\'t filter choices when searching', function() {
|
||||
this.choices = new Choices(this.input, {
|
||||
searchChoices: false
|
||||
searchChoices: false,
|
||||
});
|
||||
|
||||
this.choices.setValue(['Javascript', 'HTML', 'Jasmine']);
|
||||
|
|
@ -539,19 +548,17 @@ describe('Choices', () => {
|
|||
|
||||
passedElement.addEventListener('search', searchSpy);
|
||||
|
||||
this.choices.input.focus();
|
||||
this.choices.input.value = 'Javascript';
|
||||
this.choices.input.element.focus();
|
||||
this.choices.input.element.value = 'Javascript';
|
||||
|
||||
// Key down to search
|
||||
this.choices._onKeyUp({
|
||||
target: this.choices.input,
|
||||
target: this.choices.input.element,
|
||||
keyCode: 13,
|
||||
ctrlKey: false
|
||||
ctrlKey: false,
|
||||
});
|
||||
|
||||
const activeOptions = this.choices.currentState.choices.filter(function(choice) {
|
||||
return choice.active;
|
||||
});
|
||||
const activeOptions = this.choices.currentState.choices.filter(choice => choice.active);
|
||||
|
||||
expect(activeOptions.length).toEqual(this.choices.currentState.choices.length);
|
||||
expect(searchSpy).toHaveBeenCalled();
|
||||
|
|
@ -562,14 +569,14 @@ describe('Choices', () => {
|
|||
shouldSort: false,
|
||||
choices: [{
|
||||
value: 'Value 5',
|
||||
label: 'Label Five'
|
||||
label: 'Label Five',
|
||||
}, {
|
||||
value: 'Value 6',
|
||||
label: 'Label Six'
|
||||
label: 'Label Six',
|
||||
}, {
|
||||
value: 'Value 7',
|
||||
label: 'Label Seven'
|
||||
}, ],
|
||||
label: 'Label Seven',
|
||||
}],
|
||||
});
|
||||
|
||||
expect(this.choices.currentState.choices[0].value).toEqual('Value 5');
|
||||
|
|
@ -580,14 +587,14 @@ describe('Choices', () => {
|
|||
shouldSort: true,
|
||||
choices: [{
|
||||
value: 'Value 5',
|
||||
label: 'Label Five'
|
||||
label: 'Label Five',
|
||||
}, {
|
||||
value: 'Value 6',
|
||||
label: 'Label Six'
|
||||
label: 'Label Six',
|
||||
}, {
|
||||
value: 'Value 7',
|
||||
label: 'Label Seven'
|
||||
}, ],
|
||||
label: 'Label Seven',
|
||||
}],
|
||||
});
|
||||
|
||||
expect(this.choices.currentState.choices[0].value).toEqual('Value 1');
|
||||
|
|
@ -596,14 +603,14 @@ describe('Choices', () => {
|
|||
it('should set searchPlaceholderValue if set', function() {
|
||||
const dummyPlaceholder = 'Test placeholder';
|
||||
this.choices = new Choices(this.input, {
|
||||
searchPlaceholderValue: dummyPlaceholder
|
||||
searchPlaceholderValue: dummyPlaceholder,
|
||||
});
|
||||
|
||||
expect(this.choices.input.placeholder).toEqual(dummyPlaceholder);
|
||||
expect(this.choices.input.element.placeholder).toEqual(dummyPlaceholder);
|
||||
});
|
||||
});
|
||||
|
||||
describe('should accept multiple select inputs', function() {
|
||||
describe('should accept multiple select inputs', () => {
|
||||
beforeEach(function() {
|
||||
this.input = document.createElement('select');
|
||||
this.input.className = 'js-choices';
|
||||
|
|
@ -631,15 +638,15 @@ describe('Choices', () => {
|
|||
value: 'One',
|
||||
label: 'Label One',
|
||||
selected: true,
|
||||
disabled: false
|
||||
disabled: false,
|
||||
}, {
|
||||
value: 'Two',
|
||||
label: 'Label Two',
|
||||
disabled: true
|
||||
disabled: true,
|
||||
}, {
|
||||
value: 'Three',
|
||||
label: 'Label Three'
|
||||
}, ],
|
||||
label: 'Label Three',
|
||||
}],
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -648,11 +655,11 @@ describe('Choices', () => {
|
|||
});
|
||||
|
||||
it('should apply placeholderValue to input', function() {
|
||||
expect(this.choices.input.placeholder).toEqual('Placeholder text');
|
||||
expect(this.choices.input.element.placeholder).toEqual('Placeholder text');
|
||||
});
|
||||
|
||||
it('should not apply searchPlaceholderValue to input', function() {
|
||||
expect(this.choices.input.placeholder).not.toEqual('Test');
|
||||
expect(this.choices.input.element.placeholder).not.toEqual('Test');
|
||||
});
|
||||
|
||||
it('should add any pre-defined values', function() {
|
||||
|
|
@ -664,11 +671,11 @@ describe('Choices', () => {
|
|||
});
|
||||
|
||||
it('should add a placeholder defined in the config to the search input', function() {
|
||||
expect(this.choices.input.placeholder).toEqual('Placeholder text');
|
||||
expect(this.choices.input.element.placeholder).toEqual('Placeholder text');
|
||||
});
|
||||
});
|
||||
|
||||
describe('should handle public methods on select input types', function() {
|
||||
describe('should handle public methods on select input types', () => {
|
||||
beforeEach(function() {
|
||||
this.input = document.createElement('select');
|
||||
this.input.className = 'js-choices';
|
||||
|
|
@ -719,7 +726,7 @@ describe('Choices', () => {
|
|||
|
||||
this.choices.highlightAll();
|
||||
|
||||
const unhighlightedItems = items.some((item) => item.highlighted === false);
|
||||
const unhighlightedItems = items.some(item => item.highlighted === false);
|
||||
|
||||
expect(unhighlightedItems).toBe(false);
|
||||
});
|
||||
|
|
@ -729,7 +736,7 @@ describe('Choices', () => {
|
|||
|
||||
this.choices.unhighlightAll();
|
||||
|
||||
const highlightedItems = items.some((item) => item.highlighted === true);
|
||||
const highlightedItems = items.some(item => item.highlighted === true);
|
||||
|
||||
expect(highlightedItems).toBe(false);
|
||||
});
|
||||
|
|
@ -739,39 +746,49 @@ describe('Choices', () => {
|
|||
this.choices.highlightAll();
|
||||
this.choices.removeHighlightedItems();
|
||||
|
||||
const activeItems = items.some((item) => item.active === true);
|
||||
const activeItems = items.some(item => item.active === true);
|
||||
|
||||
expect(activeItems).toBe(false);
|
||||
});
|
||||
|
||||
it('should handle showDropdown()', function() {
|
||||
this.choices.showDropdown();
|
||||
const hasOpenState = this.choices.containerOuter.classList.contains(this.choices.config.classNames.openState);
|
||||
const hasAttr = this.choices.containerOuter.getAttribute('aria-expanded') === 'true';
|
||||
const hasActiveState = this.choices.dropdown.classList.contains(this.choices.config.classNames.activeState);
|
||||
const hasOpenState = this.choices.containerOuter.element.classList.contains(
|
||||
this.choices.config.classNames.openState,
|
||||
);
|
||||
const hasAttr = this.choices.containerOuter.element.getAttribute('aria-expanded') === 'true';
|
||||
const hasActiveState = this.choices.dropdown.element.classList.contains(
|
||||
this.choices.config.classNames.activeState,
|
||||
);
|
||||
expect(hasOpenState && hasAttr && hasActiveState).toBe(true);
|
||||
});
|
||||
|
||||
it('should handle hideDropdown()', function() {
|
||||
this.choices.showDropdown();
|
||||
this.choices.hideDropdown();
|
||||
const hasOpenState = this.choices.containerOuter.classList.contains(this.choices.config.classNames.openState);
|
||||
const hasAttr = this.choices.containerOuter.getAttribute('aria-expanded') === 'true';
|
||||
const hasActiveState = this.choices.dropdown.classList.contains(this.choices.config.classNames.activeState);
|
||||
const hasOpenState = this.choices.containerOuter.element.classList.contains(
|
||||
this.choices.config.classNames.openState,
|
||||
);
|
||||
const hasAttr = this.choices.containerOuter.element.getAttribute('aria-expanded') === 'true';
|
||||
const hasActiveState = this.choices.dropdown.element.classList.contains(
|
||||
this.choices.config.classNames.activeState,
|
||||
);
|
||||
|
||||
expect(hasOpenState && hasAttr && hasActiveState).toBe(false);
|
||||
});
|
||||
|
||||
it('should handle toggleDropdown()', function() {
|
||||
spyOn(this.choices, 'hideDropdown');
|
||||
this.choices.showDropdown();
|
||||
spyOn(this.choices.dropdown, 'hide');
|
||||
this.choices.dropdown.show();
|
||||
this.choices.toggleDropdown();
|
||||
expect(this.choices.hideDropdown).toHaveBeenCalled();
|
||||
expect(this.choices.dropdown.hide).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should handle hideDropdown()', function() {
|
||||
this.choices.showDropdown();
|
||||
expect(this.choices.containerOuter.classList).toContain(this.choices.config.classNames.openState);
|
||||
expect(
|
||||
this.choices.containerOuter.element.classList,
|
||||
).toContain(this.choices.config.classNames.openState);
|
||||
});
|
||||
|
||||
it('should handle getValue()', function() {
|
||||
|
|
@ -814,15 +831,15 @@ describe('Choices', () => {
|
|||
choices: [{
|
||||
value: 'Child One',
|
||||
label: 'Child One',
|
||||
selected: true
|
||||
selected: true,
|
||||
}, {
|
||||
value: 'Child Two',
|
||||
label: 'Child Two',
|
||||
disabled: true
|
||||
disabled: true,
|
||||
}, {
|
||||
value: 'Child Three',
|
||||
label: 'Child Three'
|
||||
}, ]
|
||||
label: 'Child Three',
|
||||
}],
|
||||
}, {
|
||||
label: 'Group two',
|
||||
id: 2,
|
||||
|
|
@ -830,14 +847,14 @@ describe('Choices', () => {
|
|||
choices: [{
|
||||
value: 'Child Four',
|
||||
label: 'Child Four',
|
||||
disabled: true
|
||||
disabled: true,
|
||||
}, {
|
||||
value: 'Child Five',
|
||||
label: 'Child Five'
|
||||
label: 'Child Five',
|
||||
}, {
|
||||
value: 'Child Six',
|
||||
label: 'Child Six'
|
||||
}, ]
|
||||
label: 'Child Six',
|
||||
}],
|
||||
}], 'value', 'label');
|
||||
|
||||
|
||||
|
|
@ -853,10 +870,10 @@ describe('Choices', () => {
|
|||
it('should handle setChoices() with blank values', function() {
|
||||
this.choices.setChoices([{
|
||||
label: 'Choice one',
|
||||
value: 'one'
|
||||
value: 'one',
|
||||
}, {
|
||||
label: 'Choice two',
|
||||
value: ''
|
||||
value: '',
|
||||
}], 'value', 'label', true);
|
||||
|
||||
|
||||
|
|
@ -876,17 +893,25 @@ describe('Choices', () => {
|
|||
it('should handle disable()', function() {
|
||||
this.choices.disable();
|
||||
|
||||
expect(this.choices.input.disabled).toBe(true);
|
||||
expect(this.choices.containerOuter.classList.contains(this.choices.config.classNames.disabledState)).toBe(true);
|
||||
expect(this.choices.containerOuter.getAttribute('aria-disabled')).toBe('true');
|
||||
expect(this.choices.input.element.disabled).toBe(true);
|
||||
expect(
|
||||
this.choices.containerOuter.element.classList.contains(
|
||||
this.choices.config.classNames.disabledState,
|
||||
),
|
||||
).toBe(true);
|
||||
expect(this.choices.containerOuter.element.getAttribute('aria-disabled')).toBe('true');
|
||||
});
|
||||
|
||||
it('should handle enable()', function() {
|
||||
this.choices.enable();
|
||||
|
||||
expect(this.choices.input.disabled).toBe(false);
|
||||
expect(this.choices.containerOuter.classList.contains(this.choices.config.classNames.disabledState)).toBe(false);
|
||||
expect(this.choices.containerOuter.hasAttribute('aria-disabled')).toBe(false);
|
||||
expect(this.choices.input.element.disabled).toBe(false);
|
||||
expect(
|
||||
this.choices.containerOuter.element.classList.contains(
|
||||
this.choices.config.classNames.disabledState,
|
||||
),
|
||||
).toBe(false);
|
||||
expect(this.choices.containerOuter.element.hasAttribute('aria-disabled')).toBe(false);
|
||||
});
|
||||
|
||||
it('should handle ajax()', function() {
|
||||
|
|
@ -908,7 +933,7 @@ describe('Choices', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('should handle public methods on select-one input types', function() {
|
||||
describe('should handle public methods on select-one input types', () => {
|
||||
beforeEach(function() {
|
||||
this.input = document.createElement('select');
|
||||
this.input.className = 'js-choices';
|
||||
|
|
@ -938,17 +963,17 @@ describe('Choices', () => {
|
|||
it('should handle disable()', function() {
|
||||
this.choices.disable();
|
||||
|
||||
expect(this.choices.containerOuter.getAttribute('tabindex')).toBe('-1');
|
||||
expect(this.choices.containerOuter.element.getAttribute('tabindex')).toBe('-1');
|
||||
});
|
||||
|
||||
it('should handle enable()', function() {
|
||||
this.choices.enable();
|
||||
|
||||
expect(this.choices.containerOuter.getAttribute('tabindex')).toBe('0');
|
||||
expect(this.choices.containerOuter.element.getAttribute('tabindex')).toBe('0');
|
||||
});
|
||||
});
|
||||
|
||||
describe('should handle public methods on text input types', function() {
|
||||
describe('should handle public methods on text input types', () => {
|
||||
beforeEach(function() {
|
||||
this.input = document.createElement('input');
|
||||
this.input.type = 'text';
|
||||
|
|
@ -965,7 +990,7 @@ describe('Choices', () => {
|
|||
|
||||
it('should handle clearInput()', function() {
|
||||
this.choices.clearInput();
|
||||
expect(this.choices.input.value).toBe('');
|
||||
expect(this.choices.input.element.value).toBe('');
|
||||
});
|
||||
|
||||
it('should handle removeItemsByValue()', function() {
|
||||
|
|
@ -977,7 +1002,7 @@ describe('Choices', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('should react to config options', function() {
|
||||
describe('should react to config options', () => {
|
||||
beforeEach(function() {
|
||||
this.input = document.createElement('select');
|
||||
this.input.className = 'js-choices';
|
||||
|
|
@ -1008,36 +1033,36 @@ describe('Choices', () => {
|
|||
position: 'top',
|
||||
});
|
||||
|
||||
const container = this.choices.containerOuter;
|
||||
this.choices.input.focus();
|
||||
const container = this.choices.containerOuter.element;
|
||||
this.choices.input.element.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'
|
||||
position: 'bottom',
|
||||
});
|
||||
|
||||
const container = this.choices.containerOuter;
|
||||
this.choices.input.focus();
|
||||
const container = this.choices.containerOuter.element;
|
||||
this.choices.input.element.focus();
|
||||
expect(container.classList.contains(this.choices.config.classNames.flippedState)).toBe(false);
|
||||
});
|
||||
|
||||
it('should render selected choices', function() {
|
||||
this.choices = new Choices(this.input, {
|
||||
renderSelectedChoices: 'always',
|
||||
renderChoiceLimit: -1
|
||||
renderChoiceLimit: -1,
|
||||
});
|
||||
const renderedChoices = this.choices.choiceList.querySelectorAll('.choices__item');
|
||||
const renderedChoices = this.choices.choiceList.element.querySelectorAll('.choices__item');
|
||||
expect(renderedChoices.length).toEqual(3);
|
||||
});
|
||||
|
||||
it('shouldn\'t render selected choices', function() {
|
||||
this.choices = new Choices(this.input, {
|
||||
renderSelectedChoices: 'auto',
|
||||
renderChoiceLimit: -1
|
||||
renderChoiceLimit: -1,
|
||||
});
|
||||
const renderedChoices = this.choices.choiceList.querySelectorAll('.choices__item');
|
||||
const renderedChoices = this.choices.choiceList.element.querySelectorAll('.choices__item');
|
||||
expect(renderedChoices.length).toEqual(1);
|
||||
});
|
||||
|
||||
|
|
@ -1071,16 +1096,16 @@ describe('Choices', () => {
|
|||
},
|
||||
],
|
||||
renderSelectedChoices: 'auto',
|
||||
renderChoiceLimit: 4
|
||||
renderChoiceLimit: 4,
|
||||
});
|
||||
|
||||
const renderedChoices = this.choices.choiceList.querySelectorAll('.choices__item');
|
||||
const renderedChoices = this.choices.choiceList.element.querySelectorAll('.choices__item');
|
||||
expect(renderedChoices.length).toEqual(4);
|
||||
});
|
||||
});
|
||||
|
||||
describe('should allow custom properties provided by the user on items or choices', function() {
|
||||
it('should allow the user to supply custom properties for an item', function() {
|
||||
describe('should allow custom properties provided by the user on items or choices', () => {
|
||||
it('should allow the user to supply custom properties for an item', () => {
|
||||
const randomItem = {
|
||||
id: 8999,
|
||||
choiceId: 9000,
|
||||
|
|
@ -1088,10 +1113,10 @@ describe('Choices', () => {
|
|||
value: 'value',
|
||||
label: 'label',
|
||||
customProperties: {
|
||||
foo: 'bar'
|
||||
foo: 'bar',
|
||||
},
|
||||
placeholder: false,
|
||||
keyCode: null
|
||||
keyCode: null,
|
||||
};
|
||||
|
||||
const expectedState = [{
|
||||
|
|
@ -1104,7 +1129,7 @@ describe('Choices', () => {
|
|||
highlighted: false,
|
||||
customProperties: randomItem.customProperties,
|
||||
placeholder: false,
|
||||
keyCode: randomItem.keyCode
|
||||
keyCode: randomItem.keyCode,
|
||||
}];
|
||||
|
||||
const action = addItemAction(
|
||||
|
|
@ -1114,13 +1139,13 @@ describe('Choices', () => {
|
|||
randomItem.choiceId,
|
||||
randomItem.groupId,
|
||||
randomItem.customProperties,
|
||||
randomItem.keyCode
|
||||
randomItem.keyCode,
|
||||
);
|
||||
|
||||
expect(itemReducer([], action)).toEqual(expectedState);
|
||||
});
|
||||
|
||||
it('should allow the user to supply custom properties for a choice', function() {
|
||||
it('should allow the user to supply custom properties for a choice', () => {
|
||||
const randomChoice = {
|
||||
id: 123,
|
||||
elementId: 321,
|
||||
|
|
@ -1129,10 +1154,10 @@ describe('Choices', () => {
|
|||
label: 'label',
|
||||
disabled: false,
|
||||
customProperties: {
|
||||
foo: 'bar'
|
||||
foo: 'bar',
|
||||
},
|
||||
placeholder: false,
|
||||
keyCode: null
|
||||
keyCode: null,
|
||||
};
|
||||
|
||||
const expectedState = [{
|
||||
|
|
@ -1147,7 +1172,7 @@ describe('Choices', () => {
|
|||
score: 9999,
|
||||
customProperties: randomChoice.customProperties,
|
||||
placeholder: randomChoice.placeholder,
|
||||
keyCode: randomChoice.keyCode
|
||||
keyCode: randomChoice.keyCode,
|
||||
}];
|
||||
|
||||
const action = addChoiceAction(
|
||||
|
|
@ -1158,14 +1183,14 @@ describe('Choices', () => {
|
|||
randomChoice.disabled,
|
||||
randomChoice.elementId,
|
||||
randomChoice.customProperties,
|
||||
randomChoice.keyCode
|
||||
randomChoice.keyCode,
|
||||
);
|
||||
|
||||
expect(choiceReducer([], action)).toEqual(expectedState);
|
||||
});
|
||||
});
|
||||
|
||||
describe('should allow custom properties provided by the user on items or choices', function() {
|
||||
describe('should allow custom properties provided by the user on items or choices', () => {
|
||||
beforeEach(function() {
|
||||
this.input = document.createElement('select');
|
||||
this.input.className = 'js-choices';
|
||||
|
|
@ -1180,7 +1205,7 @@ describe('Choices', () => {
|
|||
|
||||
it('should allow the user to supply custom properties for a choice that will be inherited by the item when the user selects the choice', function() {
|
||||
const expectedCustomProperties = {
|
||||
isBestOptionEver: true
|
||||
isBestOptionEver: true,
|
||||
};
|
||||
|
||||
this.choices = new Choices(this.input);
|
||||
|
|
@ -1189,7 +1214,7 @@ describe('Choices', () => {
|
|||
label: 'My awesome choice',
|
||||
selected: false,
|
||||
disabled: false,
|
||||
customProperties: expectedCustomProperties
|
||||
customProperties: expectedCustomProperties,
|
||||
}], 'value', 'label', true);
|
||||
|
||||
this.choices.setValueByChoice('42');
|
||||
|
|
@ -1201,7 +1226,7 @@ describe('Choices', () => {
|
|||
|
||||
it('should allow the user to supply custom properties when directly creating a selected item', function() {
|
||||
const expectedCustomProperties = {
|
||||
isBestOptionEver: true
|
||||
isBestOptionEver: true,
|
||||
};
|
||||
|
||||
this.choices = new Choices(this.input);
|
||||
|
|
@ -1209,7 +1234,7 @@ describe('Choices', () => {
|
|||
this.choices.setValue([{
|
||||
value: 'bar',
|
||||
label: 'foo',
|
||||
customProperties: expectedCustomProperties
|
||||
customProperties: expectedCustomProperties,
|
||||
}]);
|
||||
const selectedItems = this.choices.getValue();
|
||||
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@ module.exports = {
|
|||
devtool: 'eval',
|
||||
entry: [
|
||||
'webpack-dev-server/client?http://localhost:3000',
|
||||
'./assets/scripts/src/choices'
|
||||
'./src/scripts/src/choices'
|
||||
],
|
||||
output: {
|
||||
path: path.join(__dirname, 'dist'),
|
||||
filename: 'choices.min.js',
|
||||
publicPath: '/assets/scripts/dist/',
|
||||
publicPath: '/src/scripts/dist/',
|
||||
library: 'Choices',
|
||||
libraryTarget: 'umd',
|
||||
},
|
||||
|
|
@ -34,7 +34,7 @@ module.exports = {
|
|||
test: /\.js$/,
|
||||
exclude: /(node_modules|bower_components)/,
|
||||
loaders: ['babel', 'eslint-loader'],
|
||||
include: path.join(__dirname, 'assets/scripts/src')
|
||||
include: path.join(__dirname, 'src/scripts/src')
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@ const minimize = process.argv.includes('--minimize');
|
|||
const config = {
|
||||
devtool: minimize ? false : 'cheap-module-source-map',
|
||||
entry: [
|
||||
'./assets/scripts/src/choices'
|
||||
'./src/scripts/src/choices'
|
||||
],
|
||||
output: {
|
||||
path: path.join(__dirname, '/assets/scripts/dist'),
|
||||
path: path.join(__dirname, '/src/scripts/dist'),
|
||||
filename: minimize ? 'choices.min.js' : 'choices.js',
|
||||
publicPath: '/assets/scripts/dist/',
|
||||
publicPath: '/src/scripts/dist/',
|
||||
library: 'Choices',
|
||||
libraryTarget: 'umd',
|
||||
},
|
||||
|
|
@ -34,7 +34,7 @@ const config = {
|
|||
test: /\.js$/,
|
||||
exclude: /(node_modules|bower_components)/,
|
||||
loaders: ['babel'],
|
||||
include: path.join(__dirname, 'assets/scripts/src')
|
||||
include: path.join(__dirname, 'src/scripts/src')
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue