forked from stowball/rwd.images.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrwd.images.min.js
12 lines (12 loc) · 4.88 KB
/
rwd.images.min.js
1
2
3
4
5
6
7
8
9
10
11
12
/*!
* RWD Images v0.4.2
*
* A lightweight, customisable responsive image solution, which uses a familar media query syntax
*
* Copyright (c) 2014 Matt Stow
*
* http://mattstow.com
*
* Licensed under the MIT license
*/
;(function(document){var $rwdImages,rwdImagesLength;if(document.getElementsByClassName){$rwdImages=document.getElementsByClassName("rwdimage")}else{if(document.querySelectorAll){$rwdImages=document.querySelectorAll(".rwdimage")}else{$rwdImages=[];var $allImages=document.getElementsByTagName("img");for(var a=0;a<$allImages.length;a++){if($allImages[a].className.match(/rwdimage/g)){$rwdImages.push($allImages[a])}}}}rwdImagesLength=$rwdImages.length;if(rwdImagesLength===0){return}var $this,selector,dataCore,dataCoreLength,dataCoreCurrent,dataLazyLoad,dataRetina,dataRetinaSuffix,dataEm,dataEmBase,dataFallback,dataFallbackClass,css="",cssTemp,width,height,ratio,images=[],html,i=0,x=0,hasQuerySelector=!!document.querySelector,hasEnquire=!!window.enquire,style;for(i;i<rwdImagesLength;i++){$this=$rwdImages[i];$this.setAttribute("data-rwdimage-id",i);selector='[data-rwdimage-id="'+i+'"] ';dataCore=$this.getAttribute("data-rwdimage").split(",");dataCoreLength=dataCore.length;images[i]={};images[i]["breakpoints"]=new Array(dataCoreLength);if($this.tagName.toLowerCase()==="img"){if(!$this.src){$this.src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEHAAAALAAAAAABAAEAAAICRAEAOw=="}if(hasEnquire){$this.setAttribute("data-rwdimage-has-enquire",true)}images[i]["isImage"]=true}if(hasQuerySelector){images[i]["elem"]=document.querySelector(selector)}dataEm=$this.getAttribute("data-rwdimage-em")==="true"?true:false;dataEmBase=$this.getAttribute("data-rwdimage-em-base")?parseInt($this.getAttribute("data-rwdimage-em-base")):16;cssTemp="";var cssReplace=function(str){return str.replace(/(^\s*)/,"").replace(/src:\s*/gi,"background-image: ").replace(/ratio\((\d+\/\d+)\)/gi,function(str,p1){return(eval(p1)*100)+"%"})};for(var j=0;j<dataCoreLength;j++){dataCoreCurrent=cssReplace(dataCore[j]);images[i]["breakpoints"][j]={};if(dataCoreCurrent.match(/^\(\s*?(min|max)/)){if(dataEm){dataCoreCurrent=dataCoreCurrent.replace(/m(?:in|ax)-(?:width|height):\s*(\d+)px/gi,function(str,p1){return str.replace(p1,parseInt(p1,10)/dataEmBase).replace("px","em")})}cssTemp+="@media "+dataCoreCurrent.match(/.*?\{/)[0]+selector+dataCoreCurrent.replace(/(\((min|max).*?\)|\s+(and)\s+)/g,"")+" }\n";images[i]["breakpoints"][j]["mediaquery"]=dataCoreCurrent.match(/(.*?)(\{)/)[1]}else{cssTemp+=selector+dataCoreCurrent+"\n";images[i]["breakpoints"][j]["mediaquery"]=""}}dataRetina=$this.getAttribute("data-rwdimage-retina")==="true"?true:false;dataRetinaSuffix=$this.getAttribute("data-rwdimage-retina-suffix")?$this.getAttribute("data-rwdimage-retina-suffix"):"@2x";if(dataRetina){cssTemp=cssTemp.replace(/(^@media\s*?)(\(.*?)\{(.*?\[.*?)(\..*?\))(.*)/gm,"$1$2$3$4$5\n$1$2 and (min--moz-device-pixel-ratio: 1.3), $2 and (-o-min-device-pixel-ratio: 2.6/2), $2 and (-webkit-min-device-pixel-ratio: 1.3), $2 and (min-device-pixel-ratio: 1.3), $2 and (min-resolution: 1.3dppx) {$3"+dataRetinaSuffix+"$4$5").replace(/(^\[.*?)(\..*?\))(.*)/gm,"$1$2$3\n@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) { $1"+dataRetinaSuffix+"$2$3 }")}dataFallback=$this.getAttribute("data-rwdimage-fallback");if(dataFallback){dataFallbackClass=$this.getAttribute("data-rwdimage-fallback-class")?"."+$this.getAttribute("data-rwdimage-fallback-class"):".ltie9";cssTemp+=dataFallbackClass+" "+selector+cssReplace(dataFallback)+"\n"}if($this.getAttribute("data-rwdimage-lazy-load")==="true"){cssTemp=cssTemp.replace(/(\[data-rwdimage-id="\d+"\])/g,".lazy-loaded$1")}css+=cssTemp}css=".rwdimage { background-repeat: no-repeat; background-size: contain; height: 0; width: 100%; }\n"+css+'.rwdimage[data-rwdimage-has-enquire="true"] { height: auto; padding-bottom: 0; width: auto; }\n';style=document.createElement("style");style.type="text/css";if(style.styleSheet){style.styleSheet.cssText=css}else{style.appendChild(document.createTextNode(css))}document.getElementsByTagName("head")[0].appendChild(style);window.hasComputedStyle=!!window.getComputedStyle;window.rwdImageChangeSrc=function(image){if(hasComputedStyle&&image.tagName.toLowerCase()==="img"){var newsrc=window.getComputedStyle(image).getPropertyValue("background-image").replace(/url\((?:"|')?(.*?)(?:"|')?\)/,"$1");if(newsrc!=="none"&&image.src!==newsrc){image.src=newsrc}}};var registerWithEnquire=function(x,y){if(!images[x]["breakpoints"][y]["mediaquery"]){return}enquire.register(images[x]["breakpoints"][y]["mediaquery"],function(){rwdImageChangeSrc(images[x]["elem"])})};for(x;x<images.length;x++){if(images[x]["isImage"]){for(var y=0;y<images[x]["breakpoints"].length;y++){if(hasQuerySelector&&hasComputedStyle){if(hasEnquire){registerWithEnquire(x,y)}else{rwdImageChangeSrc(images[x]["elem"])}}}}}})(document);