jsketch/jquery.sketchable.min.js

(function($){var _ns="sketchable";var methods={init:function(opts){var options=$.extend(true,{},$.fn.sketchable.defaults,opts||{});return this.each(function(){var elem=$(this),data=elem.data(_ns);if(!data){if(options.interactive){elem.bind("mousedown",mousedownHandler);elem.bind("mousemove",mousemoveHandler);elem.bind("mouseup",mouseupHandler);elem.bind("touchstart",touchdownHandler);elem.bind("touchmove",touchmoveHandler);elem.bind("touchend",touchupHandler);this.onselectstart=function(){return false}}}var sketch=new jSketch(this,options.graphics);sketch.isDrawing=false;elem.data(_ns,{strokes:[],coords:{},timestamp:(new Date).getTime(),sketch:sketch,options:options});if(typeof options.events.init==="function"){options.events.init(elem,elem.data(_ns))}})},config:function(opts){return this.each(function(){var elem=$(this),data=elem.data(_ns);data.options=$.extend(true,{},$.fn.sketchable.defaults,opts||{})})},strokes:function(arr){if(arr){return this.each(function(){var elem=$(this),data=elem.data(_ns);data.strokes=arr})}else{var data=$(this).data(_ns);return data.strokes}},handler:function(callback){return this.each(function(){var elem=$(this),data=elem.data(_ns);callback(elem,data)})},clear:function(){return this.each(function(){var elem=$(this),data=elem.data(_ns)||{},options=data.options;if(data.sketch){data.sketch.clear();data.strokes=[];data.coords={}}if(options&&typeof options.events.clear==="function"){options.events.clear(elem,data)}})},reset:function(opts){return this.each(function(){var elem=$(this),data=elem.data(_ns)||{},options=data.options;elem.sketchable("destroy").sketchable(opts);if(options&&typeof options.events.reset==="function"){options.events.reset(elem,data)}})},destroy:function(){return this.each(function(){var elem=$(this),data=elem.data(_ns)||{},options=data.options;if(options.interactive){elem.unbind("mouseup",mouseupHandler);elem.unbind("mousemove",mousemoveHandler);elem.unbind("mousedown",mousedownHandler);elem.unbind("touchstart",touchdownHandler);elem.unbind("touchmove",touchmoveHandler);elem.unbind("touchend",touchupHandler)}elem.removeData(_ns);if(options&&typeof options.events.destroy==="function"){options.events.destroy(elem,data)}})}};$.fn.sketchable=function(method){if("methods functions hooks".split(" ").indexOf(method)>-1){return methods}else if(methods[method]){return methods[method].apply(this,Array.prototype.slice.call(arguments,1))}else if(typeof method==="object"||!method){return methods.init.apply(this,arguments)}else{$.error("Method "+method+' does not exist. See jQuery.sketchable("methods").')}return this};$.fn.sketchable.defaults={interactive:true,mouseupMovements:false,relTimestamps:false,multitouch:true,events:{},graphics:{firstPointSize:3,lineWidth:3,strokeStyle:"#F0F",fillStyle:"#F0F",lineCap:"round",lineJoin:"round",miterLimit:10}};function getMousePos(e){var elem=$(e.target),pos=elem.offset();return{x:Math.round(e.pageX-pos.left),y:Math.round(e.pageY-pos.top)}}function saveMousePos(idx,data,pt){if(!data.coords[idx]){data.coords[idx]=[]}var time=(new Date).getTime();if(data.options.relTimestamps){if(data.strokes.length===0&&data.coords[idx].length===0)data.timestamp=time;time-=data.timestamp}data.coords[idx].push([pt.x,pt.y,time,+data.sketch.isDrawing])}function mousedownHandler(e){if(e.originalEvent.touches)return false;downHandler(e)}function mousemoveHandler(e){if(e.originalEvent.touches)return false;moveHandler(e)}function mouseupHandler(e){if(e.originalEvent.touches)return false;upHandler(e)}function touchdownHandler(e){var elem=$(e.target),data=elem.data(_ns),options=data.options;var touches=e.originalEvent.changedTouches;if(options.multitouch){for(var i=0;i<touches.length;i++){var touch=touches[i];downHandler(touch)}}else{downHandler(touches[0])}e.preventDefault()}function touchmoveHandler(e){var elem=$(e.target),data=elem.data(_ns),options=data.options;var touches=e.originalEvent.changedTouches;if(options.multitouch){for(var i=0;i<touches.length;i++){var touch=touches[i];moveHandler(touch)}}else{moveHandler(touches[0])}e.preventDefault()}function touchupHandler(e){var elem=$(e.target),data=elem.data(_ns),options=data.options;var touches=e.originalEvent.changedTouches;if(options.multitouch){for(var i=0;i<touches.length;i++){var touch=touches[i];upHandler(touch)}}else{upHandler(touches[0])}e.preventDefault()}function downHandler(e){if(e.which===3)return false;var idx=e.identifier||0;var elem=$(e.target),data=elem.data(_ns),options=data.options;data.sketch.isDrawing=true;var p=getMousePos(e);if(options.graphics.firstPointSize>0){data.sketch.fillCircle(p.x,p.y,options.graphics.firstPointSize)}if(!data.coords[idx]){data.coords[idx]=[]}if(data.coords[idx].length>0){data.strokes.push(data.coords[idx]);data.coords[idx]=[]}saveMousePos(idx,data,p);if(typeof options.events.mousedown==="function"){options.events.mousedown(elem,data,e)}}function moveHandler(e){var idx=e.identifier||0;var elem=$(e.target),data=elem.data(_ns),options=data.options;if((!options.mouseupMovements||data.strokes.length===0)&&!data.sketch.isDrawing)return;var p=getMousePos(e);if(data.sketch.isDrawing){var last=data.coords[idx][data.coords[idx].length-1];data.sketch.beginPath().line(last[0],last[1],p.x,p.y).stroke().closePath()}saveMousePos(idx,data,p);if(typeof options.events.mousemove==="function"){options.events.mousemove(elem,data,e)}}function upHandler(e){var idx=e.identifier||0;var elem=$(e.target),data=elem.data(_ns),options=data.options;data.sketch.isDrawing=false;data.strokes.push(data.coords[idx]);data.coords[idx]=[];if(typeof options.events.mouseup==="function"){options.events.mouseup(elem,data,e)}}})(jQuery);