84 lines
3.1 KiB
JavaScript
84 lines
3.1 KiB
JavaScript
import MaskElement from './mask-element.js';
|
|
import IMask from '../core/holder.js';
|
|
|
|
const KEY_Z = 90;
|
|
const KEY_Y = 89;
|
|
|
|
/** Bridge between HTMLElement and {@link Masked} */
|
|
class HTMLMaskElement extends MaskElement {
|
|
/** HTMLElement to use mask on */
|
|
|
|
constructor(input) {
|
|
super();
|
|
this.input = input;
|
|
this._onKeydown = this._onKeydown.bind(this);
|
|
this._onInput = this._onInput.bind(this);
|
|
this._onBeforeinput = this._onBeforeinput.bind(this);
|
|
this._onCompositionEnd = this._onCompositionEnd.bind(this);
|
|
}
|
|
get rootElement() {
|
|
var _this$input$getRootNo, _this$input$getRootNo2, _this$input;
|
|
return (_this$input$getRootNo = (_this$input$getRootNo2 = (_this$input = this.input).getRootNode) == null ? void 0 : _this$input$getRootNo2.call(_this$input)) != null ? _this$input$getRootNo : document;
|
|
}
|
|
|
|
/** Is element in focus */
|
|
get isActive() {
|
|
return this.input === this.rootElement.activeElement;
|
|
}
|
|
|
|
/** Binds HTMLElement events to mask internal events */
|
|
bindEvents(handlers) {
|
|
this.input.addEventListener('keydown', this._onKeydown);
|
|
this.input.addEventListener('input', this._onInput);
|
|
this.input.addEventListener('beforeinput', this._onBeforeinput);
|
|
this.input.addEventListener('compositionend', this._onCompositionEnd);
|
|
this.input.addEventListener('drop', handlers.drop);
|
|
this.input.addEventListener('click', handlers.click);
|
|
this.input.addEventListener('focus', handlers.focus);
|
|
this.input.addEventListener('blur', handlers.commit);
|
|
this._handlers = handlers;
|
|
}
|
|
_onKeydown(e) {
|
|
if (this._handlers.redo && (e.keyCode === KEY_Z && e.shiftKey && (e.metaKey || e.ctrlKey) || e.keyCode === KEY_Y && e.ctrlKey)) {
|
|
e.preventDefault();
|
|
return this._handlers.redo(e);
|
|
}
|
|
if (this._handlers.undo && e.keyCode === KEY_Z && (e.metaKey || e.ctrlKey)) {
|
|
e.preventDefault();
|
|
return this._handlers.undo(e);
|
|
}
|
|
if (!e.isComposing) this._handlers.selectionChange(e);
|
|
}
|
|
_onBeforeinput(e) {
|
|
if (e.inputType === 'historyUndo' && this._handlers.undo) {
|
|
e.preventDefault();
|
|
return this._handlers.undo(e);
|
|
}
|
|
if (e.inputType === 'historyRedo' && this._handlers.redo) {
|
|
e.preventDefault();
|
|
return this._handlers.redo(e);
|
|
}
|
|
}
|
|
_onCompositionEnd(e) {
|
|
this._handlers.input(e);
|
|
}
|
|
_onInput(e) {
|
|
if (!e.isComposing) this._handlers.input(e);
|
|
}
|
|
|
|
/** Unbinds HTMLElement events to mask internal events */
|
|
unbindEvents() {
|
|
this.input.removeEventListener('keydown', this._onKeydown);
|
|
this.input.removeEventListener('input', this._onInput);
|
|
this.input.removeEventListener('beforeinput', this._onBeforeinput);
|
|
this.input.removeEventListener('compositionend', this._onCompositionEnd);
|
|
this.input.removeEventListener('drop', this._handlers.drop);
|
|
this.input.removeEventListener('click', this._handlers.click);
|
|
this.input.removeEventListener('focus', this._handlers.focus);
|
|
this.input.removeEventListener('blur', this._handlers.commit);
|
|
this._handlers = {};
|
|
}
|
|
}
|
|
IMask.HTMLMaskElement = HTMLMaskElement;
|
|
|
|
export { HTMLMaskElement as default };
|