2017-08-22 10:53:26 +03:00
|
|
|
import Mixin from '@ember/object/mixin';
|
2018-03-19 20:56:09 +03:00
|
|
|
import device from 'npm:current-device';
|
2017-08-22 10:53:26 +03:00
|
|
|
import {computed} from '@ember/object';
|
2015-10-28 14:36:45 +03:00
|
|
|
|
2018-02-28 14:44:03 +03:00
|
|
|
const keyCodes = {
|
|
|
|
13: 'Enter',
|
|
|
|
9: 'Tab'
|
|
|
|
};
|
|
|
|
|
2015-10-28 14:36:45 +03:00
|
|
|
export default Mixin.create({
|
2017-05-18 11:01:30 +03:00
|
|
|
attributeBindings: ['autofocus'],
|
|
|
|
|
2014-04-20 18:48:34 +04:00
|
|
|
selectOnClick: false,
|
2017-05-18 11:01:30 +03:00
|
|
|
shouldFocus: false,
|
2014-08-03 07:17:25 +04:00
|
|
|
stopEnterKeyDownPropagation: false,
|
2014-10-25 01:09:50 +04:00
|
|
|
|
2017-05-18 11:01:30 +03:00
|
|
|
autofocus: computed(function () {
|
|
|
|
if (this.get('shouldFocus')) {
|
|
|
|
return (device.ios()) ? false : 'autofocus';
|
|
|
|
}
|
|
|
|
|
|
|
|
return false;
|
|
|
|
}),
|
|
|
|
|
|
|
|
didInsertElement() {
|
|
|
|
this._super(...arguments);
|
|
|
|
this._focus();
|
|
|
|
},
|
|
|
|
|
2015-10-28 14:36:45 +03:00
|
|
|
click(event) {
|
2014-04-20 18:48:34 +04:00
|
|
|
if (this.get('selectOnClick')) {
|
|
|
|
event.currentTarget.select();
|
|
|
|
}
|
|
|
|
},
|
2014-10-25 01:09:50 +04:00
|
|
|
|
2015-10-28 14:36:45 +03:00
|
|
|
keyDown(event) {
|
2014-08-03 07:17:25 +04:00
|
|
|
// stop event propagation when pressing "enter"
|
2017-05-18 11:01:30 +03:00
|
|
|
// most useful in the case when undesired (global) keyboard shortcuts
|
|
|
|
// are getting triggered while interacting with this particular input element.
|
2018-02-28 14:44:03 +03:00
|
|
|
if (event.keyCode === 13 && this.get('stopEnterKeyDownPropagation')) {
|
2014-08-03 07:17:25 +04:00
|
|
|
event.stopPropagation();
|
2014-10-25 01:09:50 +04:00
|
|
|
|
2014-08-03 07:17:25 +04:00
|
|
|
return true;
|
|
|
|
}
|
2017-05-18 11:01:30 +03:00
|
|
|
|
|
|
|
// prevent default TAB behaviour if we have a keyEvent for it
|
2018-02-28 14:44:03 +03:00
|
|
|
if (event.keyCode === 9 && typeof this.get('keyEvents.Tab') === 'function') {
|
2017-05-18 11:01:30 +03:00
|
|
|
event.preventDefault();
|
|
|
|
}
|
|
|
|
|
|
|
|
this._super(...arguments);
|
|
|
|
},
|
|
|
|
|
|
|
|
keyPress(event) {
|
|
|
|
// prevent default ENTER behaviour if we have a keyEvent for it
|
2018-02-28 14:44:03 +03:00
|
|
|
if (event.keyCode === 13 && typeof this.get('keyEvents.Enter') === 'function') {
|
2017-05-18 11:01:30 +03:00
|
|
|
event.preventDefault();
|
|
|
|
}
|
|
|
|
|
|
|
|
this._super(...arguments);
|
|
|
|
},
|
|
|
|
|
2018-02-28 14:44:03 +03:00
|
|
|
keyUp(event) {
|
|
|
|
let methodName = this._getMethodFromKeyCode(event.keyCode);
|
|
|
|
let method = this.get(`keyEvents.${methodName}`);
|
|
|
|
if (method) {
|
|
|
|
method(event.target.value);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2017-05-18 11:01:30 +03:00
|
|
|
_focus() {
|
|
|
|
// Until mobile safari has better support
|
|
|
|
// for focusing, we just ignore it
|
|
|
|
if (this.get('shouldFocus') && !device.ios()) {
|
|
|
|
this.element.focus();
|
|
|
|
}
|
2018-02-28 14:44:03 +03:00
|
|
|
},
|
|
|
|
|
|
|
|
_getMethodFromKeyCode(keyCode) {
|
|
|
|
let methodName = keyCodes[keyCode.toString()];
|
|
|
|
return methodName;
|
2014-04-20 18:48:34 +04:00
|
|
|
}
|
|
|
|
});
|