From 8c5698aa7f6dbdfbf37b6c5dcea47c980f5cf6f3 Mon Sep 17 00:00:00 2001 From: Benji Kay Date: Thu, 20 Aug 2015 11:40:40 -0500 Subject: [PATCH 1/7] add createGetterSetter method to reduce code redundancy --- CanvasInput.js | 317 +++++++------------------------------------------ 1 file changed, 45 insertions(+), 272 deletions(-) diff --git a/CanvasInput.js b/CanvasInput.js index 098f7d9..5079eea 100644 --- a/CanvasInput.js +++ b/CanvasInput.js @@ -165,6 +165,51 @@ }; // setup the prototype + + /** + * Attaches basic getter/setter methods for a given property name to the CanvasInput + * @param {String} propName Name of property for which to create get/set method + * @return {Mixed} CanvasInput or current property value + */ + var createGetterSetter = function(propName) { + var self = this; + var privatePropName = '_' + propName; + + self[propName] = function getterSetter(data) { + if (typeof data !== 'undefined') { + self[privatePropName] = data; + + return self.render(); + } else { + return self[privatePropName]; + } + }; + }; + + // properties which use the basic getter/setter method + var basicProperties = [ + 'x', // The pixel position along the x-coordinate. + 'y', // The pixel position along the y-coordinate. + 'extraX', // The extra x-coordinate position (generally used when no canvas is specified). + 'extraY', // The extra y-coordinate position (generally used when no canvas is specified). + 'fontSize', + 'fontFamily', + 'fontColor', + 'placeHolderColor', + 'fontWeight', + 'fontStyle', + 'borderColor', + 'borderRadius', + 'backgroundColor', + 'innerShadow', // In the format of a CSS box shadow (1px 1px 1px rgba(0, 0, 0.5)). + 'selectionColor', + 'placeHolder', + ]; + + basicProperties.forEach(function() { + createGetterSetter.bind(CanvasInput.prototype); + }); + CanvasInput.prototype = { /** * Get/set the main canvas. @@ -184,176 +229,6 @@ } }, - /** - * Get/set the x-position. - * @param {Number} data The pixel position along the x-coordinate. - * @return {Mixed} CanvasInput or current x-value. - */ - x: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._x = data; - - return self.render(); - } else { - return self._x; - } - }, - - /** - * Get/set the y-position. - * @param {Number} data The pixel position along the y-coordinate. - * @return {Mixed} CanvasInput or current y-value. - */ - y: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._y = data; - - return self.render(); - } else { - return self._y; - } - }, - - /** - * Get/set the extra x-position (generally used when no canvas is specified). - * @param {Number} data The pixel position along the x-coordinate. - * @return {Mixed} CanvasInput or current x-value. - */ - extraX: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._extraX = data; - - return self.render(); - } else { - return self._extraX; - } - }, - - /** - * Get/set the extra y-position (generally used when no canvas is specified). - * @param {Number} data The pixel position along the y-coordinate. - * @return {Mixed} CanvasInput or current y-value. - */ - extraY: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._extraY = data; - - return self.render(); - } else { - return self._extraY; - } - }, - - /** - * Get/set the font size. - * @param {Number} data Font size. - * @return {Mixed} CanvasInput or current font size. - */ - fontSize: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._fontSize = data; - - return self.render(); - } else { - return self._fontSize; - } - }, - - /** - * Get/set the font family. - * @param {String} data Font family. - * @return {Mixed} CanvasInput or current font family. - */ - fontFamily: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._fontFamily = data; - - return self.render(); - } else { - return self._fontFamily; - } - }, - - /** - * Get/set the font color. - * @param {String} data Font color. - * @return {Mixed} CanvasInput or current font color. - */ - fontColor: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._fontColor = data; - - return self.render(); - } else { - return self._fontColor; - } - }, - - /** - * Get/set the place holder font color. - * @param {String} data Font color. - * @return {Mixed} CanvasInput or current place holder font color. - */ - placeHolderColor: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._placeHolderColor = data; - - return self.render(); - } else { - return self._placeHolderColor; - } - }, - - /** - * Get/set the font weight. - * @param {String} data Font weight. - * @return {Mixed} CanvasInput or current font weight. - */ - fontWeight: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._fontWeight = data; - - return self.render(); - } else { - return self._fontWeight; - } - }, - - /** - * Get/set the font style. - * @param {String} data Font style. - * @return {Mixed} CanvasInput or current font style. - */ - fontStyle: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._fontStyle = data; - - return self.render(); - } else { - return self._fontStyle; - } - }, - /** * Get/set the width of the text box. * @param {Number} data Width in pixels. @@ -430,57 +305,6 @@ } }, - /** - * Get/set the border color. - * @param {String} data Border color. - * @return {Mixed} CanvasInput or current border color. - */ - borderColor: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._borderColor = data; - - return self.render(); - } else { - return self._borderColor; - } - }, - - /** - * Get/set the border radius. - * @param {Number} data Border radius. - * @return {Mixed} CanvasInput or current border radius. - */ - borderRadius: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._borderRadius = data; - - return self.render(); - } else { - return self._borderRadius; - } - }, - - /** - * Get/set the background color. - * @param {Number} data Background color. - * @return {Mixed} CanvasInput or current background color. - */ - backgroundColor: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._backgroundColor = data; - - return self.render(); - } else { - return self._backgroundColor; - } - }, - /** * Get/set the background gradient. * @param {Number} data Background gradient. @@ -555,57 +379,6 @@ } }, - /** - * Get/set the inner shadow. - * @param {String} data In the format of a CSS box shadow (1px 1px 1px rgba(0, 0, 0.5)). - * @return {Mixed} CanvasInput or current inner shadow. - */ - innerShadow: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._innerShadow = data; - - return self.render(); - } else { - return self._innerShadow; - } - }, - - /** - * Get/set the text selection color. - * @param {String} data Color. - * @return {Mixed} CanvasInput or current selection color. - */ - selectionColor: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._selectionColor = data; - - return self.render(); - } else { - return self._selectionColor; - } - }, - - /** - * Get/set the place holder text. - * @param {String} data Place holder text. - * @return {Mixed} CanvasInput or current place holder text. - */ - placeHolder: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._placeHolder = data; - - return self.render(); - } else { - return self._placeHolder; - } - }, - /** * Get/set the current text box value. * @param {String} data Text value. From 108aba8a49674e364164c6b4000c953b526c9ba8 Mon Sep 17 00:00:00 2001 From: Benji Kay Date: Fri, 21 Aug 2015 08:41:22 -0500 Subject: [PATCH 2/7] fix typos (with->width) --- CanvasInput.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CanvasInput.js b/CanvasInput.js index 5079eea..f1c5e72 100644 --- a/CanvasInput.js +++ b/CanvasInput.js @@ -969,7 +969,7 @@ }, /** - * Gets the pixel with of passed text. + * Gets the pixel width of passed text. * @param {String} text The text to measure. * @return {Number} The measured width. */ @@ -984,7 +984,7 @@ }, /** - * Recalculate the outer with and height of the text box. + * Recalculate the outer width and height of the text box. */ _calcWH: function() { var self = this; From 6e726f2c5066a01d41c64bfc5a22c5411cc0c67b Mon Sep 17 00:00:00 2001 From: Benji Kay Date: Fri, 21 Aug 2015 08:42:20 -0500 Subject: [PATCH 3/7] fix typos (setup->set up) --- CanvasInput.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/CanvasInput.js b/CanvasInput.js index f1c5e72..89e701a 100644 --- a/CanvasInput.js +++ b/CanvasInput.js @@ -19,7 +19,7 @@ o = o ? o : {}; - // setup the defaults + // set up the defaults self._canvas = o.canvas || null; self._ctx = self._canvas ? self._canvas.getContext('2d') : null; self._x = o.x || 0; @@ -63,19 +63,19 @@ // calculate the full width and height with padding, borders and shadows self._calcWH(); - // setup the off-DOM canvas + // set up the off-DOM canvas self._renderCanvas = document.createElement('canvas'); self._renderCanvas.setAttribute('width', self.outerW); self._renderCanvas.setAttribute('height', self.outerH); self._renderCtx = self._renderCanvas.getContext('2d'); - // setup another off-DOM canvas for inner-shadows + // set up another off-DOM canvas for inner-shadows 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'); - // setup the background color + // set up the background color if (typeof o.backgroundGradient !== 'undefined') { self._backgroundColor = self._renderCtx.createLinearGradient( 0, @@ -89,7 +89,7 @@ self._backgroundColor = o.backgroundColor || '#fff'; } - // setup main canvas events + // set up main canvas events if (self._canvas) { self._canvas.addEventListener('mousemove', function(e) { e = e || window.event; @@ -107,7 +107,7 @@ }, false); } - // setup a global mouseup to blur the input outside of the canvas + // set up a global mouseup to blur the input outside of the canvas window.addEventListener('mouseup', function(e) { e = e || window.event; @@ -133,7 +133,7 @@ document.body.appendChild(self._hiddenInput); self._hiddenInput.value = self._value; - // setup the keydown listener + // set up the keydown listener self._hiddenInput.addEventListener('keydown', function(e) { e = e || window.event; @@ -142,7 +142,7 @@ } }); - // setup the keyup listener + // set up the keyup listener self._hiddenInput.addEventListener('keyup', function(e) { e = e || window.event; @@ -164,7 +164,7 @@ self.render(); }; - // setup the prototype + // set up the prototype /** * Attaches basic getter/setter methods for a given property name to the CanvasInput @@ -498,7 +498,7 @@ self._cursor = true; - // setup cursor interval + // set up cursor interval if (self._cursorInterval) { clearInterval(self._cursorInterval); } @@ -676,7 +676,7 @@ y = mouse.y, isOver = self._overInput(x, y); - // setup the 'click' event + // set up the 'click' event self._mouseDown = isOver; // start the selection drag if inside the input @@ -758,7 +758,7 @@ // clear the canvas ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); - // setup the box shadow + // set up the box shadow ctx.shadowOffsetX = self._boxShadow.x; ctx.shadowOffsetY = self._boxShadow.y; ctx.shadowBlur = self._boxShadow.blur; From c9293e838a3fb1221a686ef13095bb49a11ae052 Mon Sep 17 00:00:00 2001 From: Benji Kay Date: Fri, 21 Aug 2015 08:43:15 -0500 Subject: [PATCH 4/7] fix typos (place holder->placeholder) --- CanvasInput.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CanvasInput.js b/CanvasInput.js index 89e701a..c387258 100644 --- a/CanvasInput.js +++ b/CanvasInput.js @@ -490,7 +490,7 @@ // update the cursor position self._cursorPos = (typeof pos === 'number') ? pos : self._clipText().length; - // clear the place holder + // clear the placeholder if (self._placeHolder === self._value) { self._value = ''; self._hiddenInput.value = ''; @@ -534,7 +534,7 @@ self._selection = [0, 0]; self._hiddenInput.blur(); - // fill the place holder + // fill the placeholder if (self._value === '') { self._value = self._placeHolder; } From 7e17e64e1e3e8e81f2834880f438cbbfe51bbb38 Mon Sep 17 00:00:00 2001 From: Benji Kay Date: Fri, 21 Aug 2015 08:48:56 -0500 Subject: [PATCH 5/7] update createGetterSetter to support dimensional properties --- CanvasInput.js | 183 +++++++++++++++++-------------------------------- 1 file changed, 62 insertions(+), 121 deletions(-) diff --git a/CanvasInput.js b/CanvasInput.js index c387258..fed2f4d 100644 --- a/CanvasInput.js +++ b/CanvasInput.js @@ -165,51 +165,7 @@ }; // set up the prototype - - /** - * Attaches basic getter/setter methods for a given property name to the CanvasInput - * @param {String} propName Name of property for which to create get/set method - * @return {Mixed} CanvasInput or current property value - */ - var createGetterSetter = function(propName) { - var self = this; - var privatePropName = '_' + propName; - - self[propName] = function getterSetter(data) { - if (typeof data !== 'undefined') { - self[privatePropName] = data; - - return self.render(); - } else { - return self[privatePropName]; - } - }; - }; - - // properties which use the basic getter/setter method - var basicProperties = [ - 'x', // The pixel position along the x-coordinate. - 'y', // The pixel position along the y-coordinate. - 'extraX', // The extra x-coordinate position (generally used when no canvas is specified). - 'extraY', // The extra y-coordinate position (generally used when no canvas is specified). - 'fontSize', - 'fontFamily', - 'fontColor', - 'placeHolderColor', - 'fontWeight', - 'fontStyle', - 'borderColor', - 'borderRadius', - 'backgroundColor', - 'innerShadow', // In the format of a CSS box shadow (1px 1px 1px rgba(0, 0, 0.5)). - 'selectionColor', - 'placeHolder', - ]; - - basicProperties.forEach(function() { - createGetterSetter.bind(CanvasInput.prototype); - }); - + // (methods using standard getter/setter will be added dynamically below the prototype object literal) CanvasInput.prototype = { /** * Get/set the main canvas. @@ -229,82 +185,6 @@ } }, - /** - * Get/set the width of the text box. - * @param {Number} data Width in pixels. - * @return {Mixed} CanvasInput or current width. - */ - width: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._width = data; - self._calcWH(); - self._updateCanvasWH(); - - return self.render(); - } else { - return self._width; - } - }, - - /** - * Get/set the height of the text box. - * @param {Number} data Height in pixels. - * @return {Mixed} CanvasInput or current height. - */ - height: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._height = data; - self._calcWH(); - self._updateCanvasWH(); - - return self.render(); - } else { - return self._height; - } - }, - - /** - * Get/set the padding of the text box. - * @param {Number} data Padding in pixels. - * @return {Mixed} CanvasInput or current padding. - */ - padding: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._padding = data; - self._calcWH(); - self._updateCanvasWH(); - - return self.render(); - } else { - return self._padding; - } - }, - - /** - * Get/set the border width. - * @param {Number} data Border width. - * @return {Mixed} CanvasInput or current border width. - */ - borderWidth: function(data) { - var self = this; - - if (typeof data !== 'undefined') { - self._borderWidth = data; - self._calcWH(); - self._updateCanvasWH(); - - return self.render(); - } else { - return self._borderWidth; - } - }, - /** * Get/set the background gradient. * @param {Number} data Background gradient. @@ -1130,4 +1010,65 @@ }; } }; + + /** + * Attaches basic getter/setter methods for a given property name to the CanvasInput prototype + * @param {String} propName Name of property for which to create get/set method + * @param {Boolean} isDimension (optional) Whether this property affects the canvas size + * @return {Mixed} CanvasInput or current property value + */ + function createGetterSetter(propName, isDimension) { + var privatePropName = '_' + propName; + + CanvasInput.prototype[propName] = function getterSetter(data) { + var self = this; + + if (typeof data !== 'undefined') { + self[privatePropName] = data; + + if (isDimension) { + self._calcWH(); + self._updateCanvasWH(); + } + + return self.render(); + } else { + return self[privatePropName]; + } + }; + }; + + // properties which use the standard getter/setter method + var standardProperties = [ + 'x', // The pixel position along the x-coordinate. + 'y', // The pixel position along the y-coordinate. + 'extraX', // The extra x-coordinate position (generally used when no canvas is specified). + 'extraY', // The extra y-coordinate position (generally used when no canvas is specified). + 'fontSize', + 'fontFamily', + 'fontColor', + 'placeHolderColor', + 'fontWeight', + 'fontStyle', + 'borderColor', + 'borderRadius', + 'backgroundColor', + 'innerShadow', // In the format of a CSS box shadow (1px 1px 1px rgba(0, 0, 0.5)). + 'selectionColor', + 'placeHolder', + ]; + + standardProperties.forEach(createGetterSetter); + + // properties which use the standard getter/setter method and affect the canvas dimensions + var standardDimensionProperties = [ + 'width', + 'height', + 'padding', + 'borderWidth', + ]; + + standardDimensionProperties.forEach(function(property) { + createGetterSetter(property, true); + }); })(); \ No newline at end of file From fcd64e9d6cb15c2c08598a36bd0dbf8b0e94ca46 Mon Sep 17 00:00:00 2001 From: Benji Kay Date: Fri, 21 Aug 2015 10:28:19 -0500 Subject: [PATCH 6/7] update minified file --- CanvasInput.js | 2 +- CanvasInput.min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CanvasInput.js b/CanvasInput.js index fed2f4d..8f57b25 100644 --- a/CanvasInput.js +++ b/CanvasInput.js @@ -1071,4 +1071,4 @@ standardDimensionProperties.forEach(function(property) { createGetterSetter(property, true); }); -})(); \ No newline at end of file +})(); diff --git a/CanvasInput.min.js b/CanvasInput.min.js index 6a12bce..1f1fd9b 100644 --- a/CanvasInput.min.js +++ b/CanvasInput.min.js @@ -7,4 +7,4 @@ * * 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"),"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)),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.pointerEvents="none",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+"px",n._hiddenInput.style.height=n._height+"px",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"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.render()):t._x},y:function(e){var t=this;return"undefined"!=typeof e?(t._y=e,t.render()):t._y},extraX:function(e){var t=this;return"undefined"!=typeof e?(t._extraX=e,t.render()):t._extraX},extraY:function(e){var t=this;return"undefined"!=typeof e?(t._extraY=e,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},width:function(e){var t=this;return"undefined"!=typeof e?(t._width=e,t._calcWH(),t._updateCanvasWH(),t.render()):t._width},height:function(e){var t=this;return"undefined"!=typeof e?(t._height=e,t._calcWH(),t._updateCanvasWH(),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(),s=e._padding+e._borderWidth+e.shadowT;if(e._selection[1]>0){var u=e._textWidth(_.substring(0,e._selection[0])),l=e._textWidth(_.substring(e._selection[0],e._selection[1]));t.fillStyle=e._selectionColor,t.fillRect(s+u,s,l,e._height)}if(e._cursor){var c=e._textWidth(_.substring(0,e._cursorPos));t.fillStyle=e._fontColor,t.fillRect(s+c,s,1,e._height)}var h=e._padding+e._borderWidth+e.shadowL,f=Math.round(s+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.textAlign="left",t.textBaseline="middle",t.fillText(_,h,f);var v=e._innerShadow.split("px "),p="none"===e._innerShadow?0:parseInt(v[0],10),w="none"===e._innerShadow?0:parseInt(v[1],10),x="none"===e._innerShadow?0:parseInt(v[2],10),b="none"===e._innerShadow?"":v[3];if(x>0){var y=e._shadowCtx,g=y.canvas.width,C=y.canvas.height;y.clearRect(0,0,g,C),y.shadowBlur=x,y.shadowColor=b,y.shadowOffsetX=0,y.shadowOffsetY=w,y.fillRect(-1*n,-100,3*n,100),y.shadowOffsetX=p,y.shadowOffsetY=0,y.fillRect(g,-1*o,100,3*o),y.shadowOffsetX=0,y.shadowOffsetY=w,y.fillRect(-1*n,C,3*n,100),y.shadowOffsetX=p,y.shadowOffsetY=0,y.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,g,C,d+e.shadowL,d+e.shadowT,g,C)}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);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 s=new Image;s.src=t._backgroundImage,s.onload=function(){n.drawImage(s,0,0,s.width,s.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)},_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=document.defaultView.getComputedStyle(t,void 0),o=parseInt(n.paddingLeft,10)||0,r=parseInt(n.paddingLeft,10)||0,d=parseInt(n.borderLeftWidth,10)||0,a=parseInt(n.borderLeftWidth,10)||0,i=document.body.parentNode.offsetTop||0,_=document.body.parentNode.offsetLeft||0,s=0,u=0;if("undefined"!=typeof t.offsetParent)do s+=t.offsetLeft,u+=t.offsetTop;while(t=t.offsetParent);return s+=o+d+_,u+=r+a+i,{x:e.pageX-s,y:e.pageY-u}}}}(); \ No newline at end of file +!function(){function e(e,t){var n="_"+e;o.prototype[e]=function(e){var o=this;return"undefined"!=typeof e?(o[n]=e,t&&(o._calcWH(),o._updateCanvasWH()),o.render()):o[n]}}var t=[],o=window.CanvasInput=function(e){var o=this;e=e?e:{},o._canvas=e.canvas||null,o._ctx=o._canvas?o._canvas.getContext("2d"):null,o._x=e.x||0,o._y=e.y||0,o._extraX=e.extraX||0,o._extraY=e.extraY||0,o._fontSize=e.fontSize||14,o._fontFamily=e.fontFamily||"Arial",o._fontColor=e.fontColor||"#000",o._placeHolderColor=e.placeHolderColor||"#bfbebd",o._fontWeight=e.fontWeight||"normal",o._fontStyle=e.fontStyle||"normal",o._readonly=e.readonly||!1,o._maxlength=e.maxlength||null,o._width=e.width||150,o._height=e.height||o._fontSize,o._padding=e.padding>=0?e.padding:5,o._borderWidth=e.borderWidth>=0?e.borderWidth:1,o._borderColor=e.borderColor||"#959595",o._borderRadius=e.borderRadius>=0?e.borderRadius:3,o._backgroundImage=e.backgroundImage||"",o._boxShadow=e.boxShadow||"1px 1px 0px rgba(255, 255, 255, 1)",o._innerShadow=e.innerShadow||"0px 0px 4px rgba(0, 0, 0, 0.4)",o._selectionColor=e.selectionColor||"rgba(179, 212, 253, 0.8)",o._placeHolder=e.placeHolder||"",o._value=(e.value||o._placeHolder)+"",o._onsubmit=e.onsubmit||function(){},o._onkeydown=e.onkeydown||function(){},o._onkeyup=e.onkeyup||function(){},o._onfocus=e.onfocus||function(){},o._onblur=e.onblur||function(){},o._cursor=!1,o._cursorPos=0,o._hasFocus=!1,o._selection=[0,0],o._wasOver=!1,o.boxShadow(o._boxShadow,!0),o._calcWH(),o._renderCanvas=document.createElement("canvas"),o._renderCanvas.setAttribute("width",o.outerW),o._renderCanvas.setAttribute("height",o.outerH),o._renderCtx=o._renderCanvas.getContext("2d"),o._shadowCanvas=document.createElement("canvas"),o._shadowCanvas.setAttribute("width",o._width+2*o._padding),o._shadowCanvas.setAttribute("height",o._height+2*o._padding),o._shadowCtx=o._shadowCanvas.getContext("2d"),"undefined"!=typeof e.backgroundGradient?(o._backgroundColor=o._renderCtx.createLinearGradient(0,0,0,o.outerH),o._backgroundColor.addColorStop(0,e.backgroundGradient[0]),o._backgroundColor.addColorStop(1,e.backgroundGradient[1])):o._backgroundColor=e.backgroundColor||"#fff",o._canvas&&(o._canvas.addEventListener("mousemove",function(e){e=e||window.event,o.mousemove(e,o)},!1),o._canvas.addEventListener("mousedown",function(e){e=e||window.event,o.mousedown(e,o)},!1),o._canvas.addEventListener("mouseup",function(e){e=e||window.event,o.mouseup(e,o)},!1)),window.addEventListener("mouseup",function(e){e=e||window.event,o._hasFocus&&!o._mouseDown&&o.blur()},!0),o._hiddenInput=document.createElement("input"),o._hiddenInput.type="text",o._hiddenInput.style.position="absolute",o._hiddenInput.style.opacity=0,o._hiddenInput.style.pointerEvents="none",o._hiddenInput.style.left=o._x+o._extraX+(o._canvas?o._canvas.offsetLeft:0)+"px",o._hiddenInput.style.top=o._y+o._extraY+(o._canvas?o._canvas.offsetTop:0)+"px",o._hiddenInput.style.width=o._width+"px",o._hiddenInput.style.height=o._height+"px",o._hiddenInput.style.zIndex=0,o._maxlength&&(o._hiddenInput.maxLength=o._maxlength),document.body.appendChild(o._hiddenInput),o._hiddenInput.value=o._value,o._hiddenInput.addEventListener("keydown",function(e){e=e||window.event,o._hasFocus&&o.keydown(e,o)}),o._hiddenInput.addEventListener("keyup",function(e){e=e||window.event,o._value=o._hiddenInput.value,o._cursorPos=o._hiddenInput.selectionStart,o.render(),o._hasFocus&&o._onkeyup(e,o)}),t.push(o),o._inputsIndex=t.length-1,o.render()};o.prototype={canvas:function(e){var t=this;return"undefined"!=typeof e?(t._canvas=e,t._ctx=t._canvas.getContext("2d"),t.render()):t._canvas},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 o=this;if("undefined"==typeof e)return o._boxShadow;var n=e.split("px ");return o._boxShadow={x:"none"===o._boxShadow?0:parseInt(n[0],10),y:"none"===o._boxShadow?0:parseInt(n[1],10),blur:"none"===o._boxShadow?0:parseInt(n[2],10),color:"none"===o._boxShadow?"":n[3]},o._boxShadow.x<0?(o.shadowL=Math.abs(o._boxShadow.x)+o._boxShadow.blur,o.shadowR=o._boxShadow.blur+o._boxShadow.x):(o.shadowL=Math.abs(o._boxShadow.blur-o._boxShadow.x),o.shadowR=o._boxShadow.blur+o._boxShadow.x),o._boxShadow.y<0?(o.shadowT=Math.abs(o._boxShadow.y)+o._boxShadow.blur,o.shadowB=o._boxShadow.blur+o._boxShadow.y):(o.shadowT=Math.abs(o._boxShadow.blur-o._boxShadow.y),o.shadowB=o._boxShadow.blur+o._boxShadow.y),o.shadowW=o.shadowL+o.shadowR,o.shadowH=o.shadowT+o.shadowB,o._calcWH(),t?void 0:(o._updateCanvasWH(),o.render())},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(e){var o=this;if(!o._hasFocus){o._onfocus(o);for(var n=0;n0||o._selection[1]>0;return o._hiddenInput.focus(),o._hiddenInput.selectionStart=r?o._selection[0]:o._cursorPos,o._hiddenInput.selectionEnd=r?o._selection[1]:o._cursorPos,o.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(e,o){{var n=e.which;e.shiftKey}if(!o._readonly&&o._hasFocus){if(o._onkeydown(e,o),65===n&&(e.ctrlKey||e.metaKey))return o.selectText(),e.preventDefault(),o.render();if(17===n||e.metaKey||e.ctrlKey)return o;if(13===n)e.preventDefault(),o._onsubmit(e,o);else if(9===n&&(e.preventDefault(),t.length>1)){var r=t[o._inputsIndex+1]?o._inputsIndex+1:0;o.blur(),setTimeout(function(){t[r].focus()},10)}return o._value=o._hiddenInput.value,o._cursorPos=o._hiddenInput.selectionStart,o._selection=[0,0],o.render()}},click:function(e,t){var o=t._mousePos(e),n=o.x,r=o.y;return t._endSelection?(delete t._endSelection,void delete t._selectionUpdated):t._canvas&&t._overInput(n,r)||!t._canvas?t._mouseDown?(t._mouseDown=!1,t.click(e,t),t.focus(t._clickPos(n,r))):void 0:t.blur()},mousemove:function(e,t){var o=t._mousePos(e),n=o.x,r=o.y,a=t._overInput(n,r);if(a&&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 d=t._clickPos(n,r),i=Math.min(t._selectionStart,d),_=Math.max(t._selectionStart,d);if(!a)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 o=t._mousePos(e),n=o.x,r=o.y,a=t._overInput(n,r);t._mouseDown=a,t._hasFocus&&a&&(t._selectionStart=t._clickPos(n,r))},mouseup:function(e,t){var o=t._mousePos(e),n=o.x,r=o.y,a=t._clickPos(n,r)!==t._selectionStart;t._hasFocus&&t._selectionStart>=0&&t._overInput(n,r)&&a?(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,o=e.outerW,n=e.outerH,r=e._borderRadius,a=e._borderWidth,d=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,o-d,n-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(),s=e._padding+e._borderWidth+e.shadowT;if(e._selection[1]>0){var u=e._textWidth(_.substring(0,e._selection[0])),l=e._textWidth(_.substring(e._selection[0],e._selection[1]));t.fillStyle=e._selectionColor,t.fillRect(s+u,s,l,e._height)}if(e._cursor){var c=e._textWidth(_.substring(0,e._cursorPos));t.fillStyle=e._fontColor,t.fillRect(s+c,s,1,e._height)}var h=e._padding+e._borderWidth+e.shadowL,f=Math.round(s+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.textAlign="left",t.textBaseline="middle",t.fillText(_,h,f);var v=e._innerShadow.split("px "),w="none"===e._innerShadow?0:parseInt(v[0],10),p="none"===e._innerShadow?0:parseInt(v[1],10),x="none"===e._innerShadow?0:parseInt(v[2],10),b="none"===e._innerShadow?"":v[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=p,g.fillRect(-1*o,-100,3*o,100),g.shadowOffsetX=w,g.shadowOffsetY=0,g.fillRect(y,-1*n,100,3*n),g.shadowOffsetX=0,g.shadowOffsetY=p,g.fillRect(-1*o,S,3*o,100),g.shadowOffsetX=w,g.shadowOffsetY=0,g.fillRect(-100,-1*n,100,3*n),e._roundedRect(t,a+e.shadowL,a+e.shadowT,o-2*a-d,n-2*a-i,r),t.clip(),t.drawImage(e._shadowCanvas,0,0,y,S,a+e.shadowL,a+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 e=this,o=t.indexOf(e);o&&t.splice(o,1),e._hasFocus&&e.blur(),document.body.removeChild(e._hiddenInput),e._renderCanvas=null,e._shadowCanvas=null,e._renderCtx=null},_drawTextBox:function(e){var t=this,o=t._renderCtx,n=t.outerW,r=t.outerH,a=t._borderRadius,d=t._borderWidth,i=t.shadowW,_=t.shadowH;if(""===t._backgroundImage)o.fillStyle=t._backgroundColor,t._roundedRect(o,d+t.shadowL,d+t.shadowT,n-2*d-i,r-2*d-_,a),o.fill(),e();else{var s=new Image;s.src=t._backgroundImage,s.onload=function(){o.drawImage(s,0,0,s.width,s.height,d+t.shadowL,d+t.shadowT,n,r),e()}}},_clearSelection:function(){var e=this;if(e._selection[1]>0){var t=e._selection[0],o=e._selection[1];return e._value=e._value.substr(0,t)+e._value.substr(o),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 o=t._textWidth(e),n=o/(t._width-t._padding),r=n>1?e.substr(-1*Math.floor(e.length/n)):e;return r+""},_textWidth:function(e){var t=this,o=t._renderCtx;return o.font=t._fontStyle+" "+t._fontWeight+" "+t._fontSize+"px "+t._fontFamily,o.textAlign="left",o.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,o=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,o)},_roundedRect:function(e,t,o,n,r,a){2*a>n&&(a=n/2),2*a>r&&(a=r/2),e.beginPath(),e.moveTo(t+a,o),e.lineTo(t+n-a,o),e.quadraticCurveTo(t+n,o,t+n,o+a),e.lineTo(t+n,o+r-a),e.quadraticCurveTo(t+n,o+r,t+n-a,o+r),e.lineTo(t+a,o+r),e.quadraticCurveTo(t,o+r,t,o+r-a),e.lineTo(t,o+a),e.quadraticCurveTo(t,o,t+a,o),e.closePath()},_overInput:function(e,t){var o=this,n=e>=o._x+o._extraX,r=e<=o._x+o._extraX+o._width+2*o._padding,a=t>=o._y+o._extraY,d=t<=o._y+o._extraY+o._height+2*o._padding;return n&&r&&a&&d},_clickPos:function(e,t){var o=this,n=o._value;o._value===o._placeHolder&&(n="");var r=o._clipText(n),a=0,d=r.length;if(e-(o._x+o._extraX)=e-(o._x+o._extraX)){d=i;break}return d},_mousePos:function(e){var t=e.target,o=document.defaultView.getComputedStyle(t,void 0),n=parseInt(o.paddingLeft,10)||0,r=parseInt(o.paddingLeft,10)||0,a=parseInt(o.borderLeftWidth,10)||0,d=parseInt(o.borderLeftWidth,10)||0,i=document.body.parentNode.offsetTop||0,_=document.body.parentNode.offsetLeft||0,s=0,u=0;if("undefined"!=typeof t.offsetParent)do s+=t.offsetLeft,u+=t.offsetTop;while(t=t.offsetParent);return s+=n+a+_,u+=r+d+i,{x:e.pageX-s,y:e.pageY-u}}};var n=["x","y","extraX","extraY","fontSize","fontFamily","fontColor","placeHolderColor","fontWeight","fontStyle","borderColor","borderRadius","backgroundColor","innerShadow","selectionColor","placeHolder"];n.forEach(e);var r=["width","height","padding","borderWidth"];r.forEach(function(t){e(t,!0)})}(); \ No newline at end of file From 4d7769327a6706eb23ca9cd87f3f5d38cc8bf21a Mon Sep 17 00:00:00 2001 From: Benji Kay Date: Fri, 21 Aug 2015 10:34:31 -0500 Subject: [PATCH 7/7] update semver (pull in 1.2.1 first!) --- CanvasInput.js | 2 +- CanvasInput.min.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CanvasInput.js b/CanvasInput.js index 8f57b25..c3d0e1a 100644 --- a/CanvasInput.js +++ b/CanvasInput.js @@ -1,5 +1,5 @@ /*! - * CanvasInput v1.2.0 + * CanvasInput v1.2.2 * http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input * * (c) 2013-2015, James Simpson of GoldFire Studios diff --git a/CanvasInput.min.js b/CanvasInput.min.js index 1f1fd9b..c74b28c 100644 --- a/CanvasInput.min.js +++ b/CanvasInput.min.js @@ -1,5 +1,5 @@ /*! - * CanvasInput v1.2.0 + * CanvasInput v1.2.2 * http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input * * (c) 2013-2015, James Simpson of GoldFire Studios