diff --git a/src/widgets/pin-box/PinBox.js b/src/widgets/pin-box/PinBox.js index 6d7b90d..d5291d1 100644 --- a/src/widgets/pin-box/PinBox.js +++ b/src/widgets/pin-box/PinBox.js @@ -1,5 +1,6 @@ import './pin-box.css'; +import { Ut } from '../../utils/Ut'; import { El } from '../../utils/dom'; export class PinBox { @@ -7,7 +8,7 @@ export class PinBox { /** * PinBox, Contructor */ - constructor(target, opts, events) { + constructor(target, opts) { this.target = target; @@ -21,8 +22,6 @@ export class PinBox { digits: this.target.dataset.pinboxDigits || 6, }, ... opts }; - this.events = events || {}; - this.ui = El('div', { class: 'sp-pinbox' }); this.target.after(this.ui); @@ -49,31 +48,28 @@ export class PinBox { */ change(target) { - let code = ''; + this.code = ''; let val = target.value.replace(/\D/g, ''); target.value = val; - - if (val) { - - target.nextElementSibling?.focus(); - - this.ui.dxFind('input[type="text"]', t => code += t.value); - - if (code.length == this.opts.digits) { - - this.target.dxVal(code).dxTrigger('complete'); - - Ut.trigger(this.events.complete, code, this); - } - else { - this.target.value = ''; - } - } - else { + + if (!val) { this.target.value = ''; + return; } + + target.nextElementSibling?.focus(); + + this.ui.dxFind('input[type="text"]', t => this.code += t.value); + + if (this.code.length != this.opts.digits) { + this.target.value = ''; + return; + } + + this.target.dxVal(this.code).dxTrigger('complete'); + Ut.trigger(this.opts.complete, this); } /** @@ -126,7 +122,7 @@ export class PinBox { destroy() { this.ui.remove(); this.target.dxRemoveData('pinbox'); - Ut.trigger(this.events.destroy, this); + Ut.trigger(this.opts.destroy, this); } }