canvasinput-rails 1.2.7.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/lib/canvasinput/rails/version.rb +5 -0
- data/lib/canvasinput/rails.rb +9 -0
- data/vendor/assets/javascripts/canvasinput/CanvasInput.js +1475 -0
- data/vendor/assets/javascripts/canvasinput/CanvasInput.min.js +10 -0
- data/vendor/assets/javascripts/canvasinput/README.md +120 -0
- data/vendor/assets/javascripts/canvasinput/package.json +20 -0
- metadata +78 -0
@@ -0,0 +1,10 @@
|
|
1
|
+
/*!
|
2
|
+
* CanvasInput v1.2.7
|
3
|
+
* http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input
|
4
|
+
*
|
5
|
+
* (c) 2013-2017, James Simpson of GoldFire Studios
|
6
|
+
* goldfirestudios.com
|
7
|
+
*
|
8
|
+
* MIT License
|
9
|
+
*/
|
10
|
+
!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;o<e.length;o++)e[o]._hasFocus&&e[o].blur()}n._selectionUpdated?delete n._selectionUpdated:n._selection=[0,0],n._hasFocus=!0,n._readonly?n._hiddenInput.readOnly=!0:(n._hiddenInput.readOnly=!1,n._cursorPos="number"==typeof t?t:n._clipText().length,n._placeHolder===n._value&&(n._value="",n._hiddenInput.value=""),n._cursor=!0,n._cursorInterval&&clearInterval(n._cursorInterval),n._cursorInterval=setInterval(function(){n._cursor=!n._cursor,n.render()},500));var r=n._selection[0]>0||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)<t._textWidth(o))for(var a=0;a<o.length;a++)if(r+=t._textWidth(o[a]),r>=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}}}}();
|
@@ -0,0 +1,120 @@
|
|
1
|
+
![CanvasInput](http://goldfirestudios.com/proj/canvasinput/logo.png "CanvasInput")
|
2
|
+
|
3
|
+
## Description
|
4
|
+
[**CanvasInput**](http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input) recreates and improves a full DOM <input> element within HTML5 Canvas.
|
5
|
+
|
6
|
+
More documentation, examples and demos can be found at **[CanvasInput](http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input)**.
|
7
|
+
|
8
|
+
### Features
|
9
|
+
* Closest recreation of a DOM input in canvas to date
|
10
|
+
* Full CSS-type styling
|
11
|
+
* Text selection
|
12
|
+
* Tab between inputs
|
13
|
+
* Full native copy/paste support
|
14
|
+
* Text place holder support
|
15
|
+
* Readonly property support
|
16
|
+
* Auto text scrolling
|
17
|
+
* Uses an off-DOM canvas for efficiency
|
18
|
+
* Supports all keyboard types
|
19
|
+
* Caps lock support
|
20
|
+
|
21
|
+
### Browser Compatibility
|
22
|
+
Tested in the following browsers/versions:
|
23
|
+
* Google Chrome
|
24
|
+
* Internet Explorer 9.0+
|
25
|
+
* Firefox
|
26
|
+
* Safari
|
27
|
+
* Opera
|
28
|
+
* Most mobile browsers
|
29
|
+
|
30
|
+
## Documentation
|
31
|
+
|
32
|
+
### Examples
|
33
|
+
|
34
|
+
##### Most basic, default text box:
|
35
|
+
```html
|
36
|
+
<canvas id="canvas" width="200" height="50"></canvas>
|
37
|
+
```
|
38
|
+
```javascript
|
39
|
+
var input = new CanvasInput({
|
40
|
+
canvas: document.getElementById('canvas')
|
41
|
+
});
|
42
|
+
```
|
43
|
+
|
44
|
+
##### More styling options:
|
45
|
+
```html
|
46
|
+
<canvas id="canvas" width="350" height="50"></canvas>
|
47
|
+
```
|
48
|
+
```javascript
|
49
|
+
var input = new CanvasInput({
|
50
|
+
canvas: document.getElementById('canvas'),
|
51
|
+
fontSize: 18,
|
52
|
+
fontFamily: 'Arial',
|
53
|
+
fontColor: '#212121',
|
54
|
+
fontWeight: 'bold',
|
55
|
+
width: 300,
|
56
|
+
padding: 8,
|
57
|
+
borderWidth: 1,
|
58
|
+
borderColor: '#000',
|
59
|
+
borderRadius: 3,
|
60
|
+
boxShadow: '1px 1px 0px #fff',
|
61
|
+
innerShadow: '0px 0px 5px rgba(0, 0, 0, 0.5)',
|
62
|
+
placeHolder: 'Enter message here...'
|
63
|
+
});
|
64
|
+
```
|
65
|
+
|
66
|
+
### Properties
|
67
|
+
* **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).
|
68
|
+
* **x**: `Number` *(`0` by default)* X-coordinate position on the canvas.
|
69
|
+
* **y**: `Number` *(`0` by default)* Y-coordinate position on the canvas.
|
70
|
+
* **extraX**: `Number` *(`0` by default)* This is an optional x-value for use when no canvas is passed into CanvasInput.
|
71
|
+
* **extraY**: `Number` *(`0` by default)* This is an optional y-value for use when no canvas is passed into CanvasInput.
|
72
|
+
* **fontSize**: `Number` *(`14` by default)* Text font size.
|
73
|
+
* **fontFamily**: `String` *(`Arial` by default)* Text font family.
|
74
|
+
* **fontColor**: `String` *(`#000` by default)* Text color.
|
75
|
+
* **placeHolderColor**: `String` *(`#bfbebd` by default)* Place holder text color.
|
76
|
+
* **fontWeight**: `String` *(`normal` by default)* Font weight such as `bold` or `normal`.
|
77
|
+
* **fontStyle**: `String` *(`normal` by default)* Font style such as `italic` or `normal`.
|
78
|
+
* **fontShadowColor**: `String` *(`''` by default)* Shadow color for both placeholder and value text.
|
79
|
+
* **fontShadowBlur**: `String` *(`0` by default)* Shadow blur for both placeholder and value text.
|
80
|
+
* **fontShadowOffsetX**: `String` *(`0` by default)* Shadow x-offset for both placeholder and value text.
|
81
|
+
* **fontShadowOffsetY**: `String` *(`0` by default)* Shadow y-offset for both placeholder and value text.
|
82
|
+
* **readonly**: `Boolean` *(`false` by default)* Set to `true` to disable user input.
|
83
|
+
* **maxlength**: `Number` *(`null` by default)* Sets the max length of characters.
|
84
|
+
* **width**: `Number` *(`150` by default)* The width of the text box (just like in the DOM, padding, borders and shadows add onto this width).
|
85
|
+
* **height**: `Number` *(`14` by default)* The height of the text box (just like in the DOM, padding, borders and shadows add onto this height).
|
86
|
+
* **padding**: `Number` *(`5` by default)* The padding in pixels around all 4 sides of the text input area.
|
87
|
+
* **borderWidth**: `Number` *(`1` by default)* Size of the border.
|
88
|
+
* **borderColor**: `String` *(`#959595` by default)* Color of the border.
|
89
|
+
* **borderRadius**: `Number` *(`3` by default)* Create rounded corners by setting a border radius.
|
90
|
+
* **backgroundImage**: `String` *(`''` by default)* Use an image instead of styling for the background (it is usually best to set `borderWidth` to 0, `backgroundColor` to 'none' and the inner and box shadows to 'none' when using this).
|
91
|
+
* **backgroundColor**: `String` *(`#fff` by default)* Sets the background color of the text box.
|
92
|
+
* **backgroundGradient**: `Array` *(`['', '']` by default)* Instead of a single background color, you can set a gradient of two colors.
|
93
|
+
* **boxShadow**: `String` *(`1px 1px 0px rgba(255, 255, 255, 1)` by default)* Define a box shadow just as you would with CSS.
|
94
|
+
* **innerShadow**: `String` *(`0px 0px 4px rgba(0, 0, 0, 0.4)` by default)* Define an inner-shadow just as you would with the box shadow.
|
95
|
+
* **selectionColor**: `String` *(`rgba(179, 212, 253, 0.8)` by default)* The default color for the text selection highlight.
|
96
|
+
* **placeHolder**: `String` *(`''` by default)* The default place holder text. This text will disappear when the user focusses on the input.
|
97
|
+
* **value**: `String` *(`''` by default)* Set the default value for an input.
|
98
|
+
* **onsubmit**: `Function` *(`function() {}` by default)* Callback fires when user hits the enter key.
|
99
|
+
* **onkeydown**: `Function` *(`function() {}` by default)* Callback fires on key down.
|
100
|
+
* **onkeyup**: `Function` *(`function() {}` by default)* Callback fires on key up.
|
101
|
+
* **onfocus**: `Function` *(`function() {}` by default)* Callback fires on focus.
|
102
|
+
* **onblur**: `Function` *(`function() {}` by default)* Callback fires on blur (un-focus).
|
103
|
+
|
104
|
+
### Methods
|
105
|
+
In addition to getter/setter methods for each of the above properties, the following methods have also been made available.
|
106
|
+
|
107
|
+
* **focus**: Sets the focus on the input box (focus must already be on the canvas element).
|
108
|
+
* *pos*: `Number` (optional) Set the default character position for the cursor. Goes to the end by default.
|
109
|
+
* **blur**: Removes the focus from the text input box.
|
110
|
+
* **renderCanvas**: Returns the off-DOM canvas, allowing you to draw its contents to whatever canvas you would like (or do whatever else with the data that you want).
|
111
|
+
* **render**: This rerenders the full input box.
|
112
|
+
* **selectText**: Select part or all of the text in the input box programmatically.
|
113
|
+
* *range*: `Array` (optional) Leave empty to select all text, or pass range values in this form: `[start, end]`.
|
114
|
+
* **destroy**: Destroy the input and stop rendering it.
|
115
|
+
|
116
|
+
## License
|
117
|
+
|
118
|
+
Copyright (c) 2013-2017 James Simpson and GoldFire Studios, Inc.
|
119
|
+
|
120
|
+
Released under the MIT License.
|
@@ -0,0 +1,20 @@
|
|
1
|
+
{
|
2
|
+
"name": "canvasinput",
|
3
|
+
"description": "CanvasInput recreates and improves a full DOM element within HTML5 Canvas.",
|
4
|
+
"homepage": "http://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input",
|
5
|
+
"filename": "CanvasInput.js",
|
6
|
+
"version": "1.2.7",
|
7
|
+
"repository": {
|
8
|
+
"type": "git",
|
9
|
+
"url": "https://github.com/goldfire/CanvasInput.git"
|
10
|
+
},
|
11
|
+
"keywords": [
|
12
|
+
"dom",
|
13
|
+
"html5",
|
14
|
+
"canvas",
|
15
|
+
"input",
|
16
|
+
"text"
|
17
|
+
],
|
18
|
+
"author": "James Simpson <james@goldfirestudios.com> (http://goldfirestudios.com)",
|
19
|
+
"license": "MIT"
|
20
|
+
}
|
metadata
ADDED
@@ -0,0 +1,78 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: canvasinput-rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 1.2.7.1
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Jocko
|
8
|
+
autorequire:
|
9
|
+
bindir: exe
|
10
|
+
cert_chain: []
|
11
|
+
date: 2018-07-14 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: bundler
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - "~>"
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '1.16'
|
20
|
+
type: :development
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - "~>"
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '1.16'
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: rake
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - "~>"
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: '10.0'
|
34
|
+
type: :development
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - "~>"
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '10.0'
|
41
|
+
description: ''
|
42
|
+
email:
|
43
|
+
- jocko.macgregor@wowza.com
|
44
|
+
executables: []
|
45
|
+
extensions: []
|
46
|
+
extra_rdoc_files: []
|
47
|
+
files:
|
48
|
+
- lib/canvasinput/rails.rb
|
49
|
+
- lib/canvasinput/rails/version.rb
|
50
|
+
- vendor/assets/javascripts/canvasinput/CanvasInput.js
|
51
|
+
- vendor/assets/javascripts/canvasinput/CanvasInput.min.js
|
52
|
+
- vendor/assets/javascripts/canvasinput/README.md
|
53
|
+
- vendor/assets/javascripts/canvasinput/package.json
|
54
|
+
homepage: https://github.com/jockmac22/canvasinput-rails
|
55
|
+
licenses: []
|
56
|
+
metadata:
|
57
|
+
allowed_push_host: https://rubygems.org/
|
58
|
+
post_install_message:
|
59
|
+
rdoc_options: []
|
60
|
+
require_paths:
|
61
|
+
- lib
|
62
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
63
|
+
requirements:
|
64
|
+
- - ">="
|
65
|
+
- !ruby/object:Gem::Version
|
66
|
+
version: '0'
|
67
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
68
|
+
requirements:
|
69
|
+
- - ">="
|
70
|
+
- !ruby/object:Gem::Version
|
71
|
+
version: '0'
|
72
|
+
requirements: []
|
73
|
+
rubyforge_project:
|
74
|
+
rubygems_version: 2.5.1
|
75
|
+
signing_key:
|
76
|
+
specification_version: 4
|
77
|
+
summary: A Rails wrapper for the CanvasInput JS library.
|
78
|
+
test_files: []
|