vehicle-keyboard-js/lib/Keyboard.min.js

parking vehicle keyboard

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Keyboard=t()}(this,(function(){"use strict";function e(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,a=Array(t);n<t;n++)a[n]=e[n];return a}function t(e,t,n){return t=r(t),function(e,t){if(t&&("object"==typeof t||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,o()?Reflect.construct(t,n||[],r(e).constructor):t.apply(e,n))}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){for(var n=0;n<t.length;n++){var a=t[n];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,u(a.key),a)}}function i(e,t,n){return t&&a(e.prototype,t),n&&a(e,n),Object.defineProperty(e,"prototype",{writable:!1}),e}function r(e){return r=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},r(e)}function o(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){})))}catch(e){}return(o=function(){return!!e})()}function s(e,t){return s=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},s(e,t)}function l(t){return function(t){if(Array.isArray(t))return e(t)}(t)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(t)||function(t,n){if(t){if("string"==typeof t)return e(t,n);var a={}.toString.call(t).slice(8,-1);return"Object"===a&&t.constructor&&(a=t.constructor.name),"Map"===a||"Set"===a?Array.from(t):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?e(t,n):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var a=n.call(e,t||"default");if("object"!=typeof a)return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}var c=function(){return i((function e(){n(this,e),this.element=null}),[{key:"append",value:function(e){this.forEle((function(t){t.appendChild(e)}))}},{key:"html",value:function(e){this.forEle((function(t){t.innerHTML=e}))}},{key:"forEle",value:function(e){var t=this.element,n=[];!t.length&&n.push(t)||(n=l(t));for(var a=0;a<n.length;a++)e(n[a])}},{key:"getEle",value:function(e){var t=document.querySelectorAll(e);return 1==t.length?t[0]:t}},{key:"hasClass",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return 0!=t.replace(/\s/g,"").length&&new RegExp(" "+t+" ").test(" "+e.className+" ")}},{key:"addClass",value:function(e,t){this.hasClass(e,t)||(e.className=""==e.className?t:e.className+" "+t)}},{key:"removeClass",value:function(e,t){if(this.hasClass(e,t)){for(var n=" "+e.className.replace(/[\t\r\n]/g,"")+" ";n.indexOf(" "+t+" ")>=0;)n=n.replace(" "+t+" "," ");e.className=n.replace(/^\s+|\s+$/g,"")}}}])}(),h=function(e){function a(e){var i,r=e.boxName,o=e.entryInputName,s=e.writeBoxName,l=e.chArray,u=e.enArray,c=e.rowNumber,h=e.pushCh,_=e.pushEn,d=e.inputNumber,y=e.defaultVehicleValue,m=e.enabledCh,p=e.enabledEn,f=e.externalKeyboard,b=e.onBackpace,v=e.onChange,k=e.onComplate;return n(this,a),(i=t(this,a)).version="1.1.1",i.boxName=r||"",i.entryInputName=o||"",i.writeBoxName=s||"",i.chArray=l||["京","津","冀","鲁","晋","蒙","辽","吉","黑","沪","苏","浙","皖","闽","赣","豫","鄂","湘","粤","桂","渝","川","贵","云","藏","陕","甘","青","琼","新","宁","港","澳","台","警","军","学"],i.enArray=u||["1","2","3","4","5","6","7","8","9","0","Q","W","E","R","T","Y","U","I","O","P","A","S","D","F","G","H","J","K","L","Z","X","C","V","B","N","M"],i.pushCh=h instanceof Array&&h||[],i.pushEn=_ instanceof Array&&_||[],i.line=c||5,i.saveValue=[],i.index=0,i.inputNumber=d||9,i.inpRedundantLen=2,i.status=!0,i.onChange=v||null,i.onComplate=k||null,i.onBackpace=b||null,i.defaultVehicleValue=y||"",i.enabledCh=m||[],i.enabledEn=p||[],i.externalKeyboard=f||!1,i.__OwnBox__=!0,i.__keyboardDom__=null,i.__writeBoxIsInput__=!1,i.__keyboardDom__=null,i.__writeBoxNameDom__=null,i.detail={boxName:"放置键盘盒子的名称-String-必填项",entryInputName:"放置键盘输入框名称-String-非必填项（writeBoxName为空时，必填）",writeBoxName:"自己显示键盘值的输入框,input或者其他的元素都可以支持-String-非必填项（entryInputNa为空时，必填）",chArray:"有自己的默认值，显示中文车牌-Array-非必填项",enArray:"有自己的默认值，显示字母和数字-Array-非必填项",rowNumber:"键盘排列几行，默认显示5行-Int-非必填项",pushCh:"可以往原有的中文键盘中添加自己的中文-Array-非必填项",pushEn:"可以往原有的字母和数字键盘中添加自己的字母和数字-Array-非必填项",inputNumber:"现实几个键盘输入框，不建议修改，默认是9个，带中间一个点-Int-非必填项",defaultVehicleValue:"页面中传来的部分车牌，String",externalKeyboard:"是否开启外置键盘",enabledCh:"需要禁用的中文键-Array-非必填项",enabledEn:"需要禁用的英文键-Array-非必填项",onBackpace:"backpace点击回调-Function-非必填项",onChange:"键盘点击回调-Function-非必填项",onComplate:"键盘初始化完成的回调-Function-非必填项"},i}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&s(e,t)}(a,e),i(a,[{key:"init",value:function(){if(this.chArray=[].concat(l(this.chArray),l(this.pushCh),["中/en","删除"]),this.enArray=[].concat(l(this.enArray),l(this.pushEn),["中/en","删除"]),this.element=this.boxName instanceof HTMLElement?this.boxName:this.getEle(this.boxName),this._createKeyboard(),this.__writeBoxNameDom__&&this.entryInputName&&(this.entryInputName="",this.__OwnBox__=!1),this.__writeBoxNameDom__)this.__OwnBox__=!1,this._builtInShow();else{if(!this.entryInputName)throw new Error("entryInputNa或者writeBoxName字段是否为空");var e=document.querySelector(this.entryInputName);if("INPUT"==e.tagName||"TEXTAREA"==e.tagName)throw e=null,new Error("entryInputNa必须是一个盒子，不能是input或者textarea");this.__OwnBox__=!0,this._createInp()}this._getVehicleSplit(),this._monitorInputClick(),this._keyboardExternalEvent()}},{key:"_createKeyboard",value:function(){if(!this.boxName)throw new Error("搁置键盘盒子的名称字段必要的'boxName'");this._loopSpan(),this._keyboardEvent(),this._isInputFn(),this._inputChangeEvent()}},{key:"_createInp",value:function(){var e=document.createElement("div"),t=document.createElement("div");t.className="keyboardInp",e.className="keyboardInpBox";for(var n=document.createDocumentFragment(),a=0;a<this.inputNumber;a++){var i=document.createElement("span"),r=a;i.className="keyboard__item",0==a&&(i.className="keyboard__active keyboard__item"),a>2&&(r-=1),2==a?(i.className="keyboard__interval",i.innerText="·"):i.setAttribute("data-index",r),a==this.inputNumber-1&&(i.innerHTML="<font></font>",i.className="keyboard__especial keyboard__item"),n.appendChild(i)}t.appendChild(n),e.appendChild(t),document.querySelector(this.entryInputName).appendChild(e),this._keyboardInpEvent()}},{key:"_keyboardEvent",value:function(){var e=this,t=document.querySelectorAll(".keyboard span"),n=[];!t.length&&n.push(t)||(n=l(t));for(var a=0;a<n.length;a++)!function(t){n[t].addEventListener("click",(function(t){var n,a=this.innerText,i=document.querySelectorAll(e.entryInputName+" span[data-index]");if(!i)throw new Error("entryInputNa不能为空");e.hasClass(this,"keyboard__switch")?e._switchEnOrCh():e.hasClass(this,"keyboard__del")?!e.__writeBoxNameDom__&&e._builtInDel(e,i)||e._delWriteBoxName():e._externalOrBuilt(a,i),null===(n=e.onChange)||void 0===n||n.call(e,a),e._eventBubbling(t)}),!1)}(a)}},{key:"_externalOrBuilt",value:function(e,t,n){this.saveValue[this.index]=e,this.__writeBoxNameDom__?(this.index<this.inputNumber-this.inpRedundantLen&&this.index++,this.index>=1&&(this.status=!0)&&this._switchEnOrCh(),this.__writeBoxIsInput__&&(this.__writeBoxNameDom__.value=this.getVehicleValue(),this.__writeBoxNameDom__.focus())||(this.__writeBoxNameDom__.innerText=this.getVehicleValue())):this._builtInEvalua(t,e,n)}},{key:"_builtInEvalua",value:function(e,t){var n=this,a=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],i=this.hasClass(document.querySelector(".keyboardInp span:last-child"),"keyboard__especial");if(e[this.index].innerHTML=t,Array.from(e).forEach((function(e){n.removeClass(e,"keyboard__active")})),i&&6==this.index)return this.addClass(e[this.index],"keyboard__active"),!1;a&&(this.index<this.inputNumber-this.inpRedundantLen&&this.index++,this.addClass(e[this.index],"keyboard__active"),this.index>=1&&(this.status=!0,this._switchEnOrCh()))}},{key:"_builtInDel",value:function(e,t){t[e.index].innerHTML="",Array.from(t).forEach((function(t){e.removeClass(t,"keyboard__active")})),e.saveValue[e.index]="",e.index>0&&!e.saveValue[e.index]?e.index--:0==e.index&&(e.status=!1,e._switchEnOrCh()),e.addClass(t[e.index],"keyboard__active")}},{key:"_keyboardInpEvent",value:function(){var e=this,t=[],n=document.querySelectorAll(this.entryInputName+" span[data-index]");!n.length&&t.push(n)||(t=l(n));for(var a=0;a<t.length;a++)!function(n){t[n].addEventListener("click",(function(t){var n=document.querySelectorAll(e.entryInputName+" span[data-index]"),a=e.hasClass(document.querySelector(".keyboardInp span:last-child"),"keyboard__especial"),i=this.getAttribute("data-index");"none"==e.__keyboardDom__.style.display&&e.keyboardShow(),a&&7==i&&(this.innerHTML="",e.removeClass(document.querySelector(".keyboardInp span:last-child"),"keyboard__especial")),e.status=0!=i,e._switchEnOrCh(),Array.from(n).forEach((function(t){e.removeClass(t,"keyboard__active")})),e.addClass(n[i],"keyboard__active"),e.index=i,e._eventBubbling(t)}),!1)}(a)}},{key:"_keyboardExternalEvent",value:function(){var e=this,t=document.querySelectorAll(this.entryInputName+" span[data-index]");if(!t)throw new Error("entryInputNa是否为空");this.externalKeyboard&&this.entryInputName&&Array.from(t).forEach((function(n){n.setAttribute("contenteditable",!0),n.addEventListener("keydown",(function(e){n.innerHTML=""})),n.addEventListener("keyup",(function(a){e._externalOrBuilt(n.innerHTML,t,!1)}))}))}},{key:"_regNumberOrLetter",value:function(e){return/^[a-zA-Z0-9]/g.test(e)}},{key:"_monitorInputClick",value:function(){var e,t=this;null===(e=this.__writeBoxNameDom__)||void 0===e||e.addEventListener("keydown",(function(e){8===e.keyCode&&t._delWriteBoxName()}))}},{key:"_delWriteBoxName",value:function(){var e;null===(e=this.onBackpace)||void 0===e||e.call(this),this.index>0&&!this.saveValue[this.index]&&this.index--||0==this.index&&(this.status=!1,this._switchEnOrCh()),this.saveValue[this.index]="",this.__writeBoxNameDom__&&(this.__writeBoxIsInput__&&(this.__writeBoxNameDom__.value=this.getVehicleValue(),this.__writeBoxNameDom__.focus(),this.index=this.getVehicleValue().length)||(this.__writeBoxNameDom__.innerText=this.getVehicleValue()))}},{key:"_switchEnOrCh",value:function(){this.status=!this.status,this.status?(document.querySelector(".keyboard .keyboard__ch").style.display="block",document.querySelector(".keyboard .keyboard__en").style.display="none"):(document.querySelector(".keyboard .keyboard__ch").style.display="none",document.querySelector(".keyboard .keyboard__en").style.display="block")}},{key:"_builtInShow",value:function(){var e=this;this.__writeBoxNameDom__&&(this._getVehicleSplit(),this.__writeBoxNameDom__.addEventListener("click",(function(t){e.keyboardShow(),e._eventBubbling(t)})),this.__keyboardDom__.addEventListener("click",(function(t){e.keyboardShow(),e._eventBubbling(t)})))}},{key:"_loopSpan",value:function(){var e,t=this,n=this.chArray,a=this.enArray,i=document.createElement("div"),r=document.createElement("div"),o=document.createElement("div");r.style.display="none",i.className="keyboard__ch",r.className="keyboard__en",o.className="keyboard",o.appendChild(this._splicingKeyboard({_array:n,finalBox:i,thatKeyboardEnable:this.enabledCh})),o.appendChild(this._splicingKeyboard({_array:a,finalBox:r,thatKeyboardEnable:this.enabledEn})),this.append(o),this.__keyboardDom__=o,this.__keyboardDom__.onclick=function(e){return t._eventBubbling(e)},this.__writeBoxNameDom__=this.writeBoxName&&document.querySelector(this.writeBoxName)||null,null===(e=this.onComplate)||void 0===e||e.call(this)}},{key:"_splicingKeyboard",value:function(e){var t=e._array,n=e.finalBox,a=e.thatKeyboardEnable,i=this,r="",o=t.length,s=Math.ceil(t.length/this.line);return t.forEach((function(e,t){var l='<span class="'.concat(i._arrayIsNoEnabled(e,a),'">').concat(e,"</span>");if(t%s==0&&0!=t){var u=document.createElement("div");u.className="keyboard__line",u.innerHTML=r,n.appendChild(u),r=""}if(t==o-2&&(l='<span class="keyboard__switch">'.concat(e,"</span>")),t==o-1&&(l='<span class="keyboard__del"></span>'),r+=l,t==o-1){var c=document.createElement("div");c.className="keyboard__line",c.innerHTML=r,n.appendChild(c)}})),n}},{key:"_arrayIsNoEnabled",value:function(e,t){return t.find((function(t){return e==t.toLocaleUpperCase()}))?"keyboard__enable--btn":""}},{key:"_getVehicleSplit",value:function(){this.defaultVehicleValue&&"string"==typeof this.defaultVehicleValue&&(this.defaultVehicleValue=this.defaultVehicleValue.toLocaleUpperCase(),this.saveValue=l(this.defaultVehicleValue.split("")),this.status=!0,this._switchEnOrCh(),this._assignmentInput())}},{key:"_assignmentInput",value:function(){var e=this;if(this.__OwnBox__){var t=document.querySelectorAll(e.entryInputName+" span[data-index]");Array.from(t).forEach((function(t){var n=t.getAttribute("data-index");if(e.removeClass(t,"keyboard__active"),n>=e.saveValue.length)return n==e.saveValue.length&&(e.addClass(t,"keyboard__active"),e.index=n),!1;n&&(t.innerHTML=e.saveValue[n])}))}else this.index=this.saveValue.length,this.__writeBoxNameDom__.focus(),this.__writeBoxNameDom__.innerHTML=this.defaultVehicleValue,this.__writeBoxNameDom__.value=this.defaultVehicleValue}},{key:"_eventBubbling",value:function(e){var t=e||window.event;t.stopPropagation&&t.stopPropagation()||(t.cancelBubbel=!0)}},{key:"_inputChangeEvent",value:function(){var e=this;this._inputFocusEvent(),this.__writeBoxIsInput__&&this.__writeBoxNameDom__.addEventListener("keyup",(function(){e.saveValue=this.value.toLocaleUpperCase().split("")}))}},{key:"_inputFocusEvent",value:function(){var e,t,n=this;this.__writeBoxIsInput__&&(null===(e=this.__writeBoxNameDom__)||void 0===e?void 0:e.addEventListener("keydown",(function(){n.index=n._getPosition(n)})))&&(null===(t=this.__writeBoxNameDom__)||void 0===t||t.addEventListener("focus",(function(){})))}},{key:"_isInputFn",value:function(){this.__writeBoxNameDom__&&(("INPUT"==this.__writeBoxNameDom__.tagName||"TEXTAREA"==this.__writeBoxNameDom__.tagName)&&(this.__writeBoxIsInput__=!0)||(this.__writeBoxIsInput__=!1))}},{key:"_getPosition",value:function(e){var t=0;if(document.selection){var n=document.selection.createRange();n.moveStart("character",-e.value.length),t=n.text.length}else(e.selectionStart||"0"==e.selectionStart)&&(t=e.selectionStart);return t}},{key:"initValue",value:function(){var e=this;if(this.__OwnBox__){var t=document.querySelectorAll(this.entryInputName+" span[data-index]");this.saveValue=[],this.index=0,this.status=!1,this._switchEnOrCh(),Array.from(t).forEach((function(n,a){t[a].innerHTML="",e.removeClass(n,"keyboard__active")})),this.addClass(t[0],"keyboard__active"),this.addClass(t[t.length-1],"keyboard__especial keyboard__item"),t[t.length-1].innerHTML="<font></font>",this._getVehicleSplit()}else this._builtInShow()}},{key:"getVehicleValue",value:function(){return this.saveValue.reduce((function(e,t){return""!==t&&(e+=t),e}),"")}},{key:"show",value:function(){this.hasClass(this.__keyboardDom__,"keyboard__hide")&&this.removeClass(this.__keyboardDom__,"keyboard__hide")}},{key:"hide",value:function(){!this.hasClass(this.__keyboardDom__,"keyboard__hide")&&this.addClass(this.__keyboardDom__,"keyboard__hide")}},{key:"showDoc",value:function(){console.table(this.detail)}}])}(c);return h}));