CanvasInput.min.js

/*!
 *  CanvasInput v1.2.7
 *  http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input
 *
 *  (c) 2013-2017, James Simpson of GoldFire Studios
 *  goldfirestudios.com
 *
 *  MIT License
 */
(function(){var inputs=[];var CanvasInput=window.CanvasInput=function(o){var self=this;o=o?o:{};self._canvas=o.canvas||null;self._ctx=self._canvas?self._canvas.getContext('2d'):null;self._x=o.x||0;self._y=o.y||0;self._extraX=o.extraX||0;self._extraY=o.extraY||0;self._fontSize=o.fontSize||14;self._fontFamily=o.fontFamily||'Arial';self._fontColor=o.fontColor||'#000';self._placeHolderColor=o.placeHolderColor||'#bfbebd';self._fontWeight=o.fontWeight||'normal';self._fontStyle=o.fontStyle||'normal';self._fontShadowColor=o.fontShadowColor||'';self._fontShadowBlur=o.fontShadowBlur||0;self._fontShadowOffsetX=o.fontShadowOffsetX||0;self._fontShadowOffsetY=o.fontShadowOffsetY||0;self._readonly=o.readonly||false;self._maxlength=o.maxlength||null;self._width=o.width||150;self._height=o.height||self._fontSize;self._padding=o.padding>=0?o.padding:5;self._borderWidth=o.borderWidth>=0?o.borderWidth:1;self._borderColor=o.borderColor||'#959595';self._borderRadius=o.borderRadius>=0?o.borderRadius:3;self._backgroundImage=o.backgroundImage||'';self._boxShadow=o.boxShadow||'1px 1px 0px rgba(255, 255, 255, 1)';self._innerShadow=o.innerShadow||'0px 0px 4px rgba(0, 0, 0, 0.4)';self._selectionColor=o.selectionColor||'rgba(179, 212, 253, 0.8)';self._placeHolder=o.placeHolder||'';self._value=(o.value||self._placeHolder)+'';self._onsubmit=o.onsubmit||function(){};self._onkeydown=o.onkeydown||function(){};self._onkeyup=o.onkeyup||function(){};self._onfocus=o.onfocus||function(){};self._onblur=o.onblur||function(){};self._cursor=false;self._cursorPos=0;self._hasFocus=false;self._selection=[0,0];self._wasOver=false;self._type=o.type||'text';self.boxShadow(self._boxShadow,true);self._calcWH();self._renderCanvas=document.createElement('canvas');self._renderCanvas.setAttribute('width',self.outerW);self._renderCanvas.setAttribute('height',self.outerH);self._renderCtx=self._renderCanvas.getContext('2d');self._shadowCanvas=document.createElement('canvas');self._shadowCanvas.setAttribute('width',self._width+self._padding*2);self._shadowCanvas.setAttribute('height',self._height+self._padding*2);self._shadowCtx=self._shadowCanvas.getContext('2d');if(typeof o.backgroundGradient!=='undefined'){self._backgroundColor=self._renderCtx.createLinearGradient(0,0,0,self.outerH);self._backgroundColor.addColorStop(0,o.backgroundGradient[0]);self._backgroundColor.addColorStop(1,o.backgroundGradient[1]);}else{self._backgroundColor=o.backgroundColor||'#fff';}
if(self._canvas){self._canvas.addEventListener('mousemove',function(e){e=e||window.event;self.mousemove(e,self);},false);self._canvas.addEventListener('mousedown',function(e){e=e||window.event;self.mousedown(e,self);},false);self._canvas.addEventListener('mouseup',function(e){e=e||window.event;self.mouseup(e,self);},false);}
var autoBlur=function(e){e=e||window.event;if(self._hasFocus&&!self._mouseDown){self.blur();}};window.addEventListener('mouseup',autoBlur,true);window.addEventListener('touchend',autoBlur,true);self._hiddenInput=document.createElement('input');self._hiddenInput.type='text';self._hiddenInput.style.position='absolute';self._hiddenInput.style.opacity=0;self._hiddenInput.style.pointerEvents='none';self._hiddenInput.style.zIndex=0;self._hiddenInput.style.transform='scale(0)';self._updateHiddenInput();if(self._maxlength){self._hiddenInput.maxLength=self._maxlength;}
document.body.appendChild(self._hiddenInput);self._hiddenInput.value=self._value;self._hiddenInput.addEventListener('keydown',function(e){e=e||window.event;if(self._hasFocus){window.focus();self._hiddenInput.focus();self.keydown(e,self);}});self._hiddenInput.addEventListener('keyup',function(e){e=e||window.event;self._value=self._hiddenInput.value;self._cursorPos=self._hiddenInput.selectionStart;self._selection=[self._hiddenInput.selectionStart,self._hiddenInput.selectionEnd];self.render();if(self._hasFocus){self._onkeyup(e,self);}});inputs.push(self);self._inputsIndex=inputs.length-1;self.render();};CanvasInput.prototype={canvas:function(data){var self=this;if(typeof data!=='undefined'){self._canvas=data;self._ctx=self._canvas.getContext('2d');return self.render();}else{return self._canvas;}},x:function(data){var self=this;if(typeof data!=='undefined'){self._x=data;self._updateHiddenInput();return self.render();}else{return self._x;}},y:function(data){var self=this;if(typeof data!=='undefined'){self._y=data;self._updateHiddenInput();return self.render();}else{return self._y;}},extraX:function(data){var self=this;if(typeof data!=='undefined'){self._extraX=data;self._updateHiddenInput();return self.render();}else{return self._extraX;}},extraY:function(data){var self=this;if(typeof data!=='undefined'){self._extraY=data;self._updateHiddenInput();return self.render();}else{return self._extraY;}},fontSize:function(data){var self=this;if(typeof data!=='undefined'){self._fontSize=data;return self.render();}else{return self._fontSize;}},fontFamily:function(data){var self=this;if(typeof data!=='undefined'){self._fontFamily=data;return self.render();}else{return self._fontFamily;}},fontColor:function(data){var self=this;if(typeof data!=='undefined'){self._fontColor=data;return self.render();}else{return self._fontColor;}},placeHolderColor:function(data){var self=this;if(typeof data!=='undefined'){self._placeHolderColor=data;return self.render();}else{return self._placeHolderColor;}},fontWeight:function(data){var self=this;if(typeof data!=='undefined'){self._fontWeight=data;return self.render();}else{return self._fontWeight;}},fontStyle:function(data){var self=this;if(typeof data!=='undefined'){self._fontStyle=data;return self.render();}else{return self._fontStyle;}},fontShadowColor:function(data){var self=this;if(typeof data!=='undefined'){self._fontShadowColor=data;return self.render();}else{return self._fontShadowColor;}},fontShadowBlur:function(data){var self=this;if(typeof data!=='undefined'){self._fontShadowBlur=data;return self.render();}else{return self._fontShadowBlur;}},fontShadowOffsetX:function(data){var self=this;if(typeof data!=='undefined'){self._fontShadowOffsetX=data;return self.render();}else{return self._fontShadowOffsetX;}},fontShadowOffsetY:function(data){var self=this;if(typeof data!=='undefined'){self._fontShadowOffsetY=data;return self.render();}else{return self._fontShadowOffsetY;}},width:function(data){var self=this;if(typeof data!=='undefined'){self._width=data;self._calcWH();self._updateCanvasWH();self._updateHiddenInput();return self.render();}else{return self._width;}},height:function(data){var self=this;if(typeof data!=='undefined'){self._height=data;self._calcWH();self._updateCanvasWH();self._updateHiddenInput();return self.render();}else{return self._height;}},padding:function(data){var self=this;if(typeof data!=='undefined'){self._padding=data;self._calcWH();self._updateCanvasWH();return self.render();}else{return self._padding;}},borderWidth:function(data){var self=this;if(typeof data!=='undefined'){self._borderWidth=data;self._calcWH();self._updateCanvasWH();return self.render();}else{return self._borderWidth;}},borderColor:function(data){var self=this;if(typeof data!=='undefined'){self._borderColor=data;return self.render();}else{return self._borderColor;}},borderRadius:function(data){var self=this;if(typeof data!=='undefined'){self._borderRadius=data;return self.render();}else{return self._borderRadius;}},backgroundColor:function(data){var self=this;if(typeof data!=='undefined'){self._backgroundColor=data;return self.render();}else{return self._backgroundColor;}},backgroundGradient:function(data){var self=this;if(typeof data!=='undefined'){self._backgroundColor=self._renderCtx.createLinearGradient(0,0,0,self.outerH);self._backgroundColor.addColorStop(0,data[0]);self._backgroundColor.addColorStop(1,data[1]);return self.render();}else{return self._backgroundColor;}},boxShadow:function(data,doReturn){var self=this;if(typeof data!=='undefined'){var boxShadow=data.split('px ');self._boxShadow={x:self._boxShadow==='none'?0:parseInt(boxShadow[0],10),y:self._boxShadow==='none'?0:parseInt(boxShadow[1],10),blur:self._boxShadow==='none'?0:parseInt(boxShadow[2],10),color:self._boxShadow==='none'?'':boxShadow[3]};if(self._boxShadow.x<0){self.shadowL=Math.abs(self._boxShadow.x)+self._boxShadow.blur;self.shadowR=self._boxShadow.blur+self._boxShadow.x;}else{self.shadowL=Math.abs(self._boxShadow.blur-self._boxShadow.x);self.shadowR=self._boxShadow.blur+self._boxShadow.x;}
if(self._boxShadow.y<0){self.shadowT=Math.abs(self._boxShadow.y)+self._boxShadow.blur;self.shadowB=self._boxShadow.blur+self._boxShadow.y;}else{self.shadowT=Math.abs(self._boxShadow.blur-self._boxShadow.y);self.shadowB=self._boxShadow.blur+self._boxShadow.y;}
self.shadowW=self.shadowL+self.shadowR;self.shadowH=self.shadowT+self.shadowB;self._calcWH();if(!doReturn){self._updateCanvasWH();return self.render();}}else{return self._boxShadow;}},innerShadow:function(data){var self=this;if(typeof data!=='undefined'){self._innerShadow=data;return self.render();}else{return self._innerShadow;}},selectionColor:function(data){var self=this;if(typeof data!=='undefined'){self._selectionColor=data;return self.render();}else{return self._selectionColor;}},placeHolder:function(data){var self=this;if(typeof data!=='undefined'){self._placeHolder=data;return self.render();}else{return self._placeHolder;}},value:function(data){var self=this;if(typeof data!=='undefined'){self._value=data+'';self._hiddenInput.value=data+'';self._cursorPos=self._clipText().length;self.render();return self;}else{return(self._value===self._placeHolder)?'':self._value;}},onsubmit:function(fn){var self=this;if(typeof fn!=='undefined'){self._onsubmit=fn;return self;}else{self._onsubmit();}},onkeydown:function(fn){var self=this;if(typeof fn!=='undefined'){self._onkeydown=fn;return self;}else{self._onkeydown();}},onkeyup:function(fn){var self=this;if(typeof fn!=='undefined'){self._onkeyup=fn;return self;}else{self._onkeyup();}},focus:function(pos){var self=this;if(!self._hasFocus){self._onfocus(self);for(var i=0;i<inputs.length;i++){if(inputs[i]._hasFocus){inputs[i].blur();}}}
if(!self._selectionUpdated){self._selection=[0,0];}else{delete self._selectionUpdated;}
self._hasFocus=true;if(self._readonly){self._hiddenInput.readOnly=true;}else{self._hiddenInput.readOnly=false;self._cursorPos=(typeof pos==='number')?pos:self._clipText().length;if(self._placeHolder===self._value){self._value='';self._hiddenInput.value='';}
self._cursor=true;if(self._cursorInterval){clearInterval(self._cursorInterval);}
self._cursorInterval=setInterval(function(){self._cursor=!self._cursor;self.render();},500);}
var hasSelection=(self._selection[0]>0||self._selection[1]>0);self._hiddenInput.focus();self._hiddenInput.selectionStart=hasSelection?self._selection[0]:self._cursorPos;self._hiddenInput.selectionEnd=hasSelection?self._selection[1]:self._cursorPos;return self.render();},blur:function(_this){var self=_this||this;self._onblur(self);if(self._cursorInterval){clearInterval(self._cursorInterval);}
self._hasFocus=false;self._cursor=false;self._selection=[0,0];self._hiddenInput.blur();if(self._value===''){self._value=self._placeHolder;}
return self.render();},keydown:function(e,self){var keyCode=e.which,isShift=e.shiftKey,key=null,startText,endText;if(self._readonly||!self._hasFocus){return;}
self._onkeydown(e,self);if(keyCode===65&&(e.ctrlKey||e.metaKey)){self.selectText();e.preventDefault();return self.render();}
if(keyCode===17||e.metaKey||e.ctrlKey){return self;}
if(keyCode===13){e.preventDefault();self._onsubmit(e,self);}else if(keyCode===9){e.preventDefault();if(inputs.length>1){var next=(inputs[self._inputsIndex+1])?self._inputsIndex+1:0;self.blur();setTimeout(function(){inputs[next].focus();},10);}}
self._value=self._hiddenInput.value;self._cursorPos=self._hiddenInput.selectionStart;self._selection=[0,0];return self.render();},click:function(e,self){var mouse=self._mousePos(e),x=mouse.x,y=mouse.y;if(self._endSelection){delete self._endSelection;delete self._selectionUpdated;return;}
if(self._canvas&&self._overInput(x,y)||!self._canvas){if(self._mouseDown){self._mouseDown=false;self.click(e,self);return self.focus(self._clickPos(x,y));}}else{return self.blur();}},mousemove:function(e,self){var mouse=self._mousePos(e),x=mouse.x,y=mouse.y,isOver=self._overInput(x,y);if(isOver&&self._canvas){self._canvas.style.cursor='text';self._wasOver=true;}else if(self._wasOver&&self._canvas){self._canvas.style.cursor='default';self._wasOver=false;}
if(self._hasFocus&&self._selectionStart>=0){var curPos=self._clickPos(x,y),start=Math.min(self._selectionStart,curPos),end=Math.max(self._selectionStart,curPos);if(!isOver){self._selectionUpdated=true;self._endSelection=true;delete self._selectionStart;self.render();return;}
if(self._selection[0]!==start||self._selection[1]!==end){self._selection=[start,end];self.render();}}},mousedown:function(e,self){var mouse=self._mousePos(e),x=mouse.x,y=mouse.y,isOver=self._overInput(x,y);self._mouseDown=isOver;if(self._hasFocus&&isOver){self._selectionStart=self._clickPos(x,y);}},mouseup:function(e,self){var mouse=self._mousePos(e),x=mouse.x,y=mouse.y;var isSelection=self._clickPos(x,y)!==self._selectionStart;if(self._hasFocus&&self._selectionStart>=0&&self._overInput(x,y)&&isSelection){self._selectionUpdated=true;delete self._selectionStart;self.render();}else{delete self._selectionStart;}
self.click(e,self);},selectText:function(range){var self=this,range=range||[0,self._value.length];setTimeout(function(){self._selection=[range[0],range[1]];self._hiddenInput.selectionStart=range[0];self._hiddenInput.selectionEnd=range[1];self.render();},1);return self;},renderCanvas:function(){return this._renderCanvas;},render:function(){var self=this,ctx=self._renderCtx,w=self.outerW,h=self.outerH,br=self._borderRadius,bw=self._borderWidth,sw=self.shadowW,sh=self.shadowH;if(!ctx){return;}
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);ctx.shadowOffsetX=self._boxShadow.x;ctx.shadowOffsetY=self._boxShadow.y;ctx.shadowBlur=self._boxShadow.blur;ctx.shadowColor=self._boxShadow.color;if(self._borderWidth>0){ctx.fillStyle=self._borderColor;self._roundedRect(ctx,self.shadowL,self.shadowT,w-sw,h-sh,br);ctx.fill();ctx.shadowOffsetX=0;ctx.shadowOffsetY=0;ctx.shadowBlur=0;}
self._drawTextBox(function(){ctx.shadowOffsetX=0;ctx.shadowOffsetY=0;ctx.shadowBlur=0;var text=self._clipText();if(self._type==='password'&&text){text=text.split('').map(()=>'*').join('')}
var paddingBorder=self._padding+self._borderWidth+self.shadowT;if(self._selection[1]>0){var selectOffset=self._textWidth(text.substring(0,self._selection[0])),selectWidth=self._textWidth(text.substring(self._selection[0],self._selection[1]));ctx.fillStyle=self._selectionColor;ctx.fillRect(paddingBorder+selectOffset,paddingBorder,selectWidth,self._height);}
if(self._cursor){var cursorOffset=self._textWidth(text.substring(0,self._cursorPos));ctx.fillStyle=self._fontColor;ctx.fillRect(paddingBorder+cursorOffset,paddingBorder,1,self._height);}
var textX=self._padding+self._borderWidth+self.shadowL,textY=Math.round(paddingBorder+self._height / 2);text=(text===''&&self._placeHolder)?self._placeHolder:text;ctx.fillStyle=(self._value!==''&&self._value!==self._placeHolder)?self._fontColor:self._placeHolderColor;ctx.font=self._fontStyle+' '+self._fontWeight+' '+self._fontSize+'px '+self._fontFamily;ctx.shadowColor=self._fontShadowColor;ctx.shadowBlur=self._fontShadowBlur;ctx.shadowOffsetX=self._fontShadowOffsetX;ctx.shadowOffsetY=self._fontShadowOffsetY;ctx.textAlign='left';ctx.textBaseline='middle';ctx.fillText(text,textX,textY);var innerShadow=self._innerShadow.split('px '),isOffsetX=self._innerShadow==='none'?0:parseInt(innerShadow[0],10),isOffsetY=self._innerShadow==='none'?0:parseInt(innerShadow[1],10),isBlur=self._innerShadow==='none'?0:parseInt(innerShadow[2],10),isColor=self._innerShadow==='none'?'':innerShadow[3];if(isBlur>0){var shadowCtx=self._shadowCtx,scw=shadowCtx.canvas.width,sch=shadowCtx.canvas.height;shadowCtx.clearRect(0,0,scw,sch);shadowCtx.shadowBlur=isBlur;shadowCtx.shadowColor=isColor;shadowCtx.shadowOffsetX=0;shadowCtx.shadowOffsetY=isOffsetY;shadowCtx.fillRect(-1*w,-100,3*w,100);shadowCtx.shadowOffsetX=isOffsetX;shadowCtx.shadowOffsetY=0;shadowCtx.fillRect(scw,-1*h,100,3*h);shadowCtx.shadowOffsetX=0;shadowCtx.shadowOffsetY=isOffsetY;shadowCtx.fillRect(-1*w,sch,3*w,100);shadowCtx.shadowOffsetX=isOffsetX;shadowCtx.shadowOffsetY=0;shadowCtx.fillRect(-100,-1*h,100,3*h);self._roundedRect(ctx,bw+self.shadowL,bw+self.shadowT,w-bw*2-sw,h-bw*2-sh,br);ctx.clip();ctx.drawImage(self._shadowCanvas,0,0,scw,sch,bw+self.shadowL,bw+self.shadowT,scw,sch);}
if(self._ctx){self._ctx.clearRect(self._x,self._y,ctx.canvas.width,ctx.canvas.height);self._ctx.drawImage(self._renderCanvas,self._x,self._y);}
return self;});},destroy:function(){var self=this;var index=inputs.indexOf(self);if(index!=-1){inputs.splice(index,1);}
if(self._hasFocus){self.blur();}
document.body.removeChild(self._hiddenInput);self._renderCanvas=null;self._shadowCanvas=null;self._renderCtx=null;},_drawTextBox:function(fn){var self=this,ctx=self._renderCtx,w=self.outerW,h=self.outerH,br=self._borderRadius,bw=self._borderWidth,sw=self.shadowW,sh=self.shadowH;if(self._backgroundImage===''){ctx.fillStyle=self._backgroundColor;self._roundedRect(ctx,bw+self.shadowL,bw+self.shadowT,w-bw*2-sw,h-bw*2-sh,br);ctx.fill();fn();}else{var img=new Image();img.src=self._backgroundImage;img.onload=function(){ctx.drawImage(img,0,0,img.width,img.height,bw+self.shadowL,bw+self.shadowT,w,h);fn();};}},_clearSelection:function(){var self=this;if(self._selection[1]>0){var start=self._selection[0],end=self._selection[1];self._value=self._value.substr(0,start)+self._value.substr(end);self._cursorPos=start;self._cursorPos=(self._cursorPos<0)?0:self._cursorPos;self._selection=[0,0];return true;}
return false;},_clipText:function(value){var self=this;value=(typeof value==='undefined')?self._value:value;var textWidth=self._textWidth(value),fillPer=textWidth /(self._width-self._padding),text=fillPer>1?value.substr(-1*Math.floor(value.length / fillPer)):value;return text+'';},_textWidth:function(text){var self=this,ctx=self._renderCtx;ctx.font=self._fontStyle+' '+self._fontWeight+' '+self._fontSize+'px '+self._fontFamily;ctx.textAlign='left';return ctx.measureText(text).width;},_calcWH:function(){var self=this;self.outerW=self._width+self._padding*2+self._borderWidth*2+self.shadowW;self.outerH=self._height+self._padding*2+self._borderWidth*2+self.shadowH;},_updateCanvasWH:function(){var self=this,oldW=self._renderCanvas.width,oldH=self._renderCanvas.height;self._renderCanvas.setAttribute('width',self.outerW);self._renderCanvas.setAttribute('height',self.outerH);self._shadowCanvas.setAttribute('width',self._width+self._padding*2);self._shadowCanvas.setAttribute('height',self._height+self._padding*2);if(self._ctx){self._ctx.clearRect(self._x,self._y,oldW,oldH);}},_updateHiddenInput:function(){var self=this;self._hiddenInput.style.left=(self._x+self._extraX+(self._canvas?self._canvas.offsetLeft:0))+'px';self._hiddenInput.style.top=(self._y+self._extraY+(self._canvas?self._canvas.offsetTop:0))+'px';self._hiddenInput.style.width=(self._width+self._padding*2)+'px';self._hiddenInput.style.height=(self._height+self._padding*2)+'px';},_roundedRect:function(ctx,x,y,w,h,r){if(w<2*r)r=w / 2;if(h<2*r)r=h / 2;ctx.beginPath();ctx.moveTo(x+r,y);ctx.lineTo(x+w-r,y);ctx.quadraticCurveTo(x+w,y,x+w,y+r);ctx.lineTo(x+w,y+h-r);ctx.quadraticCurveTo(x+w,y+h,x+w-r,y+h);ctx.lineTo(x+r,y+h);ctx.quadraticCurveTo(x,y+h,x,y+h-r);ctx.lineTo(x,y+r);ctx.quadraticCurveTo(x,y,x+r,y);ctx.closePath();},_overInput:function(x,y){var self=this,xLeft=x>=self._x+self._extraX,xRight=x<=self._x+self._extraX+self._width+self._padding*2,yTop=y>=self._y+self._extraY,yBottom=y<=self._y+self._extraY+self._height+self._padding*2;return xLeft&&xRight&&yTop&&yBottom;},_clickPos:function(x,y){var self=this,value=self._value;if(self._value===self._placeHolder){value='';}
var text=self._clipText(value),totalW=0,pos=text.length;if(x-(self._x+self._extraX)<self._textWidth(text)){for(var i=0;i<text.length;i++){totalW+=self._textWidth(text[i]);if(totalW>=x-(self._x+self._extraX)){pos=i;break;}}}
return pos;},_mousePos:function(e){var elm=e.target,x=e.pageX,y=e.pageY;if(e.touches&&e.touches.length){elm=e.touches[0].target;x=e.touches[0].pageX;y=e.touches[0].pageY;}else if(e.changedTouches&&e.changedTouches.length){elm=e.changedTouches[0].target;x=e.changedTouches[0].pageX;y=e.changedTouches[0].pageY;}
var style=document.defaultView.getComputedStyle(elm,undefined),paddingLeft=parseInt(style['paddingLeft'],10)||0,paddingTop=parseInt(style['paddingLeft'],10)||0,borderLeft=parseInt(style['borderLeftWidth'],10)||0,borderTop=parseInt(style['borderLeftWidth'],10)||0,htmlTop=document.body.parentNode.offsetTop||0,htmlLeft=document.body.parentNode.offsetLeft||0,offsetX=0,offsetY=0;if(typeof elm.offsetParent!=='undefined'){do{offsetX+=elm.offsetLeft;offsetY+=elm.offsetTop;}while((elm=elm.offsetParent));}
offsetX+=paddingLeft+borderLeft+htmlLeft;offsetY+=paddingTop+borderTop+htmlTop;return{x:x-offsetX,y:y-offsetY};}};})();