diff --git a/package.json b/package.json index d37ec90..b1bab4c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "wScratchPad", "title": "wScratchPad jQuery Plugin", - "version": "2.1.0", + "version": "2.1.0-dev", "description": "A jQuery plugin to mimic a scratch card or pad behaviour. Allowing you to scratch off an overlay as either a color or image.", "main": "wScratchPad.js", "repository": { diff --git a/src/wScratchPad.js b/src/wScratchPad.js index f90e68f..8d4899a 100644 --- a/src/wScratchPad.js +++ b/src/wScratchPad.js @@ -39,7 +39,7 @@ // Setup event handlers. this.$scratchpad - .mousedown($.proxy(function (e) { + .on('mousedown', $.proxy(function (e) { // If disabled we just return true which menas // our our this.scratch will remain as false. @@ -52,12 +52,21 @@ this.scratch = true; this._scratchFunc(e, 'Down'); }, this)) - .mousemove($.proxy(function (e) { + .on('mousemove', $.proxy(function (e) { if (this.scratch) { this._scratchFunc(e, 'Move'); } }, this)) - .mouseup($.proxy(function (e) { + .on('mouseup', $.proxy(function (e) { + if (this.scratch) { + this.scratch = false; + this._scratchFunc(e, 'Up'); + } + }, this)); + + // Catch mouseup outside of image or outside of window + // (might not fire in all browsers) + $(document).on('mouseup', $.proxy(function (e) { if (this.scratch) { this.scratch = false; this._scratchFunc(e, 'Up'); @@ -122,7 +131,7 @@ $(new Image()) .attr('crossOrigin', '') .attr('src', this.options.fg) - .load(function () { + .on('load', function () { _this.ctx.drawImage(this, 0, 0, width, height); _this.$img.show(); }); @@ -212,11 +221,17 @@ //start the path for a drag this.ctx.beginPath(); this.ctx.moveTo(e.pageX, e.pageY); + + // force redraw to fix android browser bug + this.canvas.style.zIndex++; }, _scratchMove: function (e) { this.ctx.lineTo(e.pageX, e.pageY); this.ctx.stroke(); + + // force redraw to fix android browser bug + this.canvas.style.zIndex++; }, _scratchUp: function () { diff --git a/wScratchPad.min.js b/wScratchPad.min.js index 3c3ed4b..de4680f 100644 --- a/wScratchPad.min.js +++ b/wScratchPad.min.js @@ -1 +1,2 @@ -/*! wScratchPad - v2.1.0 - 2014-04-14 */!function(a){"use strict";function b(b,c){this.$el=a(b),this.options=c,this.init=!1,this.enabled=!0,this._generate()}b.prototype={_generate:function(){return a.support.canvas?(this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),"static"===this.$el.css("position")&&this.$el.css("position","relative"),this.$img=a('').attr("crossOrigin","").css({position:"absolute",width:"100%",height:"100%"}),this.$scratchpad=a(this.canvas).css({position:"absolute",width:"100%",height:"100%"}),this.$scratchpad.bindMobileEvents(),this.$scratchpad.mousedown(a.proxy(function(b){return this.enabled?(this.canvasOffset=a(this.canvas).offset(),this.scratch=!0,void this._scratchFunc(b,"Down")):!0},this)).mousemove(a.proxy(function(a){this.scratch&&this._scratchFunc(a,"Move")},this)).mouseup(a.proxy(function(a){this.scratch&&(this.scratch=!1,this._scratchFunc(a,"Up"))},this)),this._setOptions(),this.$el.append(this.$img).append(this.$scratchpad),this.init=!0,void this.reset()):(this.$el.append("Canvas is not supported in this browser."),!0)},reset:function(){var b=this,c=Math.ceil(this.$el.innerWidth()),d=Math.ceil(this.$el.innerHeight()),e=window.devicePixelRatio||1;this.pixels=c*d,this.$scratchpad.attr("width",c).attr("height",d),this.canvas.setAttribute("width",c*e),this.canvas.setAttribute("height",d*e),this.ctx.scale(e,e),this.pixels=c*e*d*e,this.$img.hide(),this.options.bg&&("#"===this.options.bg.charAt(0)?this.$el.css("backgroundColor",this.options.bg):(this.$el.css("backgroundColor",""),this.$img.attr("src",this.options.bg))),this.options.fg&&("#"===this.options.fg.charAt(0)?(this.ctx.fillStyle=this.options.fg,this.ctx.beginPath(),this.ctx.rect(0,0,c,d),this.ctx.fill(),this.$img.show()):a(new Image).attr("src",this.options.fg).load(function(){b.ctx.drawImage(this,0,0,c,d),b.$img.show()}))},clear:function(){this.ctx.clearRect(0,0,Math.ceil(this.$el.innerWidth()),Math.ceil(this.$el.innerHeight()))},enable:function(a){this.enabled=a===!0?!0:!1},destroy:function(){this.$el.children().remove(),a.removeData(this.$el,"wScratchPad")},_setOptions:function(){var a,b;for(a in this.options)this.options[a]=this.$el.attr("data-"+a)||this.options[a],b="set"+a.charAt(0).toUpperCase()+a.substring(1),this[b]&&this[b](this.options[a])},setBg:function(){this.init&&this.reset()},setFg:function(){this.setBg()},setCursor:function(a){this.$el.css("cursor",a)},_scratchFunc:function(a,b){a.pageX=Math.floor(a.pageX-this.canvasOffset.left),a.pageY=Math.floor(a.pageY-this.canvasOffset.top),this["_scratch"+b](a),(this.options.realtime||"Up"===b)&&this.options["scratch"+b]&&this.options["scratch"+b].apply(this,[a,this._scratchPercent()])},_scratchPercent:function(){for(var a=0,b=this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height),c=0,d=b.data.length;d>c;c+=4)0===b.data[c]&&0===b.data[c+1]&&0===b.data[c+2]&&0===b.data[c+3]&&a++;return a/this.pixels*100},_scratchDown:function(a){this.ctx.globalCompositeOperation="destination-out",this.ctx.lineJoin="round",this.ctx.lineCap="round",this.ctx.strokeStyle=this.options.color,this.ctx.lineWidth=this.options.size,this.ctx.beginPath(),this.ctx.arc(a.pageX,a.pageY,this.options.size/2,0,2*Math.PI,!0),this.ctx.closePath(),this.ctx.fill(),this.ctx.beginPath(),this.ctx.moveTo(a.pageX,a.pageY)},_scratchMove:function(a){this.ctx.lineTo(a.pageX,a.pageY),this.ctx.stroke()},_scratchUp:function(){this.ctx.closePath()}},a.support.canvas=document.createElement("canvas").getContext,a.fn.wScratchPad=function(c,d){function e(){var d=a.data(this,"wScratchPad");return d||(d=new b(this,a.extend(!0,{},c)),a.data(this,"wScratchPad",d)),d}if("string"==typeof c){var f,g=[],h=(void 0!==d?"set":"get")+c.charAt(0).toUpperCase()+c.substring(1),i=function(){f.options[c]&&(f.options[c]=d),f[h]&&f[h].apply(f,[d])},j=function(){return f[h]?f[h].apply(f,[d]):f.options[c]?f.options[c]:void 0},k=function(){f=a.data(this,"wScratchPad"),f&&(f[c]?f[c].apply(f,[d]):void 0!==d?i():g.push(j()))};return this.each(k),g.length?1===g.length?g[0]:g:this}return c=a.extend({},a.fn.wScratchPad.defaults,c),this.each(e)},a.fn.wScratchPad.defaults={size:5,bg:"#cacaca",fg:"#6699ff",realtime:!0,scratchDown:null,scratchUp:null,scratchMove:null,cursor:"crosshair"},a.fn.bindMobileEvents=function(){a(this).on("touchstart touchmove touchend touchcancel",function(a){var b=a.changedTouches||a.originalEvent.targetTouches,c=b[0],d="";switch(a.type){case"touchstart":d="mousedown";break;case"touchmove":d="mousemove",a.preventDefault();break;case"touchend":d="mouseup";break;default:return}var e=document.createEvent("MouseEvent");e.initMouseEvent(d,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),c.target.dispatchEvent(e)})}}(jQuery); \ No newline at end of file +/*! wScratchPad - v2.1.0-dev - 2023-07-11 */ +!function(a){"use strict";function o(t,s){this.$el=a(t),this.options=s,this.init=!1,this.enabled=!0,this._generate()}o.prototype={_generate:function(){if(!a.support.canvas)return this.$el.append("Canvas is not supported in this browser."),!0;this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d"),"static"===this.$el.css("position")&&this.$el.css("position","relative"),this.$img=a('').attr("crossOrigin","").css({position:"absolute",width:"100%",height:"100%"}),this.$scratchpad=a(this.canvas).css({position:"absolute",width:"100%",height:"100%"}),this.$scratchpad.bindMobileEvents(),this.$scratchpad.on("mousedown",a.proxy(function(t){if(!this.enabled)return!0;this.canvasOffset=a(this.canvas).offset(),this.scratch=!0,this._scratchFunc(t,"Down")},this)).on("mousemove",a.proxy(function(t){this.scratch&&this._scratchFunc(t,"Move")},this)).on("mouseup",a.proxy(function(t){this.scratch&&(this.scratch=!1,this._scratchFunc(t,"Up"))},this)),a(document).on("mouseup",a.proxy(function(t){this.scratch&&(this.scratch=!1,this._scratchFunc(t,"Up"))},this)),this._setOptions(),this.$el.append(this.$img).append(this.$scratchpad),this.init=!0,this.reset()},reset:function(){var t=this,s=Math.ceil(this.$el.innerWidth()),i=Math.ceil(this.$el.innerHeight()),e=window.devicePixelRatio||1;this.pixels=s*i,this.$scratchpad.attr("width",s).attr("height",i),this.canvas.setAttribute("width",s*e),this.canvas.setAttribute("height",i*e),this.ctx.scale(e,e),this.pixels=s*e*i*e,this.$img.hide(),this.options.bg&&("#"===this.options.bg.charAt(0)?this.$el.css("backgroundColor",this.options.bg):(this.$el.css("backgroundColor",""),this.$img.attr("src",this.options.bg))),this.options.fg&&("#"===this.options.fg.charAt(0)?(this.ctx.fillStyle=this.options.fg,this.ctx.beginPath(),this.ctx.rect(0,0,s,i),this.ctx.fill(),this.$img.show()):a(new Image).attr("crossOrigin","").attr("src",this.options.fg).on("load",function(){t.ctx.drawImage(this,0,0,s,i),t.$img.show()}))},clear:function(){this.ctx.clearRect(0,0,Math.ceil(this.$el.innerWidth()),Math.ceil(this.$el.innerHeight()))},enable:function(t){this.enabled=!0===t},destroy:function(){this.$el.children().remove(),a.removeData(this.$el,"wScratchPad")},_setOptions:function(){var t,s;for(t in this.options)this.options[t]=this.$el.attr("data-"+t)||this.options[t],this[s="set"+t.charAt(0).toUpperCase()+t.substring(1)]&&this[s](this.options[t])},setBg:function(){this.init&&this.reset()},setFg:function(){this.setBg()},setCursor:function(t){this.$el.css("cursor",t)},_scratchFunc:function(t,s){t.pageX=Math.floor(t.pageX-this.canvasOffset.left),t.pageY=Math.floor(t.pageY-this.canvasOffset.top),this["_scratch"+s](t),(this.options.realtime||"Up"===s)&&this.options["scratch"+s]&&this.options["scratch"+s].apply(this,[t,this._scratchPercent()])},_scratchPercent:function(){for(var t=0,s=this.ctx.getImageData(0,0,this.canvas.width,this.canvas.height),i=0,e=s.data.length;i