CanvasInput.min.js

/*!
 *  CanvasInput v1.1.4
 *  http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input
 *
 *  (c) 2013-2014, James Simpson of GoldFire Studios
 *  goldfirestudios.com
 *
 *  MIT License
 */
!function(){var e=[],t=window.CanvasInput=function(t){var n=this;t=t?t:{},n._canvas=t.canvas||null,n._ctx=n._canvas?n._canvas.getContext("2d"):null,n._x=t.x||0,n._y=t.y||0,n._extraX=t.extraX||0,n._extraY=t.extraY||0,n._fontSize=t.fontSize||14,n._fontFamily=t.fontFamily||"Arial",n._fontColor=t.fontColor||"#000",n._placeHolderColor=t.placeHolderColor||"#bfbebd",n._fontWeight=t.fontWeight||"normal",n._fontStyle=t.fontStyle||"normal",n._readonly=t.readonly||!1,n._maxlength=t.maxlength||null,n._width=t.width||150,n._height=t.height||n._fontSize,n._padding=t.padding>=0?t.padding:5,n._borderWidth=t.borderWidth>=0?t.borderWidth:1,n._borderColor=t.borderColor||"#959595",n._borderRadius=t.borderRadius>=0?t.borderRadius:3,n._backgroundImage=t.backgroundImage||"",n._boxShadow=t.boxShadow||"1px 1px 0px rgba(255, 255, 255, 1)",n._innerShadow=t.innerShadow||"0px 0px 4px rgba(0, 0, 0, 0.4)",n._selectionColor=t.selectionColor||"rgba(179, 212, 253, 0.8)",n._placeHolder=t.placeHolder||"",n._value=(t.value||n._placeHolder)+"",n._onsubmit=t.onsubmit||function(){},n._onkeydown=t.onkeydown||function(){},n._onkeyup=t.onkeyup||function(){},n._onfocus=t.onfocus||function(){},n._onblur=t.onblur||function(){},n._cursor=!1,n._cursorPos=0,n._hasFocus=!1,n._selection=[0,0],n._wasOver=!1,n.boxShadow(n._boxShadow,!0),n._calcWH(),n._renderCanvas=document.createElement("canvas"),n._renderCanvas.setAttribute("width",n.outerW),n._renderCanvas.setAttribute("height",n.outerH),n._renderCtx=n._renderCanvas.getContext("2d"),n._shadowCanvas=document.createElement("canvas"),n._shadowCanvas.setAttribute("width",n._width+2*n._padding),n._shadowCanvas.setAttribute("height",n._height+2*n._padding),n._shadowCtx=n._shadowCanvas.getContext("2d"),void 0!==t.backgroundGradient?(n._backgroundColor=n._renderCtx.createLinearGradient(0,0,0,n.outerH),n._backgroundColor.addColorStop(0,t.backgroundGradient[0]),n._backgroundColor.addColorStop(1,t.backgroundGradient[1])):n._backgroundColor=t.backgroundColor||"#fff",n._canvas&&(n._canvas.addEventListener("mousemove",function(e){e=e||window.event,n.mousemove(e,n)},!1),n._canvas.addEventListener("mousedown",function(e){e=e||window.event,n.mousedown(e,n)},!1),n._canvas.addEventListener("mouseup",function(e){e=e||window.event,n.mouseup(e,n)},!1)),window.addEventListener("mouseup",function(e){e=e||window.event,n._hasFocus&&!n._mouseDown&&n.blur()},!0),n._hiddenInput=document.createElement("input"),n._hiddenInput.type="text",n._hiddenInput.style.position="absolute",n._hiddenInput.style.opacity=0,n._hiddenInput.style.left=n._x+n._extraX+(n._canvas?n._canvas.offsetLeft:0)+"px",n._hiddenInput.style.top=n._y+n._extraY+(n._canvas?n._canvas.offsetTop:0)+"px",n._hiddenInput.style.width=n._width,n._hiddenInput.style.zIndex=0,n._maxlength&&(n._hiddenInput.maxLength=n._maxlength),document.body.appendChild(n._hiddenInput),n._hiddenInput.value=n._value,n._hiddenInput.addEventListener("keydown",function(e){e=e||window.event,n._hasFocus&&n.keydown(e,n)}),n._hiddenInput.addEventListener("keyup",function(e){e=e||window.event,n._value=n._hiddenInput.value,n._cursorPos=n._hiddenInput.selectionStart,n.render(),n._hasFocus&&n._onkeyup(e,n)}),e.push(n),n._inputsIndex=e.length-1,n.render()};t.prototype={canvas:function(e){var t=this;return void 0!==e?(t._canvas=e,t._ctx=t._canvas.getContext("2d"),t.render()):t._canvas},x:function(e){var t=this;return void 0!==e?(t._x=e,t.render()):t._x},y:function(e){var t=this;return void 0!==e?(t._y=e,t.render()):t._y},extraX:function(e){var t=this;return void 0!==e?(t._extraX=e,t.render()):t._extraX},extraY:function(e){var t=this;return void 0!==e?(t._extraY=e,t.render()):t._extraY},fontSize:function(e){var t=this;return void 0!==e?(t._fontSize=e,t.render()):t._fontSize},fontFamily:function(e){var t=this;return void 0!==e?(t._fontFamily=e,t.render()):t._fontFamily},fontColor:function(e){var t=this;return void 0!==e?(t._fontColor=e,t.render()):t._fontColor},placeHolderColor:function(e){var t=this;return void 0!==e?(t._placeHolderColor=e,t.render()):t._placeHolderColor},fontWeight:function(e){var t=this;return void 0!==e?(t._fontWeight=e,t.render()):t._fontWeight},fontStyle:function(e){var t=this;return void 0!==e?(t._fontStyle=e,t.render()):t._fontStyle},width:function(e){var t=this;return void 0!==e?(t._width=e,t._calcWH(),t._updateCanvasWH(),t.render()):t._width},height:function(e){var t=this;return void 0!==e?(t._height=e,t._calcWH(),t._updateCanvasWH(),t.render()):t._height},padding:function(e){var t=this;return void 0!==e?(t._padding=e,t._calcWH(),t._updateCanvasWH(),t.render()):t._padding},borderWidth:function(e){var t=this;return void 0!==e?(t._borderWidth=e,t._calcWH(),t._updateCanvasWH(),t.render()):t._borderWidth},borderColor:function(e){var t=this;return void 0!==e?(t._borderColor=e,t.render()):t._borderColor},borderRadius:function(e){var t=this;return void 0!==e?(t._borderRadius=e,t.render()):t._borderRadius},backgroundColor:function(e){var t=this;return void 0!==e?(t._backgroundColor=e,t.render()):t._backgroundColor},backgroundGradient:function(e){var t=this;return void 0!==e?(t._backgroundColor=t._renderCtx.createLinearGradient(0,0,0,t.outerH),t._backgroundColor.addColorStop(0,e[0]),t._backgroundColor.addColorStop(1,e[1]),t.render()):t._backgroundColor},boxShadow:function(e,t){var n=this;if(void 0===e)return n._boxShadow;var r=e.split("px ");return n._boxShadow={x:"none"===n._boxShadow?0:parseInt(r[0],10),y:"none"===n._boxShadow?0:parseInt(r[1],10),blur:"none"===n._boxShadow?0:parseInt(r[2],10),color:"none"===n._boxShadow?"":r[3]},n._boxShadow.x<0?(n.shadowL=Math.abs(n._boxShadow.x)+n._boxShadow.blur,n.shadowR=n._boxShadow.blur+n._boxShadow.x):(n.shadowL=Math.abs(n._boxShadow.blur-n._boxShadow.x),n.shadowR=n._boxShadow.blur+n._boxShadow.x),n._boxShadow.y<0?(n.shadowT=Math.abs(n._boxShadow.y)+n._boxShadow.blur,n.shadowB=n._boxShadow.blur+n._boxShadow.y):(n.shadowT=Math.abs(n._boxShadow.blur-n._boxShadow.y),n.shadowB=n._boxShadow.blur+n._boxShadow.y),n.shadowW=n.shadowL+n.shadowR,n.shadowH=n.shadowT+n.shadowB,n._calcWH(),t?void 0:(n._updateCanvasWH(),n.render())},innerShadow:function(e){var t=this;return void 0!==e?(t._innerShadow=e,t.render()):t._innerShadow},selectionColor:function(e){var t=this;return void 0!==e?(t._selectionColor=e,t.render()):t._selectionColor},placeHolder:function(e){var t=this;return void 0!==e?(t._placeHolder=e,t.render()):t._placeHolder},value:function(e){var t=this;return void 0!==e?(t._value=e+"",t._hiddenInput.value=e+"",t._cursorPos=t._clipText().length,t.render(),t):t._value===t._placeHolder?"":t._value},onsubmit:function(e){var t=this;return void 0!==e?(t._onsubmit=e,t):(t._onsubmit(),void 0)},onkeydown:function(e){var t=this;return void 0!==e?(t._onkeydown=e,t):(t._onkeydown(),void 0)},onkeyup:function(e){var t=this;return void 0!==e?(t._onkeyup=e,t):(t._onkeyup(),void 0)},focus:function(t){var n,r=this;if(!r._readonly){if(!r._hasFocus){r._onfocus(r);for(var i=0;i<e.length;i++)e[i]._hasFocus&&e[i].blur()}r._selectionUpdated?delete r._selectionUpdated:r._selection=[0,0],r._cursorPos="number"==typeof t?t:r._clipText().length,r._placeHolder===r._value&&(r._value="",r._hiddenInput.value=""),r._hasFocus=!0,r._cursor=!0,r._cursorInterval&&clearInterval(r._cursorInterval),r._cursorInterval=setInterval(function(){r._cursor=!r._cursor,r.render()},500);var s=navigator.userAgent.toLowerCase(),o=s.indexOf("chrome")>=0&&s.indexOf("mobile")>=0&&s.indexOf("android")>=0,u=void 0!==window.orientation;u&&!o&&document&&document.createElement&&(n=document.createElement("input"))?(n.type="text",n.style.opacity=0,n.style.position="absolute",n.style.left=r._x+r._extraX+(r._canvas?r._canvas.offsetLeft:0)+"px",n.style.top=r._y+r._extraY+(r._canvas?r._canvas.offsetTop:0)+"px",n.style.width=r._width,n.style.height=0,document.body.appendChild(n),n.focus(),n.addEventListener("blur",function(){r.blur(r)},!1)):u&&r.value(prompt(r._placeHolder)||"");var a=r._selection[0]>0||r._selection[1]>0;return r._hiddenInput.focus(),r._hiddenInput.selectionStart=a?r._selection[0]:r._cursorPos,r._hiddenInput.selectionEnd=a?r._selection[1]:r._cursorPos,r.render()}},blur:function(e){var t=e||this;return t._onblur(t),t._cursorInterval&&clearInterval(t._cursorInterval),t._hasFocus=!1,t._cursor=!1,t._selection=[0,0],""===t._value&&(t._value=t._placeHolder),t.render()},keydown:function(t,n){{var r=t.which;t.shiftKey}if(n._hasFocus){if(n._onkeydown(t,n),65===r&&(t.ctrlKey||t.metaKey))return n._selection=[0,n._value.length],n._hiddenInput.selectionStart=0,n._hiddenInput.selectionEnd=n._value.length,t.preventDefault(),n.render();if(17===r||t.metaKey||t.ctrlKey)return n;if(13===r)t.preventDefault(),n._onsubmit(t,n);else if(9===r&&(t.preventDefault(),e.length>1)){var i=e[n._inputsIndex+1]?n._inputsIndex+1:0;n.blur(),setTimeout(function(){e[i].focus()},10)}return n._value=n._hiddenInput.value,n._cursorPos=n._hiddenInput.selectionStart,n._selection=[0,0],n.render()}},click:function(e,t){var n=t._mousePos(e),r=n.x,i=n.y;return t._endSelection?(delete t._endSelection,delete t._selectionUpdated,void 0):t._canvas&&t._overInput(r,i)||!t._canvas?t._mouseDown?(t._mouseDown=!1,t.click(e,t),t.focus(t._clickPos(r,i))):void 0:t.blur()},mousemove:function(e,t){var n=t._mousePos(e),r=n.x,i=n.y,s=t._overInput(r,i);if(s&&t._canvas?(t._canvas.style.cursor="text",t._wasOver=!0):t._wasOver&&t._canvas&&(t._canvas.style.cursor="default",t._wasOver=!1),t._hasFocus&&t._selectionStart>=0){var o=t._clickPos(r,i),u=Math.min(t._selectionStart,o),a=Math.max(t._selectionStart,o);if(!s)return t._selectionUpdated=!0,t._endSelection=!0,delete t._selectionStart,t.render(),void 0;(t._selection[0]!==u||t._selection[1]!==a)&&(t._selection=[u,a],t.render())}},mousedown:function(e,t){var n=t._mousePos(e),r=n.x,i=n.y,s=t._overInput(r,i);t._mouseDown=s,t._hasFocus&&s&&(t._selectionStart=t._clickPos(r,i))},mouseup:function(e,t){var n=t._mousePos(e),r=n.x,i=n.y,s=t._clickPos(r,i)!==t._selectionStart;t._hasFocus&&t._selectionStart>=0&&t._overInput(r,i)&&s?(t._selectionUpdated=!0,delete t._selectionStart,t.render()):delete t._selectionStart,t.click(e,t)},renderCanvas:function(){return this._renderCanvas},render:function(){var e=this,t=e._renderCtx,n=e.outerW,r=e.outerH,i=e._borderRadius,s=e._borderWidth,o=e.shadowW,u=e.shadowH;t.clearRect(0,0,t.canvas.width,t.canvas.height),t.shadowOffsetX=e._boxShadow.x,t.shadowOffsetY=e._boxShadow.y,t.shadowBlur=e._boxShadow.blur,t.shadowColor=e._boxShadow.color,e._borderWidth>0&&(t.fillStyle=e._borderColor,e._roundedRect(t,e.shadowL,e.shadowT,n-o,r-u,i),t.fill(),t.shadowOffsetX=0,t.shadowOffsetY=0,t.shadowBlur=0),e._drawTextBox(function(){t.shadowOffsetX=0,t.shadowOffsetY=0,t.shadowBlur=0;var f=e._clipText(),l=e._padding+e._borderWidth+e.shadowT;if(e._selection[1]>0){var c=e._textWidth(f.substring(0,e._selection[0])),h=e._textWidth(f.substring(e._selection[0],e._selection[1]));t.fillStyle=e._selectionColor,t.fillRect(l+c,l,h,e._height)}if(e._cursor){var p=e._textWidth(f.substring(0,e._cursorPos));t.fillStyle=e._fontColor,t.fillRect(l+p,l,1,e._height)}var v=e._padding+e._borderWidth+e.shadowL,m=Math.round(l+e._height/2);f=""===f&&e._placeHolder?e._placeHolder:f,t.fillStyle=""!==e._value&&e._value!==e._placeHolder?e._fontColor:e._placeHolderColor,t.font=e._fontStyle+" "+e._fontWeight+" "+e._fontSize+"px "+e._fontFamily,t.textAlign="left",t.textBaseline="middle",t.fillText(f,v,m);var g=e._innerShadow.split("px "),y="none"===e._innerShadow?0:parseInt(g[0],10),b="none"===e._innerShadow?0:parseInt(g[1],10),w="none"===e._innerShadow?0:parseInt(g[2],10),E="none"===e._innerShadow?"":g[3];if(w>0){var S=e._shadowCtx,x=S.canvas.width,T=S.canvas.height;S.clearRect(0,0,x,T),S.shadowBlur=w,S.shadowColor=E,S.shadowOffsetX=0,S.shadowOffsetY=b,S.fillRect(-1*n,-100,3*n,100),S.shadowOffsetX=y,S.shadowOffsetY=0,S.fillRect(x,-1*r,100,3*r),S.shadowOffsetX=0,S.shadowOffsetY=b,S.fillRect(-1*n,T,3*n,100),S.shadowOffsetX=y,S.shadowOffsetY=0,S.fillRect(-100,-1*r,100,3*r),e._roundedRect(t,s+e.shadowL,s+e.shadowT,n-2*s-o,r-2*s-u,i),t.clip(),t.drawImage(e._shadowCanvas,0,0,x,T,s+e.shadowL,s+e.shadowT,x,T)}return e._ctx&&(e._ctx.clearRect(e._x,e._y,t.canvas.width,t.canvas.height),e._ctx.drawImage(e._renderCanvas,e._x,e._y)),e})},_drawTextBox:function(e){var t=this,n=t._renderCtx,r=t.outerW,i=t.outerH,s=t._borderRadius,o=t._borderWidth,u=t.shadowW,a=t.shadowH;if(""===t._backgroundImage)n.fillStyle=t._backgroundColor,t._roundedRect(n,o+t.shadowL,o+t.shadowT,r-2*o-u,i-2*o-a,s),n.fill(),e();else{var f=new Image;f.src=t._backgroundImage,f.onload=function(){n.drawImage(f,0,0,f.width,f.height,o+t.shadowL,o+t.shadowT,r,i),e()}}},_clearSelection:function(){var e=this;if(e._selection[1]>0){var t=e._selection[0],n=e._selection[1];return e._value=e._value.substr(0,t)+e._value.substr(n),e._cursorPos=t,e._cursorPos=e._cursorPos<0?0:e._cursorPos,e._selection=[0,0],!0}return!1},_clipText:function(e){var t=this;e=void 0===e?t._value:e;var n=t._textWidth(e),r=n/(t._width-t._padding),i=r>1?e.substr(-1*Math.floor(e.length/r)):e;return i+""},_textWidth:function(e){var t=this,n=t._renderCtx;return n.font=t._fontStyle+" "+t._fontWeight+" "+t._fontSize+"px "+t._fontFamily,n.textAlign="left",n.measureText(e).width},_calcWH:function(){var e=this;e.outerW=e._width+2*e._padding+2*e._borderWidth+e.shadowW,e.outerH=e._height+2*e._padding+2*e._borderWidth+e.shadowH},_updateCanvasWH:function(){var e=this,t=e._renderCanvas.width,n=e._renderCanvas.height;e._renderCanvas.setAttribute("width",e.outerW),e._renderCanvas.setAttribute("height",e.outerH),e._shadowCanvas.setAttribute("width",e._width+2*e._padding),e._shadowCanvas.setAttribute("height",e._height+2*e._padding),e._ctx&&e._ctx.clearRect(e._x,e._y,t,n)},_roundedRect:function(e,t,n,r,i,s){2*s>r&&(s=r/2),2*s>i&&(s=i/2),e.beginPath(),e.moveTo(t+s,n),e.lineTo(t+r-s,n),e.quadraticCurveTo(t+r,n,t+r,n+s),e.lineTo(t+r,n+i-s),e.quadraticCurveTo(t+r,n+i,t+r-s,n+i),e.lineTo(t+s,n+i),e.quadraticCurveTo(t,n+i,t,n+i-s),e.lineTo(t,n+s),e.quadraticCurveTo(t,n,t+s,n),e.closePath()},_overInput:function(e,t){var n=this,r=e>=n._x+n._extraX,i=e<=n._x+n._extraX+n._width+2*n._padding,s=t>=n._y+n._extraY,o=t<=n._y+n._extraY+n._height+2*n._padding;return r&&i&&s&&o},_clickPos:function(e){var t=this,n=t._value;t._value===t._placeHolder&&(n="");var r=t._clipText(n),i=0,s=r.length;if(e-(t._x+t._extraX)<t._textWidth(r))for(var o=0;o<r.length;o++)if(i+=t._textWidth(r[o]),i>=e-(t._x+t._extraX)){s=o;break}return s},_mousePos:function(e){var t=e.target,n=document.defaultView.getComputedStyle(t,void 0),r=parseInt(n.paddingLeft,10)||0,i=parseInt(n.paddingLeft,10)||0,s=parseInt(n.borderLeftWidth,10)||0,o=parseInt(n.borderLeftWidth,10)||0,u=document.body.parentNode.offsetTop||0,a=document.body.parentNode.offsetLeft||0,f=0,l=0;if(void 0!==t.offsetParent)do f+=t.offsetLeft,l+=t.offsetTop;while(t=t.offsetParent);return f+=r+s+a,l+=i+o+u,{x:e.pageX-f,y:e.pageY-l}}}}();