holder/holder.js

/*!

Holder - client side image placeholders
Version 2.4.0+aupe3
© 2014 Ivan Malopinsky - http://imsky.co

Site:		http://imsky.github.io/holder
Issues:		https://github.com/imsky/holder/issues
License:	http://opensource.org/licenses/MIT

*/
!function(e,t,n){t[e]=n}("onDomReady",this,function(e){"use strict";function t(e){if(!y){if(!a.body)return r(t);for(y=!0;e=S.shift();)r(e)}}function n(e){(b||e.type===l||a[h]===c)&&(i(),t())}function i(){b?(a[v](p,n,u),e[v](l,n,u)):(a[g](x,n),e[g](s,n))}function r(e,t){setTimeout(e,+t>=0?t:1)}function o(e){y?r(e):S.push(e)}null==document.readyState&&document.addEventListener&&(document.addEventListener("DOMContentLoaded",function C(){document.removeEventListener("DOMContentLoaded",C,!1),document.readyState="complete"},!1),document.readyState="loading");var a=e.document,d=a.documentElement,l="load",u=!1,s="on"+l,c="complete",h="readyState",f="attachEvent",g="detachEvent",m="addEventListener",p="DOMContentLoaded",x="onreadystatechange",v="removeEventListener",b=m in a,w=u,y=u,S=[];if(a[h]===c)r(t);else if(b)a[m](p,n,u),e[m](l,n,u);else{a[f](x,n),e[f](s,n);try{w=null==e.frameElement&&d}catch(A){}w&&w.doScroll&&!function E(){if(!y){try{w.doScroll("left")}catch(e){return r(E,50)}i(),t()}}()}return o.version="1.4.0",o.isReady=function(){return y},o}(this)),document.querySelectorAll||(document.querySelectorAll=function(e){var t,n=document.createElement("style"),i=[];for(document.documentElement.firstChild.appendChild(n),document._qsa=[],n.styleSheet.cssText=e+"{x-qsa:expression(document._qsa && document._qsa.push(this))}",window.scrollBy(0,0),n.parentNode.removeChild(n);document._qsa.length;)t=document._qsa.shift(),t.style.removeAttribute("x-qsa"),i.push(t);return document._qsa=null,i}),document.querySelector||(document.querySelector=function(e){var t=document.querySelectorAll(e);return t.length?t[0]:null}),document.getElementsByClassName||(document.getElementsByClassName=function(e){return e=String(e).replace(/^|\s+/g,"."),document.querySelectorAll(e)}),function(e){var t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";e.atob=e.atob||function(e){e=String(e);var n,i=0,r=[],o=0,a=0;if(e=e.replace(/\s/g,""),e.length%4===0&&(e=e.replace(/=+$/,"")),e.length%4===1)throw Error("InvalidCharacterError");if(/[^+/0-9A-Za-z]/.test(e))throw Error("InvalidCharacterError");for(;i<e.length;)n=t.indexOf(e.charAt(i)),o=o<<6|n,a+=6,24===a&&(r.push(String.fromCharCode(o>>16&255)),r.push(String.fromCharCode(o>>8&255)),r.push(String.fromCharCode(255&o)),a=0,o=0),i+=1;return 12===a?(o>>=4,r.push(String.fromCharCode(255&o))):18===a&&(o>>=2,r.push(String.fromCharCode(o>>8&255)),r.push(String.fromCharCode(255&o))),r.join("")},e.btoa=e.btoa||function(e){e=String(e);var n,i,r,o,a,d,l,u=0,s=[];if(/[^\x00-\xFF]/.test(e))throw Error("InvalidCharacterError");for(;u<e.length;)n=e.charCodeAt(u++),i=e.charCodeAt(u++),r=e.charCodeAt(u++),o=n>>2,a=(3&n)<<4|i>>4,d=(15&i)<<2|r>>6,l=63&r,u===e.length+2?(d=64,l=64):u===e.length+1&&(l=64),s.push(t.charAt(o),t.charAt(a),t.charAt(d),t.charAt(l));return s.join("")}}(this),function(){function e(t,n,i){t.document;var r,o=t.currentStyle[n].match(/([\d\.]+)(%|cm|em|in|mm|pc|pt|)/)||[0,0,""],a=o[1],d=o[2];return i=i?/%|em/.test(d)&&t.parentElement?e(t.parentElement,"fontSize",null):16:i,r="fontSize"==n?i:/width/i.test(n)?t.clientWidth:t.clientHeight,"%"==d?a/100*r:"cm"==d?.3937*a*96:"em"==d?a*i:"in"==d?96*a:"mm"==d?.3937*a*96/10:"pc"==d?12*a*96/72:"pt"==d?96*a/72:a}function t(e,t){var n="border"==t?"Width":"",i=t+"Top"+n,r=t+"Right"+n,o=t+"Bottom"+n,a=t+"Left"+n;e[t]=(e[i]==e[r]&&e[i]==e[o]&&e[i]==e[a]?[e[i]]:e[i]==e[o]&&e[a]==e[r]?[e[i],e[r]]:e[a]==e[r]?[e[i],e[r],e[o]]:[e[i],e[r],e[o],e[a]]).join(" ")}function n(n){var i,r=this,o=n.currentStyle,a=e(n,"fontSize"),d=function(e){return"-"+e.toLowerCase()};for(i in o)if(Array.prototype.push.call(r,"styleFloat"==i?"float":i.replace(/[A-Z]/,d)),"width"==i)r[i]=n.offsetWidth+"px";else if("height"==i)r[i]=n.offsetHeight+"px";else if("styleFloat"==i)r.float=o[i];else if(/margin.|padding.|border.+W/.test(i)&&"auto"!=r[i])r[i]=Math.round(e(n,i,a))+"px";else if(/^outline/.test(i))try{r[i]=o[i]}catch(l){r.outlineColor=o.color,r.outlineStyle=r.outlineStyle||"none",r.outlineWidth=r.outlineWidth||"0px",r.outline=[r.outlineColor,r.outlineWidth,r.outlineStyle].join(" ")}else r[i]=o[i];t(r,"margin"),t(r,"padding"),t(r,"border"),r.fontSize=Math.round(a)+"px"}window.getComputedStyle||(n.prototype={constructor:n,getPropertyPriority:function(){throw new Error("NotSupportedError: DOM Exception 9")},getPropertyValue:function(e){return this[e.replace(/-\w/g,function(e){return e[1].toUpperCase()})]},item:function(e){return this[e]},removeProperty:function(){throw new Error("NoModificationAllowedError: DOM Exception 7")},setProperty:function(){throw new Error("NoModificationAllowedError: DOM Exception 7")},getPropertyCSSValue:function(){throw new Error("NotSupportedError: DOM Exception 9")}},window.getComputedStyle=Window.prototype.getComputedStyle=function(e){return new n(e)})}(),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])}),function(e,t){function n(e,t,n,r){var o=i(n.substr(n.lastIndexOf(e.domain)+e.domain.length+1).split("/"),e);o&&a(o.fluid?"fluid":"image",r,o,n,t)}function i(e,t){for(var n={theme:s(m.settings.themes.gray,{})},i=!1,r=e.length,o=0;r>o;o++){var a=e[o];if(m.flags.dimensions.match(a))i=!0,n.dimensions=m.flags.dimensions.output(a);else if(m.flags.fluid.match(a))i=!0,n.dimensions=m.flags.fluid.output(a),n.fluid=!0;else if(m.flags.textmode.match(a))n.textmode=m.flags.textmode.output(a);else if(m.flags.colors.match(a)){var d=m.flags.colors.output(a);n.theme=s(n.theme,d)}else t.themes[a]?t.themes.hasOwnProperty(a)&&(n.theme=s(t.themes[a],{})):m.flags.font.match(a)?n.font=m.flags.font.output(a):m.flags.auto.match(a)?n.auto=!0:m.flags.text.match(a)&&(n.text=m.flags.text.output(a))}return i?n:!1}function r(e,t,n){t=parseInt(t,10),e=parseInt(e,10);var i=Math.max(t,e),r=Math.min(t,e),o=1/12,a=Math.min(.75*r,.75*i*o);return Math.round(Math.max(n,a))}function o(e,t,n,i){var o=null,a=t.dimensions,d=t.template,l=t.holder,u=a.width,s=a.height,c=r(u,s,d.size),h=d.font?d.font:"Arial, Helvetica, sans-serif",f=d.fontweight?d.fontweight:"bold",g=Math.floor(u)+"x"+Math.floor(s),m=d.text?d.text:g;if("literal"==l.textmode){var a=l.dimensions;m=a.width+"x"+a.height}else if("exact"==l.textmode&&l.exact_dimensions){var a=l.exact_dimensions;m=Math.floor(a.width)+"x"+Math.floor(a.height)}var p={text:m,width:u,height:s,textHeight:c,font:h,fontWeight:f,template:d};if("canvas"==i.renderer?o=x(p):"svg"==i.renderer&&(o="data:image/svg+xml;base64,"+btoa(unescape(encodeURIComponent(v(p))))),null==o)throw"Holder: couldn't render placeholder";"background"==e?(n.style.backgroundImage="url("+o+")",n.style.backgroundSize=t.dimensions.width+"px "+t.dimensions.height+"px"):n.setAttribute("src",o),n.setAttribute("data-holder-rendered",!0)}function a(e,t,n,i,r){var a=n.dimensions,l=n.theme,c=n.text?decodeURIComponent(n.text):n.text,h=a.width+"x"+a.height;l=c?s(l,{text:c}):l,l=n.font?s(l,{font:n.font}):l,"background"==e?null==t.getAttribute("data-background-src")&&t.setAttribute("data-background-src",i):t.setAttribute("data-src",i),n.theme=l,t.holderData=n,t.configData=r,"image"==e?(t.setAttribute("alt",c?c:l.text?l.text+" ["+h+"]":h),"html"!=r.renderer&&n.auto||(t.style.width=a.width+"px",t.style.height=a.height+"px"),"html"==r.renderer?t.style.backgroundColor=l.background:(o(e,{dimensions:a,template:l,ratio:m.config.ratio,holder:n},t,r),n.textmode&&"exact"==n.textmode&&(m.runtime.resizableImages.push(t),d(t)))):"background"==e?"html"!=r.renderer&&o(e,{dimensions:a,template:l,ratio:m.config.ratio,holder:n},t,r):"fluid"==e&&(t.setAttribute("alt",c?c:l.text?l.text+" ["+h+"]":h),"%"==a.height.slice(-1)?t.style.height=a.height:null!=n.auto&&n.auto||(t.style.height=a.height+"px"),"%"==a.width.slice(-1)?t.style.width=a.width:null!=n.auto&&n.auto||(t.style.width=a.width+"px"),("inline"==t.style.display||""===t.style.display||"none"==t.style.display)&&(t.style.display="block"),u(t),"html"==r.renderer?t.style.backgroundColor=l.background:(m.runtime.resizableImages.push(t),d(t)))}function d(e){var t;t=null==e||null==e.nodeType?m.runtime.resizableImages:[e];for(var n in t)if(t.hasOwnProperty(n)){var i=t[n];if(i.holderData){var r=i.holderData,a=l(i,p.invisibleErrorFn(d));if(a){if(r.fluid&&r.auto)switch(r.fluid_data.mode){case"width":a.height=a.width/r.fluid_data.ratio;break;case"height":a.width=a.height*r.fluid_data.ratio}var u={dimensions:a,template:r.theme,ratio:m.config.ratio,holder:r};r.textmode&&"exact"==r.textmode&&(r.exact_dimensions=a,u.dimensions=r.dimensions),o("image",u,i,i.configData)}}}}function l(e,t){var n={height:e.clientHeight,width:e.clientWidth};return n.height||n.width?(e.removeAttribute("data-holder-invisible"),n):(e.setAttribute("data-holder-invisible",!0),void t.call(this,e))}function u(e){if(e.holderData){var t=l(e,p.invisibleErrorFn(u));if(t){var n=e.holderData;n.initial_dimensions=t,n.fluid_data={fluid_height:"%"==n.dimensions.height.slice(-1),fluid_width:"%"==n.dimensions.width.slice(-1),mode:null},n.fluid_data.fluid_width&&!n.fluid_data.fluid_height?(n.fluid_data.mode="width",n.fluid_data.ratio=n.initial_dimensions.width/parseFloat(n.dimensions.height)):!n.fluid_data.fluid_width&&n.fluid_data.fluid_height&&(n.fluid_data.mode="height",n.fluid_data.ratio=parseFloat(n.dimensions.width)/n.initial_dimensions.height)}}}function s(e,t){var n={};for(var i in e)e.hasOwnProperty(i)&&(n[i]=e[i]);for(var i in t)t.hasOwnProperty(i)&&(n[i]=t[i]);return n}function c(e){var t=[];for(var n in e)e.hasOwnProperty(n)&&t.push(n+":"+e[n]);return t.join(";")}function h(e){m.runtime.debounceTimer||e.call(this),m.runtime.debounceTimer&&clearTimeout(m.runtime.debounceTimer),m.runtime.debounceTimer=setTimeout(function(){m.runtime.debounceTimer=null,e.call(this)},m.config.debounce)}function f(){h(function(){d(null)})}function g(e,t){var n=new Image;n.onerror=function(){t.call(this,!1,e)},n.onload=function(){t.call(this,!0,e)},n.src=e.src}var m={},p={addTheme:function(e,t){return null!=e&&null!=t&&(m.settings.themes[e]=t),this},addImage:function(e,t){var n=document.querySelectorAll(t);if(n.length)for(var i=0,r=n.length;r>i;i++){var o=document.createElement("img");o.setAttribute("data-src",e),n[i].appendChild(o)}return this},run:function(e){var r=s({},m.config);m.runtime.preempted=!0;var o=s(m.settings,e),d=[],l=[],u=[];for(o.use_canvas?r.renderer="canvas":o.use_svg&&(r.renderer="svg"),"string"==typeof o.images?l=document.querySelectorAll(o.images):t.NodeList&&o.images instanceof t.NodeList?l=o.images:t.Node&&o.images instanceof t.Node?l=[o.images]:t.HTMLCollection&&o.images instanceof t.HTMLCollection&&(l=o.images),"string"==typeof o.bgnodes?u=document.querySelectorAll(o.bgnodes):t.NodeList&&o.elements instanceof t.NodeList?u=o.bgnodes:t.Node&&o.bgnodes instanceof t.Node&&(u=[o.bgnodes]),f=0,h=l.length;h>f;f++)d.push(l[f]);for(var c=new RegExp(o.domain+'/(.*?)"?\\)'),h=u.length,f=0;h>f;f++){var p=t.getComputedStyle(u[f],null).getPropertyValue("background-image"),x=p.match(c),v=null;if(null==x){var b=u[f].getAttribute("data-background-src");null!=b&&(v=b)}else v=o.domain+"/"+x[1];if(null!=v){var w=i(v.split("/"),o);w&&a("background",u[f],w,v,r)}}for(h=d.length,f=0;h>f;f++){var y,S;S=y=src=null;var A=null,C=d[f];try{S=C.getAttribute("src"),y=C.getAttribute("data-src"),A=C.getAttribute("data-holder-rendered")}catch(E){}var _=null!=S,k=null!=y,N=null!=A&&"true"==A;_?0===S.indexOf(o.domain)?n(o,r,S,C):k&&0===y.indexOf(o.domain)&&(N?n(o,r,y,C):g({src:S,options:o,instanceConfig:r,dataSrc:y,image:C},function(e,t){e||n(t.options,t.instanceConfig,t.dataSrc,t.image)})):k&&0===y.indexOf(o.domain)&&n(o,r,y,C)}return this},invisibleErrorFn:function(){return function(e){if(e.hasAttribute("data-holder-invisible"))throw"Holder: invisible placeholder"}}},x=function(){var e=document.createElement("canvas"),t=e.getContext("2d");return function(n){return e.width=n.width,e.height=n.height,t.fillStyle=n.template.background,t.fillRect(0,0,n.width,n.height),t.textAlign="center",t.textBaseline="middle",t.font=n.fontWeight+" "+n.textHeight*m.config.ratio+"px "+n.font,t.fillStyle=n.template.foreground,t.fillText(n.text,n.width/2,n.height/2,n.width),e.toDataURL("image/png")}}(),v=function(){if(t.XMLSerializer){var e=new XMLSerializer,n="http://www.w3.org/2000/svg",i=document.createElementNS(n,"svg");i.webkitMatchesSelector&&i.setAttribute("xmlns","http://www.w3.org/2000/svg");var r="",o=document.createElementNS(n,"rect"),a=document.createElementNS(n,"text"),d=document.createTextNode(null);return a.setAttribute("text-anchor","middle"),a.appendChild(d),i.appendChild(o),i.appendChild(a),function(t){if(isNaN(t.width)||isNaN(t.height)||isNaN(t.textHeight))throw"Holder: incorrect properties passed to SVG constructor";return i.setAttribute("width",t.width),i.setAttribute("height",t.height),i.setAttribute("viewBox","0 0 "+t.width+" "+t.height),i.setAttribute("preserveAspectRatio","none"),o.setAttribute("width",t.width),o.setAttribute("height",t.height),o.setAttribute("fill",t.template.background),a.setAttribute("x",t.width/2),a.setAttribute("y",t.height/2),d.nodeValue=t.text,a.setAttribute("style",c({fill:t.template.foreground,"font-weight":t.fontWeight,"font-size":t.textHeight+"px","font-family":t.font,"dominant-baseline":"central"})),r+e.serializeToString(i)}}}();m.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{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]}}};for(var b in m.flags)m.flags.hasOwnProperty(b)&&(m.flags[b].match=function(e){return e.match(this.regex)});m.settings={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}}},p.add_theme=p.addTheme,p.add_image=p.addImage,p.invisible_error_fn=p.invisibleErrorFn,m.config={renderer:"html",debounce:100,ratio:1},m.runtime={preempted:!1,resizableImages:[],debounceTimer:null},function(){var e=1,n=1,i=document.createElement("canvas"),r=null;i.getContext&&-1!=i.toDataURL("image/png").indexOf("data:image/png")&&(m.config.renderer="canvas",r=i.getContext("2d")),"canvas"==m.config.renderer&&(e=t.devicePixelRatio||1,n=r.webkitBackingStorePixelRatio||r.mozBackingStorePixelRatio||r.msBackingStorePixelRatio||r.oBackingStorePixelRatio||r.backingStorePixelRatio||1),m.config.ratio=e/n,document.createElementNS&&document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect&&(m.config.renderer="svg")}(),e(p,"Holder",t),t.onDomReady&&t.onDomReady(function(){m.runtime.preempted||p.run({}),t.addEventListener?(t.addEventListener("resize",f,!1),t.addEventListener("orientationchange",f,!1)):t.attachEvent("onresize",f),"object"==typeof t.Turbolinks&&t.document.addEventListener("page:change",function(){p.run({})})})}(function(e,t,n){var i="function"==typeof define&&define.amd;i?define(e):n[t]=e},this);