trAvis - MANAGER
Edit File: desaturate.js
/* * Pixastic Lib - Core Functions - v0.1.3 * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/ * License: [http://www.pixastic.com/lib/license.txt] */ var Pixastic=(function(){function addEvent(el,event,handler){if(el.addEventListener){el.addEventListener(event,handler,false)}else{if(el.attachEvent){el.attachEvent("on"+event,handler)}}}function onready(handler){var handlerDone=false;var execHandler=function(){if(!handlerDone){handlerDone=true;handler()}};document.write('<script defer src="//:" id="__onload_ie_pixastic__"><\/script>');var script=document.getElementById("__onload_ie_pixastic__");script.onreadystatechange=function(){if(script.readyState=="complete"){script.parentNode.removeChild(script);execHandler()}};if(document.addEventListener){document.addEventListener("DOMContentLoaded",execHandler,false)}addEvent(window,"load",execHandler)}function init(){var imgEls=getElementsByClass("pixastic",null,"img");var canvasEls=getElementsByClass("pixastic",null,"canvas");var elements=imgEls.concat(canvasEls);for(var i=0;i<elements.length;i++){(function(){var el=elements[i];var actions=[];var classes=el.className.split(" ");for(var c=0;c<classes.length;c++){var cls=classes[c];if(cls.substring(0,9)=="pixastic-"){var actionName=cls.substring(9);if(actionName!=""){actions.push(actionName)}}}if(actions.length){if(el.tagName.toLowerCase()=="img"){var dataImg=new Image();dataImg.src=el.src;if(dataImg.complete){for(var a=0;a<actions.length;a++){var res=Pixastic.applyAction(el,el,actions[a],null);if(res){el=res}}}else{dataImg.onload=function(){for(var a=0;a<actions.length;a++){var res=Pixastic.applyAction(el,el,actions[a],null);if(res){el=res}}}}}else{setTimeout(function(){for(var a=0;a<actions.length;a++){var res=Pixastic.applyAction(el,el,actions[a],null);if(res){el=res}}},1)}}})()}}if(typeof pixastic_parseonload!="undefined"&&pixastic_parseonload){onready(init)}function getElementsByClass(searchClass,node,tag){var classElements=new Array();if(node==null){node=document}if(tag==null){tag="*"}var els=node.getElementsByTagName(tag);var elsLen=els.length;var pattern=new RegExp("(^|\\s)"+searchClass+"(\\s|$)");for(i=0,j=0;i<elsLen;i++){if(pattern.test(els[i].className)){classElements[j]=els[i];j++}}return classElements}var debugElement;function writeDebug(text,level){if(!Pixastic.debug){return}try{switch(level){case"warn":console.warn("Pixastic:",text);break;case"error":console.error("Pixastic:",text);break;default:console.log("Pixastic:",text)}}catch(e){}if(!debugElement){}}var hasCanvas=(function(){var c=document.createElement("canvas");var val=false;try{val=!!((typeof c.getContext=="function")&&c.getContext("2d"))}catch(e){}return function(){return val}})();var hasCanvasImageData=(function(){var c=document.createElement("canvas");var val=false;var ctx;try{if(typeof c.getContext=="function"&&(ctx=c.getContext("2d"))){val=(typeof ctx.getImageData=="function")}}catch(e){}return function(){return val}})();var hasGlobalAlpha=(function(){var hasAlpha=false;var red=document.createElement("canvas");if(hasCanvas()&&hasCanvasImageData()){red.width=red.height=1;var redctx=red.getContext("2d");redctx.fillStyle="rgb(255,0,0)";redctx.fillRect(0,0,1,1);var blue=document.createElement("canvas");blue.width=blue.height=1;var bluectx=blue.getContext("2d");bluectx.fillStyle="rgb(0,0,255)";bluectx.fillRect(0,0,1,1);redctx.globalAlpha=0.5;redctx.drawImage(blue,0,0);var reddata=redctx.getImageData(0,0,1,1).data;hasAlpha=(reddata[2]!=255)}return function(){return hasAlpha}})();return{parseOnLoad:false,debug:false,applyAction:function(img,dataImg,actionName,options){options=options||{};var imageIsCanvas=(img.tagName.toLowerCase()=="canvas");if(imageIsCanvas&&Pixastic.Client.isIE()){if(Pixastic.debug){writeDebug("Tried to process a canvas element but browser is IE.")}return false}var canvas,ctx;var hasOutputCanvas=false;if(Pixastic.Client.hasCanvas()){hasOutputCanvas=!!options.resultCanvas;canvas=options.resultCanvas||document.createElement("canvas");ctx=canvas.getContext("2d")}var w=img.offsetWidth;var h=img.offsetHeight;if(imageIsCanvas){w=img.width;h=img.height}if(w==0||h==0){if(img.parentNode==null){var oldpos=img.style.position;var oldleft=img.style.left;img.style.position="absolute";img.style.left="-9999px";document.body.appendChild(img);w=img.offsetWidth;h=img.offsetHeight;document.body.removeChild(img);img.style.position=oldpos;img.style.left=oldleft}else{if(Pixastic.debug){writeDebug("Image has 0 width and/or height.")}return}}if(actionName.indexOf("(")>-1){var tmp=actionName;actionName=tmp.substr(0,tmp.indexOf("("));var arg=tmp.match(/\((.*?)\)/);if(arg[1]){arg=arg[1].split(";");for(var a=0;a<arg.length;a++){thisArg=arg[a].split("=");if(thisArg.length==2){if(thisArg[0]=="rect"){var rectVal=thisArg[1].split(",");options[thisArg[0]]={left:parseInt(rectVal[0],10)||0,top:parseInt(rectVal[1],10)||0,width:parseInt(rectVal[2],10)||0,height:parseInt(rectVal[3],10)||0}}else{options[thisArg[0]]=thisArg[1]}}}}}if(!options.rect){options.rect={left:0,top:0,width:w,height:h}}else{options.rect.left=Math.round(options.rect.left);options.rect.top=Math.round(options.rect.top);options.rect.width=Math.round(options.rect.width);options.rect.height=Math.round(options.rect.height)}var validAction=false;if(Pixastic.Actions[actionName]&&typeof Pixastic.Actions[actionName].process=="function"){validAction=true}if(!validAction){if(Pixastic.debug){writeDebug('Invalid action "'+actionName+'". Maybe file not included?')}return false}if(!Pixastic.Actions[actionName].checkSupport()){if(Pixastic.debug){writeDebug('Action "'+actionName+'" not supported by this browser.')}return false}if(Pixastic.Client.hasCanvas()){if(canvas!==img){canvas.width=w;canvas.height=h}if(!hasOutputCanvas){canvas.style.width=w+"px";canvas.style.height=h+"px"}ctx.drawImage(dataImg,0,0,w,h);if(!img.__pixastic_org_image){canvas.__pixastic_org_image=img;canvas.__pixastic_org_width=w;canvas.__pixastic_org_height=h}else{canvas.__pixastic_org_image=img.__pixastic_org_image;canvas.__pixastic_org_width=img.__pixastic_org_width;canvas.__pixastic_org_height=img.__pixastic_org_height}}else{if(Pixastic.Client.isIE()&&typeof img.__pixastic_org_style=="undefined"){img.__pixastic_org_style=img.style.cssText}}var params={image:img,canvas:canvas,width:w,height:h,useData:true,options:options};var res=Pixastic.Actions[actionName].process(params);if(!res){return false}if(Pixastic.Client.hasCanvas()){if(params.useData){if(Pixastic.Client.hasCanvasImageData()){canvas.getContext("2d").putImageData(params.canvasData,options.rect.left,options.rect.top);canvas.getContext("2d").fillRect(0,0,0,0)}}if(!options.leaveDOM){canvas.title=img.title;canvas.imgsrc=img.imgsrc;if(!imageIsCanvas){canvas.alt=img.alt}if(!imageIsCanvas){canvas.imgsrc=img.src}canvas.className=img.className;canvas.style.cssText=img.style.cssText;canvas.name=img.name;canvas.tabIndex=img.tabIndex;canvas.id=img.id;if(img.parentNode&&img.parentNode.replaceChild){img.parentNode.replaceChild(canvas,img)}}options.resultCanvas=canvas;return canvas}return img},prepareData:function(params,getCopy){var ctx=params.canvas.getContext("2d");var rect=params.options.rect;var dataDesc=ctx.getImageData(rect.left,rect.top,rect.width,rect.height);var data=dataDesc.data;if(!getCopy){params.canvasData=dataDesc}return data},process:function(img,actionName,options,callback){if(img.tagName.toLowerCase()=="img"){var dataImg=new Image();dataImg.src=img.src;if(dataImg.complete){var res=Pixastic.applyAction(img,dataImg,actionName,options);if(callback){callback(res)}return res}else{dataImg.onload=function(){var res=Pixastic.applyAction(img,dataImg,actionName,options);if(callback){callback(res)}}}}if(img.tagName.toLowerCase()=="canvas"){var res=Pixastic.applyAction(img,img,actionName,options);if(callback){callback(res)}return res}},revert:function(img){if(Pixastic.Client.hasCanvas()){if(img.tagName.toLowerCase()=="canvas"&&img.__pixastic_org_image){img.width=img.__pixastic_org_width;img.height=img.__pixastic_org_height;img.getContext("2d").drawImage(img.__pixastic_org_image,0,0);if(img.parentNode&&img.parentNode.replaceChild){img.parentNode.replaceChild(img.__pixastic_org_image,img)}return img}}else{if(Pixastic.Client.isIE()){if(typeof img.__pixastic_org_style!="undefined"){img.style.cssText=img.__pixastic_org_style}}}},Client:{hasCanvas:hasCanvas,hasCanvasImageData:hasCanvasImageData,hasGlobalAlpha:hasGlobalAlpha,isIE:function(){return !!document.all&&!!window.attachEvent&&!window.opera}},Actions:{}}})();if(typeof jQuery!="undefined"&&jQuery&&jQuery.fn){jQuery.fn.pixastic=function(action,options){var newElements=[];this.each(function(){if(this.tagName.toLowerCase()=="img"&&!this.complete){return}var res=Pixastic.process(this,action,options);if(res){newElements.push(res)}});if(newElements.length>0){return jQuery(newElements)}else{return this}}}Pixastic.Actions.desaturate={process:function(params){var useAverage=!!(params.options.average&¶ms.options.average!="false");if(Pixastic.Client.hasCanvasImageData()){var data=Pixastic.prepareData(params);var rect=params.options.rect;var w=rect.width;var h=rect.height;var p=w*h;var pix=p*4,pix1,pix2;if(useAverage){while(p--){data[pix-=4]=data[pix1=pix+1]=data[pix2=pix+2]=(data[pix]+data[pix1]+data[pix2])/3}}else{while(p--){data[pix-=4]=data[pix1=pix+1]=data[pix2=pix+2]=(data[pix]*0.3+data[pix1]*0.59+data[pix2]*0.11)}}return true}else{if(Pixastic.Client.isIE()){params.image.style.filter+=" gray";return true}}},checkSupport:function(){return(Pixastic.Client.hasCanvasImageData()||Pixastic.Client.isIE())}}; /** * Desaturates a set of images and adds a hover effect - when the mouse hovers the selected parent, * the images get colored. * Note: a parent should be set in the options - this is the element whose hover event will trigger * the images to get colored. * * Dependencies: Pixastic Desaturate http://www.pixastic.com/lib/docs/actions/desaturate/ * * @author Pexeto */ (function($){ $.fn.pexetoDesaturate=function(options){ var defaults={ globalHover:true, //if set to true, when hovering the parent element, all the images within it will get saturated. If set to false, only the hovered image will be saturated. //selectors saturateClass:'color', desaturateClass:'no-color', wrapperClass:'p-desaturate' }; var o=$.extend(defaults, options), $images=$(this), $parent=o.parent || $images.parent(), $desaturateImages=null, ie= pexetoSite.getBrowser().msie; /** * Inits the main functionality. */ function init(){ buldImageStructure(); bindMouseEvents(); } /** * Creates a new image structure - clones the original image and inserts the cloned copy behind the it. * After that desaturates the main image. */ function buldImageStructure(){ $images.each(function(){ var $img=$(this), $wrapper=$('<div/>',{'class':o.wrapperClass}); $img.wrap($wrapper); $img.addClass(o.saturateClass); var img = new Image(); img.onload = function() { img.width=$img.width(); img.height=$img.height(); Pixastic.process(img, "desaturate", {average : false}); }; $(img).addClass(o.desaturateClass).insertAfter($img); img.src = $img.attr('src'); }); $desaturateImages=$parent.find('.'+o.desaturateClass); } /** * Binds the mouse events depending on the hover option selected. */ function bindMouseEvents(){ if(o.globalHover){ //all the images will get colored $parent.on('mouseenter',function(){ saturate($desaturateImages); }).on('mouseleave',function(){ desaturate($desaturateImages); }); }else{ //only the hovered image will get colored $parent.on('mouseenter',function(){ saturate($(this).find('.'+o.desaturateClass)); }).on('mouseleave',function(){ desaturate($(this).find('.'+o.desaturateClass)); }); } } /** * Does the saturate (coloring) action to the selected element(s). */ function saturate($elem){ if(!ie){ $elem.stop().animate({opacity:0},200); }else{ $elem.hide(); } } /** * Does the desaturate action to the selected element(s). */ function desaturate($elem){ if(!ie){ $elem.stop().animate({opacity:1},200); }else{ $elem.show(); } } init(); }; }(jQuery));