keylime.min.js

(function(global,factory){var exported,keyLime=factory(global);if(typeof define==="function"&&define.amd)define(exported=keyLime);if(typeof exports==="object")module.exports=exported=keyLime;global.keyLime=keyLime})(typeof global!=="undefined"?global:this,function(global){"use strict";var holdTimer,hideTimer,focused,shift,caps,sym,move,lastLeft,lastDir,diacriticsMenu,style=document.createElement("style"),imeCtr=document.createElement("div"),exports=global.keyLime||{config:{}},visible=false,evtConstructors=function(){try{return!!new CustomEvent("a")}catch(e){return false}}(),cssRules=[".lime-container { background-color: #333; position: absolute; bottom: 0; left: 0; right: 0; color: #fff; z-index:1000000; font-family: sans-serif; }",'.lime-container-dim::before { position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.5; }',".lime-key-row { list-style-type: none; clear: both; text-align: center; padding: 0; margin: 0; font-size: 28px; }",".lime-diacritics-row { position: absolute; z-index: 2; overflow: hidden; -webkit-transition: width 400ms; transition: width 400ms; white-space: nowrap; }",".lime-key { vertical-align: top; display: inline-block; border: 3px solid #333; background-color: #666; width: 66px; line-height: 50px; -webkit-transition: all 400ms linear; transition: all 400ms linear; }",".lime-key[data-text]::before { content: attr(data-text) }",".lime-container.symbol-toggle .lime-key[data-symbol]::before { content: attr(data-symbol) }",".lime-container.shift-toggle .lime-key[data-text]:not(.lime-http):not(.lime-dotcom):not(.lime-wwwdot)::before { text-transform: uppercase; }",".lime-special-key { background-color: #999; color: #333; }",".lime-return { background-color: #ccc; width: 138px; }",".lime-focus { background-color: #26f; color: #fff; }",".lime-toggle { background-color: #2f2; color: #fff; position: relative; }",".lime-spacebar { width:498px; }",".lime-http, .lime-dotcom, .lime-wwwdot { font-size: 20px; }"],regSupportSel=/^(?:text|search|url|tel|password)$/i,supportAnySel=wontThrowOnSelection(),spKeys={Tab:tabNext,Return:submit,Shift:function(f){var t=imeCtr.querySelector(".lime-toggle");if(t)t.classList.remove("lime-toggle");imeCtr.classList.remove("shift-toggle","symbol-toggle");sym=move=false;if(shift){shift=false;caps=true;f.classList.add("lime-toggle")}else if(caps)caps=false;else shift=true;if(shift||caps)imeCtr.classList.add("shift-toggle")},Symbol:function(f){var t=imeCtr.querySelector(".lime-toggle");if(t)t.classList.remove("lime-toggle");sym=!sym;shift=caps=move=false;imeCtr.classList.remove("shift-toggle");imeCtr.classList.toggle("symbol-toggle");if(sym)f.classList.toggle("lime-toggle")},Backspace:function(){var a=document.activeElement,sel=window.getSelection();if(!isInput(a))return;if(supportAnySel||regSupportSel.test(a.type)){var ss=a.selectionStart;if(!String(sel).length){a.value=a.value.slice(0,ss-1)+a.value.slice(ss);a.selectionStart=ss-1}else{a.value=a.value.slice(0,ss)+a.value.slice(a.selectionEnd);a.selectionStart=ss}doPostInput(a)}else{if(!String(sel).length)sel.modify("extend","backward","character");sel.deleteFromDocument()}},Caret:function(f){var t=imeCtr.querySelector(".lime-toggle");if(t)t.classList.remove("lime-toggle");sym=shift=caps=false;imeCtr.classList.remove("shift-toggle","symbol-toggle");move=!move;if(move)f.classList.add("lime-toggle")}},inputMode={verbatim:{keys:{standard:[["@","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",",",".","/"]],symbol:[["@","1","2","3","4","5","6","7","8","9","0","-","="],["~","#","`","£","$","%","^","&","(",")","[","]"],["•","€","¥","¡","¿","*","|","{","}",":","&quot;"],["_","+","!","\\","«","»","§","<",">","?"]]},diacritics:{a:"äáâàåæ",c:"ç©",d:"ð",e:"ëéêè",i:"ïíîì",m:"µ",n:"ñ",o:"öóôòõø",u:"üúûù",y:"ÿý"}}};imeCtr.className="lime-container";imeCtr.lang="en";document.head.insertBefore(style,document.head.firstChild);for(var i=0;i<cssRules.length;i++)style.sheet.insertRule(cssRules[i],i);function wontThrowOnSelection(){var dummy=document.createElement("input");dummy.type="number";try{dummy.selectionStart=0;return true}catch(e){return false}}function showIME(){if(!isInput(document.activeElement))return;clearTimeout(hideTimer);if(!visible&&dispatchCustomEvent("keylimeshow")){document.body.appendChild(imeCtr);visible=true}}function hideIME(){clearTimeout(hideTimer);hideTimer=setTimeout(function(){if(!visible||!dispatchCustomEvent("keylimehide"))return;document.body.removeChild(imeCtr);visible=false;if(focused){focused.classList.remove("lime-focus");focused=null}if(imeCtr.style.bottom){imeCtr.style.top="";imeCtr.style.bottom=""}})}function initKeys(){var html="",spKeys={row2:{before:'<li id="limeTab" class="lime-key lime-special-key lime-tab">Tab</li>',after:'<li id="limeBackspace" class="lime-key lime-special-key lime-backspace">⌫</li>'},row3:{before:'<li id="limeShift" class="lime-key lime-special-key lime-shift">↑</li>',after:'<li id="limeCaret" class="lime-key lime-special-key lime-caret">|↔</li>'}},keys=inputMode.verbatim.keys;html+=keys.standard.map(function(keyRow,rIdx){var sp=spKeys["row"+rIdx];return'<menu class="lime-key-row">'+(sp&&sp.before||"")+keyRow.map(function(k,kIdx){return'<li class="lime-key" data-text="'+k+'" data-symbol="'+keys.symbol[rIdx][kIdx]+'"></li>'}).join("")+(sp&&sp.after||"")+"</menu>"}).join("");html+='<menu class="lime-key-row">'+'<li id="limeSymbol" class="lime-key lime-special-key">★</li>'+'<li class="lime-key lime-http" data-text="http://"></li>'+'<li class="lime-key lime-wwwdot" data-text="www."></li>'+'<li class="lime-key lime-spacebar" data-text=" ">&nbsp;</li>'+'<li class="lime-key lime-dotcom" data-text=".com"></li>'+'<li id="limeReturn" class="lime-key lime-special-key lime-return">→</li>'+"</menu>";imeCtr.innerHTML=html}function newFocus(el){if(!el.classList.contains("lime-key"))return;if(focused)focused.classList.remove("lime-focus");focused=el;focused.classList.add("lime-focus")}function moveKeyFocus(dir){var next;if(!focused)next=imeCtr.querySelector(".lime-key");else if(dir==="left"||dir==="right"){next=focused[(dir==="left"?"previous":"next")+"Sibling"];if(!next&&!diacriticsMenu)next=focused.parentNode[(dir==="left"?"last":"first")+"Child"]}else if(!diacriticsMenu){var rect=focused.getBoundingClientRect(),hght=focused.offsetHeight,y=rect.top+(dir==="down"?hght:-hght),x=lastLeft;if(!lastLeft)x=lastLeft=rect.left+focused.offsetWidth/2;next=document.elementFromPoint(lastDir==="left"?x-10:x+10,y);if(!next.classList.contains("lime-key"))next=document.elementFromPoint(x+10,y)}if(next.classList.contains("lime-key")){newFocus(next);if(dir==="left"||dir==="right"){lastLeft=focused.getBoundingClientRect().left+focused.offsetWidth/2;lastDir=dir}}else if(diacriticsMenu){var rect=focused.getBoundingClientRect();hideDiacritics();newFocus(document.elementFromPoint(rect.left,rect.top));lastLeft=rect.left+focused.offsetWidth/2;return moveKeyFocus(dir)}}function doKeyAction(){var txt,sp,k=focused,tuc="toLocaleUpperCase"in String.prototype?"toLocaleUpperCase":"toUpperCase";if(sp=spKeys[k.id.slice(4)])return sp(k);else{txt=k.dataset[sym?"symbol":"text"]||k.dataset.text;if(!txt)return;if(shift||caps)txt=txt[tuc]();if(shift){shift=false;imeCtr.classList.remove("shift-toggle")}var a=document.activeElement;if(supportAnySel||regSupportSel.test(a.type)){var ss=a.selectionStart;a.value=a.value.slice(0,ss)+txt+a.value.slice(a.selectionEnd);a.selectionStart=a.selectionEnd=ss+txt.length}else{var len,pre,post,s=window.getSelection();s.deleteFromDocument();do{len=String(s).length;s.modify("extend","backward","line")}while(String(s).length!==len);pre=String(s);s.deleteFromDocument();do{len=String(s).length;s.modify("extend","forward","line")}while(String(s).length!==len);post=String(s);s.deleteFromDocument();a.setAttribute("value",a.defaultValue);a.value=pre+txt+post;a.select();s=window.getSelection();s.collapseToEnd();while(len-->0)s.modify("move","backward","character")}doPostInput(a)}}function swallowEvt(evt){evt.preventDefault();evt.stopPropagation()}function submit(){var e,f=document.activeElement.form;if(f){if(evtConstructors)e=new Event("submit",{bubbles:true,cancelable:true});else{e=document.createEvent("HTMLEvents");e.initEvent("submit",true,true)}if(f.dispatchEvent(e))f.submit()}hideIME()}function showDiacritics(){var menu,fRect,cRect,rRect,w,dia=inputMode.verbatim.diacritics[focused&&focused.dataset.text];if(!focused||!dia)return;if(!(menu=imeCtr.querySelector(".lime-diacritics-row"))){menu=document.createElement("menu");menu.className="lime-key-row lime-diacritics-row"}imeCtr.classList.add("lime-container-dim");focused.classList.add("lime-toggle");cRect=imeCtr.getBoundingClientRect();fRect=focused.getBoundingClientRect();rRect=focused.parentNode.lastChild.getBoundingClientRect();menu.innerHTML="";Array.prototype.forEach.call(dia,function(char){var li=menu.appendChild(document.createElement("li"));li.className="lime-key lime-diacritical";li.dataset.text=char});imeCtr.appendChild(menu);diacriticsMenu=menu;w=menu.offsetWidth;menu.style.left=menu.style.right="";if(fRect.right+w<=rRect.right)menu.style.left=fRect.right-cRect.left+"px";else menu.style.right=cRect.right-fRect.left+"px";menu.style.top=fRect.top-cRect.top+"px";menu.style.width=0;window.setTimeout(function(){menu.style.width=w+"px"})}function hideDiacritics(){if(!diacriticsMenu)return;diacriticsMenu.parentNode.removeChild(diacriticsMenu);imeCtr.classList.remove("lime-container-dim");newFocus(imeCtr.querySelector(".lime-toggle[data-text]"));focused.classList.remove("lime-toggle");lastLeft=focused.getBoundingClientRect().left;diacriticsMenu=null}function tabNext(){var next,i,a=document.activeElement,n=Array.prototype.slice.call((a.form||document).getElementsByTagName("*"));n=n.filter(function(a){return a.tabIndex>-1&&a.offsetHeight&&!a.disabled});n.sort(function(a,b){return(a.tabIndex||Number.MAX_VALUE)-(b.tabIndex||Number.MAX_VALUE)});i=n.indexOf(a);n=n.slice(i+1).concat(n.slice(0,i));i=0;while(document.activeElement!=next&&n.length){next=n.shift();next.focus()}}function dispatchCustomEvent(type){var evt;if(evtConstructors)evt=new CustomEvent(type,{bubbles:true,cancelable:true});else{evt=document.createEvent("CustomEvent");evt.initCustomEvent(type,true,true)}return document.activeElement.dispatchEvent(evt)}function isInput(el){var allowed=/^(?:text|email|number|password|tel|url|search)$/;return(allowed.test(el.type)||el.isContentEditable)&&!el.readOnly}function doPostInput(control){var postInput=exports.config.postInput;if(!postInput)return;postInput(control)}document.addEventListener("focus",function(evt){var tag=evt.target.tagName;if(!exports.config.noauto&&(evt.target.isContentEditable||tag==="INPUT"||tag==="TEXTAREA"))showIME();if(visible){imeCtr.style.top="";imeCtr.style.bottom="";var elr=evt.target.getBoundingClientRect(),ctr=imeCtr.offsetTop,diff=elr.bottom-ctr;if(diff>0){imeCtr.style.top="0";imeCtr.style.bottom="auto"}}},true);document.addEventListener("blur",function(){if(visible&&!exports.config.noauto)hideIME()},true);document.addEventListener("keydown",function(evt){if(!visible)return;var key=evt.key.replace(/^Arrow/,"");switch(key){case"Left":case"Right":case"Up":case"Down":if(move)return;swallowEvt(evt);moveKeyFocus(key.toLowerCase());break;case"Enter":if(focused){if(!holdTimer)holdTimer=setTimeout(showDiacritics,exports.config.keyHoldTimeout||500);swallowEvt(evt)}break;case"Escape":case"BrowserBack":swallowEvt(evt);if(move)spKeys.Caret(focused);else if(diacriticsMenu)hideDiacritics();else hideIME()}},true);document.addEventListener("keypress",function(evt){if(evt.target.type==="password"||evt.charCode===0||evt.keyCode===13)return;var s=String.fromCharCode(evt.keyCode).toLowerCase(),e=imeCtr.querySelector('li[data-text="'+s+'"]');if(e){newFocus(e);focused=undefined;window.setTimeout(function(){e.classList.remove("lime-focus")},100)}},true);document.addEventListener("keyup",function(evt){if(!visible||!focused)return;switch(evt.key.replace(/^Arrow/,"")){case"Escape":case"BrowserBack":case"Up":case"Down":case"Left":case"Right":swallowEvt(evt);break;case"Enter":swallowEvt(evt);clearTimeout(holdTimer);holdTimer=null;if(diacriticsMenu&&!focused.classList.contains("lime-diacritical"))newFocus(diacriticsMenu.firstChild);else{doKeyAction();if(diacriticsMenu)hideDiacritics()}}},true);imeCtr.addEventListener("mousedown",function(evt){swallowEvt(evt);if(!evt.target.classList.contains("lime-key"))return;holdTimer=setTimeout(showDiacritics,exports.config.keyHoldTimeout||500)},true);imeCtr.addEventListener("mouseup",function(evt){swallowEvt(evt);if(!evt.target.classList.contains("lime-key"))return;clearTimeout(holdTimer);holdTimer=null;doKeyAction();if(diacriticsMenu)hideDiacritics()},true);imeCtr.addEventListener("mousemove",function(evt){newFocus(evt.target)});imeCtr.addEventListener("mouseout",function(evt){if(focused===evt.target)focused.classList.remove("lime-focus")});(function(){var map={13:"Enter",27:"Escape",37:"ArrowLeft",38:"ArrowUp",39:"ArrowRight",40:"ArrowDown"},prop={get:function(){var code=this.which;return map[code]||"Unidentified"}};if(global.TvKeyCode){map[TvKeyCode.RETURN]="BrowserBack";map[TvKeyCode.ENTER]="Enter";map[TvKeyCode.UP]="ArrowUp";map[TvKeyCode.DOWN]="ArrowDown";map[TvKeyCode.LEFT]="ArrowLeft";map[TvKeyCode.RIGHT]="ArrowRight"}else if(global.KeyEvent&&global.KeyEvent.VK_ENTER){map[global.KeyEvent.VK_BACK]="BrowserBack";map[global.KeyEvent.VK_ENTER]="Enter"}if(global.KeyboardEvent&&!global.KeyboardEvent.prototype.hasOwnProperty("key"))Object.defineProperty(global.KeyboardEvent.prototype,"key",prop);if(global.KeyEvent&&global.KeyEvent.prototype&&!global.KeyEvent.prototype.hasOwnProperty("key"))Object.defineProperty(global.KeyEvent.prototype,"key",prop)})(global);initKeys();exports.show=showIME;exports.hide=hideIME;return exports});