diff --git a/README.md b/README.md index 2e00580..14e2b12 100644 --- a/README.md +++ b/README.md @@ -222,7 +222,8 @@ Browser support * Chrome * Firefox 3+ * Safari 4+ -* Internet Explorer 6+ (with fallback for older IE) +* Internet Explorer 9+ (with partial support for 6-8) +* Opera 15+ (with partial support for 12) * Android (with fallback) License diff --git a/holder.js b/holder.js index e198e5e..241422e 100644 --- a/holder.js +++ b/holder.js @@ -1,7 +1,7 @@ /*! Holder - client side image placeholders -Version 2.4.0+brf6y +Version 2.4.0+brhve © 2014 Ivan Malopinsky - http://imsky.co Site: http://imsky.github.io/holder @@ -9,4 +9,4 @@ Issues: https://github.com/imsky/holder/issues License: http://opensource.org/licenses/MIT */ -!function(e,t,r){t[e]=r}("onDomReady",this,function(e){"use strict";function t(e){if(!b){if(!a.body)return i(t);for(b=!0;e=S.shift();)i(e)}}function r(e){(y||e.type===s||a[c]===u)&&(n(),t())}function n(){y?(a[x](m,r,d),e[x](s,r,d)):(a[p](v,r),e[p](h,r))}function i(e,t){setTimeout(e,+t>=0?t:1)}function o(e){b?i(e):S.push(e)}null==document.readyState&&document.addEventListener&&(document.addEventListener("DOMContentLoaded",function A(){document.removeEventListener("DOMContentLoaded",A,!1),document.readyState="complete"},!1),document.readyState="loading");var a=e.document,l=a.documentElement,s="load",d=!1,h="on"+s,u="complete",c="readyState",f="attachEvent",p="detachEvent",g="addEventListener",m="DOMContentLoaded",v="onreadystatechange",x="removeEventListener",y=g in a,w=d,b=d,S=[];if(a[c]===u)i(t);else if(y)a[g](m,r,d),e[g](s,r,d);else{a[f](v,r),e[f](h,r);try{w=null==e.frameElement&&l}catch(C){}w&&w.doScroll&&!function E(){if(!b){try{w.doScroll("left")}catch(e){return i(E,50)}n(),t()}}()}return o.version="1.4.0",o.isReady=function(){return b},o}(this)),document.querySelectorAll||(document.querySelectorAll=function(e){var t,r=document.createElement("style"),n=[];for(document.documentElement.firstChild.appendChild(r),document._qsa=[],r.styleSheet.cssText=e+"{x-qsa:expression(document._qsa && document._qsa.push(this))}",window.scrollBy(0,0),r.parentNode.removeChild(r);document._qsa.length;)t=document._qsa.shift(),t.style.removeAttribute("x-qsa"),n.push(t);return document._qsa=null,n}),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)}),Object.keys||(Object.keys=function(e){if(e!==Object(e))throw TypeError("Object.keys called on non-object");var t,r=[];for(t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.push(t);return r}),function(e){var t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";e.atob=e.atob||function(e){e=String(e);var r,n=0,i=[],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(;n>16&255)),i.push(String.fromCharCode(o>>8&255)),i.push(String.fromCharCode(255&o)),a=0,o=0),n+=1;return 12===a?(o>>=4,i.push(String.fromCharCode(255&o))):18===a&&(o>>=2,i.push(String.fromCharCode(o>>8&255)),i.push(String.fromCharCode(255&o))),i.join("")},e.btoa=e.btoa||function(e){e=String(e);var r,n,i,o,a,l,s,d=0,h=[];if(/[^\x00-\xFF]/.test(e))throw Error("InvalidCharacterError");for(;d>2,a=(3&r)<<4|n>>4,l=(15&n)<<2|i>>6,s=63&i,d===e.length+2?(l=64,s=64):d===e.length+1&&(s=64),h.push(t.charAt(o),t.charAt(a),t.charAt(l),t.charAt(s));return h.join("")}}(this),function(){function e(t,r,n){t.document;var i,o=t.currentStyle[r].match(/([\d\.]+)(%|cm|em|in|mm|pc|pt|)/)||[0,0,""],a=o[1],l=o[2];return n=n?/%|em/.test(l)&&t.parentElement?e(t.parentElement,"fontSize",null):16:n,i="fontSize"==r?n:/width/i.test(r)?t.clientWidth:t.clientHeight,"%"==l?a/100*i:"cm"==l?.3937*a*96:"em"==l?a*n:"in"==l?96*a:"mm"==l?.3937*a*96/10:"pc"==l?12*a*96/72:"pt"==l?96*a/72:a}function t(e,t){var r="border"==t?"Width":"",n=t+"Top"+r,i=t+"Right"+r,o=t+"Bottom"+r,a=t+"Left"+r;e[t]=(e[n]==e[i]&&e[n]==e[o]&&e[n]==e[a]?[e[n]]:e[n]==e[o]&&e[a]==e[i]?[e[n],e[i]]:e[a]==e[i]?[e[n],e[i],e[o]]:[e[n],e[i],e[o],e[a]]).join(" ")}function r(r){var n,i=this,o=r.currentStyle,a=e(r,"fontSize"),l=function(e){return"-"+e.toLowerCase()};for(n in o)if(Array.prototype.push.call(i,"styleFloat"==n?"float":n.replace(/[A-Z]/,l)),"width"==n)i[n]=r.offsetWidth+"px";else if("height"==n)i[n]=r.offsetHeight+"px";else if("styleFloat"==n)i.float=o[n];else if(/margin.|padding.|border.+W/.test(n)&&"auto"!=i[n])i[n]=Math.round(e(r,n,a))+"px";else if(/^outline/.test(n))try{i[n]=o[n]}catch(s){i.outlineColor=o.color,i.outlineStyle=i.outlineStyle||"none",i.outlineWidth=i.outlineWidth||"0px",i.outline=[i.outlineColor,i.outlineWidth,i.outlineStyle].join(" ")}else i[n]=o[n];t(i,"margin"),t(i,"padding"),t(i,"border"),i.fontSize=Math.round(a)+"px"}window.getComputedStyle||(r.prototype={constructor:r,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 r(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){e.augment=t()}(this,function(){"use strict";var e=function(){},t=Array.prototype.slice,r=function(r,n){var i=e.prototype="function"==typeof r?r.prototype:r,o=new e,a=n.apply(o,t.call(arguments,2).concat(i));if("object"==typeof a)for(var l in a)o[l]=a[l];if(!o.hasOwnProperty("constructor"))return o;var s=o.constructor;return s.prototype=o,s};return r.defclass=function(e){var t=e.constructor;return t.prototype=e,t},r.extend=function(e,t){return r(e,function(e){return this.uber=e,t})},r}),function(e,t){function r(e,t,r,o){var a=n(r.substr(r.lastIndexOf(e.domain)),e);a&&i(null,o,a,r,t)}function n(e,t){for(var r={theme:f(w.settings.themes.gray,null),stylesheets:t.stylesheets},n=!1,i=e.split("/"),o=i.length,a=0;o>a;a++){var l=i[a];if(w.flags.dimensions.match(l))n=!0,r.dimensions=w.flags.dimensions.output(l);else if(w.flags.fluid.match(l))n=!0,r.dimensions=w.flags.fluid.output(l),r.fluid=!0;else if(w.flags.textmode.match(l))r.textmode=w.flags.textmode.output(l);else if(w.flags.colors.match(l)){var s=w.flags.colors.output(l);r.theme=f(r.theme,s)}else if(t.themes[l])t.themes.hasOwnProperty(l)&&(r.theme=f(t.themes[l],null));else if(w.flags.font.match(l))r.font=w.flags.font.output(l);else if(w.flags.auto.match(l))r.auto=!0;else if(w.flags.text.match(l))r.text=w.flags.text.output(l);else if(w.flags.random.match(l)){null==w.vars.cache.themeKeys&&(w.vars.cache.themeKeys=Object.keys(t.themes));var d=w.vars.cache.themeKeys[0|Math.random()*w.vars.cache.themeKeys.length];r.theme=f(t.themes[d],null)}}return n?r:!1}function i(e,t,r,n,i){var a=r.dimensions,l=r.theme,d=r.text?decodeURIComponent(r.text):r.text,u=a.width+"x"+a.height;e=null==e?r.fluid?"fluid":"image":e,d&&(l.text=d);var c=f(i,null);r.font&&(l.font=r.font,!c.noFontFallback&&w.setup.supportsCanvas&&(c=f(c,{renderer:"canvas"}))),r.font&&"canvas"==c.renderer&&(c.reRender=!0),"background"==e?null==t.getAttribute("data-background-src")&&t.setAttribute("data-background-src",n):t.setAttribute("data-src",n),r.theme=l,t.holderData={flags:r,renderSettings:c},("image"==e||"fluid"==e)&&t.setAttribute("alt",d?d:l.text?l.text+" ["+u+"]":u),"image"==e?("html"!=c.renderer&&r.auto||(t.style.width=a.width+"px",t.style.height=a.height+"px"),"html"==c.renderer?t.style.backgroundColor=l.background:(o(e,{dimensions:a,theme:l,flags:r},t,c),r.textmode&&"exact"==r.textmode&&(w.vars.resizableImages.push(t),s(t)))):"background"==e&&"html"!=c.renderer?o(e,{dimensions:a,theme:l,flags:r},t,c):"fluid"==e&&("%"==a.height.slice(-1)?t.style.height=a.height:null!=r.auto&&r.auto||(t.style.height=a.height+"px"),"%"==a.width.slice(-1)?t.style.width=a.width:null!=r.auto&&r.auto||(t.style.width=a.width+"px"),("inline"==t.style.display||""===t.style.display||"none"==t.style.display)&&(t.style.display="block"),h(t),"html"==c.renderer?t.style.backgroundColor=l.background:(w.vars.resizableImages.push(t),s(t)))}function o(e,t,r,n){function i(){var e=null;switch(n.renderer){case"canvas":e=C(s);break;case"svg":e=A(s,n);break;default:throw"Holder: invalid renderer: "+n.renderer}return e}{var o=null,l={width:t.dimensions.width,height:t.dimensions.height,theme:t.theme,flags:t.flags},s=a(l);({text:l.text,width:l.width,height:l.height,textHeight:l.font.size,font:l.font.family,fontWeight:l.font.weight,template:l.theme})}if(o=i(),null==o)throw"Holder: couldn't render placeholder";"background"==e?(r.style.backgroundImage="url("+o+")",r.style.backgroundSize=l.width+"px "+l.height+"px"):(r.setAttribute("src",o),n.reRender&&setTimeout(function(){var e=i();if(null==e)throw"Holder: couldn't render placeholder";r.setAttribute("src",e)},100)),r.setAttribute("data-holder-rendered",!0)}function a(e){function t(e,t,r,n){t.width=r,t.height=n,e.width=Math.max(e.width,t.width),e.height+=t.height,e.add(t)}switch(e.font={family:e.theme.font?e.theme.font:"Arial, Helvetica, Open Sans, sans-serif",size:l(e.width,e.height,e.theme.size?e.theme.size:12),weight:e.theme.fontweight?e.theme.fontweight:"bold"},e.text=e.theme.text?e.theme.text:Math.floor(e.width)+"x"+Math.floor(e.height),e.flags.textmode){case"literal":e.text=e.flags.dimensions.width+"x"+e.flags.dimensions.height;break;case"exact":if(!e.flags.exactDimensions)break;e.text=Math.floor(e.flags.exactDimensions.width)+"x"+Math.floor(e.flags.exactDimensions.height)}var r=new E({width:e.width,height:e.height}),n=r.Shape,i=new n.Rect("holderBg",{fill:e.theme.background});i.resize(e.width,e.height),r.root.add(i);var o=new n.Group("holderTextGroup",{text:e.text,align:"center",font:e.font,fill:e.theme.foreground});o.moveTo(null,null,1),r.root.add(o);var a=o.textPositionData=S(r);o.properties.leading=a.boundingBox.height;var s=null,d=null;if(a.lineCount>1){var h=0,u=0,c=e.width*w.setup.lineWrapRatio,f=0;d=new n.Group("line"+f);for(var p=0;p=c||m===!0)&&(t(o,d,h,o.properties.leading),h=0,u+=o.properties.leading,f+=1,d=new n.Group("line"+f),d.y=u),m!==!0&&(s.moveTo(h,0),h+=a.spaceWidth+g.width,d.add(s))}t(o,d,h,o.properties.leading);for(var v in o.children)d=o.children[v],d.moveTo((o.width-d.width)/2,null,null);o.moveTo((e.width-o.width)/2,(e.height-o.height)/2,null),(e.height-o.height)/2<0&&o.moveTo(null,0,null)}else s=new n.Text(e.text),d=new n.Group("line0"),d.add(s),o.add(d),o.moveTo((e.width-a.boundingBox.width)/2,(e.height-a.boundingBox.height)/2,null);return r}function l(e,t,r){t=parseInt(t,10),e=parseInt(e,10);var n=Math.max(t,e),i=Math.min(t,e),o=1/12,a=Math.min(.75*i,.75*n*o);return Math.round(Math.max(r,a))}function s(e){var t;t=null==e||null==e.nodeType?w.vars.resizableImages:[e];for(var r in t)if(t.hasOwnProperty(r)){var n=t[r];if(n.holderData){var i=n.holderData.flags,a=d(n,y.invisibleErrorFn(s));if(a){if(i.fluid&&i.auto){var l=n.holderData.fluidConfig;switch(l.mode){case"width":a.height=a.width/l.ratio;break;case"height":a.width=a.height*l.ratio}}var h={dimensions:a,theme:i.theme,flags:i};i.textmode&&"exact"==i.textmode&&(i.exactDimensions=a,h.dimensions=i.dimensions),o("image",h,n,n.holderData.renderSettings)}}}}function d(e,t){var r={height:e.clientHeight,width:e.clientWidth};return r.height||r.width?(e.removeAttribute("data-holder-invisible"),r):(e.setAttribute("data-holder-invisible",!0),void t.call(this,e))}function h(e){if(e.holderData){var t=d(e,y.invisibleErrorFn(h));if(t){var r=e.holderData.flags,n={fluidHeight:"%"==r.dimensions.height.slice(-1),fluidWidth:"%"==r.dimensions.width.slice(-1),mode:null,initialDimensions:t};n.fluidWidth&&!n.fluidHeight?(n.mode="width",n.ratio=n.initialDimensions.width/parseFloat(r.dimensions.height)):!n.fluidWidth&&n.fluidHeight&&(n.mode="height",n.ratio=parseFloat(r.dimensions.width)/n.initialDimensions.height),e.holderData.fluidConfig=n}}}function u(e,t,r){if(null==e){e=document.createElementNS(b,"svg");var n=document.createElementNS(b,"defs");e.appendChild(n)}return e.webkitMatchesSelector&&e.setAttribute("xmlns",b),e.setAttribute("width",t),e.setAttribute("height",r),e.setAttribute("viewBox","0 0 "+t+" "+r),e.setAttribute("preserveAspectRatio","none"),e}function c(e,r){if(t.XMLSerializer){var n=new XMLSerializer,i="",o=r.stylesheets,a=e.querySelector("defs");if(r.svgXMLStylesheet){for(var l=(new DOMParser).parseFromString("","application/xml"),s=o.length-1;s>=0;s--){var d=l.createProcessingInstruction("xml-stylesheet",'href="'+o[s]+'" rel="stylesheet"');l.insertBefore(d,l.firstChild)}l.removeChild(l.documentElement),i=n.serializeToString(l)}if(r.svgLinkStylesheet)for(a.removeChild(a.firstChild),s=0;sn;n++){var o=document.createElement("img");o.setAttribute("data-src",e),r[n].appendChild(o)}return this},run:function(e){var o={};w.vars.preempted=!0;var a=f(w.settings,e),l=[],s=[],d=[];o.renderer=a.renderer?a.renderer:w.setup.renderer,a.use_canvas?o.renderer="canvas":a.use_svg&&(o.renderer="svg"),l=v(a.images),s=v(a.bgnodes),d=v(a.stylenodes),o.stylesheets=[],o.svgXMLStylesheet=!0,o.noFontFallback=a.noFontFallback?a.noFontFallback:!1;for(var h=0;h1){r.nodeValue="";for(var y=0;y=0?t:1)}function o(e){b?i(e):S.push(e)}null==document.readyState&&document.addEventListener&&(document.addEventListener("DOMContentLoaded",function A(){document.removeEventListener("DOMContentLoaded",A,!1),document.readyState="complete"},!1),document.readyState="loading");var a=e.document,l=a.documentElement,s="load",d=!1,u="on"+s,h="complete",c="readyState",f="attachEvent",p="detachEvent",m="addEventListener",g="DOMContentLoaded",v="onreadystatechange",x="removeEventListener",y=m in a,w=d,b=d,S=[];if(a[c]===h)i(t);else if(y)a[m](g,r,d),e[m](s,r,d);else{a[f](v,r),e[f](u,r);try{w=null==e.frameElement&&l}catch(C){}w&&w.doScroll&&!function E(){if(!b){try{w.doScroll("left")}catch(e){return i(E,50)}n(),t()}}()}return o.version="1.4.0",o.isReady=function(){return b},o}(this)),document.querySelectorAll||(document.querySelectorAll=function(e){var t,r=document.createElement("style"),n=[];for(document.documentElement.firstChild.appendChild(r),document._qsa=[],r.styleSheet.cssText=e+"{x-qsa:expression(document._qsa && document._qsa.push(this))}",window.scrollBy(0,0),r.parentNode.removeChild(r);document._qsa.length;)t=document._qsa.shift(),t.style.removeAttribute("x-qsa"),n.push(t);return document._qsa=null,n}),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)}),Object.keys||(Object.keys=function(e){if(e!==Object(e))throw TypeError("Object.keys called on non-object");var t,r=[];for(t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.push(t);return r}),function(e){var t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";e.atob=e.atob||function(e){e=String(e);var r,n=0,i=[],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(;n>16&255)),i.push(String.fromCharCode(o>>8&255)),i.push(String.fromCharCode(255&o)),a=0,o=0),n+=1;return 12===a?(o>>=4,i.push(String.fromCharCode(255&o))):18===a&&(o>>=2,i.push(String.fromCharCode(o>>8&255)),i.push(String.fromCharCode(255&o))),i.join("")},e.btoa=e.btoa||function(e){e=String(e);var r,n,i,o,a,l,s,d=0,u=[];if(/[^\x00-\xFF]/.test(e))throw Error("InvalidCharacterError");for(;d>2,a=(3&r)<<4|n>>4,l=(15&n)<<2|i>>6,s=63&i,d===e.length+2?(l=64,s=64):d===e.length+1&&(s=64),u.push(t.charAt(o),t.charAt(a),t.charAt(l),t.charAt(s));return u.join("")}}(this),function(){function e(t,r,n){t.document;var i,o=t.currentStyle[r].match(/([\d\.]+)(%|cm|em|in|mm|pc|pt|)/)||[0,0,""],a=o[1],l=o[2];return n=n?/%|em/.test(l)&&t.parentElement?e(t.parentElement,"fontSize",null):16:n,i="fontSize"==r?n:/width/i.test(r)?t.clientWidth:t.clientHeight,"%"==l?a/100*i:"cm"==l?.3937*a*96:"em"==l?a*n:"in"==l?96*a:"mm"==l?.3937*a*96/10:"pc"==l?12*a*96/72:"pt"==l?96*a/72:a}function t(e,t){var r="border"==t?"Width":"",n=t+"Top"+r,i=t+"Right"+r,o=t+"Bottom"+r,a=t+"Left"+r;e[t]=(e[n]==e[i]&&e[n]==e[o]&&e[n]==e[a]?[e[n]]:e[n]==e[o]&&e[a]==e[i]?[e[n],e[i]]:e[a]==e[i]?[e[n],e[i],e[o]]:[e[n],e[i],e[o],e[a]]).join(" ")}function r(r){var n,i=this,o=r.currentStyle,a=e(r,"fontSize"),l=function(e){return"-"+e.toLowerCase()};for(n in o)if(Array.prototype.push.call(i,"styleFloat"==n?"float":n.replace(/[A-Z]/,l)),"width"==n)i[n]=r.offsetWidth+"px";else if("height"==n)i[n]=r.offsetHeight+"px";else if("styleFloat"==n)i.float=o[n];else if(/margin.|padding.|border.+W/.test(n)&&"auto"!=i[n])i[n]=Math.round(e(r,n,a))+"px";else if(/^outline/.test(n))try{i[n]=o[n]}catch(s){i.outlineColor=o.color,i.outlineStyle=i.outlineStyle||"none",i.outlineWidth=i.outlineWidth||"0px",i.outline=[i.outlineColor,i.outlineWidth,i.outlineStyle].join(" ")}else i[n]=o[n];t(i,"margin"),t(i,"padding"),t(i,"border"),i.fontSize=Math.round(a)+"px"}window.getComputedStyle||(r.prototype={constructor:r,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 r(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){e.augment=t()}(this,function(){"use strict";var e=function(){},t=Array.prototype.slice,r=function(r,n){var i=e.prototype="function"==typeof r?r.prototype:r,o=new e,a=n.apply(o,t.call(arguments,2).concat(i));if("object"==typeof a)for(var l in a)o[l]=a[l];if(!o.hasOwnProperty("constructor"))return o;var s=o.constructor;return s.prototype=o,s};return r.defclass=function(e){var t=e.constructor;return t.prototype=e,t},r.extend=function(e,t){return r(e,function(e){return this.uber=e,t})},r}),function(e,t){function r(e,t,r,o){var a=n(r.substr(r.lastIndexOf(e.domain)),e);a&&i(null,o,a,r,t)}function n(e,t){for(var r={theme:f(w.settings.themes.gray,null),stylesheets:t.stylesheets},n=!1,i=e.split("/"),o=i.length,a=0;o>a;a++){var l=i[a];if(w.flags.dimensions.match(l))n=!0,r.dimensions=w.flags.dimensions.output(l);else if(w.flags.fluid.match(l))n=!0,r.dimensions=w.flags.fluid.output(l),r.fluid=!0;else if(w.flags.textmode.match(l))r.textmode=w.flags.textmode.output(l);else if(w.flags.colors.match(l)){var s=w.flags.colors.output(l);r.theme=f(r.theme,s)}else if(t.themes[l])t.themes.hasOwnProperty(l)&&(r.theme=f(t.themes[l],null));else if(w.flags.font.match(l))r.font=w.flags.font.output(l);else if(w.flags.auto.match(l))r.auto=!0;else if(w.flags.text.match(l))r.text=w.flags.text.output(l);else if(w.flags.random.match(l)){null==w.vars.cache.themeKeys&&(w.vars.cache.themeKeys=Object.keys(t.themes));var d=w.vars.cache.themeKeys[0|Math.random()*w.vars.cache.themeKeys.length];r.theme=f(t.themes[d],null)}}return n?r:!1}function i(e,t,r,n,i){var a=r.dimensions,l=r.theme,d=r.text?decodeURIComponent(r.text):r.text,h=a.width+"x"+a.height;e=null==e?r.fluid?"fluid":"image":e,d&&(l.text=d);var c=f(i,null);r.font&&(l.font=r.font,!c.noFontFallback&&"img"===t.nodeName.toLowerCase()&&w.setup.supportsCanvas&&(c=f(c,{renderer:"canvas"}))),r.font&&"canvas"==c.renderer&&(c.reRender=!0),"background"==e?null==t.getAttribute("data-background-src")&&t.setAttribute("data-background-src",n):t.setAttribute("data-src",n),r.theme=l,t.holderData={flags:r,renderSettings:c},("image"==e||"fluid"==e)&&t.setAttribute("alt",d?d:l.text?l.text+" ["+h+"]":h),"image"==e?("html"!=c.renderer&&r.auto||(t.style.width=a.width+"px",t.style.height=a.height+"px"),"html"==c.renderer?t.style.backgroundColor=l.background:(o(e,{dimensions:a,theme:l,flags:r},t,c),r.textmode&&"exact"==r.textmode&&(w.vars.resizableImages.push(t),s(t)))):"background"==e&&"html"!=c.renderer?o(e,{dimensions:a,theme:l,flags:r},t,c):"fluid"==e&&("%"==a.height.slice(-1)?t.style.height=a.height:null!=r.auto&&r.auto||(t.style.height=a.height+"px"),"%"==a.width.slice(-1)?t.style.width=a.width:null!=r.auto&&r.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"==c.renderer?t.style.backgroundColor=l.background:(w.vars.resizableImages.push(t),s(t)))}function o(e,t,r,n){function i(){var e=null;switch(n.renderer){case"canvas":e=C(s);break;case"svg":e=A(s,n);break;default:throw"Holder: invalid renderer: "+n.renderer}return e}{var o=null,l={width:t.dimensions.width,height:t.dimensions.height,theme:t.theme,flags:t.flags},s=a(l);({text:l.text,width:l.width,height:l.height,textHeight:l.font.size,font:l.font.family,fontWeight:l.font.weight,template:l.theme})}if(o=i(),null==o)throw"Holder: couldn't render placeholder";"background"==e?(r.style.backgroundImage="url("+o+")",r.style.backgroundSize=l.width+"px "+l.height+"px"):("img"===r.nodeName.toLowerCase()?r.setAttribute("src",o):"object"===r.nodeName.toLowerCase()&&(r.setAttribute("data",o),r.setAttribute("type","image/svg+xml")),n.reRender&&setTimeout(function(){var e=i();if(null==e)throw"Holder: couldn't render placeholder";"img"===r.nodeName.toLowerCase()?r.setAttribute("src",e):"object"===r.nodeName.toLowerCase()&&(r.setAttribute("data",e),r.setAttribute("type","image/svg+xml"))},100)),r.setAttribute("data-holder-rendered",!0)}function a(e){function t(e,t,r,n){t.width=r,t.height=n,e.width=Math.max(e.width,t.width),e.height+=t.height,e.add(t)}switch(e.font={family:e.theme.font?e.theme.font:"Arial, Helvetica, Open Sans, sans-serif",size:l(e.width,e.height,e.theme.size?e.theme.size:12),weight:e.theme.fontweight?e.theme.fontweight:"bold"},e.text=e.theme.text?e.theme.text:Math.floor(e.width)+"x"+Math.floor(e.height),e.flags.textmode){case"literal":e.text=e.flags.dimensions.width+"x"+e.flags.dimensions.height;break;case"exact":if(!e.flags.exactDimensions)break;e.text=Math.floor(e.flags.exactDimensions.width)+"x"+Math.floor(e.flags.exactDimensions.height)}var r=new E({width:e.width,height:e.height}),n=r.Shape,i=new n.Rect("holderBg",{fill:e.theme.background});i.resize(e.width,e.height),r.root.add(i);var o=new n.Group("holderTextGroup",{text:e.text,align:"center",font:e.font,fill:e.theme.foreground});o.moveTo(null,null,1),r.root.add(o);var a=o.textPositionData=S(r);if(!a)throw"Holder: staging fallback not supported yet.";o.properties.leading=a.boundingBox.height;var s=null,d=null;if(a.lineCount>1){var u=0,h=0,c=e.width*w.setup.lineWrapRatio,f=0;d=new n.Group("line"+f);for(var p=0;p=c||g===!0)&&(t(o,d,u,o.properties.leading),u=0,h+=o.properties.leading,f+=1,d=new n.Group("line"+f),d.y=h),g!==!0&&(s.moveTo(u,0),u+=a.spaceWidth+m.width,d.add(s))}t(o,d,u,o.properties.leading);for(var v in o.children)d=o.children[v],d.moveTo((o.width-d.width)/2,null,null);o.moveTo((e.width-o.width)/2,(e.height-o.height)/2,null),(e.height-o.height)/2<0&&o.moveTo(null,0,null)}else s=new n.Text(e.text),d=new n.Group("line0"),d.add(s),o.add(d),o.moveTo((e.width-a.boundingBox.width)/2,(e.height-a.boundingBox.height)/2,null);return r}function l(e,t,r){t=parseInt(t,10),e=parseInt(e,10);var n=Math.max(t,e),i=Math.min(t,e),o=1/12,a=Math.min(.75*i,.75*n*o);return Math.round(Math.max(r,a))}function s(e){var t;t=null==e||null==e.nodeType?w.vars.resizableImages:[e];for(var r in t)if(t.hasOwnProperty(r)){var n=t[r];if(n.holderData){var i=n.holderData.flags,a=d(n,y.invisibleErrorFn(s));if(a){if(i.fluid&&i.auto){var l=n.holderData.fluidConfig;switch(l.mode){case"width":a.height=a.width/l.ratio;break;case"height":a.width=a.height*l.ratio}}var u={dimensions:a,theme:i.theme,flags:i};i.textmode&&"exact"==i.textmode&&(i.exactDimensions=a,u.dimensions=i.dimensions),o("image",u,n,n.holderData.renderSettings)}}}}function d(e,t){var r={height:e.clientHeight,width:e.clientWidth};return r.height||r.width?(e.removeAttribute("data-holder-invisible"),r):(e.setAttribute("data-holder-invisible",!0),void t.call(this,e))}function u(e){if(e.holderData){var t=d(e,y.invisibleErrorFn(u));if(t){var r=e.holderData.flags,n={fluidHeight:"%"==r.dimensions.height.slice(-1),fluidWidth:"%"==r.dimensions.width.slice(-1),mode:null,initialDimensions:t};n.fluidWidth&&!n.fluidHeight?(n.mode="width",n.ratio=n.initialDimensions.width/parseFloat(r.dimensions.height)):!n.fluidWidth&&n.fluidHeight&&(n.mode="height",n.ratio=parseFloat(r.dimensions.width)/n.initialDimensions.height),e.holderData.fluidConfig=n}}}function h(e,t,r){if(null==e){e=document.createElementNS(b,"svg");var n=document.createElementNS(b,"defs");e.appendChild(n)}return e.webkitMatchesSelector&&e.setAttribute("xmlns",b),e.setAttribute("width",t),e.setAttribute("height",r),e.setAttribute("viewBox","0 0 "+t+" "+r),e.setAttribute("preserveAspectRatio","none"),e}function c(e,r){if(t.XMLSerializer){var n=new XMLSerializer,i="",o=r.stylesheets,a=e.querySelector("defs");if(r.svgXMLStylesheet){for(var l=(new DOMParser).parseFromString("","application/xml"),s=o.length-1;s>=0;s--){var d=l.createProcessingInstruction("xml-stylesheet",'href="'+o[s]+'" rel="stylesheet"');l.insertBefore(d,l.firstChild)}l.removeChild(l.documentElement),i=n.serializeToString(l)}if(r.svgLinkStylesheet)for(a.removeChild(a.firstChild),s=0;sn;n++){var o=document.createElement("img");o.setAttribute("data-src",e),r[n].appendChild(o)}return this},run:function(e){var o={};w.vars.preempted=!0;var a=f(w.settings,e);o.renderer=a.renderer?a.renderer:w.setup.renderer,-1===w.setup.renderers.join(",").indexOf(o.renderer)&&(o.renderer=w.setup.supportsSVG?"svg":w.setup.supportsCanvas?"canvas":"html"),a.use_canvas?o.renderer="canvas":a.use_svg&&(o.renderer="svg");var l=v(a.images),s=v(a.bgnodes),d=v(a.stylenodes),u=v(a.objects);o.stylesheets=[],o.svgXMLStylesheet=!0,o.noFontFallback=a.noFontFallback?a.noFontFallback:!1;for(var h=0;h1){r.nodeValue="";for(var y=0;y webfont fallback if noFontFallback is false, if the node is not an image, and if canvas is supported + if(!renderSettings.noFontFallback && el.nodeName.toLowerCase() === 'img' && App.setup.supportsCanvas){ renderSettings = extend(renderSettings, {renderer: 'canvas'}); } } @@ -513,14 +531,26 @@ Holder.js - client side image placeholders el.style.backgroundImage = 'url(' + image + ')'; el.style.backgroundSize = scene.width + 'px ' + scene.height + 'px'; } else { - el.setAttribute('src', image); + if(el.nodeName.toLowerCase() === 'img'){ + el.setAttribute('src', image); + } + else if(el.nodeName.toLowerCase() === 'object'){ + el.setAttribute('data', image); + el.setAttribute('type', 'image/svg+xml'); + } if(renderSettings.reRender){ setTimeout(function(){ var image = getRenderedImage(); if (image == null) { throw 'Holder: couldn\'t render placeholder'; } - el.setAttribute('src', image); + if(el.nodeName.toLowerCase() === 'img'){ + el.setAttribute('src', image); + } + else if(el.nodeName.toLowerCase() === 'object'){ + el.setAttribute('data', image); + el.setAttribute('type', 'image/svg+xml'); + } }, 100); } } @@ -534,7 +564,6 @@ Holder.js - client side image placeholders * @param scene Holder scene object */ function buildSceneGraph(scene){ - //todo: mark the placeholder for canvas re-render if font is defined scene.font = { family: scene.theme.font ? scene.theme.font : 'Arial, Helvetica, Open Sans, sans-serif', size: textSize(scene.width, scene.height, scene.theme.size ? scene.theme.size : 12), @@ -577,6 +606,9 @@ Holder.js - client side image placeholders sceneGraph.root.add(holderTextGroup); var tpdata = holderTextGroup.textPositionData = stagingRenderer(sceneGraph); + if(!tpdata){ + throw 'Holder: staging fallback not supported yet.'; + } holderTextGroup.properties.leading = tpdata.boundingBox.height; //todo: alignment: TL, TC, TR, CL, CR, BL, BC, BR @@ -1028,7 +1060,7 @@ Holder.js - client side image placeholders 'font-weight': tgProps.font.weight, 'font-family': tgProps.font.family + ', monospace', 'font-size': tgProps.font.size + 'px', - 'dominant-baseline': 'central' + 'dominant-baseline': 'middle' })); textNode.nodeValue = word.properties.text; @@ -1107,7 +1139,11 @@ Holder.js - client side image placeholders }); } - //todo: jsdoc getNodeArray + /** + * Converts a value into an array of DOM nodes + * + * @param val A string, a NodeList, a Node, or an HTMLCollection + */ function getNodeArray(val){ var retval = null; if (typeof (val) == 'string') { @@ -1274,7 +1310,8 @@ Holder.js - client side image placeholders ratio: 1, supportsCanvas: false, supportsSVG: false, - lineWrapRatio: 0.9 + lineWrapRatio: 0.9, + renderers: ['html', 'canvas', 'svg'] }; App.dpr = function(val){ diff --git a/test/index.html b/test/index.html index 868881f..8c8f276 100644 --- a/test/index.html +++ b/test/index.html @@ -134,7 +134,7 @@
- +
object placeholder using Pacifico font
@@ -169,6 +169,12 @@ Full-page fluid placeholder
+
+ +
+ Full-page fluid object placeholder +
+