imgdrawing_wev8.js
9.46 KB
!function(a,i){document.IMGDRAWLOADED||("function"==typeof define&&(define.amd||define.cmd)?define("imgdrawing",function(e){return i(a,e)}):a.ImgDrawing=i(a,{}))}(this,function(e,a){var r,l,o,c,v,h="WebkitAppearance"in document.documentElement.style||void 0!==document.webkitHidden,g=5,w="red",f="line",p=new Array,u="",b=!0,m="draw",A="imgdrawing",C="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAANSURBVBhXY/j///9/AAn7A/0FQ0XKAAAAAElFTkSuQmCC",W=$(window).width(),k=$(window).height()-36,M=0,T=0,E=!1;function P(){if(0==$("#canvas",o).length){var e='<canvas id="canvas" width="'+2*W+'" height="'+2*k+'" style="margin-top:'+M+"px;margin-left:"+T+"px;width:"+W+"px;height:"+k+'px;"></canvas>';o.append(e),i(),s()}return $("#canvas",o)[0]}function j(){return P().getContext("2d")}function I(e){r.removeClass("slideup-in"),r.addClass("slideup-out"),setTimeout(function(){"function"==typeof e&&e.call(this)},250)}function t(e){var a=new Image;a.onload=function(){o.removeClass("_loading"),"imgdrawing"==A&&c.hide();var e=P().getContext("2d");e.drawImage(a,0,0,2*W,2*k),e.strokeStyle=w,e.lineWidth=g},a.src=e}function n(e,a,i,t,n){var s=n<t?1/t:1/n;e.beginPath(),e.moveTo(a+t,i);for(var d=0;d<2*Math.PI;d+=s)e.lineTo(a+t*Math.cos(d),i+n*Math.sin(d));e.closePath(),e.stroke(),"eraser"==m&&e.fill()}function S(e){var a,i;i=e,"[object String]"!=Object.prototype.toString.call(i)||0!=(i=i.toLowerCase()).indexOf("http:")&&0!=i.indexOf("https:")&&0!=i.indexOf("/")?(a=e,"[object String]"==Object.prototype.toString.call(a)&&-1!=(a=a.toLowerCase()).indexOf("base64,")&&(navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPad/i)?ImageOrientationFix({image:e,imgType:"base64",onFix:function(e){t(e)}}):t(e))):t(e)}function L(){var e=P().toDataURL();p.push(e),b=!1}function D(){c.hide(),v.hide()}a.hide=function(){D(),I(function(){o.html("")})};var i=function(){var e=P(),a=e.getContext("2d");e.addEventListener("touchstart",function(e){x=e.changedTouches[0].pageX,"handwriting"==A?y=e.changedTouches[0].pageY-72-M:(c.hide(),y=e.changedTouches[0].pageY-36-M,x-=T),x*=2,y*=2,x1=x,y1=y,"line"==f&&(a.beginPath(),a.moveTo(x,y))},!1),e.addEventListener("touchmove",function(e){e.preventDefault(),x1=e.changedTouches[0].pageX,"handwriting"==A?y1=e.changedTouches[0].pageY-72-M:(y1=e.changedTouches[0].pageY-36-M,x1-=T),x1*=2,y1*=2,"line"==f&&(a.lineTo(x1,y1),a.stroke()),E=!0},!1),e.addEventListener("touchend",function(e){x1-x!=0&&y1-y!=0&&("rectangle"==f&&("eraser"==m?a.fillRect(x<x1?x:x1,y<y1?y:y1,Math.abs(x1-x),Math.abs(y1-y)):a.strokeRect(x<x1?x:x1,y<y1?y:y1,Math.abs(x1-x),Math.abs(y1-y))),"circle"==f&&n(a,(x1-x)/2+x,(y1-y)/2+y,Math.abs((x1-x)/2),Math.abs((y1-y)/2))),L()},!1)},s=function(){var e=P(),a=e.getContext("2d"),i=0;e.addEventListener("mousedown",function(e){i=1,x=e.pageX,"handwriting"==A?y=e.pageY-72-M:(y=e.pageY-36-M,x-=T,c.hide()),x*=2,y*=2,x1=x,y1=y,"line"==f&&(a.beginPath(),a.moveTo(x,y))},!1),e.addEventListener("mousemove",function(e){i&&(x1=e.pageX,"handwriting"==A?y1=e.pageY-72-M:(y1=e.pageY-36-M,x1-=T),x1*=2,y1*=2,"line"==f&&(a.lineTo(x1,y1),a.stroke())),E=!0},!1),document.addEventListener("mouseup",function(e){i&&x1-x!=0&&y1-y!=0&&("rectangle"==f&&("eraser"==m?a.fillRect(x<x1?x:x1,y<y1?y:y1,Math.abs(x1-x),Math.abs(y1-y)):a.strokeRect(x<x1?x:x1,y<y1?y:y1,Math.abs(x1-x),Math.abs(y1-y))),"circle"==f&&n(a,(x1-x)/2+x,(y1-y)/2+y,Math.abs((x1-x)/2),Math.abs((y1-y)/2))),i&&L(),i=0},!1)},R={};return a.draw=function(e){if(R.type="",$.extend(R,e),u=R.data||C,p=new Array,0==(r=$(".wev-drawing-win")).length){var a=['<div class="wev-drawing-win">','<div class="wev-drawing-header">','<a href="javascript:void(0);" class="save-btn"></a>','<a href="javascript:void(0);" class="close-btn"></a>','<a href="javascript:void(0);" class="pen-btn selected"></a>','<a href="javascript:void(0);" class="eraser-btn"></a>','<a href="javascript:void(0);" class="undo-btn"></a>','<a href="javascript:void(0);" class="refresh-btn"></a>',"</div>",'<div class="wev-drawing-content">',"</div>",'<div class="wev-drawing-config">','<div class="wev-drawing-graph" data-type="rectangle"></div>','<div class="wev-drawing-graph" data-type="circle"></div>','<div class="wev-drawing-graph selected" data-type="line"></div>','<div class="wev-drawing-point" data-lineWidth="2"></div>','<div class="wev-drawing-point selected" data-lineWidth="5"></div>','<div class="wev-drawing-point" data-lineWidth="10"></div>','<div class="wev-drawing-color selected" data-color="red"></div>','<div class="wev-drawing-color" data-color="#000"></div>','<div class="wev-drawing-color" data-color="#fff"></div>','<div class="wev-drawing-color" data-color="green"></div>','<div class="wev-drawing-color" data-color="#ffff00"></div>','<div class="wev-drawing-color" data-color="#f31bf3"></div>',"</div>",'<div class="wev-eraser-config">','<div class="wev-eraser-point" data-lineWidth="15"></div>','<div class="wev-eraser-point" data-lineWidth="20"></div>','<div class="wev-eraser-point" data-lineWidth="25"></div>','<div class="wev-eraser-point selected" data-lineWidth="30"></div>','<div class="wev-eraser-point" data-lineWidth="35"></div>','<div class="wev-eraser-point" data-lineWidth="40"></div>','<div class="wev-eraser-point" data-lineWidth="45"></div>','<a class="wev-eraser-clean"></a>',"</div>",'<div class="wev-drawing-footer">','<a href="javascript:void(0);" class="save-btn"></a>',"</div>","</div>"].join("\n");r=$(a);var i=$("#page_view");0==i.length&&(i=$(document.body)),i.append(r),l=$(".wev-drawing-header .title",r),o=$(".wev-drawing-content",r),c=$(".wev-drawing-config",r),v=$(".wev-eraser-config",r);var t=h?"webkitAnimationEnd":"animationend";r[0].addEventListener(t,function(){$(this).hasClass("slideup-out")&&(r.hide(),r.removeClass("slideup-out"))}),$(".close-btn",r).click(function(){p=new Array,D(),I(function(){o.html("");var e=R.callback||{};"function"==typeof e.close&&e.close.call(this)})}),$(".refresh-btn",r).click(function(){"imgdrawing"==A&&D(),o.html(""),o.addClass("_loading"),m="draw",p=new Array,E=!1,S(u)}),$(".pen-btn",r).click(function(){$(this).addClass("selected").siblings("a[class*='-btn']").removeClass("selected"),$(".wev-eraser-config",r).hide(),$(".wev-drawing-config",r).toggle(),m="draw",w=$(".wev-drawing-color.selected",r).attr("data-color")||"red",g=parseInt($(".wev-drawing-point.selected",r).attr("data-lineWidth")),f=$(".wev-drawing-graph.selected",r).attr("data-type")||"line";var e=j();e.beginPath(),e.strokeStyle=w,e.lineWidth=g}),$(".undo-btn",r).click(function(e){"imgdrawing"==A&&D(),b||(p.pop(),b=!0),0==p.length&&(E=!1),S(p.pop()||u)}),$(".eraser-btn",r).click(function(){$(this).addClass("selected").siblings("a[class*='-btn']").removeClass("selected"),$(".wev-drawing-config",r).hide(),$(".wev-eraser-config",r).toggle(),m="eraser",w="#fff",g=parseInt($(".wev-eraser-point.selected",r).attr("data-lineWidth")),f="line";var e=j();e.beginPath(),e.lineWidth=g,e.strokeStyle=w}),$(".save-btn",r).click(function(){p=new Array,D(),I(function(){var e=E?P().toDataURL():u;o.html("");var a=R.callback||{};"function"==typeof a.done&&(E||u!=C?a.done.call(this,e):a.close.call(this))})}),$(".wev-drawing-graph",r).click(function(){$(this).hasClass("selected")||($(this).siblings(".wev-drawing-graph").removeClass("selected"),$(this).addClass("selected"),f=$(this).attr("data-type"))}),$(".wev-drawing-point",r).click(function(){if(!$(this).hasClass("selected")){$(this).siblings(".wev-drawing-point").removeClass("selected"),$(this).addClass("selected"),g=parseInt($(this).attr("data-lineWidth"));var e=j();e.beginPath(),e.lineWidth=g}}),$(".wev-eraser-point",r).click(function(){if(!$(this).hasClass("selected")){$(this).siblings(".wev-eraser-point").removeClass("selected"),$(this).addClass("selected"),g=parseInt($(this).attr("data-lineWidth"));var e=j();e.beginPath(),e.lineWidth=g}}),$(".wev-drawing-color",r).click(function(){if(!$(this).hasClass("selected")){$(this).siblings(".wev-drawing-color").removeClass("selected"),$(this).addClass("selected"),w=$(this).attr("data-color");var e=j();e.beginPath(),e.strokeStyle=w}}),$(".wev-eraser-clean",r).click(function(){L(),S(C)})}if(A=R.type||"imgdrawing",T=M=0,"handwriting"==A)$(".eraser-btn",r).show(),W=$(window).width()-6,k=($(window).height()-72)/2,r.addClass("handwriting").removeClass("imgdrawing"),c.show();else{winW=$(window).width(),winH=$(window).height()-36;var n=R.width||winW,s=R.height||winH;$(".eraser-btn",r).hide(),winW<winH?(W=winW,k=parseInt(W*(s/n))):(k=winH,W=parseInt(k*(n/s))),k<winH&&(M=(winH-k)/2),W<winW&&(T=(winW-W)/2),r.addClass("imgdrawing").removeClass("handwriting")}l.html(R.title||""),o.addClass("_loading"),r.css("visibility","hidden"),r.show(),function(){v.hide(),m="draw",w="red",g=5,f="line";var e=j();e.beginPath(),e.strokeStyle=w,e.lineWidth=g,$(".wev-drawing-color[data-color='red']",r).addClass("selected").siblings(".wev-drawing-color").removeClass("selected"),$(".wev-drawing-point[data-lineWidth='5']",r).addClass("selected").siblings(".wev-drawing-point").removeClass("selected"),$(".wev-drawing-graph[data-type='line']",r).addClass("selected").siblings(".wev-drawing-graph").removeClass("selected"),$(".wev-eraser-point[data-lineWidth='30']",r).addClass("selected").siblings(".wev-eraser-point").removeClass("selected"),$("a.pen-btn",r).addClass("selected").siblings("a[class*='-btn']").removeClass("selected")}(),setTimeout(function(){r.addClass("slideup-in"),r.css("visibility","visible")},1);var d=0;navigator.userAgent.match(/iPhone/i)||navigator.userAgent.match(/iPad/i)||(d=300),setTimeout(function(){S(R.data||C)},d)},document.IMGDRAWLOADED=!0,a});