diff --git a/README.md b/README.md index f918c8f..ae304f4 100644 --- a/README.md +++ b/README.md @@ -63,20 +63,21 @@ To initiate an instance of the keyboard within your application you may include | Option | Default Value | Information | |--------|---------------|-------------| -| inputType | 'text, textarea, number, password, search, tel, url, contenteditable' | May pass individual input types or comma-separated values. | -| language | none | Given as a string with comma-separated values i.e. 'us, spanish, arabic, russian'. | -| keyboardPosition | 'bottom' | Locate the keyboard at page 'top', 'middle', or 'bottom' with a default edge padding of 20px. | -| cancelColor | '#E74C3C' | Defines background color of cancel button. May pass hex string or specific color i.e. 'blue'. | -| cancelTextColor | '#FFFFFF' | Defines text color of cancel button. May pass hex string or specific color i.e. 'white'. | | acceptColor | '#2ECC71' | Defines background color of accept button. May pass hex string or specific color i.e. 'blue'. | | acceptTextColor | '#FFFFFF' | Defines text color of accept button. May pass hex string or specific color i.e. 'white'. | -| keyColor | '#E0E0E0' | Defines background color of keys. May pass hex string or specific color i.e. 'blue'. | -| keyTextColor | '#555555' | Defines text color used on keys. May pass hex string or specific color i.e. 'blue'. | -| blackoutColor | '25, 25, 25, 0.9' | Defines color and opacity of blackout background. Passed as RGBA string. | -| allowEscapeCancel | true | Cancel keyboard input with hardware keyboard [Escape] key. | | allowEnterAccept | true | Accept keyboard input with hardware keyboard [Enter] key. | -| keyCharacterRegex | { number: /[0-9]|[eE]|\.|\+|\-/, tel: /[0-9]|\.|\+|\-|\#|\(|\)/ } | Define regular expressions for input field types. These pertain to the individual key pressed, not the whole accepted pattern. The object keys must match identically to the input type. | +| allowEscapeCancel | true | Cancel keyboard input with hardware keyboard [Escape] key. | +| blackoutColor | '25, 25, 25, 0.9' | Defines color and opacity of blackout background. Passed as RGBA string. | +| cancelColor | '#E74C3C' | Defines background color of cancel button. May pass hex string or specific color i.e. 'blue'. | +| cancelTextColor | '#FFFFFF' | Defines text color of cancel button. May pass hex string or specific color i.e. 'white'. | | inputFieldRegex | { number: /^(-)?(((\d+)|(\d+\.(\d+)?)|(\.(\d+)?))([eE]([-+])?(\d+)?)?)?$/ } | Define regular expressions for the accepted patterns of input field types. These patterns serve to further restrict browser-specific prepopulated patterns. For example, you may NOT generate a regex to allow letters in an input[type="number"]. Ensure these are whole pattern matches handled by the prepension and appension of ^ and $. The object keys must match identically to the input type. | +| inputType | 'text, textarea, number, password, search, tel, url, contenteditable' | May pass individual input types or comma-separated values. | +| keyCharacterRegex | { number: /[0-9]|[eE]|\.|\+|\-/, tel: /[0-9]|\.|\+|\-|\#|\(|\)/ } | Define regular expressions for input field types. These pertain to the individual key pressed, not the whole accepted pattern. The object keys must match identically to the input type. | +| keyColor | '#E0E0E0' | Defines background color of keys. May pass hex string or specific color i.e. 'blue'. | +| keyTextColor | '#555555' | Defines text color used on keys. May pass hex string or specific color i.e. 'blue'. | +| keyboardPosition | 'bottom' | Locate the keyboard at page 'top', 'middle', or 'bottom' with a default edge padding of 20px. | +| language | none | Given as a string with comma-separated values i.e. 'us, spanish, arabic, russian'. | +| languageKeyTextColor | #3498db | Defines text color of language button. May pass hex string or specific color i.e. 'white'. | | showSelectedLanguage | false | This option labels the language button with the currently-selected language. The name is derived from the actual language file name, so name appropriately. | @@ -84,12 +85,12 @@ To initiate an instance of the keyboard within your application you may include | Name | Information | |------|-------------| -| enterKey | Define action of [Enter] key | -| tabKey | Define action of [Tab] key | -| ctrlKey | Define action of [Ctrl] key | | altKey | Define action of [Alt] key | -| spareKey | Define action of [Spare] key | +| ctrlKey | Define action of [Ctrl] key | +| enterKey | Define action of [Enter] key | | languageKey | Define action of [Language] key | +| spareKey | Define action of [Spare] key | +| tabKey | Define action of [Tab] key | _You may change the user-displayed names of any keys in keyboard.js without affecting functionality._ @@ -265,3 +266,7 @@ In this release I have addressed several issues related to how the keyboard hand #### Version 1.1.2 * Added option to support showing the currently-displayed language. + +#### Version 1.1.3 + +* Added ability to define language key text color. diff --git a/dist/main.js b/dist/main.js index bfa3bf5..ff81c15 100644 --- a/dist/main.js +++ b/dist/main.js @@ -1 +1 @@ -"use strict";$.fn.keyboard=function(e){var a,t,r,o,l,n,c,i,s,d,p,y,k,b,u,g,h,f,v,w,m,x,C,E,K,S,T,A,_,F,O,L,q,R,D,P,N,Y,U,J,j,B,G,I,M,z,H,Q,V,W,X,Z,ee,ae,te,re,oe={29:0,"02":1,"03":2,"04":3,"05":4,"06":5,"07":6,"08":7,"09":8,"0a":9,"0b":10,"0c":11,"0d":12,10:13,11:14,12:15,13:16,14:17,15:18,16:19,17:20,18:21,19:22,"1a":23,"1b":24,"2b":25,"1e":26,"1f":27,20:28,21:29,22:30,23:31,24:32,25:33,26:34,27:35,28:36,"2c":37,"2d":38,"2e":39,"2f":40,30:41,31:42,32:43,33:44,34:45,35:46},le={shift:!1,caps:!1,altgrp:!1,shift_altgrp:""},ne=$(this),ce=!1,ie={keyboardFile:"",arrayPosition:""},se="",de=!1,pe="LTR",ye=!1,ke="text",be="text",ue=(i=(c=e).acceptColor,s=void 0===i?"#2ECC71":i,d=c.acceptTextColor,p=void 0===d?"#FFFFFF":d,y=c.allowEnterAccept,k=void 0===y||y,b=c.allowEscapeCancel,u=void 0===b||b,g=c.altKey,h=void 0===g?"":g,f=c.blackoutColor,v=void 0===f?"25, 25, 25, 0.9":f,w=c.cancelColor,m=void 0===w?"#E74C3C":w,x=c.cancelTextColor,C=void 0===x?"#FFFFFF":x,E=c.capsLightColor,K=void 0===E?"#3498DB":E,S=c.ctrlKey,T=void 0===S?"":S,A=c.directEnter,_=void 0!==A&&A,F=c.enterKey,O=void 0===F?"":F,L=c.inputFieldRegex,q=void 0===L?{number:/^(-)?(((\d+)|(\d+\.(\d+)?)|(\.(\d+)?))([eE]([-+])?(\d+)?)?)?$/}:L,R=c.inputType,D=void 0===R?"":R,P=c.keyCharacterRegex,N=void 0===P?{number:/[0-9]|[eE]|\.|\+|-/,tel:/[0-9]|\.|\+|-|#|\(|\)/}:P,Y=c.keyColor,U=void 0===Y?"#E0E0E0":Y,J=c.keyTextColor,j=void 0===J?"#555555":J,B=c.keyboardPosition,G=void 0===B?"bottom":B,I=c.language,M=void 0===I?"us":I,z=c.languageKey,H=void 0===z?"":z,Q=c.showSelectedLanguage,V=void 0!==Q&&Q,W=c.spareKey,X=void 0===W?"":W,Z=c.tabKey,ee=void 0===Z?"":Z,{acceptColor:s,acceptTextColor:p,allowEnterAccept:k,allowEscapeCancel:u,altKey:h,blackoutColor:v,cancelColor:m,cancelTextColor:C,capsLightColor:K,ctrlKey:T,directEnter:_,enterKey:O,inputFieldRegex:q,inputType:(ae=D,te=new Array,re="",void 0!==ae&&""!=ae?(te=ae.trim().split(","),$.each(te,function(e,a){"contenteditable"==a.trim().toString()?re+='[contenteditable="true"], ':"textarea"==a.trim().toString()?re+="textarea, ":re+='input[type="'+a.trim().toString()+'"], '}),re=re.slice(0,-2)):re='input[type="text"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], textarea, [contenteditable="true"]',re),keyboardPosition:G,keyCharacterRegex:N,keyColor:U,keyTextColor:j,language:M,languageKey:H,showSelectedLanguage:V,spareKey:X,tabKey:ee}),ge={disabled:"",readonly:"",maxlength:"",min:"",max:"",placeholder:""};function he(e){""!=ie.keyboardFile&&ie.arrayPosition==t?fe(e,ie.keyboardFile):$.get("languages/"+e+".klc",function(a){ie.keyboardFile=a,ie.arrayPosition=t,fe(e,a)})}function fe(e,a){var n,c,i,s,d,p,y,k,b=new Array;r="",o="",l="",n=(a=a.replace(/\u0000/g,"")).match(/\d(\w)?\s+\w+\s+\d\s+(-1|\w+@?|%%)\s+(-1|\w+@?|%%)\s+(-1|\w+@?|%%)(\s+(-1|\w+@?|%%))?(\s+(-1|\w+@?|%%))?(\s+(-1|\w+@?|%%))?\s+\/\//g),(i=a.indexOf("SHIFTSTATE"))>0&&((c=a.slice(i,a.indexOf("LAYOUT")).trim().split(/\n/g)).splice(0,2),$.each(c,function(e,a){-1==a.indexOf(":")?r+='"default": ':-1!=a.indexOf("Shft Ctrl Alt")?r+='"shift_altgrp": ':-1!=a.indexOf("Shft Ctrl")?r+='"ctrl_shift": ':-1!=a.indexOf("Ctrl Alt")?r+='"altgrp": ':-1!=a.indexOf("Ctrl")?r+='"ctrl": ':-1!=a.indexOf("Shft")&&(r+='"shift": '),r+=a.match(/\w{6}\s[0-9]/).toString().slice(-1)+", "}),r=JSON.parse("{"+r.toString().slice(0,-2)+"}")),(d=a.indexOf("DEADKEY"))>0&&((s=a.slice(d,a.indexOf("KEYNAME")).trim().split("DEADKEY")).splice(0,1),$.each(s,function(e,a){(b=a.split(/\n/g)).splice(0,2),k="",$.each(b,function(e,a){k+='"'+a.trim().slice(0,4)+'": "'+a.trim().slice(5,9)+'", '}),k="{"+k.slice(0,-2)+"}",o+='"'+a.trim().slice(0,4)+'": '+k+", "}),o=JSON.parse("{"+o.slice(0,-2)+"}")),(y=a.indexOf("LIGATURE"))>0&&((p=a.slice(y,a.indexOf("KEYNAME")).trim().split(/\n/g)).splice(0,5),$.each(p,function(e,a){a.indexOf("//")>0&&(p[e]=a.trim().split("//")[0].trim().replace(/\t/g," ").replace(" "," ").replace(" "," ").split(" "),p[e].splice(1,1),l+='"'+p[e][0]+'": ',p[e].splice(0,1),$.each(p[e],function(a,t){p[e][a]='"'+t+'"'}),l+="["+p[e]+"], ")}),l=JSON.parse("{"+l.slice(0,-2)+"}")),pe="arabic"==e?"RTL":"LTR",function(e){var a=e.toString().split(","),r=new Array,o=new Array(47);$.each(a,function(e,a){r[e]=a.toString().replace(/(\t+|\s+)/g," "),r[e]=r[e].split(" "),void 0!==oe[r[e][0]]&&(o[oe[r[e][0]]]=r[e])}),$(".keyboard-wrapper").length?(Ce(),$(".keyboard-row").remove(),!0):($("body").prepend('
'),ue.directEnter||$("body").prepend('
'),!1);ve(o.slice(0,13)),ve(o.slice(13,26)),ve(o.slice(26,37)),ve(o.slice(37,47)),$e("default"),k=ue.language,b=ue.showSelectedLanguage,u=k[t].toLowerCase().replace(/^\w/,function(e){return e.toUpperCase()}),g=b?u:"Language",$(".keyboard-action-wrapper").length||ue.directEnter||$(".keyboard-wrapper").prepend('
'),$(".keyboard-row:eq(0)").append(''),$(".keyboard-row:eq(1)").prepend(''),$(".keyboard-row:eq(2)").prepend(''),$(".keyboard-row:eq(2)").append(''),$(".keyboard-row:eq(3)").prepend(''),$(".keyboard-row:eq(3)").append(''),$(".keyboard-wrapper").append('
'),$(".keyboard-row:eq(4)").append(''),$(".keyboard-row:eq(4)").append('"),$(".keyboard-row:eq(4)").append(''),$(".keyboard-row:eq(4)").append(''),$(".keyboard-row:eq(4)").append(''),$(".keyboard-row:eq(4)").append(''),$(".keyboard-row:eq(4)").append(''),s=$(".keyboard-row").width(),d=2*$(".keyboard-key").css("margin-right").match(/[0-9]/),p=(s-15*d)/15,y=s/3,$(".keyboard-row").each(function(){l=$(this).children(".keyboard-key-sm").length,n=$(this).children(".keyboard-key-lg").length,c=$(this).children(".keyboard-key-xl").length,i=(s-(l+n+c)*d-l*p-c*y)/n,$(this).children(".keyboard-key-sm").css("cssText","width: "+p+"px"),$(this).children(".keyboard-key-lg").css("cssText","width: "+i+"px"),$(this).children(".keyboard-key-xl").css("cssText","width: "+y+"px")}),function(){var e=$(window).width(),a=$(window).height(),t=$(".keyboard-wrapper").height(),r=$(".keyboard-wrapper").width();switch($(".keyboard-key").css("background-color",ue.keyColor),$(".keyboard-key").css("color",ue.keyTextColor),ue.directEnter||($(".keyboard-cancel-button").css("background-color",ue.cancelColor),$(".keyboard-cancel-button").css("color",ue.cancelTextColor),$(".keyboard-accept-button").css("background-color",ue.acceptColor),$(".keyboard-accept-button").css("color",ue.acceptTextColor),$(".keyboard-blackout-background").css("background-color","rgba("+ue.blackoutColor+")")),ue.keyboardPosition){case"top":$(".keyboard-wrapper").css("top","20px");break;case"middle":$(".keyboard-wrapper").css("top",((a-t)/2).toString()+"px");break;default:$(".keyboard-wrapper").css("bottom","20px")}$(".keyboard-wrapper").css("left",((e-r)/2).toString()+"px")}(),ye||(ue.directEnter||$(".keyboard-blackout-background").hide(),$(".keyboard-wrapper").hide());var l,n,c,i,s,d,p,y;var k,b,u,g}(n)}function ve(e){var a;$(".keyboard-wrapper").append('
'),$.each(e,function(e,t){var o;a=void 0!==t?{default:we(t[r.default-1],t[1]),shift:we(t[r.shift-1],t[1]),altgrp:we(t[r.altgrp-1],t[1]),shift_altgrp:we(t[r.shift_altgrp-1],t[1])}:{default:"-1",shift:"-1",altgrp:"-1",shift_altgrp:"-1"},o=a,$(".keyboard-row:last").append(''),$(".keyboard-key:last").data("keyDataObject",o)})}function we(e,a){var t=e;return"%%"==e?t=l[a]:void 0===e&&(t="-1"),t}function $e(e){var a,t,r="";!le.caps||le.shift||le.altgrp?le.caps||le.shift||le.altgrp||(e="default"):(e="default",$(".caps-lock-key").addClass("caps-lock-key-active")),le.caps||$(".caps-lock-key").removeClass("caps-lock-key-active"),""!=le.shift_altgrp&&"shift_altgrp"!=e&&(le.shift_altgrp=""),$(".keyboard-key").each(function(){r="";try{a=$(this),4==(t=a.data("keyDataObject"))[e].length?(a.html("&#x"+t[e]+";"),a.data("keyval",a.html())):5==t[e].length&&t[e].match("@")?(a.html("&#x"+t[e].replace("@","")+";"),a.data("keyval",a.html())):t[e].constructor===Array?($.each(t[e],function(e,a){r+="&#x"+a+";"}),a.html(r),a.data("keyval",a.html())):"-1"==t[e]||"%%"==t[e]||0==t[e].length?(a.html(" "),a.data("keyval","")):(a.html(t[e]),a.data("keyval",a.html())),le.shift||!le.caps||le.altgrp||(a.html(1==a.html().length?a.html().toUpperCase():a.html()),a.data("keyval",1==a.html().length?a.html():a.data("keyval")))}catch(e){}})}function me(){n.val(""),Ce(),ye=!1,he(ue.language[t])}function xe(){a.is("input")?a.val(n.val()):a.html(n.val()),n.val(""),Ce(),ye=!1,he(ue.language[t])}function Ce(){for(var e in le)le.hasOwnProperty(e)&&(le[e]=!1)}ue.language=ue.language.split(","),$.each(ue.language,function(e,a){ue.language[e]=a.trim()}),t=0,he(ue.language[t]),ne.on("click touch",ue.inputType,function(){if("keyboard-input-field"!=$(this).prop("class")){var e=$(this);$.each(ge,function(a){ge[a]=void 0===e.prop(a)?"":e.prop(a)}),ge.disabled||ge.readonly||(a=$(this),n=a,ue.directEnter||(n=$(".keyboard-input-field"),a.is("input")?(ke=a.prop("type"),be="password"==ke?"password":"text",n.prop("placeholder",ge.placeholder),n.val(a.val()),n.prop("type",be)):(ke="text",n.val(a.html()),n.prop("type","text")),$(".keyboard-blackout-background").show()),$(".keyboard-wrapper").show(),ye=!0,n.focus())}}),$("body").on("click touch",".keyboard-key",function(){var e=$(this).data("keyval");!function(e){var a=("0000"+e.charCodeAt(0).toString(16)).slice(-4),r=n[0].selectionStart;if((e=e.replace("<","<").replace(">",">").replace(/\bspace/," ")).length>2)switch(se="",e){case"shift":le.shift=!le.shift,le.caps=!1,le.altgrp=!1,"altgrp"==le.shift_altgrp?($e("shift_altgrp"),le.shift_altgrp=""):"shift"==le.shift_altgrp?($e("shift"),le.shift_altgrp=""):($e("shift"),le.shift_altgrp="shift");break;case"caps lock":le.shift=!1,le.caps=!le.caps,le.altgrp=!1,$e("caps");break;case"alt grp":le.shift=!1,le.caps=!1,le.altgrp=!le.altgrp,"shift"==le.shift_altgrp?($e("shift_altgrp"),le.shift_altgrp=""):"altgrp"==le.shift_altgrp?($e("altgrp"),le.shift_altgrp=""):($e("altgrp"),le.shift_altgrp="altgrp");break;case"backspace":n.val(n.val().slice(0,r-1)+n.val().slice(r)),r-=1,n.focus(),n[0].selectionStart=r,n[0].selectionEnd=r;break;case"space":break;case"enter":ue.enterKey&&"function"==typeof ue.enterKey&&ue.enterKey();break;case"tab":ue.tabKey&&"function"==typeof ue.tabKey&&ue.tabKey();break;case"ctrl":ue.ctrlKey&&"function"==typeof ue.ctrlKey&&ue.ctrlKey();break;case"alt":ue.altKey&&"function"==typeof ue.altKey&&ue.altKey();break;case"language":t+1<=ue.language.length-1?t++:t=0,Ce(),he(ue.language[t]),ue.languageKey&&"function"==typeof ue.languageKey&&ue.languageKey();break;case"spare":ue.spareKey&&ue.spareKey}else{if(le.shift=!1,le.altgrp=!1,$e("default"),(se=o[a])||de){if(e="",void 0===se&&de){var l=String.fromCharCode("0x"+de[a]);l&&void 0!==de[a]&&(e=l)}de=se}n.attr("dir",pe);var c,i=n.val();n.val(n.val().slice(0,r)+e+n.val().slice(r)),c=n.val(),("-1"!=ge.maxlength&&""!=ge.maxlength&&c.length>ge.maxlength||"number"==ke&&""!=ge.max&&"-1"!=ge.max&&1*c>1*ge.max||"number"==ke&&""!=ge.min&&"-1"!=ge.min&&1*c<1*ge.min||e.search(ue.keyCharacterRegex[ke])<0||c.search(ue.inputFieldRegex[ke])<0)&&(n.val(i),r--),r+=e.length,n.focus(),n[0].selectionStart=r,n[0].selectionEnd=r}}(e)}),$(document).on("click touch",".keyboard-cancel-button",function(){me()}),$(document).on("click touch",".keyboard-accept-button",function(){xe()}),$(document).on("click touch","*",function(e){if(e.stopPropagation(),ye&&ue.directEnter){var a=$(this);if(ue.inputType.search(a.attr("type"))<1&&ue.inputType.search(a.prop("tagName").toLowerCase())<1&&"true"!=a.prop("contenteditable")){for(;a.parent().length&&!a.hasClass("keyboard-wrapper");)a=a.parent();a.hasClass("keyboard-wrapper")||(Ce(),ye=!1,he(ue.language[t]))}}}),$(document).on("keydown",function(e){!function(e){if($(".keyboard-wrapper").is(":visible"))switch(e.which){case 13:ue.allowEnterAccept&&(xe(),e.preventDefault());break;case 27:ue.allowEscapeCancel&&(me(),e.preventDefault())}}(e)}),$(window).resize(function(){ce||(ce=!0,setTimeout(function(){he(ue.language[t]),ce=!1},500))})}; \ No newline at end of file +"use strict";$.fn.keyboard=function(e){var a,t,r,o,l,n,c,i,s,d,p,y,k,b,u,g,h,f,v,w,m,x,C,K,E,T,S,A,_,F,O,L,q,R,D,P,N,Y,U,J,j,B,G,I,M,z,H,Q,V,W,X,Z,ee,ae,te,re,oe,le,ne={29:0,"02":1,"03":2,"04":3,"05":4,"06":5,"07":6,"08":7,"09":8,"0a":9,"0b":10,"0c":11,"0d":12,10:13,11:14,12:15,13:16,14:17,15:18,16:19,17:20,18:21,19:22,"1a":23,"1b":24,"2b":25,"1e":26,"1f":27,20:28,21:29,22:30,23:31,24:32,25:33,26:34,27:35,28:36,"2c":37,"2d":38,"2e":39,"2f":40,30:41,31:42,32:43,33:44,34:45,35:46},ce={shift:!1,caps:!1,altgrp:!1,shift_altgrp:""},ie=$(this),se=!1,de={keyboardFile:"",arrayPosition:""},pe="",ye=!1,ke="LTR",be=!1,ue="text",ge="text",he=(i=(c=e).acceptColor,s=void 0===i?"#2ECC71":i,d=c.acceptTextColor,p=void 0===d?"#FFFFFF":d,y=c.allowEnterAccept,k=void 0===y||y,b=c.allowEscapeCancel,u=void 0===b||b,g=c.altKey,h=void 0===g?"":g,f=c.blackoutColor,v=void 0===f?"25, 25, 25, 0.9":f,w=c.cancelColor,m=void 0===w?"#E74C3C":w,x=c.cancelTextColor,C=void 0===x?"#FFFFFF":x,K=c.capsLightColor,E=void 0===K?"#3498DB":K,T=c.ctrlKey,S=void 0===T?"":T,A=c.directEnter,_=void 0!==A&&A,F=c.enterKey,O=void 0===F?"":F,L=c.inputFieldRegex,q=void 0===L?{number:/^(-)?(((\d+)|(\d+\.(\d+)?)|(\.(\d+)?))([eE]([-+])?(\d+)?)?)?$/}:L,R=c.inputType,D=void 0===R?"":R,P=c.keyCharacterRegex,N=void 0===P?{number:/[0-9]|[eE]|\.|\+|-/,tel:/[0-9]|\.|\+|-|#|\(|\)/}:P,Y=c.keyColor,U=void 0===Y?"#E0E0E0":Y,J=c.keyTextColor,j=void 0===J?"#555555":J,B=c.keyboardPosition,G=void 0===B?"bottom":B,I=c.language,M=void 0===I?"us":I,z=c.languageKey,H=void 0===z?"":z,Q=c.languageKeyTextColor,V=void 0===Q?"#3498db":Q,W=c.showSelectedLanguage,X=void 0!==W&&W,Z=c.spareKey,ee=void 0===Z?"":Z,ae=c.tabKey,te=void 0===ae?"":ae,{acceptColor:s,acceptTextColor:p,allowEnterAccept:k,allowEscapeCancel:u,altKey:h,blackoutColor:v,cancelColor:m,cancelTextColor:C,capsLightColor:E,ctrlKey:S,directEnter:_,enterKey:O,inputFieldRegex:q,inputType:(re=D,oe=new Array,le="",void 0!==re&&""!=re?(oe=re.trim().split(","),$.each(oe,function(e,a){"contenteditable"==a.trim().toString()?le+='[contenteditable="true"], ':"textarea"==a.trim().toString()?le+="textarea, ":le+='input[type="'+a.trim().toString()+'"], '}),le=le.slice(0,-2)):le='input[type="text"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], textarea, [contenteditable="true"]',le),keyboardPosition:G,keyCharacterRegex:N,keyColor:U,keyTextColor:j,language:M,languageKey:H,languageKeyTextColor:V,showSelectedLanguage:X,spareKey:ee,tabKey:te}),fe={disabled:"",readonly:"",maxlength:"",min:"",max:"",placeholder:""};function ve(e){""!=de.keyboardFile&&de.arrayPosition==t?we(e,de.keyboardFile):$.get("languages/"+e+".klc",function(a){de.keyboardFile=a,de.arrayPosition=t,we(e,a)})}function we(e,a){var n,c,i,s,d,p,y,k,b=new Array;r="",o="",l="",n=(a=a.replace(/\u0000/g,"")).match(/\d(\w)?\s+\w+\s+\d\s+(-1|\w+@?|%%)\s+(-1|\w+@?|%%)\s+(-1|\w+@?|%%)(\s+(-1|\w+@?|%%))?(\s+(-1|\w+@?|%%))?(\s+(-1|\w+@?|%%))?\s+\/\//g),(i=a.indexOf("SHIFTSTATE"))>0&&((c=a.slice(i,a.indexOf("LAYOUT")).trim().split(/\n/g)).splice(0,2),$.each(c,function(e,a){-1==a.indexOf(":")?r+='"default": ':-1!=a.indexOf("Shft Ctrl Alt")?r+='"shift_altgrp": ':-1!=a.indexOf("Shft Ctrl")?r+='"ctrl_shift": ':-1!=a.indexOf("Ctrl Alt")?r+='"altgrp": ':-1!=a.indexOf("Ctrl")?r+='"ctrl": ':-1!=a.indexOf("Shft")&&(r+='"shift": '),r+=a.match(/\w{6}\s[0-9]/).toString().slice(-1)+", "}),r=JSON.parse("{"+r.toString().slice(0,-2)+"}")),(d=a.indexOf("DEADKEY"))>0&&((s=a.slice(d,a.indexOf("KEYNAME")).trim().split("DEADKEY")).splice(0,1),$.each(s,function(e,a){(b=a.split(/\n/g)).splice(0,2),k="",$.each(b,function(e,a){k+='"'+a.trim().slice(0,4)+'": "'+a.trim().slice(5,9)+'", '}),k="{"+k.slice(0,-2)+"}",o+='"'+a.trim().slice(0,4)+'": '+k+", "}),o=JSON.parse("{"+o.slice(0,-2)+"}")),(y=a.indexOf("LIGATURE"))>0&&((p=a.slice(y,a.indexOf("KEYNAME")).trim().split(/\n/g)).splice(0,5),$.each(p,function(e,a){a.indexOf("//")>0&&(p[e]=a.trim().split("//")[0].trim().replace(/\t/g," ").replace(" "," ").replace(" "," ").split(" "),p[e].splice(1,1),l+='"'+p[e][0]+'": ',p[e].splice(0,1),$.each(p[e],function(a,t){p[e][a]='"'+t+'"'}),l+="["+p[e]+"], ")}),l=JSON.parse("{"+l.slice(0,-2)+"}")),ke="arabic"==e?"RTL":"LTR",function(e){var a=e.toString().split(","),r=new Array,o=new Array(47);$.each(a,function(e,a){r[e]=a.toString().replace(/(\t+|\s+)/g," "),r[e]=r[e].split(" "),void 0!==ne[r[e][0]]&&(o[ne[r[e][0]]]=r[e])}),$(".keyboard-wrapper").length?(Ee(),$(".keyboard-row").remove(),!0):($("body").prepend('
'),he.directEnter||$("body").prepend('
'),!1);$e(o.slice(0,13)),$e(o.slice(13,26)),$e(o.slice(26,37)),$e(o.slice(37,47)),xe("default"),k=he.language,b=he.languageKeyTextColor,u=he.showSelectedLanguage,g=k[t].toLowerCase().replace(/^\w/,function(e){return e.toUpperCase()}),h=u?g:"Language",$(".keyboard-action-wrapper").length||he.directEnter||$(".keyboard-wrapper").prepend('
'),$(".keyboard-row:eq(0)").append(''),$(".keyboard-row:eq(1)").prepend(''),$(".keyboard-row:eq(2)").prepend(''),$(".keyboard-row:eq(2)").append(''),$(".keyboard-row:eq(3)").prepend(''),$(".keyboard-row:eq(3)").append(''),$(".keyboard-wrapper").append('
'),$(".keyboard-row:eq(4)").append(''),$(".keyboard-row:eq(4)").append('"),$(".keyboard-row:eq(4)").append(''),$(".keyboard-row:eq(4)").append(''),$(".keyboard-row:eq(4)").append(''),$(".keyboard-row:eq(4)").append(''),$(".keyboard-row:eq(4)").append(''),s=$(".keyboard-row").width(),d=2*$(".keyboard-key").css("margin-right").match(/[0-9]/),p=(s-15*d)/15,y=s/3,$(".keyboard-row").each(function(){l=$(this).children(".keyboard-key-sm").length,n=$(this).children(".keyboard-key-lg").length,c=$(this).children(".keyboard-key-xl").length,i=(s-(l+n+c)*d-l*p-c*y)/n,$(this).children(".keyboard-key-sm").css("cssText","width: "+p+"px"),$(this).children(".keyboard-key-lg").css("cssText","width: "+i+"px"),$(this).children(".keyboard-key-xl").css("cssText","width: "+y+"px")}),function(){var e=$(window).width(),a=$(window).height(),t=$(".keyboard-wrapper").height(),r=$(".keyboard-wrapper").width();switch($(".keyboard-key").css("background-color",he.keyColor),$(".keyboard-key").css("color",he.keyTextColor),he.directEnter||($(".keyboard-cancel-button").css("background-color",he.cancelColor),$(".keyboard-cancel-button").css("color",he.cancelTextColor),$(".keyboard-accept-button").css("background-color",he.acceptColor),$(".keyboard-accept-button").css("color",he.acceptTextColor),$(".keyboard-blackout-background").css("background-color","rgba("+he.blackoutColor+")")),he.keyboardPosition){case"top":$(".keyboard-wrapper").css("top","20px");break;case"middle":$(".keyboard-wrapper").css("top",((a-t)/2).toString()+"px");break;default:$(".keyboard-wrapper").css("bottom","20px")}$(".keyboard-wrapper").css("left",((e-r)/2).toString()+"px")}(),be||(he.directEnter||$(".keyboard-blackout-background").hide(),$(".keyboard-wrapper").hide());var l,n,c,i,s,d,p,y;var k,b,u,g,h}(n)}function $e(e){var a;$(".keyboard-wrapper").append('
'),$.each(e,function(e,t){var o;a=void 0!==t?{default:me(t[r.default-1],t[1]),shift:me(t[r.shift-1],t[1]),altgrp:me(t[r.altgrp-1],t[1]),shift_altgrp:me(t[r.shift_altgrp-1],t[1])}:{default:"-1",shift:"-1",altgrp:"-1",shift_altgrp:"-1"},o=a,$(".keyboard-row:last").append(''),$(".keyboard-key:last").data("keyDataObject",o)})}function me(e,a){var t=e;return"%%"==e?t=l[a]:void 0===e&&(t="-1"),t}function xe(e){var a,t,r="";!ce.caps||ce.shift||ce.altgrp?ce.caps||ce.shift||ce.altgrp||(e="default"):(e="default",$(".caps-lock-key").addClass("caps-lock-key-active")),ce.caps||$(".caps-lock-key").removeClass("caps-lock-key-active"),""!=ce.shift_altgrp&&"shift_altgrp"!=e&&(ce.shift_altgrp=""),$(".keyboard-key").each(function(){r="";try{a=$(this),4==(t=a.data("keyDataObject"))[e].length?(a.html("&#x"+t[e]+";"),a.data("keyval",a.html())):5==t[e].length&&t[e].match("@")?(a.html("&#x"+t[e].replace("@","")+";"),a.data("keyval",a.html())):t[e].constructor===Array?($.each(t[e],function(e,a){r+="&#x"+a+";"}),a.html(r),a.data("keyval",a.html())):"-1"==t[e]||"%%"==t[e]||0==t[e].length?(a.html(" "),a.data("keyval","")):(a.html(t[e]),a.data("keyval",a.html())),ce.shift||!ce.caps||ce.altgrp||(a.html(1==a.html().length?a.html().toUpperCase():a.html()),a.data("keyval",1==a.html().length?a.html():a.data("keyval")))}catch(e){}})}function Ce(){n.val(""),Ee(),be=!1,ve(he.language[t])}function Ke(){a.is("input")?a.val(n.val()):a.html(n.val()),n.val(""),Ee(),be=!1,ve(he.language[t])}function Ee(){for(var e in ce)ce.hasOwnProperty(e)&&(ce[e]=!1)}he.language=he.language.split(","),$.each(he.language,function(e,a){he.language[e]=a.trim()}),t=0,ve(he.language[t]),ie.on("click touch",he.inputType,function(){if("keyboard-input-field"!=$(this).prop("class")){var e=$(this);$.each(fe,function(a){fe[a]=void 0===e.prop(a)?"":e.prop(a)}),fe.disabled||fe.readonly||(a=$(this),n=a,he.directEnter||(n=$(".keyboard-input-field"),a.is("input")?(ue=a.prop("type"),ge="password"==ue?"password":"text",n.prop("placeholder",fe.placeholder),n.val(a.val()),n.prop("type",ge)):(ue="text",n.val(a.html()),n.prop("type","text")),$(".keyboard-blackout-background").show()),$(".keyboard-wrapper").show(),be=!0,n.focus())}}),$("body").on("click touch",".keyboard-key",function(){var e=$(this).data("keyval");!function(e){var a=("0000"+e.charCodeAt(0).toString(16)).slice(-4),r=n[0].selectionStart;if((e=e.replace("<","<").replace(">",">").replace(/\bspace/," ")).length>2)switch(pe="",e){case"shift":ce.shift=!ce.shift,ce.caps=!1,ce.altgrp=!1,"altgrp"==ce.shift_altgrp?(xe("shift_altgrp"),ce.shift_altgrp=""):"shift"==ce.shift_altgrp?(xe("shift"),ce.shift_altgrp=""):(xe("shift"),ce.shift_altgrp="shift");break;case"caps lock":ce.shift=!1,ce.caps=!ce.caps,ce.altgrp=!1,xe("caps");break;case"alt grp":ce.shift=!1,ce.caps=!1,ce.altgrp=!ce.altgrp,"shift"==ce.shift_altgrp?(xe("shift_altgrp"),ce.shift_altgrp=""):"altgrp"==ce.shift_altgrp?(xe("altgrp"),ce.shift_altgrp=""):(xe("altgrp"),ce.shift_altgrp="altgrp");break;case"backspace":n.val(n.val().slice(0,r-1)+n.val().slice(r)),r-=1,n.focus(),n[0].selectionStart=r,n[0].selectionEnd=r;break;case"space":break;case"enter":he.enterKey&&"function"==typeof he.enterKey&&he.enterKey();break;case"tab":he.tabKey&&"function"==typeof he.tabKey&&he.tabKey();break;case"ctrl":he.ctrlKey&&"function"==typeof he.ctrlKey&&he.ctrlKey();break;case"alt":he.altKey&&"function"==typeof he.altKey&&he.altKey();break;case"language":t+1<=he.language.length-1?t++:t=0,Ee(),ve(he.language[t]),he.languageKey&&"function"==typeof he.languageKey&&he.languageKey();break;case"spare":he.spareKey&&he.spareKey}else{if(ce.shift=!1,ce.altgrp=!1,xe("default"),(pe=o[a])||ye){if(e="",void 0===pe&&ye){var l=String.fromCharCode("0x"+ye[a]);l&&void 0!==ye[a]&&(e=l)}ye=pe}n.attr("dir",ke);var c,i=n.val();n.val(n.val().slice(0,r)+e+n.val().slice(r)),c=n.val(),("-1"!=fe.maxlength&&""!=fe.maxlength&&c.length>fe.maxlength||"number"==ue&&""!=fe.max&&"-1"!=fe.max&&1*c>1*fe.max||"number"==ue&&""!=fe.min&&"-1"!=fe.min&&1*c<1*fe.min||e.search(he.keyCharacterRegex[ue])<0||c.search(he.inputFieldRegex[ue])<0)&&(n.val(i),r--),r+=e.length,n.focus(),n[0].selectionStart=r,n[0].selectionEnd=r}}(e)}),$(document).on("click touch",".keyboard-cancel-button",function(){Ce()}),$(document).on("click touch",".keyboard-accept-button",function(){Ke()}),$(document).on("click touch","*",function(e){if(e.stopPropagation(),be&&he.directEnter){var a=$(this);if(he.inputType.search(a.attr("type"))<1&&he.inputType.search(a.prop("tagName").toLowerCase())<1&&"true"!=a.prop("contenteditable")){for(;a.parent().length&&!a.hasClass("keyboard-wrapper");)a=a.parent();a.hasClass("keyboard-wrapper")||(Ee(),be=!1,ve(he.language[t]))}}}),$(document).on("keydown",function(e){!function(e){if($(".keyboard-wrapper").is(":visible"))switch(e.which){case 13:he.allowEnterAccept&&(Ke(),e.preventDefault());break;case 27:he.allowEscapeCancel&&(Ce(),e.preventDefault())}}(e)}),$(window).resize(function(){se||(se=!0,setTimeout(function(){ve(he.language[t]),se=!1},500))})}; \ No newline at end of file diff --git a/dist/styles.css b/dist/styles.css index ffed363..bc40cc8 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -1 +1 @@ -.keyboard-blackout-background{position:fixed;z-index:1;top:0;left:0;width:100%;height:100%;background-color:rgba(25,25,25,.9)}.keyboard-wrapper{font-family:Verdana,sans-serif;font-size:18px;line-height:18px;position:fixed;z-index:2;width:calc(100% - 40px);min-width:1004px;max-width:1100px;color:#555}.keyboard-wrapper .keyboard-action-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}.keyboard-wrapper .keyboard-action-button{font-family:inherit;font-size:inherit;display:inline;width:15%;height:40px;margin:0 5px;padding:0;cursor:pointer;color:#fff;border:none;border-radius:4px;outline:none}.keyboard-wrapper .keyboard-cancel-button{background-color:#e74c3c}.keyboard-wrapper .keyboard-accept-button{background-color:#2ecc71}.keyboard-wrapper .keyboard-input-field{box-sizing:content-box;width:60%;height:36px;padding-right:10px;padding-left:10px;color:inherit;border:1px solid #555;border-radius:4px;outline:none}.keyboard-row,.keyboard-wrapper .keyboard-input-field{font-family:inherit;font-size:inherit;line-height:inherit}.keyboard-row{width:100%;height:50px;margin:20px 0}.keyboard-key{font-family:inherit;font-size:inherit;line-height:inherit;display:inline-block;height:100%;margin:0 5px;padding:0;cursor:pointer;vertical-align:middle;color:inherit;border:none;border-radius:4px;outline:none;background-color:#e0e0e0}.keyboard-key:focus{outline:none}.caps-lock-key{position:relative}.caps-lock-key:before{position:absolute;top:10px;right:10px;width:7px;height:7px;content:"";transition:background-color .05s ease-in-out;border:1px solid #bdbdbd;border-radius:50%;background-color:transparent}.caps-lock-key-active:before{background-color:#3498db}.language-button{overflow:hidden;padding:0 10px;white-space:nowrap;text-overflow:ellipsis;color:#3498db!important} \ No newline at end of file +.keyboard-blackout-background{position:fixed;z-index:1;top:0;left:0;width:100%;height:100%;background-color:rgba(25,25,25,.9)}.keyboard-wrapper{font-family:Verdana,sans-serif;font-size:18px;line-height:18px;position:fixed;z-index:2;width:calc(100% - 40px);min-width:1004px;max-width:1100px;color:#555}.keyboard-wrapper .keyboard-action-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}.keyboard-wrapper .keyboard-action-button{font-family:inherit;font-size:inherit;display:inline;width:15%;height:40px;margin:0 5px;padding:0;cursor:pointer;color:#fff;border:none;border-radius:4px;outline:none}.keyboard-wrapper .keyboard-cancel-button{background-color:#e74c3c}.keyboard-wrapper .keyboard-accept-button{background-color:#2ecc71}.keyboard-wrapper .keyboard-input-field{box-sizing:content-box;width:60%;height:36px;padding-right:10px;padding-left:10px;color:inherit;border:1px solid #555;border-radius:4px;outline:none}.keyboard-row,.keyboard-wrapper .keyboard-input-field{font-family:inherit;font-size:inherit;line-height:inherit}.keyboard-row{width:100%;height:50px;margin:20px 0}.keyboard-key{font-family:inherit;font-size:inherit;line-height:inherit;display:inline-block;height:100%;margin:0 5px;padding:0;cursor:pointer;vertical-align:middle;color:inherit;border:none;border-radius:4px;outline:none;background-color:#e0e0e0}.keyboard-key:focus{outline:none}.caps-lock-key{position:relative}.caps-lock-key:before{position:absolute;top:10px;right:10px;width:7px;height:7px;content:"";transition:background-color .05s ease-in-out;border:1px solid #bdbdbd;border-radius:50%;background-color:transparent}.caps-lock-key-active:before{background-color:#3498db}.language-button{overflow:hidden;padding:0 10px;white-space:nowrap;text-overflow:ellipsis} \ No newline at end of file diff --git a/src/js/keyboard.js b/src/js/keyboard.js index 37a8e62..a54aaac 100644 --- a/src/js/keyboard.js +++ b/src/js/keyboard.js @@ -7,7 +7,7 @@ //* GitHub: https://github.com/srm985/mok-project * //* * //* Started: March 2017 * -//* Version: 1.1.2 * +//* Version: 1.1.3 * //* * //* License: MIT (https://opensource.org/licenses/MIT) * //* * @@ -56,6 +56,7 @@ $.fn.keyboard = function (passedOptions) { keyboardPosition = 'bottom', language = 'us', languageKey = '', + languageKeyTextColor = '#3498db', showSelectedLanguage = false, spareKey = '', tabKey = '' @@ -80,6 +81,7 @@ $.fn.keyboard = function (passedOptions) { keyTextColor, language, languageKey, + languageKeyTextColor, showSelectedLanguage, spareKey, tabKey @@ -441,6 +443,7 @@ $.fn.keyboard = function (passedOptions) { function keyboardFillout() { const { language, + languageKeyTextColor, showSelectedLanguage } = options; @@ -459,7 +462,9 @@ $.fn.keyboard = function (passedOptions) { $('.keyboard-row:eq(3)').append(''); $('.keyboard-wrapper').append('
'); $('.keyboard-row:eq(4)').append(''); - $('.keyboard-row:eq(4)').append(``); + $('.keyboard-row:eq(4)').append(``); $('.keyboard-row:eq(4)').append(''); $('.keyboard-row:eq(4)').append(''); $('.keyboard-row:eq(4)').append(''); diff --git a/src/scss/keyboard.scss b/src/scss/keyboard.scss index 9bb94f4..c2fe66a 100644 --- a/src/scss/keyboard.scss +++ b/src/scss/keyboard.scss @@ -152,6 +152,4 @@ $blackout-color: rgba(25, 25, 25, 0.9); white-space: nowrap; text-overflow: ellipsis; - - color: $primary-color !important; }