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

Further touchstart tweaks

Browse source
This commit is contained in:
Josh Johnson 2016-08-05 20:54:36 +01:00
parent 44bc18803e
commit 9e8974adfd
4 changed files with 33 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

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

@ -36,7 +36,7 @@ export class Choices {
delimiter: ',',
paste: true,
search: true,
flip: false,
flip: true,
regexFilter: null,
sortFilter: sortByAlpha,
sortFields: ['label', 'value'],
@ -114,15 +114,15 @@ export class Choices {
this.disable = this.disable.bind(this);
// Bind event handlers
this._onFocus = this._onFocus.bind(this);
this._onBlur = this._onBlur.bind(this);
this._onKeyUp = this._onKeyUp.bind(this);
this._onKeyDown = this._onKeyDown.bind(this);
this._onFocus = this._onFocus.bind(this);
this._onBlur = this._onBlur.bind(this);
this._onKeyUp = this._onKeyUp.bind(this);
this._onKeyDown = this._onKeyDown.bind(this);
this._onTouchStart = this._onTouchStart.bind(this);
this._onMouseDown = this._onMouseDown.bind(this);
this._onMouseOver = this._onMouseOver.bind(this);
this._onPaste = this._onPaste.bind(this);
this._onInput = this._onInput.bind(this);
this._onMouseDown = this._onMouseDown.bind(this);
this._onMouseOver = this._onMouseOver.bind(this);
this._onPaste = this._onPaste.bind(this);
this._onInput = this._onInput.bind(this);
// Focus containerOuter but not show dropdown if true
this._focusAndHideDropdown = false;
@ -968,17 +968,28 @@ export class Choices {
*/
_onTouchStart(e) {
const target = e.touches[0].target;
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
if(this.passedElement.type !== 'select-one') {
// If click is within this element
if(this.containerOuter.contains(target)) {
if(this.config.search && document.activeElement !== this.input) {
// If search and we aren't already focused, focus the input
this.input.focus();
// Show dropdown if focus
if(!hasActiveDropdown){
if(this.passedElement.type === 'text') {
if(document.activeElement !== this.input) {
this.input.focus();
}
} else {
this.showDropdown();
}
if(this.config.search) {
if(document.activeElement !== this.input) {
this.input.focus();
}
}
e.preventDefault();
} else if(this.passedElement.type === 'select-multiple') {
// Otherwise just show the dropdown
this.showDropdown();
}
} else {
this.input.blur();
@ -1560,6 +1571,7 @@ export class Choices {
containerOuter.appendChild(containerInner);
containerOuter.appendChild(dropdown);
containerInner.appendChild(itemList);
dropdown.appendChild(choiceList);
if(this.passedElement.type === 'select-multiple' || this.passedElement.type === 'text') {

6
index.html
View file

@ -7,12 +7,12 @@
<meta name=description itemprop=description content="A lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.">
<!-- Ignore these -->
<link rel="stylesheet" href="assets/styles/css/base.min.css">
<link rel="stylesheet" href="assets/styles/css/base.min.css?version=1.0.53">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
<!-- Choices includes -->
<link rel="stylesheet" href="assets/styles/css/choices.min.css">
<script src="assets/scripts/dist/choices.min.js"></script>
<link rel="stylesheet" href="assets/styles/css/choices.min.css?version=1.0.53">
<script src="assets/scripts/dist/choices.min.js?version=1.0.53"></script>
<!--[if lt IE 9]>
<style>

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "choices.js",
"version": "1.0.52",
"version": "1.0.53",
"description": "A vanilla JS customisable text input/select box plugin",
"main": "./assets/scripts/dist/choices.min.js",
"scripts": {