jquery-gray
Version:
Make an image grayscale in all browsers.
4 lines (3 loc) • 9.6 kB
JavaScript
/*! Gray v1.7.0 https://github.com/karlhorky/gray) | MIT */
/*! Modernizr 2.8.3 (Custom Build) | MIT & BSD */
if(function(e,t,i){if(!e.Modernizr){var r=[],n=[],s={_version:"3.6.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,t){var i=this;setTimeout((function(){t(i[e])}),0)},addTest:function(e,t,i){n.push({name:e,fn:t,options:i})},addAsyncTest:function(e){n.push({name:null,fn:e})}},o=s._config.usePrefixes?" -webkit- -moz- -o- -ms- ".split(" "):["",""];s._prefixes=o;var a=function(){};a.prototype=s,(a=new a).addTest("svgfilters",(function(){var t=!1;try{t="SVGFEColorMatrixElement"in e&&2==SVGFEColorMatrixElement.SVG_FECOLORMATRIX_TYPE_SATURATE}catch(e){}return t}));var l="CSS"in e&&"supports"in e.CSS,d="supportsCSS"in e;a.addTest("supports",l||d);var u=t.documentElement,f="svg"===u.nodeName.toLowerCase();a.addTest("inlinesvg",(function(){var e=w("div");return e.innerHTML="<svg/>","http://www.w3.org/2000/svg"==("undefined"!=typeof SVGRect&&e.firstChild&&e.firstChild.namespaceURI)}));var h="Moz O ms Webkit",g=s._config.usePrefixes?h.split(" "):[];s._cssomPrefixes=g;var p=s._config.usePrefixes?h.toLowerCase().split(" "):[];s._domPrefixes=p;var c={elem:w("modernizr")};a._q.push((function(){delete c.elem}));var m={style:c.elem.style};a._q.unshift((function(){delete m.style})),s.testAllProps=k,s.testAllProps=M,a.addTest("cssfilters",(function(){if(a.supports)return M("filter","blur(2px)");var e=w("a");return e.style.cssText=o.join("filter:blur(2px); "),!!e.style.length&&(t.documentMode===i||t.documentMode>9)})),function(){var e,t,i,s,o,l;for(var d in n)if(n.hasOwnProperty(d)){if(e=[],(t=n[d]).name&&(e.push(t.name.toLowerCase()),t.options&&t.options.aliases&&t.options.aliases.length))for(i=0;i<t.options.aliases.length;i++)e.push(t.options.aliases[i].toLowerCase());for(s=v(t.fn,"function")?t.fn():t.fn,o=0;o<e.length;o++)1===(l=e[o].split(".")).length?a[l[0]]=s:(!a[l[0]]||a[l[0]]instanceof Boolean||(a[l[0]]=new Boolean(a[l[0]])),a[l[0]][l[1]]=s),r.push((s?"":"no-")+l.join("-"))}}(),function(e){var t=u.className,i=a._config.classPrefix||"";if(f&&(t=t.baseVal),a._config.enableJSClass){var r=new RegExp("(^|\\s)"+i+"no-js(\\s|$)");t=t.replace(r,"$1"+i+"js$2")}a._config.enableClasses&&(t+=" "+i+e.join(" "+i),f?u.className.baseVal=t:u.className=t)}(r),delete s.addTest,delete s.addAsyncTest;for(var y=0;y<a._q.length;y++)a._q[y]();e.Modernizr=a}function v(e,t){return typeof e===t}function w(){return"function"!=typeof t.createElement?t.createElement(arguments[0]):f?t.createElementNS.call(t,"http://www.w3.org/2000/svg",arguments[0]):t.createElement.apply(t,arguments)}function x(e,t){return!!~(""+e).indexOf(t)}function b(e){return e.replace(/([a-z])-([a-z])/g,(function(e,t,i){return t+i.toUpperCase()})).replace(/^-/,"")}function S(e,t){return function(){return e.apply(t,arguments)}}function C(t,i,r){var n;if("getComputedStyle"in e){n=getComputedStyle.call(e,t,i);var s=e.console;if(null!==n)r&&(n=n.getPropertyValue(r));else if(s){s[s.error?"error":"log"].call(s,"getComputedStyle returning null, its possible modernizr test results are inaccurate")}}else n=!i&&t.currentStyle&&t.currentStyle[r];return n}function T(e){return e.replace(/([A-Z])/g,(function(e,t){return"-"+t.toLowerCase()})).replace(/^ms-/,"-ms-")}function _(e,i,r,n){var s,o,a,l,d="modernizr",h=w("div"),g=function(){var e=t.body;return e||((e=w(f?"svg":"body")).fake=!0),e}();if(parseInt(r,10))for(;r--;)(a=w("div")).id=n?n[r]:d+(r+1),h.appendChild(a);return(s=w("style")).type="text/css",s.id="s"+d,(g.fake?g:h).appendChild(s),g.appendChild(h),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(t.createTextNode(e)),h.id=d,g.fake&&(g.style.background="",g.style.overflow="hidden",l=u.style.overflow,u.style.overflow="hidden",u.appendChild(g)),o=i(h,e),g.fake?(g.parentNode.removeChild(g),u.style.overflow=l,u.offsetHeight):h.parentNode.removeChild(h),!!o}function z(t,r){var n=t.length;if("CSS"in e&&"supports"in e.CSS){for(;n--;)if(e.CSS.supports(T(t[n]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var s=[];n--;)s.push("("+T(t[n])+":"+r+")");return _("@supports ("+(s=s.join(" or "))+") { #modernizr { position: absolute; } }",(function(e){return"absolute"==C(e,null,"position")}))}return i}function N(e,t,r,n){function s(){a&&(delete m.style,delete m.modElem)}if(n=!v(n,"undefined")&&n,!v(r,"undefined")){var o=z(e,r);if(!v(o,"undefined"))return o}for(var a,l,d,u,f,h=["modernizr","tspan","samp"];!m.style&&h.length;)a=!0,m.modElem=w(h.shift()),m.style=m.modElem.style;for(d=e.length,l=0;d>l;l++)if(u=e[l],f=m.style[u],x(u,"-")&&(u=b(u)),m.style[u]!==i){if(n||v(r,"undefined"))return s(),"pfx"!=t||u;try{m.style[u]=r}catch(e){}if(m.style[u]!=f)return s(),"pfx"!=t||u}return s(),!1}function k(e,t,i,r,n){var s=e.charAt(0).toUpperCase()+e.slice(1),o=(e+" "+g.join(s+" ")+s).split(" ");return v(t,"string")||v(t,"undefined")?N(o,t,r,n):function(e,t,i){var r;for(var n in e)if(e[n]in t)return!1===i?e[n]:v(r=t[e[n]],"function")?S(r,i||t):r;return!1}(o=(e+" "+p.join(s+" ")+s).split(" "),t,i)}function M(e,t,r){return k(e,i,i,t,r)}}(window,document),!window.Modernizr._prefixes)throw new Error("jquery-gray: Modernizr._prefixes not set!\n\nPlease add the necessary feature detects:\nhttps://github.com/karlhorky/gray#modernizr");!function(e,t,i,r){var n={fade:!1,classes:{fade:"grayscale-fade"}},s=0;function o(t,i){var r;r=((i=i||{}).classes||{}).fade||n.classes.fade,i.fade=i.fade||t.className.indexOf(r)>-1,this.element=t,this.elementId=s++,this.settings=e.extend({},n,i),this._defaults=n,this._name="gray",this.init()}e.extend(o.prototype,{init:function(){var t;!Modernizr.cssfilters&&Modernizr.inlinesvg&&Modernizr.svgfilters&&(t=e(this.element),(this.cssFilterDeprecated(t)||this.settings.fade)&&this.switchImage(t))},cssFilterDeprecated:function(e){return"none"===e.css("filter")},elementType:function(e){return"IMG"===e.prop("tagName")?"Img":"Bg"},pxToNumber:function(e){return parseInt(e.replace("px",""))},getComputedStyle:function(e){for(var i={},r={},n=0,s=(i=t.getComputedStyle(e,null)).length;n<s;n++){var o=i[n],a=i.getPropertyValue(o);r[o]=a}return r},extractUrl:function(e){return startRegex=/^url\(["']?/,endRegex=/["']?\)$/,e.replace(startRegex,"").replace(endRegex,"")},positionToNegativeMargin:function(e){var t;return t=e.match(/^(-?\d+\S+)/)[0],"margin:"+e.match(/\s(-?\d+\S+)$/)[0]+" 0 0 "+t},getBgSize:function(t,i){var r,n,s,o,a,l;if((r=new Image).src=t,"auto"!==i&&"cover"!==i&&"contain"!==i&&"inherit"!==i){var d=e(this.element);n=r.width/r.height,o=parseInt((i.match(/^(\d+)px/)||[0,0])[1]),l=parseInt((i.match(/\s(\d+)px$/)||[0,0])[1]),s=d.height()*n,a=d.width()/n,o=o||s,l=l||a}return o||l?{width:o,height:l}:{width:r.width,height:r.height}},getImgParams:function(e){var t={};t.styles=this.getComputedStyle(e[0]);var i={top:this.pxToNumber(t.styles["padding-top"]),right:this.pxToNumber(t.styles["padding-right"]),bottom:this.pxToNumber(t.styles["padding-bottom"]),left:this.pxToNumber(t.styles["padding-left"])},r={top:this.pxToNumber(t.styles["border-top-width"]),right:this.pxToNumber(t.styles["border-right-width"]),bottom:this.pxToNumber(t.styles["border-bottom-width"]),left:this.pxToNumber(t.styles["border-left-width"])};return t.image={width:this.pxToNumber(t.styles.width),height:this.pxToNumber(t.styles.height)},t.svg={url:e[0].src,padding:i,borderWidth:r,width:t.image.width+i.left+i.right+r.left+r.right,height:t.image.height+i.top+i.bottom+r.top+r.bottom,offset:""},t},getBgParams:function(t){var i,r={};return i=this.extractUrl(t.css("background-image")),bgSize=this.getBgSize(i,t.css("background-size")),offset=this.positionToNegativeMargin(t.css("background-position")),r.styles=this.getComputedStyle(t[0]),r.svg=e.extend({url:i},bgSize,{offset:offset}),r.image={width:r.svg.width,height:r.svg.height},r},setStyles:function(e,t,i,r){return t.display="inline-block",t.overflow=t["overflow-x"]=t["overflow-y"]="hidden",t["background-image"]='url("'+i.url+'")',t["background-size"]=r.width+"px "+r.height+"px","Img"===e&&(t["background-repeat"]="no-repeat",t["background-position"]=i.padding.left+"px "+i.padding.top+"px",t.width=i.width,t.height=i.height),delete t.filter,t},addSVGFilterOnce:function(){$body=e("body"),$body.data("plugin_gray_has_filter")||$body.data("plugin_gray_has_filter","true").append('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="position:absolute"><defs><filter id="gray"><feColorMatrix type="saturate" values="0"/></filter></defs></svg>')},switchImage:function(t){var i,r,n,s,o,a;r=this["get"+(i=this.elementType(t))+"Params"](t),n=this.settings.fade?this.settings.classes.fade:"",s=t[0].alt?' aria-labelledby="gray-title-'+this.elementId+'"':"",o=t[0].alt?'<title id="gray-title-'+this.elementId+'">'+t[0].alt+"</title>":"",a=e('<div class="grayscale grayscale-replaced '+n+'"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 '+r.svg.width+" "+r.svg.height+'" width="'+r.svg.width+'" height="'+r.svg.height+'" style="'+r.svg.offset+'" role="img"'+s+">"+o+'<image filter="url("#gray")" x="0" y="0" width="'+r.image.width+'" height="'+r.image.height+'" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="'+r.svg.url+'" /></svg></div>'),r.styles=this.setStyles(i,r.styles,r.svg,r.image),a.css(r.styles),this.addSVGFilterOnce(),t.replaceWith(a)}}),e.fn.gray=function(t){return this.each((function(){e.data(this,"plugin_gray")||e.data(this,"plugin_gray",new o(this,t))})),this},e(t).on("load",(function(){e(".grayscale:not(.grayscale-replaced)").gray()}))}(jQuery,window,document)