UNPKG

jquery-ui-pinpad

Version:

An interactive Pinpad widget for point of sale (POS) or encrypted pinpad (EPP) simulation

3 lines (2 loc) 11.6 kB
/*! jquery-ui-pinpad | 1.6.1 | 2017-09-14 */ !function(a){"function"==typeof define&&define.amd?define(["jquery","jquery-ui"],a):a(jQuery)}(function(a){"use strict";return a.extend(a.ui.keyCode,{NUMPAD_0:96,NUMPAD_1:97,NUMPAD_2:98,NUMPAD_3:99,NUMPAD_4:100,NUMPAD_5:101,NUMPAD_6:102,NUMPAD_7:103,NUMPAD_8:104,NUMPAD_9:105,DECIMAL_POINT:110}),a.widget("ui.pinpad",{version:"1.6.1",defaultElement:"<input>",options:{appendTo:null,autoComplete:!1,classes:{"ui-pinpad":"ui-corner-all"},clear:!1,commands:[{position:0,name:"cancel",options:{icon:"ui-icon-close",iconPosition:"end"}},{position:1,name:"correct",options:{icon:"ui-icon-caret-1-w",iconPosition:"end"}},{position:2,name:"confirm",options:{icon:"ui-icon-radio-off",iconPosition:"end"}}],digitOnly:!1,display:{decPoint:".",cancel:"Cancel",correct:"Correct",confirm:"Confirm"},hide:!0,keys:["1 2 3","4 5 6","7 8 9","{empty} 0 {dec}"],minLength:0,maxLength:Number.POSITIVE_INFINITY,show:!0,value:"",cancel:null,change:null,close:null,confirm:null,keypress:null,open:null},_create:function(){var b=this,c=a(b.options.output),d=b.element.prop("maxLength"),e=b._appendTo();b.element.uniqueId(),0===c.length&&(c=b.element.clone().attr("id",b.element.attr("id")+"_output").removeAttr("maxlength"),c.insertAfter(b.element)),c.addClass("ui-pinpad-output").attr("role","pinpad-output"),a("label[for='"+b.element.attr("id")+"']").each(function(b,d){a(d).attr("for",c.attr("id"))}),b.outputElement=c,b.element.val(b.options.value),b.element.attr("role","pinpad-input"),b._addClass("ui-pinpad-input","ui-helper-hidden"),b.element.is(":disabled")&&(b.options.disabled=!0),d>0&&(d=b.options.maxLength?Math.min(b.options.maxLength,d):d,b.options.maxLength=Math.max(b.options.minLength,d)),b.options.formatter||(b.options.formatter=a.ui.pinpad.defaultFormatter),b.ppDiv=a("<div></div>").appendTo(e.length?e:document.body).data("input",b.element),b._addClass(b.ppDiv,"ui-pinpad","ui-widget ui-widget-content"),b._bindInputEvents(),b.refresh(),e.length?b._addClass(b.ppDiv,"ui-pinpad-inline"):(delete b.options.appendTo,b._on(document.body,{pinpadcancel:function(a){b._close(a.originalEvent)},pinpadconfirm:function(a){b._close(a.originalEvent)}}),b._on(b.outputElement,{focusin:function(a){b.open(a)},focusout:function(c){if(null!=c.relatedTarget){var d=a(c.relatedTarget).closest(b.ppDiv).data("input");d&&d.attr("id")===b.element.attr("id")||b.cancel()}}}),b._addClass(b.ppDiv,null,"ui-front"),b._hide(b.ppDiv,!1),b.ppDiv.detach())},_adjustPosition:function(){var b=a("<div></div>").css("position","absolute").appendTo(document.body).position({my:"left top",at:"left bottom",of:this.outputElement});this.ppDiv.css(b.css(["left","top"])),b.remove()},_appendTo:function(){var b=a();return this.options.appendTo&&(b=b.add(this.options.appendTo)),b},_checkDecimalKey:function(){var a=this.element.val();this.ppDiv.find(".ui-pinpad-key-num-pad-dec").button("option","disabled",this.options.digitOnly||/\./.test(a))},_checkConfirmCommand:function(){var a=this.element.val();if(this.element.is(":enabled")){var b=this.ppDiv.find(".ui-pinpad-command-confirm"),c=b.button("option","disabled"),d=a.length<this.options.minLength||this.options.autoComplete&&a.length<this.options.maxLength;d=d||this.element.is(".ui-pinpad-input-invalid"),d&&!c?b.button("disable"):!d&&c&&b.button("enable"),!d&&this.options.autoComplete&&a.length===this.options.maxLength&&this.confirm()}},_drawKeys:function(){var b,c,d,e,f=this,g=[],h=a("<div class='ui-pinpad-num-pad'></div>").appendTo(this.ppDiv),i=a("<table></table>").appendTo(h),j=a.ui.keyCode.NUMPAD_0;for(a.each(this.options.keys,function(a,b){g.push(b.split(" "))}),d=0;d<g.length;d++)for(b=a("<tr></tr>").appendTo(i),e=0;e<g[d].length;e++){var k=g[d][e],l=parseInt(k,10);c=a("<td></td>").appendTo(b),isNaN(l)?/^\{\S+\}$/.test(k)&&(k=k.match(/^\{(\S+)\}$/)[1],"dec"===k?a("<button type='button' class='ui-pinpad-key ui-pinpad-key-num-pad-dec' data-key-code='"+a.ui.keyCode.DECIMAL_POINT+"' value='.'>"+this.options.display.decPoint+"</button>").appendTo(c).button({disabled:this.options.digitOnly}):"empty"===k&&a("<button type='button' class='ui-pinpad-key ui-pinpad-key-num-pad-empty' data-key-code='0'>&nbsp;</button>").appendTo(c).button()):a("<button type='button' class='ui-pinpad-key ui-pinpad-key-num-pad-"+l+"' data-key-code='"+(j+l)+"' value='"+l+"'>"+l+"</button>").appendTo(c).button()}this.ppDiv.find(".ui-pinpad-key").each(function(b,c){var d=a(c);d.attr("tabindex","0"),f._bindKeyEvents(d)})},_drawCommands:function(){var b,c,d=this,e=d.options.commands,f=a("<div class='ui-pinpad-command-panel'></div>").appendTo(this.ppDiv),g=a("<table></table>").appendTo(f);for(c=0;c<4;c++){var h=a("<tr></tr>").appendTo(g),i=a("<td></td>").appendTo(h);b=a("<button class='ui-pinpad-command' type='button'>&nbsp;</button>").appendTo(i).button()}a.each(e,function(c,e){b=f.find("tr:eq("+e.position+") .ui-pinpad-command").addClass("ui-pinpad-command-"+e.name).attr("name",e.name).attr("tabindex","0").button("option",a.extend({},e.options,{label:d.options.display[e.name]})),d._bindCommandEvents(b)})},_updateCommands:function(b,c){var d=this.ppDiv.find(".ui-pinpad-command-panel");a.each(b,function(a,b){d.find(".ui-pinpad-command-"+b.name).button("option",{label:c[b.name]})})},_bindInputEvents:function(){this._on(this.element,{change:function(a){this._trigger("change",a),this._displayValue(),this._checkDecimalKey(),this._checkConfirmCommand(),a.preventDefault()}}),this._on(this.outputElement,{focus:function(b){var c=b.target;if(c.setSelectionRange){var d=c.value.length;c.setSelectionRange(d,d)}else{var e=a(c);e.val(e.val())}},keydown:function(b){var c=b.keyCode;switch(c){case a.ui.keyCode.HOME:case a.ui.keyCode.END:case a.ui.keyCode.LEFT:case a.ui.keyCode.RIGHT:case a.ui.keyCode.UP:case a.ui.keyCode.DOWN:case a.ui.keyCode.TAB:return;case a.ui.keyCode.BACKSPACE:this.options.clear||this.ppDiv.find(".ui-pinpad-command-correct").click();break;case a.ui.keyCode.DELETE:this.options.clear&&this.ppDiv.find(".ui-pinpad-command-correct").click();break;case a.ui.keyCode.ENTER:this.ppDiv.find(".ui-pinpad-command-confirm").click();break;case a.ui.keyCode.ESCAPE:this.ppDiv.find(".ui-pinpad-command-cancel").click();break;case a.ui.keyCode.DECIMAL_POINT:this.ppDiv.find(".ui-pinpad-key-num-pad-dec").click();break;default:a.ui.pinpad.isDigit(c)&&this.ppDiv.find(".ui-pinpad-key-num-pad-"+(c-a.ui.keyCode.NUMPAD_0)).click()}b.preventDefault()}})},_bindKeyEvents:function(b){this._on(b,{click:function(c){var d=b.data("keyCode"),e=this.element.val();(a.ui.pinpad.isDigit(d)||a.ui.pinpad.isDecimalPoint(d)&&-1===e.indexOf("."))&&e.length<this.options.maxLength&&this._trigger("keypress",c,{keyCode:d})&&this._insertText(b.val())}})},_bindCommandEvents:function(a){this._on(a,{click:function(b){a.is(".ui-pinpad-command-correct")?this.options.clear?this._clear():this._backspace():this._processCommand(a,b)}})},_findButtons:function(b){var c=a();switch(b){case a.ui.keyCode.BACKSPACE:this.options.clear||(c=this.ppDiv.find(".ui-pinpad-command-correct"));break;case a.ui.keyCode.DELETE:this.options.clear&&(c=this.ppDiv.find(".ui-pinpad-command-correct"));break;case a.ui.keyCode.ENTER:c=this.ppDiv.find(".ui-pinpad-command-confirm");break;case a.ui.keyCode.ESCAPE:c=this.ppDiv.find(".ui-pinpad-command-cancel");break;case a.ui.keyCode.DECIMAL_POINT:c=this.ppDiv.find(".ui-pinpad-key-num-pad-dec");break;default:a.ui.pinpad.isDigit(b)&&(c=this.ppDiv.find(".ui-pinpad-key-num-pad-"+(b-a.ui.keyCode.NUMPAD_0)))}return c},_displayValue:function(){var a=this.element.val(),b=this.options,c=this.options.formatter.format(a,b);this.outputElement.val(c)},_insertText:function(a){var b=this.element.val();this.outputElement.each(function(a,b){if(b.createTextRange){var c=b.createTextRange();c.collapse(!1),c.select()}else b.blur(),b.selectionStart=b.selectionEnd=b.value.length,b.focus()}),"\b"==a?this.value(b.substring(0,b.length-1)):this.value(b+a)},_isValid:function(b){var c=!1;return"string"==typeof b&&(c=0===b.length||a.ui.pinpad.isDecimalNumber(b)&&!(this.options.digitOnly&&b.indexOf(".")>-1)),c},_processCommand:function(b,c){var d=b.attr("name"),e=this["_"+d];!1!==this._trigger(d,c)&&a.isFunction(e)&&e.apply(this)},_cancel:function(){this.value(this.option("value"))},_confirm:function(){this.option("value",this.value())},_getCreateOptions:function(){return{value:this._getDefaultValue()}},_getCreateEventData:function(){return{options:this.options}},_getDefaultValue:function(){var a=this.element.val();return a&&this._isValid(a)?a:""},_getValue:function(){return this.element.val()},_setValue:function(a){this._isValid(a)&&(this.ppDiv.is(":hidden")&&this._show(this.ppDiv,this.options.show),this.element.val(a).change())},_setOption:function(a,b){this._super(a,b),"display"===a&&(this.ppDiv.find(".ui-pinpad-key-num-pad-dec").button("option","label",b.decPoint),this._updateCommands(this.options.commands,b)),"value"===a&&this._setValue(b),this._checkDecimalKey(),this._checkConfirmCommand()},_setOptionDisabled:function(b){var c=this.element,d=this.outputElement,e=this.ppDiv;this._super(b),this._toggleClass(c,"ui-state-disabled",null,b),c.prop("disabled",b),this._toggleClass(d,"ui-state-disabled",null,b),d.prop("disabled",b),this._toggleClass(e,"ui-state-disabled",null,b),e.find("button").each(function(c,d){a(d).button("option","disabled",b)}),b&&d.blur()},_destroy:function(){this.ppDiv.remove(),this.outputElement.remove(),this.element.removeAttr("role").removeUniqueId()},_open:function(a){var b=this;b.ppDiv.appendTo(document.body),b._adjustPosition(),b._show(b.ppDiv,b.options.show,function(){b._trigger("open",a)})},_close:function(a){var b=this;b._hide(b.ppDiv,b.options.hide,function(){b._trigger("close",a),b.outputElement.blur(),b.ppDiv.detach()})},_backspace:function(){this.element.val().length>0&&this._insertText("\b")},_clear:function(){this.value("")},clear:function(){this._clear()},cancel:function(){this.ppDiv.find(".ui-pinpad-command-cancel").click()},confirm:function(){this.ppDiv.find(".ui-pinpad-command-confirm").click()},open:function(a){this.ppDiv.is(":hidden")&&this._open(a)},output:function(){return this.outputElement},refresh:function(){var a=this.element;this.ppDiv.find("button").button("destroy"),this.ppDiv.empty(),this._drawKeys(),this._drawCommands(),a.is(":disabled")?this.ppDiv.find("button").button("disable"):this._checkConfirmCommand()},value:function(a){if(void 0===a)return this._getValue();var b=a.toString();this._setValue(b.substring(0,Math.min(b.length,this.options.maxLength)))},widget:function(){return this.ppDiv}}),a.extend(a.ui.pinpad,{defaultFormatter:{format:function(a,b){return a.replace(".",b.display.decPoint)}},regional:{en:{display:a.ui.pinpad.prototype.options.display}},generateRandomKeys:function(){var a,b=[],c=[],d=[];for(a=0;a<10;a++)c.push(a);for(a=c.length;a>0;a--){var e=Math.floor(Math.random()*a),f=c[e];c.splice(e,1),d.push(f),d.length%3==0&&(b.push(d.join(" ")),d=[])}return b.push(d),b[b.length-1]="{empty} "+b[b.length-1]+" {empty}",b},isDecimalNumber:function(a){return/^\d+(\.\d*)?$/.test(a)},isDecimalPoint:function(b){return b===a.ui.keyCode.DECIMAL_POINT},isDigit:function(b){return b>=a.ui.keyCode.NUMPAD_0&&b<=a.ui.keyCode.NUMPAD_9}}),a(window).on({mousedown:function(b){var c=a(b.target);if(!c.is(".ui-pinpad-output")){c.closest(".ui-pinpad").data("input")?(c.is("button")&&c.addClass("ui-state-active"),b.preventDefault()):a(document.body).children(".ui-pinpad").each(function(b,c){a(c).data("input").pinpad("cancel")})}},mouseup:function(){a(document).find(".ui-pinpad button.ui-state-active").removeClass("ui-state-active")}}),a.ui.pinpad});