From 2a0595e8b3e6092cd6d23e5176dc1babaad9a9b1 Mon Sep 17 00:00:00 2001 From: marindrew Date: Tue, 27 Feb 2018 13:05:29 +0000 Subject: [PATCH 1/2] support for passwords --- CanvasInput.js | 6 ++++++ CanvasInput.min.js | 36 +++++++++++++++++++++++++++++++++++- README.md | 12 ++++++++++++ 3 files changed, 53 insertions(+), 1 deletion(-) diff --git a/CanvasInput.js b/CanvasInput.js index 6df2eeb..a14801f 100644 --- a/CanvasInput.js +++ b/CanvasInput.js @@ -60,6 +60,7 @@ self._hasFocus = false; self._selection = [0, 0]; self._wasOver = false; + self._type = o.type || 'text'; // parse box shadow self.boxShadow(self._boxShadow, true); @@ -1098,6 +1099,11 @@ // clip the text so that it fits within the box var text = self._clipText(); + // hide password field properties + if (self._type === 'password' && text) { + text = text.split('').map(() => '*').join('') + } + // draw the selection var paddingBorder = self._padding + self._borderWidth + self.shadowT; if (self._selection[1] > 0) { diff --git a/CanvasInput.min.js b/CanvasInput.min.js index 6c55aa3..2f28d9e 100644 --- a/CanvasInput.min.js +++ b/CanvasInput.min.js @@ -7,4 +7,38 @@ * * 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._fontShadowColor=t.fontShadowColor||"",n._fontShadowBlur=t.fontShadowBlur||0,n._fontShadowOffsetX=t.fontShadowOffsetX||0,n._fontShadowOffsetY=t.fontShadowOffsetY||0,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"),"undefined"!=typeof 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));var o=function(e){e=e||window.event,n._hasFocus&&!n._mouseDown&&n.blur()};window.addEventListener("mouseup",o,!0),window.addEventListener("touchend",o,!0),n._hiddenInput=document.createElement("input"),n._hiddenInput.type="text",n._hiddenInput.style.position="absolute",n._hiddenInput.style.opacity=0,n._hiddenInput.style.pointerEvents="none",n._hiddenInput.style.zIndex=0,n._hiddenInput.style.transform="scale(0)",n._updateHiddenInput(),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&&(window.focus(),n._hiddenInput.focus(),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._selection=[n._hiddenInput.selectionStart,n._hiddenInput.selectionEnd],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"undefined"!=typeof e?(t._canvas=e,t._ctx=t._canvas.getContext("2d"),t.render()):t._canvas},x:function(e){var t=this;return"undefined"!=typeof e?(t._x=e,t._updateHiddenInput(),t.render()):t._x},y:function(e){var t=this;return"undefined"!=typeof e?(t._y=e,t._updateHiddenInput(),t.render()):t._y},extraX:function(e){var t=this;return"undefined"!=typeof e?(t._extraX=e,t._updateHiddenInput(),t.render()):t._extraX},extraY:function(e){var t=this;return"undefined"!=typeof e?(t._extraY=e,t._updateHiddenInput(),t.render()):t._extraY},fontSize:function(e){var t=this;return"undefined"!=typeof e?(t._fontSize=e,t.render()):t._fontSize},fontFamily:function(e){var t=this;return"undefined"!=typeof e?(t._fontFamily=e,t.render()):t._fontFamily},fontColor:function(e){var t=this;return"undefined"!=typeof e?(t._fontColor=e,t.render()):t._fontColor},placeHolderColor:function(e){var t=this;return"undefined"!=typeof e?(t._placeHolderColor=e,t.render()):t._placeHolderColor},fontWeight:function(e){var t=this;return"undefined"!=typeof e?(t._fontWeight=e,t.render()):t._fontWeight},fontStyle:function(e){var t=this;return"undefined"!=typeof e?(t._fontStyle=e,t.render()):t._fontStyle},fontShadowColor:function(e){var t=this;return"undefined"!=typeof e?(t._fontShadowColor=e,t.render()):t._fontShadowColor},fontShadowBlur:function(e){var t=this;return"undefined"!=typeof e?(t._fontShadowBlur=e,t.render()):t._fontShadowBlur},fontShadowOffsetX:function(e){var t=this;return"undefined"!=typeof e?(t._fontShadowOffsetX=e,t.render()):t._fontShadowOffsetX},fontShadowOffsetY:function(e){var t=this;return"undefined"!=typeof e?(t._fontShadowOffsetY=e,t.render()):t._fontShadowOffsetY},width:function(e){var t=this;return"undefined"!=typeof e?(t._width=e,t._calcWH(),t._updateCanvasWH(),t._updateHiddenInput(),t.render()):t._width},height:function(e){var t=this;return"undefined"!=typeof e?(t._height=e,t._calcWH(),t._updateCanvasWH(),t._updateHiddenInput(),t.render()):t._height},padding:function(e){var t=this;return"undefined"!=typeof e?(t._padding=e,t._calcWH(),t._updateCanvasWH(),t.render()):t._padding},borderWidth:function(e){var t=this;return"undefined"!=typeof e?(t._borderWidth=e,t._calcWH(),t._updateCanvasWH(),t.render()):t._borderWidth},borderColor:function(e){var t=this;return"undefined"!=typeof e?(t._borderColor=e,t.render()):t._borderColor},borderRadius:function(e){var t=this;return"undefined"!=typeof e?(t._borderRadius=e,t.render()):t._borderRadius},backgroundColor:function(e){var t=this;return"undefined"!=typeof e?(t._backgroundColor=e,t.render()):t._backgroundColor},backgroundGradient:function(e){var t=this;return"undefined"!=typeof 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("undefined"==typeof e)return n._boxShadow;var o=e.split("px ");return n._boxShadow={x:"none"===n._boxShadow?0:parseInt(o[0],10),y:"none"===n._boxShadow?0:parseInt(o[1],10),blur:"none"===n._boxShadow?0:parseInt(o[2],10),color:"none"===n._boxShadow?"":o[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"undefined"!=typeof e?(t._innerShadow=e,t.render()):t._innerShadow},selectionColor:function(e){var t=this;return"undefined"!=typeof e?(t._selectionColor=e,t.render()):t._selectionColor},placeHolder:function(e){var t=this;return"undefined"!=typeof e?(t._placeHolder=e,t.render()):t._placeHolder},value:function(e){var t=this;return"undefined"!=typeof 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"undefined"!=typeof e?(t._onsubmit=e,t):void t._onsubmit()},onkeydown:function(e){var t=this;return"undefined"!=typeof e?(t._onkeydown=e,t):void t._onkeydown()},onkeyup:function(e){var t=this;return"undefined"!=typeof e?(t._onkeyup=e,t):void t._onkeyup()},focus:function(t){var n=this;if(!n._hasFocus){n._onfocus(n);for(var o=0;o0||n._selection[1]>0;return n._hiddenInput.focus(),n._hiddenInput.selectionStart=r?n._selection[0]:n._cursorPos,n._hiddenInput.selectionEnd=r?n._selection[1]:n._cursorPos,n.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._hiddenInput.blur(),""===t._value&&(t._value=t._placeHolder),t.render()},keydown:function(t,n){var o=t.which;t.shiftKey;if(!n._readonly&&n._hasFocus){if(n._onkeydown(t,n),65===o&&(t.ctrlKey||t.metaKey))return n.selectText(),t.preventDefault(),n.render();if(17===o||t.metaKey||t.ctrlKey)return n;if(13===o)t.preventDefault(),n._onsubmit(t,n);else if(9===o&&(t.preventDefault(),e.length>1)){var r=e[n._inputsIndex+1]?n._inputsIndex+1:0;n.blur(),setTimeout(function(){e[r].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),o=n.x,r=n.y;return t._endSelection?(delete t._endSelection,void delete t._selectionUpdated):t._canvas&&t._overInput(o,r)||!t._canvas?t._mouseDown?(t._mouseDown=!1,t.click(e,t),t.focus(t._clickPos(o,r))):void 0:t.blur()},mousemove:function(e,t){var n=t._mousePos(e),o=n.x,r=n.y,d=t._overInput(o,r);if(d&&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 a=t._clickPos(o,r),i=Math.min(t._selectionStart,a),_=Math.max(t._selectionStart,a);if(!d)return t._selectionUpdated=!0,t._endSelection=!0,delete t._selectionStart,void t.render();t._selection[0]===i&&t._selection[1]===_||(t._selection=[i,_],t.render())}},mousedown:function(e,t){var n=t._mousePos(e),o=n.x,r=n.y,d=t._overInput(o,r);t._mouseDown=d,t._hasFocus&&d&&(t._selectionStart=t._clickPos(o,r))},mouseup:function(e,t){var n=t._mousePos(e),o=n.x,r=n.y,d=t._clickPos(o,r)!==t._selectionStart;t._hasFocus&&t._selectionStart>=0&&t._overInput(o,r)&&d?(t._selectionUpdated=!0,delete t._selectionStart,t.render()):delete t._selectionStart,t.click(e,t)},selectText:function(e){var t=this,e=e||[0,t._value.length];return setTimeout(function(){t._selection=[e[0],e[1]],t._hiddenInput.selectionStart=e[0],t._hiddenInput.selectionEnd=e[1],t.render()},1),t},renderCanvas:function(){return this._renderCanvas},render:function(){var e=this,t=e._renderCtx,n=e.outerW,o=e.outerH,r=e._borderRadius,d=e._borderWidth,a=e.shadowW,i=e.shadowH;t&&(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-a,o-i,r),t.fill(),t.shadowOffsetX=0,t.shadowOffsetY=0,t.shadowBlur=0),e._drawTextBox(function(){t.shadowOffsetX=0,t.shadowOffsetY=0,t.shadowBlur=0;var _=e._clipText(),u=e._padding+e._borderWidth+e.shadowT;if(e._selection[1]>0){var s=e._textWidth(_.substring(0,e._selection[0])),l=e._textWidth(_.substring(e._selection[0],e._selection[1]));t.fillStyle=e._selectionColor,t.fillRect(u+s,u,l,e._height)}if(e._cursor){var h=e._textWidth(_.substring(0,e._cursorPos));t.fillStyle=e._fontColor,t.fillRect(u+h,u,1,e._height)}var c=e._padding+e._borderWidth+e.shadowL,f=Math.round(u+e._height/2);_=""===_&&e._placeHolder?e._placeHolder:_,t.fillStyle=""!==e._value&&e._value!==e._placeHolder?e._fontColor:e._placeHolderColor,t.font=e._fontStyle+" "+e._fontWeight+" "+e._fontSize+"px "+e._fontFamily,t.shadowColor=e._fontShadowColor,t.shadowBlur=e._fontShadowBlur,t.shadowOffsetX=e._fontShadowOffsetX,t.shadowOffsetY=e._fontShadowOffsetY,t.textAlign="left",t.textBaseline="middle",t.fillText(_,c,f);var p=e._innerShadow.split("px "),v="none"===e._innerShadow?0:parseInt(p[0],10),w="none"===e._innerShadow?0:parseInt(p[1],10),x="none"===e._innerShadow?0:parseInt(p[2],10),b="none"===e._innerShadow?"":p[3];if(x>0){var g=e._shadowCtx,y=g.canvas.width,S=g.canvas.height;g.clearRect(0,0,y,S),g.shadowBlur=x,g.shadowColor=b,g.shadowOffsetX=0,g.shadowOffsetY=w,g.fillRect(-1*n,-100,3*n,100),g.shadowOffsetX=v,g.shadowOffsetY=0,g.fillRect(y,-1*o,100,3*o),g.shadowOffsetX=0,g.shadowOffsetY=w,g.fillRect(-1*n,S,3*n,100),g.shadowOffsetX=v,g.shadowOffsetY=0,g.fillRect(-100,-1*o,100,3*o),e._roundedRect(t,d+e.shadowL,d+e.shadowT,n-2*d-a,o-2*d-i,r),t.clip(),t.drawImage(e._shadowCanvas,0,0,y,S,d+e.shadowL,d+e.shadowT,y,S)}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}))},destroy:function(){var t=this,n=e.indexOf(t);-1!=n&&e.splice(n,1),t._hasFocus&&t.blur(),document.body.removeChild(t._hiddenInput),t._renderCanvas=null,t._shadowCanvas=null,t._renderCtx=null},_drawTextBox:function(e){var t=this,n=t._renderCtx,o=t.outerW,r=t.outerH,d=t._borderRadius,a=t._borderWidth,i=t.shadowW,_=t.shadowH;if(""===t._backgroundImage)n.fillStyle=t._backgroundColor,t._roundedRect(n,a+t.shadowL,a+t.shadowT,o-2*a-i,r-2*a-_,d),n.fill(),e();else{var u=new Image;u.src=t._backgroundImage,u.onload=function(){n.drawImage(u,0,0,u.width,u.height,a+t.shadowL,a+t.shadowT,o,r),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="undefined"==typeof e?t._value:e;var n=t._textWidth(e),o=n/(t._width-t._padding),r=o>1?e.substr(-1*Math.floor(e.length/o)):e;return r+""},_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)},_updateHiddenInput:function(){var e=this;e._hiddenInput.style.left=e._x+e._extraX+(e._canvas?e._canvas.offsetLeft:0)+"px",e._hiddenInput.style.top=e._y+e._extraY+(e._canvas?e._canvas.offsetTop:0)+"px",e._hiddenInput.style.width=e._width+2*e._padding+"px",e._hiddenInput.style.height=e._height+2*e._padding+"px"},_roundedRect:function(e,t,n,o,r,d){2*d>o&&(d=o/2),2*d>r&&(d=r/2),e.beginPath(),e.moveTo(t+d,n),e.lineTo(t+o-d,n),e.quadraticCurveTo(t+o,n,t+o,n+d),e.lineTo(t+o,n+r-d),e.quadraticCurveTo(t+o,n+r,t+o-d,n+r),e.lineTo(t+d,n+r),e.quadraticCurveTo(t,n+r,t,n+r-d),e.lineTo(t,n+d),e.quadraticCurveTo(t,n,t+d,n),e.closePath()},_overInput:function(e,t){var n=this,o=e>=n._x+n._extraX,r=e<=n._x+n._extraX+n._width+2*n._padding,d=t>=n._y+n._extraY,a=t<=n._y+n._extraY+n._height+2*n._padding;return o&&r&&d&&a},_clickPos:function(e){var t=this,n=t._value;t._value===t._placeHolder&&(n="");var o=t._clipText(n),r=0,d=o.length;if(e-(t._x+t._extraX)=e-(t._x+t._extraX)){d=a;break}return d},_mousePos:function(e){var t=e.target,n=e.pageX,o=e.pageY;e.touches&&e.touches.length?(t=e.touches[0].target,n=e.touches[0].pageX,o=e.touches[0].pageY):e.changedTouches&&e.changedTouches.length&&(t=e.changedTouches[0].target,n=e.changedTouches[0].pageX,o=e.changedTouches[0].pageY);var r=document.defaultView.getComputedStyle(t,void 0),d=parseInt(r.paddingLeft,10)||0,a=parseInt(r.paddingLeft,10)||0,i=parseInt(r.borderLeftWidth,10)||0,_=parseInt(r.borderLeftWidth,10)||0,u=document.body.parentNode.offsetTop||0,s=document.body.parentNode.offsetLeft||0,l=0,h=0;if("undefined"!=typeof t.offsetParent)do l+=t.offsetLeft,h+=t.offsetTop;while(t=t.offsetParent);return l+=d+i+s,h+=a+_+u,{x:n-l,y:o-h}}}}(); \ No newline at end of file +(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;i0||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)=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};}};})(); \ No newline at end of file diff --git a/README.md b/README.md index 080b560..189575a 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,17 @@ var input = new CanvasInput({ }); ``` +##### Password input: +```html + +``` +```javascript +var input = new CanvasInput({ + canvas: document.getElementById('canvas'), + type: 'password' +}); +``` + ### Properties * **canvas**: `Object` *(`null` by default)* Specify a canvas element to draw the text box to (the off-DOM canvas can be accessed through a helper method if you want to leave this blank and handle it on your own). * **x**: `Number` *(`0` by default)* X-coordinate position on the canvas. @@ -95,6 +106,7 @@ var input = new CanvasInput({ * **selectionColor**: `String` *(`rgba(179, 212, 253, 0.8)` by default)* The default color for the text selection highlight. * **placeHolder**: `String` *(`''` by default)* The default place holder text. This text will disappear when the user focusses on the input. * **value**: `String` *(`''` by default)* Set the default value for an input. +* **type**: `String` *(`'text'` by default)* Set to `'password'` to cover passwords with asterix "`*`" * **onsubmit**: `Function` *(`function() {}` by default)* Callback fires when user hits the enter key. * **onkeydown**: `Function` *(`function() {}` by default)* Callback fires on key down. * **onkeyup**: `Function` *(`function() {}` by default)* Callback fires on key up. From 021f2bf02004c1d4d8eff356b7c28dd4c1591a8c Mon Sep 17 00:00:00 2001 From: marindrew Date: Tue, 27 Feb 2018 13:06:34 +0000 Subject: [PATCH 2/2] version change 1.2.8 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a200ad0..98f7c1d 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "description": "CanvasInput recreates and improves a full DOM element within HTML5 Canvas.", "homepage": "http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input", "filename": "CanvasInput.js", - "version": "1.2.7", + "version": "1.2.8", "repository": { "type": "git", "url": "https://github.com/goldfire/CanvasInput.git"