| 1 |
import MaskElement from './mask-element.js'; |
| 2 |
import IMask from '../core/holder.js'; |
| 3 |
|
| 4 |
const KEY_Z = 90; |
| 5 |
const KEY_Y = 89; |
| 6 |
|
| 7 |
/** Bridge between HTMLElement and {@link Masked} */ |
| 8 |
class HTMLMaskElement extends MaskElement { |
| 9 |
/** HTMLElement to use mask on */ |
| 10 |
|
| 11 |
constructor(input) { |
| 12 |
super(); |
| 13 |
this.input = input; |
| 14 |
this._onKeydown = this._onKeydown.bind(this); |
| 15 |
this._onInput = this._onInput.bind(this); |
| 16 |
this._onBeforeinput = this._onBeforeinput.bind(this); |
| 17 |
this._onCompositionEnd = this._onCompositionEnd.bind(this); |
| 18 |
} |
| 19 |
get rootElement() { |
| 20 |
var _this$input$getRootNo, _this$input$getRootNo2, _this$input; |
| 21 |
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; |
| 22 |
} |
| 23 |
|
| 24 |
/** Is element in focus */ |
| 25 |
get isActive() { |
| 26 |
return this.input === this.rootElement.activeElement; |
| 27 |
} |
| 28 |
|
| 29 |
/** Binds HTMLElement events to mask internal events */ |
| 30 |
bindEvents(handlers) { |
| 31 |
this.input.addEventListener('keydown', this._onKeydown); |
| 32 |
this.input.addEventListener('input', this._onInput); |
| 33 |
this.input.addEventListener('beforeinput', this._onBeforeinput); |
| 34 |
this.input.addEventListener('compositionend', this._onCompositionEnd); |
| 35 |
this.input.addEventListener('drop', handlers.drop); |
| 36 |
this.input.addEventListener('click', handlers.click); |
| 37 |
this.input.addEventListener('focus', handlers.focus); |
| 38 |
this.input.addEventListener('blur', handlers.commit); |
| 39 |
this._handlers = handlers; |
| 40 |
} |
| 41 |
_onKeydown(e) { |
| 42 |
if (this._handlers.redo && (e.keyCode === KEY_Z && e.shiftKey && (e.metaKey || e.ctrlKey) || e.keyCode === KEY_Y && e.ctrlKey)) { |
| 43 |
e.preventDefault(); |
| 44 |
return this._handlers.redo(e); |
| 45 |
} |
| 46 |
if (this._handlers.undo && e.keyCode === KEY_Z && (e.metaKey || e.ctrlKey)) { |
| 47 |
e.preventDefault(); |
| 48 |
return this._handlers.undo(e); |
| 49 |
} |
| 50 |
if (!e.isComposing) this._handlers.selectionChange(e); |
| 51 |
} |
| 52 |
_onBeforeinput(e) { |
| 53 |
if (e.inputType === 'historyUndo' && this._handlers.undo) { |
| 54 |
e.preventDefault(); |
| 55 |
return this._handlers.undo(e); |
| 56 |
} |
| 57 |
if (e.inputType === 'historyRedo' && this._handlers.redo) { |
| 58 |
e.preventDefault(); |
| 59 |
return this._handlers.redo(e); |
| 60 |
} |
| 61 |
} |
| 62 |
_onCompositionEnd(e) { |
| 63 |
this._handlers.input(e); |
| 64 |
} |
| 65 |
_onInput(e) { |
| 66 |
if (!e.isComposing) this._handlers.input(e); |
| 67 |
} |
| 68 |
|
| 69 |
/** Unbinds HTMLElement events to mask internal events */ |
| 70 |
unbindEvents() { |
| 71 |
this.input.removeEventListener('keydown', this._onKeydown); |
| 72 |
this.input.removeEventListener('input', this._onInput); |
| 73 |
this.input.removeEventListener('beforeinput', this._onBeforeinput); |
| 74 |
this.input.removeEventListener('compositionend', this._onCompositionEnd); |
| 75 |
this.input.removeEventListener('drop', this._handlers.drop); |
| 76 |
this.input.removeEventListener('click', this._handlers.click); |
| 77 |
this.input.removeEventListener('focus', this._handlers.focus); |
| 78 |
this.input.removeEventListener('blur', this._handlers.commit); |
| 79 |
this._handlers = {}; |
| 80 |
} |
| 81 |
} |
| 82 |
IMask.HTMLMaskElement = HTMLMaskElement; |
| 83 |
|
| 84 |
export { HTMLMaskElement as default }; |
| 85 |
|
