mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-10 09:52:18 +02:00
Update polyfill list (#765)
* Update polyfill list * Update eslintrc.json * Add keydown methods to types * Resolve type issue
This commit is contained in:
parent
214b6e80df
commit
592c326442
|
@ -86,10 +86,12 @@
|
||||||
"Array.prototype.includes",
|
"Array.prototype.includes",
|
||||||
"Symbol",
|
"Symbol",
|
||||||
"Symbol.iterator",
|
"Symbol.iterator",
|
||||||
|
"DOMTokenList",
|
||||||
"Object.assign",
|
"Object.assign",
|
||||||
"CustomEvent",
|
"CustomEvent",
|
||||||
"Element.prototype.classList",
|
"Element.prototype.classList",
|
||||||
"Element.prototype.closest"
|
"Element.prototype.closest",
|
||||||
|
"Element.prototype.dataset"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1044,7 +1044,7 @@ I suggest including a polyfill from the very good [polyfill.io](https://polyfill
|
||||||
**Polyfill example used for the demo:**
|
**Polyfill example used for the demo:**
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=es5,es6,fetch,Array.prototype.includes,CustomEvent,Element.prototype.closest"></script>
|
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=Array.from%2Ces5%2Ces6%2CSymbol%2CSymbol.iterator%2CDOMTokenList%2CObject.assign%2CCustomEvent%2CElement.prototype.classList%2CElement.prototype.closest%2CElement.prototype.dataset%2CArray.prototype.find%2CArray.prototype.includes"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
**Features used in Choices:**
|
**Features used in Choices:**
|
||||||
|
@ -1055,10 +1055,12 @@ Array.prototype.find
|
||||||
Array.prototype.includes
|
Array.prototype.includes
|
||||||
Symbol
|
Symbol
|
||||||
Symbol.iterator
|
Symbol.iterator
|
||||||
|
DOMTokenList
|
||||||
Object.assign
|
Object.assign
|
||||||
CustomEvent
|
CustomEvent
|
||||||
Element.prototype.classList
|
Element.prototype.classList
|
||||||
Element.prototype.closest
|
Element.prototype.closest
|
||||||
|
Element.prototype.dataset
|
||||||
```
|
```
|
||||||
|
|
||||||
## Development
|
## Development
|
||||||
|
|
|
@ -47,7 +47,7 @@
|
||||||
<!-- End ignore these -->
|
<!-- End ignore these -->
|
||||||
|
|
||||||
<!-- Optional includes -->
|
<!-- Optional includes -->
|
||||||
<script src="https://polyfill.io/v3/polyfill.min.js?features=es5%2Ces6%2CArray.prototype.includes%2Cfetch%2CCustomEvent%2CElement.prototype.closest"></script>
|
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=Array.from%2Ces5%2Ces6%2CSymbol%2CSymbol.iterator%2CDOMTokenList%2CObject.assign%2CCustomEvent%2CElement.prototype.classList%2CElement.prototype.closest%2CElement.prototype.dataset%2CArray.prototype.find%2CArray.prototype.includes"></script>
|
||||||
<!-- End optional includes -->
|
<!-- End optional includes -->
|
||||||
|
|
||||||
<!-- Choices includes -->
|
<!-- Choices includes -->
|
||||||
|
|
|
@ -1321,7 +1321,7 @@ class Choices {
|
||||||
* @param {KeyboardEvent} event
|
* @param {KeyboardEvent} event
|
||||||
*/
|
*/
|
||||||
_onKeyDown(event) {
|
_onKeyDown(event) {
|
||||||
const { target, keyCode, ctrlKey, metaKey } = event;
|
const { keyCode } = event;
|
||||||
const { activeItems } = this._store;
|
const { activeItems } = this._store;
|
||||||
const hasFocusedInput = this.input.isFocussed;
|
const hasFocusedInput = this.input.isFocussed;
|
||||||
const hasActiveDropdown = this.dropdown.isActive;
|
const hasActiveDropdown = this.dropdown.isActive;
|
||||||
|
@ -1339,7 +1339,6 @@ class Choices {
|
||||||
PAGE_UP_KEY,
|
PAGE_UP_KEY,
|
||||||
PAGE_DOWN_KEY,
|
PAGE_DOWN_KEY,
|
||||||
} = KEY_CODES;
|
} = KEY_CODES;
|
||||||
const hasCtrlDownKeyPressed = ctrlKey || metaKey;
|
|
||||||
|
|
||||||
// If a user is typing and the dropdown is not active
|
// If a user is typing and the dropdown is not active
|
||||||
if (!this._isTextElement && /[a-zA-Z0-9-_ ]/.test(keyString)) {
|
if (!this._isTextElement && /[a-zA-Z0-9-_ ]/.test(keyString)) {
|
||||||
|
@ -1363,14 +1362,10 @@ class Choices {
|
||||||
if (keyDownActions[keyCode]) {
|
if (keyDownActions[keyCode]) {
|
||||||
keyDownActions[keyCode]({
|
keyDownActions[keyCode]({
|
||||||
event,
|
event,
|
||||||
target,
|
|
||||||
keyCode,
|
|
||||||
metaKey,
|
|
||||||
activeItems,
|
activeItems,
|
||||||
hasFocusedInput,
|
hasFocusedInput,
|
||||||
hasActiveDropdown,
|
hasActiveDropdown,
|
||||||
hasItems,
|
hasItems,
|
||||||
hasCtrlDownKeyPressed,
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1409,7 +1404,9 @@ class Choices {
|
||||||
this._canSearch = this.config.searchEnabled;
|
this._canSearch = this.config.searchEnabled;
|
||||||
}
|
}
|
||||||
|
|
||||||
_onAKey({ hasItems, hasCtrlDownKeyPressed }) {
|
_onAKey({ event, hasItems }) {
|
||||||
|
const { ctrlKey, metaKey } = event;
|
||||||
|
const hasCtrlDownKeyPressed = ctrlKey || metaKey;
|
||||||
// If CTRL + A or CMD + A have been pressed and there are items to select
|
// If CTRL + A or CMD + A have been pressed and there are items to select
|
||||||
if (hasCtrlDownKeyPressed && hasItems) {
|
if (hasCtrlDownKeyPressed && hasItems) {
|
||||||
this._canSearch = false;
|
this._canSearch = false;
|
||||||
|
@ -1425,7 +1422,8 @@ class Choices {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
_onEnterKey({ event, target, activeItems, hasActiveDropdown }) {
|
_onEnterKey({ event, activeItems, hasActiveDropdown }) {
|
||||||
|
const { target } = event;
|
||||||
const { ENTER_KEY: enterKey } = KEY_CODES;
|
const { ENTER_KEY: enterKey } = KEY_CODES;
|
||||||
const targetWasButton = target.hasAttribute('data-button');
|
const targetWasButton = target.hasAttribute('data-button');
|
||||||
|
|
||||||
|
@ -1473,7 +1471,8 @@ class Choices {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
_onDirectionKey({ event, hasActiveDropdown, keyCode, metaKey }) {
|
_onDirectionKey({ event, hasActiveDropdown }) {
|
||||||
|
const { keyCode, metaKey } = event;
|
||||||
const {
|
const {
|
||||||
DOWN_KEY: downKey,
|
DOWN_KEY: downKey,
|
||||||
PAGE_UP_KEY: pageUpKey,
|
PAGE_UP_KEY: pageUpKey,
|
||||||
|
@ -1536,7 +1535,8 @@ class Choices {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
_onDeleteKey({ event, target, hasFocusedInput, activeItems }) {
|
_onDeleteKey({ event, hasFocusedInput, activeItems }) {
|
||||||
|
const { target } = event;
|
||||||
// If backspace or delete key is pressed and the input has no value
|
// If backspace or delete key is pressed and the input has no value
|
||||||
if (hasFocusedInput && !target.value && !this._isSelectOneElement) {
|
if (hasFocusedInput && !target.value && !this._isSelectOneElement) {
|
||||||
this._handleBackspace(activeItems);
|
this._handleBackspace(activeItems);
|
||||||
|
|
14
types/index.d.ts
vendored
14
types/index.d.ts
vendored
|
@ -780,6 +780,14 @@ declare namespace Choices {
|
||||||
| ((template: Choices.Types.strToEl) => Partial<Choices.Templates>)
|
| ((template: Choices.Types.strToEl) => Partial<Choices.Templates>)
|
||||||
| null;
|
| null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
interface KeyDownAction {
|
||||||
|
event: KeyboardEvent;
|
||||||
|
activeItems: Item[];
|
||||||
|
hasFocusedInput: boolean;
|
||||||
|
hasActiveDropdown: boolean;
|
||||||
|
hasItems: boolean;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Exporting default class
|
// Exporting default class
|
||||||
|
@ -1024,4 +1032,10 @@ export default class Choices {
|
||||||
* **Input types affected:** text, select-one, select-multiple
|
* **Input types affected:** text, select-one, select-multiple
|
||||||
*/
|
*/
|
||||||
disable(): this;
|
disable(): this;
|
||||||
|
|
||||||
|
_onEnterKey(keyDownAction: Partial<Choices.KeyDownAction>): void;
|
||||||
|
_onAKey(keyDownAction: Partial<Choices.KeyDownAction>): void;
|
||||||
|
_onEscapeKey(keyDownAction: Partial<Choices.KeyDownAction>): void;
|
||||||
|
_onDirectionKey(keyDownAction: Partial<Choices.KeyDownAction>): void;
|
||||||
|
_onDeleteKey(keyDownAction: Partial<Choices.KeyDownAction>): void;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue