mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-02 05:52:14 +02:00
remove delegateEvents (#703)
This commit is contained in:
parent
2e004015d5
commit
1f5192b4ad
2
.github/workflows/lint.yml
vendored
2
.github/workflows/lint.yml
vendored
|
@ -27,7 +27,7 @@ jobs:
|
||||||
|
|
||||||
- name: run eslint
|
- name: run eslint
|
||||||
run: |
|
run: |
|
||||||
CHANGED_JS=$(git --no-pager diff --name-only ..origin/master | grep '^src\/scripts\/.*\.js$' | paste -sd " " -)
|
CHANGED_JS=$(git --no-pager diff --name-only ..origin/master | grep '^src\/scripts\/.*\.js$' | xargs ls -d 2>/dev/null | paste -sd " " -)
|
||||||
if [[ -z $(sed -e 's/[[:space:]]*$//' <<<${CHANGED_JS}) ]]; then CHANGED_JS="src/scripts"; fi
|
if [[ -z $(sed -e 's/[[:space:]]*$//' <<<${CHANGED_JS}) ]]; then CHANGED_JS="src/scripts"; fi
|
||||||
echo $CHANGED_JS
|
echo $CHANGED_JS
|
||||||
node node_modules/eslint/bin/eslint.js $CHANGED_JS
|
node node_modules/eslint/bin/eslint.js $CHANGED_JS
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import Fuse from 'fuse.js';
|
import Fuse from 'fuse.js';
|
||||||
import merge from 'deepmerge';
|
import merge from 'deepmerge';
|
||||||
|
|
||||||
import './lib/delegate-events';
|
|
||||||
import Store from './store/store';
|
import Store from './store/store';
|
||||||
import {
|
import {
|
||||||
Dropdown,
|
Dropdown,
|
||||||
|
@ -1131,48 +1130,91 @@ class Choices {
|
||||||
}
|
}
|
||||||
|
|
||||||
_addEventListeners() {
|
_addEventListeners() {
|
||||||
window.delegateEvent.add('keyup', this._onKeyUp);
|
const { documentElement } = document;
|
||||||
window.delegateEvent.add('keydown', this._onKeyDown);
|
|
||||||
window.delegateEvent.add('click', this._onClick);
|
// capture events - can cancel event processing or propagation
|
||||||
window.delegateEvent.add('touchmove', this._onTouchMove);
|
documentElement.addEventListener('keydown', this._onKeyDown, true);
|
||||||
window.delegateEvent.add('touchend', this._onTouchEnd);
|
documentElement.addEventListener('touchend', this._onTouchEnd, true);
|
||||||
window.delegateEvent.add('mousedown', this._onMouseDown);
|
documentElement.addEventListener('mousedown', this._onMouseDown, true);
|
||||||
window.delegateEvent.add('mouseover', this._onMouseOver);
|
|
||||||
|
// passive events - doesn't call `preventDefault` or `stopPropagation`
|
||||||
|
documentElement.addEventListener('click', this._onClick, { passive: true });
|
||||||
|
documentElement.addEventListener('touchmove', this._onTouchMove, {
|
||||||
|
passive: true,
|
||||||
|
});
|
||||||
|
documentElement.addEventListener('mouseover', this._onMouseOver, {
|
||||||
|
passive: true,
|
||||||
|
});
|
||||||
|
|
||||||
if (this._isSelectOneElement) {
|
if (this._isSelectOneElement) {
|
||||||
this.containerOuter.element.addEventListener('focus', this._onFocus);
|
this.containerOuter.element.addEventListener('focus', this._onFocus, {
|
||||||
this.containerOuter.element.addEventListener('blur', this._onBlur);
|
passive: true,
|
||||||
|
});
|
||||||
|
this.containerOuter.element.addEventListener('blur', this._onBlur, {
|
||||||
|
passive: true,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
this.input.element.addEventListener('focus', this._onFocus);
|
this.input.element.addEventListener('keyup', this._onKeyUp, {
|
||||||
this.input.element.addEventListener('blur', this._onBlur);
|
passive: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.input.element.addEventListener('focus', this._onFocus, {
|
||||||
|
passive: true,
|
||||||
|
});
|
||||||
|
this.input.element.addEventListener('blur', this._onBlur, {
|
||||||
|
passive: true,
|
||||||
|
});
|
||||||
|
|
||||||
if (this.input.element.form) {
|
if (this.input.element.form) {
|
||||||
this.input.element.form.addEventListener('reset', this._onFormReset);
|
this.input.element.form.addEventListener('reset', this._onFormReset, {
|
||||||
|
passive: true,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
this.input.addEventListeners();
|
this.input.addEventListeners();
|
||||||
}
|
}
|
||||||
|
|
||||||
_removeEventListeners() {
|
_removeEventListeners() {
|
||||||
window.delegateEvent.remove('keyup', this._onKeyUp);
|
const { documentElement } = document;
|
||||||
window.delegateEvent.remove('keydown', this._onKeyDown);
|
|
||||||
window.delegateEvent.remove('click', this._onClick);
|
documentElement.removeEventListener('keydown', this._onKeyDown, true);
|
||||||
window.delegateEvent.remove('touchmove', this._onTouchMove);
|
documentElement.removeEventListener('touchend', this._onTouchEnd, true);
|
||||||
window.delegateEvent.remove('touchend', this._onTouchEnd);
|
documentElement.removeEventListener('mousedown', this._onMouseDown, true);
|
||||||
window.delegateEvent.remove('mousedown', this._onMouseDown);
|
|
||||||
window.delegateEvent.remove('mouseover', this._onMouseOver);
|
documentElement.removeEventListener('keyup', this._onKeyUp, {
|
||||||
|
passive: true,
|
||||||
|
});
|
||||||
|
documentElement.removeEventListener('click', this._onClick, {
|
||||||
|
passive: true,
|
||||||
|
});
|
||||||
|
documentElement.removeEventListener('touchmove', this._onTouchMove, {
|
||||||
|
passive: true,
|
||||||
|
});
|
||||||
|
documentElement.removeEventListener('mouseover', this._onMouseOver, {
|
||||||
|
passive: true,
|
||||||
|
});
|
||||||
|
|
||||||
if (this._isSelectOneElement) {
|
if (this._isSelectOneElement) {
|
||||||
this.containerOuter.element.removeEventListener('focus', this._onFocus);
|
this.containerOuter.element.removeEventListener('focus', this._onFocus, {
|
||||||
this.containerOuter.element.removeEventListener('blur', this._onBlur);
|
passive: true,
|
||||||
|
});
|
||||||
|
this.containerOuter.element.removeEventListener('blur', this._onBlur, {
|
||||||
|
passive: true,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
this.input.element.removeEventListener('focus', this._onFocus);
|
this.input.element.removeEventListener('focus', this._onFocus, {
|
||||||
this.input.element.removeEventListener('blur', this._onBlur);
|
passive: true,
|
||||||
|
});
|
||||||
|
this.input.element.removeEventListener('blur', this._onBlur, {
|
||||||
|
passive: true,
|
||||||
|
});
|
||||||
|
|
||||||
if (this.input.element.form) {
|
if (this.input.element.form) {
|
||||||
this.input.element.form.removeEventListener('reset', this._onFormReset);
|
this.input.element.form.removeEventListener('reset', this._onFormReset, {
|
||||||
|
passive: true,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
this.input.removeEventListeners();
|
this.input.removeEventListeners();
|
||||||
|
@ -1242,10 +1284,6 @@ class Choices {
|
||||||
}
|
}
|
||||||
|
|
||||||
_onKeyUp({ target, keyCode }) {
|
_onKeyUp({ target, keyCode }) {
|
||||||
if (target !== this.input.element) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { value } = this.input;
|
const { value } = this.input;
|
||||||
const { activeItems } = this._store;
|
const { activeItems } = this._store;
|
||||||
const canAddItem = this._canAddItem(activeItems, value);
|
const canAddItem = this._canAddItem(activeItems, value);
|
||||||
|
|
|
@ -34,25 +34,29 @@ export default class Input {
|
||||||
}
|
}
|
||||||
|
|
||||||
addEventListeners() {
|
addEventListeners() {
|
||||||
this.element.addEventListener('input', this._onInput);
|
|
||||||
this.element.addEventListener('paste', this._onPaste);
|
this.element.addEventListener('paste', this._onPaste);
|
||||||
this.element.addEventListener('focus', this._onFocus);
|
this.element.addEventListener('input', this._onInput, {
|
||||||
this.element.addEventListener('blur', this._onBlur);
|
passive: true,
|
||||||
|
});
|
||||||
if (this.element.form) {
|
this.element.addEventListener('focus', this._onFocus, {
|
||||||
this.element.form.addEventListener('reset', this._onFormReset);
|
passive: true,
|
||||||
}
|
});
|
||||||
|
this.element.addEventListener('blur', this._onBlur, {
|
||||||
|
passive: true,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
removeEventListeners() {
|
removeEventListeners() {
|
||||||
this.element.removeEventListener('input', this._onInput);
|
this.element.removeEventListener('input', this._onInput, {
|
||||||
|
passive: true,
|
||||||
|
});
|
||||||
this.element.removeEventListener('paste', this._onPaste);
|
this.element.removeEventListener('paste', this._onPaste);
|
||||||
this.element.removeEventListener('focus', this._onFocus);
|
this.element.removeEventListener('focus', this._onFocus, {
|
||||||
this.element.removeEventListener('blur', this._onBlur);
|
passive: true,
|
||||||
|
});
|
||||||
if (this.element.form) {
|
this.element.removeEventListener('blur', this._onBlur, {
|
||||||
this.element.form.removeEventListener('reset', this._onFormReset);
|
passive: true,
|
||||||
}
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
enable() {
|
enable() {
|
||||||
|
|
|
@ -46,11 +46,12 @@ describe('components/input', () => {
|
||||||
|
|
||||||
it('adds event listeners', () => {
|
it('adds event listeners', () => {
|
||||||
instance.addEventListeners();
|
instance.addEventListeners();
|
||||||
expect(addEventListenerStub.callCount).to.equal(4);
|
expect(['input', 'paste', 'focus', 'blur']).to.have.members(
|
||||||
expect(addEventListenerStub.getCall(0).args[0]).to.equal('input');
|
Array.from(
|
||||||
expect(addEventListenerStub.getCall(1).args[0]).to.equal('paste');
|
{ length: addEventListenerStub.callCount },
|
||||||
expect(addEventListenerStub.getCall(2).args[0]).to.equal('focus');
|
(v, i) => addEventListenerStub.getCall(i).args[0],
|
||||||
expect(addEventListenerStub.getCall(3).args[0]).to.equal('blur');
|
),
|
||||||
|
);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -1,39 +0,0 @@
|
||||||
window.delegateEvent = (function delegateEvent() {
|
|
||||||
let events;
|
|
||||||
let addedListenerTypes;
|
|
||||||
if (typeof events === 'undefined') {
|
|
||||||
events = new Map();
|
|
||||||
}
|
|
||||||
if (typeof addedListenerTypes === 'undefined') {
|
|
||||||
addedListenerTypes = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
function _callback(event) {
|
|
||||||
const type = events.get(event.type);
|
|
||||||
if (!type) return;
|
|
||||||
type.forEach(fn => fn(event));
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
add: function add(type, fn) {
|
|
||||||
// Cache list of events.
|
|
||||||
if (events.has(type)) {
|
|
||||||
events.get(type).push(fn);
|
|
||||||
} else {
|
|
||||||
events.set(type, [fn]);
|
|
||||||
}
|
|
||||||
// Setup events.
|
|
||||||
if (addedListenerTypes.indexOf(type) === -1) {
|
|
||||||
document.documentElement.addEventListener(type, _callback, true);
|
|
||||||
addedListenerTypes.push(type);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
remove: function remove(type, fn) {
|
|
||||||
if (!events.get(type)) return;
|
|
||||||
events.set(type, events.get(type).filter(item => item !== fn));
|
|
||||||
if (!events.get(type).length) {
|
|
||||||
addedListenerTypes.splice(addedListenerTypes.indexOf(type), 1);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
})();
|
|
Loading…
Reference in a new issue