@syncfusion/ej2-base
Version:
A common package of Essential JS 2 base libraries, methods and class definitions
222 lines (221 loc) • 7.31 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Property, NotifyPropertyChanges, Event } from './notify-property-change';
import { Base } from './base';
var keyCode = {
'backspace': 8,
'tab': 9,
'enter': 13,
'shift': 16,
'control': 17,
'alt': 18,
'pause': 19,
'capslock': 20,
'space': 32,
'escape': 27,
'pageup': 33,
'pagedown': 34,
'end': 35,
'home': 36,
'leftarrow': 37,
'uparrow': 38,
'rightarrow': 39,
'downarrow': 40,
'insert': 45,
'delete': 46,
'f1': 112,
'f2': 113,
'f3': 114,
'f4': 115,
'f5': 116,
'f6': 117,
'f7': 118,
'f8': 119,
'f9': 120,
'f10': 121,
'f11': 122,
'f12': 123,
'semicolon': 186,
'plus': 187,
'comma': 188,
'minus': 189,
'dot': 190,
'forwardslash': 191,
'graveaccent': 192,
'openbracket': 219,
'backslash': 220,
'closebracket': 221,
'singlequote': 222
};
/**
* KeyboardEvents class enables you to bind key action desired key combinations for ex., Ctrl+A, Delete, Alt+Space etc.
* ```html
* <div id='testEle'> </div>;
* <script>
* let node: HTMLElement = document.querySelector('#testEle');
* let kbInstance = new KeyboardEvents({
* element: node,
* keyConfigs:{ selectAll : 'ctrl+a' },
* keyAction: function (e:KeyboardEvent, action:string) {
* // handler function code
* }
* });
* </script>
* ```
*/
var KeyboardEvents = /** @class */ (function (_super) {
__extends(KeyboardEvents, _super);
/**
* Initializes the KeyboardEvents
*
* @param {HTMLElement} element ?
* @param {KeyboardEventsModel} options ?
*/
function KeyboardEvents(element, options) {
var _this = _super.call(this, options, element) || this;
/**
* To handle a key press event returns null
*
* @param {KeyboardEventArgs} e ?
* @returns {void} ?
*/
_this.keyPressHandler = function (e) {
var isAltKey = e.altKey;
var isCtrlKey = e.ctrlKey;
var isShiftKey = e.shiftKey;
var curkeyCode = e.which;
var keys = Object.keys(_this.keyConfigs);
for (var _i = 0, keys_1 = keys; _i < keys_1.length; _i++) {
var key = keys_1[_i];
var configCollection = _this.keyConfigs["" + key].split(',');
for (var _a = 0, configCollection_1 = configCollection; _a < configCollection_1.length; _a++) {
var rconfig = configCollection_1[_a];
var rKeyObj = KeyboardEvents_1.getKeyConfigData(rconfig.trim());
if (isAltKey === rKeyObj.altKey && isCtrlKey === rKeyObj.ctrlKey &&
isShiftKey === rKeyObj.shiftKey && curkeyCode === rKeyObj.keyCode) {
e.action = key;
if (_this.keyAction) {
_this.keyAction(e);
}
}
}
}
};
_this.bind();
return _this;
}
KeyboardEvents_1 = KeyboardEvents;
/**
* Unwire bound events and destroy the instance.
*
* @returns {void} ?
*/
KeyboardEvents.prototype.destroy = function () {
this.unwireEvents();
_super.prototype.destroy.call(this);
};
/**
* Function can be used to specify certain action if a property is changed
*
* @param {KeyboardEventsModel} newProp ?
* @param {KeyboardEventsModel} oldProp ?
* @returns {void} ?
* @private
*/
KeyboardEvents.prototype.onPropertyChanged = function (newProp, oldProp) {
// No code are needed
};
KeyboardEvents.prototype.bind = function () {
this.wireEvents();
};
/**
* To get the module name, returns 'keyboard'.
*
* @returns {string} ?
* @private
*/
KeyboardEvents.prototype.getModuleName = function () {
return 'keyboard';
};
/**
* Wiring event handlers to events
*
* @returns {void} ?
* @private
*/
KeyboardEvents.prototype.wireEvents = function () {
this.element.addEventListener(this.eventName, this.keyPressHandler);
};
/**
* Unwiring event handlers to events
*
* @returns {void} ?
* @private
*/
KeyboardEvents.prototype.unwireEvents = function () {
this.element.removeEventListener(this.eventName, this.keyPressHandler);
};
/**
* To get the key configuration data
*
* @param {string} config - configuration data
* @returns {KeyData} ?
*/
KeyboardEvents.getKeyConfigData = function (config) {
if (config in this.configCache) {
return this.configCache["" + config];
}
var keys = config.toLowerCase().split('+');
var keyData = {
altKey: (keys.indexOf('alt') !== -1 ? true : false),
ctrlKey: (keys.indexOf('ctrl') !== -1 ? true : false),
shiftKey: (keys.indexOf('shift') !== -1 ? true : false),
keyCode: null
};
if (keys[keys.length - 1].length > 1 && !!Number(keys[keys.length - 1])) {
keyData.keyCode = Number(keys[keys.length - 1]);
}
else {
keyData.keyCode = KeyboardEvents_1.getKeyCode(keys[keys.length - 1]);
}
KeyboardEvents_1.configCache["" + config] = keyData;
return keyData;
};
// Return the keycode value as string
KeyboardEvents.getKeyCode = function (keyVal) {
return keyCode["" + keyVal] || keyVal.toUpperCase().charCodeAt(0);
};
var KeyboardEvents_1;
KeyboardEvents.configCache = {};
__decorate([
Property({})
], KeyboardEvents.prototype, "keyConfigs", void 0);
__decorate([
Property('keyup')
], KeyboardEvents.prototype, "eventName", void 0);
__decorate([
Event()
], KeyboardEvents.prototype, "keyAction", void 0);
KeyboardEvents = KeyboardEvents_1 = __decorate([
NotifyPropertyChanges
], KeyboardEvents);
return KeyboardEvents;
}(Base));
export { KeyboardEvents };