holder.min.js
8.78 KB
/*
Holder - 2.2 - client side image placeholders
(c) 2012-2013 Ivan Malopinsky / http://imsky.co
Provided under the MIT License.
Commercial use requires attribution.
*/var Holder=Holder||{};(function(e,t){function c(e,t){var n="complete",r="readystatechange",i=!1,s=i,o=!0,u=e.document,a=u.documentElement,f=u.addEventListener?"addEventListener":"attachEvent",l=u.addEventListener?"removeEventListener":"detachEvent",c=u.addEventListener?"":"on",h=function(o){(o.type!=r||u.readyState==n)&&((o.type=="load"?e:u)[l](c+o.type,h,i),!s&&(s=!0)&&t.call(e,null))},p=function(){try{a.doScroll("left")}catch(e){setTimeout(p,50);return}h("poll")};if(u.readyState==n)t.call(e,"lazy");else{if(u.createEventObject&&a.doScroll){try{o=!e.frameElement}catch(d){}o&&p()}u[f](c+"DOMContentLoaded",h,i),u[f](c+r,h,i),e[f](c+"load",h,i)}}function h(e){e=e.match(/^(\W)?(.*)/);var t=document["getElement"+(e[1]?e[1]=="#"?"ById":"sByClassName":"sByTagName")](e[2]),n=[];t!==null&&(t.length?n=t:t.length===0?n=t:n=[t]);return n}function p(e,t){var n={};for(var r in e)e.hasOwnProperty(r)&&(n[r]=e[r]);for(var r in t)t.hasOwnProperty(r)&&(n[r]=t[r]);return n}function d(e,t,n){t=parseInt(t,10);e=parseInt(e,10);var r=Math.max(t,e),i=Math.min(t,e),s=1/12,o=Math.min(i*.75,.75*r*s);return{height:Math.round(Math.max(n.size,o))}}function v(e){var t=e.ctx,n=e.dimensions,r=e.template,s=e.ratio,o=e.holder,u=o.textmode=="literal",a=o.textmode=="exact",f=d(n.width,n.height,r),l=f.height,c=n.width*s,h=n.height*s,p=r.font?r.font:"sans-serif";i.width=c;i.height=h;t.textAlign="center";t.textBaseline="middle";t.fillStyle=r.background;t.fillRect(0,0,c,h);t.fillStyle=r.foreground;t.font="bold "+l+"px "+p;var v=r.text?r.text:Math.floor(n.width)+"x"+Math.floor(n.height);if(u){var n=o.dimensions;v=n.width+"x"+n.height}else if(a&&o.exact_dimensions){var n=o.exact_dimensions;v=Math.floor(n.width)+"x"+Math.floor(n.height)}var m=t.measureText(v).width;m/c>=.75&&(l=Math.floor(l*.75*(c/m)));t.font="bold "+l*s+"px "+p;t.fillText(v,c/2,h/2,c);return i.toDataURL("image/png")}function m(e,t,n,i){var s=n.dimensions,o=n.theme,l=n.text?decodeURIComponent(n.text):n.text,c=s.width+"x"+s.height;o=l?p(o,{text:l}):o;o=n.font?p(o,{font:n.font}):o;t.setAttribute("data-src",i);n.theme=o;t.holder_data=n;if(e=="image"){t.setAttribute("alt",l?l:o.text?o.text+" ["+c+"]":c);if(r||!n.auto){t.style.width=s.width+"px";t.style.height=s.height+"px"}if(r)t.style.backgroundColor=o.background;else{t.setAttribute("src",v({ctx:a,dimensions:s,template:o,ratio:f,holder:n}));if(n.textmode&&n.textmode=="exact"){u.push(t);y(t)}}}else if(e=="background"){if(!r){t.style.backgroundImage="url("+v({ctx:a,dimensions:s,template:o,ratio:f,holder:n})+")";t.style.backgroundSize=s.width+"px "+s.height+"px"}}else if(e=="fluid"){t.setAttribute("alt",l?l:o.text?o.text+" ["+c+"]":c);s.height.slice(-1)=="%"?t.style.height=s.height:t.style.height=s.height+"px";s.width.slice(-1)=="%"?t.style.width=s.width:t.style.width=s.width+"px";if(t.style.display=="inline"||t.style.display===""||t.style.display=="none")t.style.display="block";if(r)t.style.backgroundColor=o.background;else{u.push(t);y(t)}}}function g(e,t){var n={height:e.clientHeight,width:e.clientWidth};if(!n.height&&!n.width){if(e.hasAttribute("data-holder-invisible"))throw new Error("Holder: placeholder is not visible");e.setAttribute("data-holder-invisible",!0);setTimeout(function(){t.call(this,e)},1);return null}e.removeAttribute("data-holder-invisible");return n}function y(e){var t;e.nodeType==null?t=u:t=[e];for(var n in t){if(!t.hasOwnProperty(n))continue;var r=t[n];if(r.holder_data){var i=r.holder_data,s=g(r,y);if(s){i.fluid&&r.setAttribute("src",v({ctx:a,dimensions:s,template:i.theme,ratio:f,holder:i}));if(i.textmode&&i.textmode=="exact"){i.exact_dimensions=s;r.setAttribute("src",v({ctx:a,dimensions:i.dimensions,template:i.theme,ratio:f,holder:i}))}}}}}function b(t,n){var r={theme:p(l.themes.gray,{})},i=!1;for(sl=t.length,j=0;j<sl;j++){var s=t[j];if(e.flags.dimensions.match(s)){i=!0;r.dimensions=e.flags.dimensions.output(s)}else if(e.flags.fluid.match(s)){i=!0;r.dimensions=e.flags.fluid.output(s);r.fluid=!0}else e.flags.textmode.match(s)?r.textmode=e.flags.textmode.output(s):e.flags.colors.match(s)?r.theme=e.flags.colors.output(s):n.themes[s]?n.themes.hasOwnProperty(s)&&(r.theme=p(n.themes[s],{})):e.flags.font.match(s)?r.font=e.flags.font.output(s):e.flags.auto.match(s)?r.auto=!0:e.flags.text.match(s)&&(r.text=e.flags.text.output(s))}return i?r:!1}var n=!1,r=!1,i=document.createElement("canvas"),s=1,o=1,u=[];if(!i.getContext)r=!0;else if(i.toDataURL("image/png").indexOf("data:image/png")<0)r=!0;else var a=i.getContext("2d");r||(s=window.devicePixelRatio||1,o=a.webkitBackingStorePixelRatio||a.mozBackingStorePixelRatio||a.msBackingStorePixelRatio||a.oBackingStorePixelRatio||a.backingStorePixelRatio||1);var f=s/o,l={domain:"holder.js",images:"img",bgnodes:".holderjs",themes:{gray:{background:"#eee",foreground:"#aaa",size:12},social:{background:"#3a5a97",foreground:"#fff",size:12},industrial:{background:"#434A52",foreground:"#C2F200",size:12},sky:{background:"#0D8FDB",foreground:"#fff",size:12},vine:{background:"#39DBAC",foreground:"#1E292C",size:12},lava:{background:"#F8591A",foreground:"#1C2846",size:12}},stylesheet:""};e.flags={dimensions:{regex:/^(\d+)x(\d+)$/,output:function(e){var t=this.regex.exec(e);return{width:+t[1],height:+t[2]}}},fluid:{regex:/^([0-9%]+)x([0-9%]+)$/,output:function(e){var t=this.regex.exec(e);return{width:t[1],height:t[2]}}},colors:{regex:/#([0-9a-f]{3,})\:#([0-9a-f]{3,})/i,output:function(e){var t=this.regex.exec(e);return{size:l.themes.gray.size,foreground:"#"+t[2],background:"#"+t[1]}}},text:{regex:/text\:(.*)/,output:function(e){return this.regex.exec(e)[1]}},font:{regex:/font\:(.*)/,output:function(e){return this.regex.exec(e)[1]}},auto:{regex:/^auto$/},textmode:{regex:/textmode\:(.*)/,output:function(e){return this.regex.exec(e)[1]}}};document.getElementsByClassName||(document.getElementsByClassName=function(e){var t=document,n,r,i,s=[];if(t.querySelectorAll)return t.querySelectorAll("."+e);if(t.evaluate){r=".//*[contains(concat(' ', @class, ' '), ' "+e+" ')]",n=t.evaluate(r,t,null,0,null);while(i=n.iterateNext())s.push(i)}else{n=t.getElementsByTagName("*"),r=new RegExp("(^|\\s)"+e+"(\\s|$)");for(i=0;i<n.length;i++)r.test(n[i].className)&&s.push(n[i])}return s});window.getComputedStyle||(window.getComputedStyle=function(e){return this.el=e,this.getPropertyValue=function(t){var n=/(\-([a-z]){1})/g;return t=="float"&&(t="styleFloat"),n.test(t)&&(t=t.replace(n,function(){return arguments[2].toUpperCase()})),e.currentStyle[t]?e.currentStyle[t]:null},this});Object.prototype.hasOwnProperty||(Object.prototype.hasOwnProperty=function(e){var t=this.__proto__||this.constructor.prototype;return e in this&&(!(e in t)||t[e]!==this[e])});for(var w in e.flags){if(!e.flags.hasOwnProperty(w))continue;e.flags[w].match=function(e){return e.match(this.regex)}}e.add_theme=function(t,n){t!=null&&n!=null&&(l.themes[t]=n);return e};e.add_image=function(t,n){var r=h(n);if(r.length)for(var i=0,s=r.length;i<s;i++){var o=document.createElement("img");o.setAttribute("data-src",t);r[i].appendChild(o)}return e};e.run=function(t){n=!0;var r=p(l,t),i=[],s=[],o=[];typeof r.images=="string"?s=h(r.images):window.NodeList&&r.images instanceof window.NodeList?s=r.images:window.Node&&r.images instanceof window.Node&&(s=[r.images]);typeof r.bgnodes=="string"?o=h(r.bgnodes):window.NodeList&&r.elements instanceof window.NodeList?o=r.bgnodes:window.Node&&r.bgnodes instanceof window.Node&&(o=[r.bgnodes]);for(c=0,f=s.length;c<f;c++)i.push(s[c]);var u=document.getElementById("holderjs-style");if(!u){u=document.createElement("style");u.setAttribute("id","holderjs-style");u.type="text/css";document.getElementsByTagName("head")[0].appendChild(u)}r.nocss||(u.styleSheet?u.styleSheet.cssText+=r.stylesheet:u.appendChild(document.createTextNode(r.stylesheet)));var a=new RegExp(r.domain+'/(.*?)"?\\)');for(var f=o.length,c=0;c<f;c++){var d=window.getComputedStyle(o[c],null).getPropertyValue("background-image"),v=d.match(a),g=o[c].getAttribute("data-background-src");if(v){var y=b(v[1].split("/"),r);y&&m("background",o[c],y,d)}else if(g!=null){var y=b(g.substr(g.lastIndexOf(r.domain)+r.domain.length+1).split("/"),r);y&&m("background",o[c],y,d)}}for(f=i.length,c=0;c<f;c++){var w,E;E=w=d=null;try{E=i[c].getAttribute("src");attr_datasrc=i[c].getAttribute("data-src")}catch(S){}attr_datasrc==null&&!!E&&E.indexOf(r.domain)>=0?d=E:!!attr_datasrc&&attr_datasrc.indexOf(r.domain)>=0&&(d=attr_datasrc);if(d){var y=b(d.substr(d.lastIndexOf(r.domain)+r.domain.length+1).split("/"),r);y&&(y.fluid?m("fluid",i[c],y,d):m("image",i[c],y,d))}}return e};c(t,function(){if(window.addEventListener){window.addEventListener("resize",y,!1);window.addEventListener("orientationchange",y,!1)}else window.attachEvent("onresize",y);n||e.run()});typeof define=="function"&&define.amd&&define([],function(){return e})})(Holder,window);