From e05dc78f826b574bbdc7cbc8e078b8ca2bf9687e Mon Sep 17 00:00:00 2001 From: Ivan Malopinsky Date: Sun, 3 Aug 2014 03:42:40 -0400 Subject: [PATCH] add lineHeight to normalize firefox with webkit/opera --- holder.js | 4 ++-- src/holder.js | 10 ++++++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/holder.js b/holder.js index 5b5dea8..1d38427 100644 --- a/holder.js +++ b/holder.js @@ -1,7 +1,7 @@ /*! Holder - client side image placeholders -Version 2.4.0+b2b7v +Version 2.4.0+b2cnc © 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,n){t[e]=n}("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 n(e){(y||e.type===l||a[c]===d)&&(r(),t())}function r(){y?(a[x](p,n,u),e[x](l,n,u)):(a[g](v,n),e[g](h,n))}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,s=a.documentElement,l="load",u=!1,h="on"+l,d="complete",c="readyState",f="attachEvent",g="detachEvent",m="addEventListener",p="DOMContentLoaded",v="onreadystatechange",x="removeEventListener",y=m in a,w=u,b=u,S=[];if(a[c]===d)i(t);else if(y)a[m](p,n,u),e[m](l,n,u);else{a[f](v,n),e[f](h,n);try{w=null==e.frameElement&&s}catch(C){}w&&w.doScroll&&!function E(){if(!b){try{w.doScroll("left")}catch(e){return i(E,50)}r(),t()}}()}return o.version="1.4.0",o.isReady=function(){return b},o}(this)),document.querySelectorAll||(document.querySelectorAll=function(e){var t,n=document.createElement("style"),r=[];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"),r.push(t);return document._qsa=null,r}),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,n=[];for(t in e)Object.prototype.hasOwnProperty.call(e,t)&&n.push(t);return n}),function(e){var t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";e.atob=e.atob||function(e){e=String(e);var n,r=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(;r>16&255)),i.push(String.fromCharCode(o>>8&255)),i.push(String.fromCharCode(255&o)),a=0,o=0),r+=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 n,r,i,o,a,s,l,u=0,h=[];if(/[^\x00-\xFF]/.test(e))throw Error("InvalidCharacterError");for(;u>2,a=(3&n)<<4|r>>4,s=(15&r)<<2|i>>6,l=63&i,u===e.length+2?(s=64,l=64):u===e.length+1&&(l=64),h.push(t.charAt(o),t.charAt(a),t.charAt(s),t.charAt(l));return h.join("")}}(this),function(){function e(t,n,r){t.document;var i,o=t.currentStyle[n].match(/([\d\.]+)(%|cm|em|in|mm|pc|pt|)/)||[0,0,""],a=o[1],s=o[2];return r=r?/%|em/.test(s)&&t.parentElement?e(t.parentElement,"fontSize",null):16:r,i="fontSize"==n?r:/width/i.test(n)?t.clientWidth:t.clientHeight,"%"==s?a/100*i:"cm"==s?.3937*a*96:"em"==s?a*r:"in"==s?96*a:"mm"==s?.3937*a*96/10:"pc"==s?12*a*96/72:"pt"==s?96*a/72:a}function t(e,t){var n="border"==t?"Width":"",r=t+"Top"+n,i=t+"Right"+n,o=t+"Bottom"+n,a=t+"Left"+n;e[t]=(e[r]==e[i]&&e[r]==e[o]&&e[r]==e[a]?[e[r]]:e[r]==e[o]&&e[a]==e[i]?[e[r],e[i]]:e[a]==e[i]?[e[r],e[i],e[o]]:[e[r],e[i],e[o],e[a]]).join(" ")}function n(n){var r,i=this,o=n.currentStyle,a=e(n,"fontSize"),s=function(e){return"-"+e.toLowerCase()};for(r in o)if(Array.prototype.push.call(i,"styleFloat"==r?"float":r.replace(/[A-Z]/,s)),"width"==r)i[r]=n.offsetWidth+"px";else if("height"==r)i[r]=n.offsetHeight+"px";else if("styleFloat"==r)i.float=o[r];else if(/margin.|padding.|border.+W/.test(r)&&"auto"!=i[r])i[r]=Math.round(e(n,r,a))+"px";else if(/^outline/.test(r))try{i[r]=o[r]}catch(l){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[r]=o[r];t(i,"margin"),t(i,"padding"),t(i,"border"),i.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){e.augment=t()}(this,function(){"use strict";var e=function(){},t=Array.prototype.slice,n=function(n,r){var i=e.prototype="function"==typeof n?n.prototype:n,o=new e,a=r.apply(o,t.call(arguments,2).concat(i));if("object"==typeof a)for(var s in a)o[s]=a[s];if(!o.hasOwnProperty("constructor"))return o;var l=o.constructor;return l.prototype=o,l};return n.defclass=function(e){var t=e.constructor;return t.prototype=e,t},n.extend=function(e,t){return n(e,function(e){return this.uber=e,t})},n}),function(e,t){function n(e,t,n,o){var a=r(n.substr(n.lastIndexOf(e.domain)),e);a&&i(a.fluid?"fluid":"image",o,a,n,t)}function r(e,t){for(var n={theme:f(w.settings.themes.gray,null),stylesheets:t.stylesheets},r=!1,i=e.split("/"),o=i.length,a=0;o>a;a++){var s=i[a];if(w.flags.dimensions.match(s))r=!0,n.dimensions=w.flags.dimensions.output(s);else if(w.flags.fluid.match(s))r=!0,n.dimensions=w.flags.fluid.output(s),n.fluid=!0;else if(w.flags.textmode.match(s))n.textmode=w.flags.textmode.output(s);else if(w.flags.colors.match(s)){var l=w.flags.colors.output(s);n.theme=f(n.theme,l)}else if(t.themes[s])t.themes.hasOwnProperty(s)&&(n.theme=f(t.themes[s],null));else if(w.flags.font.match(s))n.font=w.flags.font.output(s);else if(w.flags.auto.match(s))n.auto=!0;else if(w.flags.text.match(s))n.text=w.flags.text.output(s);else if(w.flags.random.match(s)){null==w.vars.cache.themeKeys&&(w.vars.cache.themeKeys=Object.keys(t.themes));var u=w.vars.cache.themeKeys[0|Math.random()*w.vars.cache.themeKeys.length];n.theme=f(t.themes[u],null)}}return r?n:!1}function i(e,t,n,r,i){var a=n.dimensions,s=n.theme,u=n.text?decodeURIComponent(n.text):n.text,d=a.width+"x"+a.height,c={};u&&(c.text=u),n.font&&(c.font=n.font),s=f(s,c),"background"==e?null==t.getAttribute("data-background-src")&&t.setAttribute("data-background-src",r):t.setAttribute("data-src",r),n.theme=s,t.holderData={flags:n,renderSettings:i},("image"==e||"fluid"==e)&&t.setAttribute("alt",u?u:s.text?s.text+" ["+d+"]":d),"image"==e?("html"!=i.renderer&&n.auto||(t.style.width=a.width+"px",t.style.height=a.height+"px"),"html"==i.renderer?t.style.backgroundColor=s.background:(o(e,{dimensions:a,theme:s,flags:n},t,i),n.textmode&&"exact"==n.textmode&&(w.vars.resizableImages.push(t),l(t)))):"background"==e&&"html"!=i.renderer?o(e,{dimensions:a,theme:s,flags:n},t,i):"fluid"==e&&("%"==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"),h(t),"html"==i.renderer?t.style.backgroundColor=s.background:(w.vars.resizableImages.push(t),l(t)))}function o(e,t,n,r){var i=null,o={width:t.dimensions.width,height:t.dimensions.height,theme:t.theme,flags:t.flags},s=a(o),l={text:o.text,width:o.width,height:o.height,textHeight:o.font.size,font:o.font.family,fontWeight:o.font.weight,template:o.theme};switch(r.renderer){case"canvas":i=C(s);break;case"svg":i=A(l);break;default:throw"Holder: invalid renderer: "+r.renderer}if(null==i)throw"Holder: couldn't render placeholder";"background"==e?(n.style.backgroundImage="url("+i+")",n.style.backgroundSize=o.width+"px "+o.height+"px"):n.setAttribute("src",i),n.setAttribute("data-holder-rendered",!0)}function a(e){switch(e.font={family:e.theme.font?e.theme.font:"Arial, Helvetica, Open Sans, sans-serif",size:s(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 t=new E({width:e.width,height:e.height}),n=t.Shape,r=new n.Rect("holderBg",{fill:e.theme.background});r.resize(e.width,e.height),t.root.add(r);var i=new n.Group("holderTextGroup",{text:e.text,align:"center",font:e.font,fill:e.theme.foreground});i.moveTo(null,null,1),t.root.add(i);var o=i.textPositionData=S(t);if(o.lineCount>1)for(var a=0;ar;r++){var o=document.createElement("img");o.setAttribute("data-src",e),n[r].appendChild(o)}return this},run:function(e){var o={};w.vars.preempted=!0;var a=f(w.settings,e),s=[],l=[],u=[];o.renderer=a.renderer?a.renderer:w.setup.renderer,a.use_canvas?o.renderer="canvas":a.use_svg&&(o.renderer="svg"),s=v(a.images),l=v(a.bgnodes),u=v(a.stylenodes);for(var h=new RegExp(a.domain+'/(.*?)"?\\)'),d=0;d1){n.nodeValue="";for(var x=0;x=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,s=a.documentElement,l="load",u=!1,h="on"+l,d="complete",c="readyState",f="attachEvent",g="detachEvent",m="addEventListener",p="DOMContentLoaded",v="onreadystatechange",x="removeEventListener",y=m in a,w=u,b=u,S=[];if(a[c]===d)i(t);else if(y)a[m](p,n,u),e[m](l,n,u);else{a[f](v,n),e[f](h,n);try{w=null==e.frameElement&&s}catch(C){}w&&w.doScroll&&!function E(){if(!b){try{w.doScroll("left")}catch(e){return i(E,50)}r(),t()}}()}return o.version="1.4.0",o.isReady=function(){return b},o}(this)),document.querySelectorAll||(document.querySelectorAll=function(e){var t,n=document.createElement("style"),r=[];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"),r.push(t);return document._qsa=null,r}),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,n=[];for(t in e)Object.prototype.hasOwnProperty.call(e,t)&&n.push(t);return n}),function(e){var t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";e.atob=e.atob||function(e){e=String(e);var n,r=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(;r>16&255)),i.push(String.fromCharCode(o>>8&255)),i.push(String.fromCharCode(255&o)),a=0,o=0),r+=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 n,r,i,o,a,s,l,u=0,h=[];if(/[^\x00-\xFF]/.test(e))throw Error("InvalidCharacterError");for(;u>2,a=(3&n)<<4|r>>4,s=(15&r)<<2|i>>6,l=63&i,u===e.length+2?(s=64,l=64):u===e.length+1&&(l=64),h.push(t.charAt(o),t.charAt(a),t.charAt(s),t.charAt(l));return h.join("")}}(this),function(){function e(t,n,r){t.document;var i,o=t.currentStyle[n].match(/([\d\.]+)(%|cm|em|in|mm|pc|pt|)/)||[0,0,""],a=o[1],s=o[2];return r=r?/%|em/.test(s)&&t.parentElement?e(t.parentElement,"fontSize",null):16:r,i="fontSize"==n?r:/width/i.test(n)?t.clientWidth:t.clientHeight,"%"==s?a/100*i:"cm"==s?.3937*a*96:"em"==s?a*r:"in"==s?96*a:"mm"==s?.3937*a*96/10:"pc"==s?12*a*96/72:"pt"==s?96*a/72:a}function t(e,t){var n="border"==t?"Width":"",r=t+"Top"+n,i=t+"Right"+n,o=t+"Bottom"+n,a=t+"Left"+n;e[t]=(e[r]==e[i]&&e[r]==e[o]&&e[r]==e[a]?[e[r]]:e[r]==e[o]&&e[a]==e[i]?[e[r],e[i]]:e[a]==e[i]?[e[r],e[i],e[o]]:[e[r],e[i],e[o],e[a]]).join(" ")}function n(n){var r,i=this,o=n.currentStyle,a=e(n,"fontSize"),s=function(e){return"-"+e.toLowerCase()};for(r in o)if(Array.prototype.push.call(i,"styleFloat"==r?"float":r.replace(/[A-Z]/,s)),"width"==r)i[r]=n.offsetWidth+"px";else if("height"==r)i[r]=n.offsetHeight+"px";else if("styleFloat"==r)i.float=o[r];else if(/margin.|padding.|border.+W/.test(r)&&"auto"!=i[r])i[r]=Math.round(e(n,r,a))+"px";else if(/^outline/.test(r))try{i[r]=o[r]}catch(l){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[r]=o[r];t(i,"margin"),t(i,"padding"),t(i,"border"),i.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){e.augment=t()}(this,function(){"use strict";var e=function(){},t=Array.prototype.slice,n=function(n,r){var i=e.prototype="function"==typeof n?n.prototype:n,o=new e,a=r.apply(o,t.call(arguments,2).concat(i));if("object"==typeof a)for(var s in a)o[s]=a[s];if(!o.hasOwnProperty("constructor"))return o;var l=o.constructor;return l.prototype=o,l};return n.defclass=function(e){var t=e.constructor;return t.prototype=e,t},n.extend=function(e,t){return n(e,function(e){return this.uber=e,t})},n}),function(e,t){function n(e,t,n,o){var a=r(n.substr(n.lastIndexOf(e.domain)),e);a&&i(a.fluid?"fluid":"image",o,a,n,t)}function r(e,t){for(var n={theme:f(w.settings.themes.gray,null),stylesheets:t.stylesheets},r=!1,i=e.split("/"),o=i.length,a=0;o>a;a++){var s=i[a];if(w.flags.dimensions.match(s))r=!0,n.dimensions=w.flags.dimensions.output(s);else if(w.flags.fluid.match(s))r=!0,n.dimensions=w.flags.fluid.output(s),n.fluid=!0;else if(w.flags.textmode.match(s))n.textmode=w.flags.textmode.output(s);else if(w.flags.colors.match(s)){var l=w.flags.colors.output(s);n.theme=f(n.theme,l)}else if(t.themes[s])t.themes.hasOwnProperty(s)&&(n.theme=f(t.themes[s],null));else if(w.flags.font.match(s))n.font=w.flags.font.output(s);else if(w.flags.auto.match(s))n.auto=!0;else if(w.flags.text.match(s))n.text=w.flags.text.output(s);else if(w.flags.random.match(s)){null==w.vars.cache.themeKeys&&(w.vars.cache.themeKeys=Object.keys(t.themes));var u=w.vars.cache.themeKeys[0|Math.random()*w.vars.cache.themeKeys.length];n.theme=f(t.themes[u],null)}}return r?n:!1}function i(e,t,n,r,i){var a=n.dimensions,s=n.theme,u=n.text?decodeURIComponent(n.text):n.text,d=a.width+"x"+a.height,c={};u&&(c.text=u),n.font&&(c.font=n.font),s=f(s,c),"background"==e?null==t.getAttribute("data-background-src")&&t.setAttribute("data-background-src",r):t.setAttribute("data-src",r),n.theme=s,t.holderData={flags:n,renderSettings:i},("image"==e||"fluid"==e)&&t.setAttribute("alt",u?u:s.text?s.text+" ["+d+"]":d),"image"==e?("html"!=i.renderer&&n.auto||(t.style.width=a.width+"px",t.style.height=a.height+"px"),"html"==i.renderer?t.style.backgroundColor=s.background:(o(e,{dimensions:a,theme:s,flags:n},t,i),n.textmode&&"exact"==n.textmode&&(w.vars.resizableImages.push(t),l(t)))):"background"==e&&"html"!=i.renderer?o(e,{dimensions:a,theme:s,flags:n},t,i):"fluid"==e&&("%"==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"),h(t),"html"==i.renderer?t.style.backgroundColor=s.background:(w.vars.resizableImages.push(t),l(t)))}function o(e,t,n,r){var i=null,o={width:t.dimensions.width,height:t.dimensions.height,theme:t.theme,flags:t.flags},s=a(o),l={text:o.text,width:o.width,height:o.height,textHeight:o.font.size,font:o.font.family,fontWeight:o.font.weight,template:o.theme};switch(r.renderer){case"canvas":i=C(s);break;case"svg":i=A(l);break;default:throw"Holder: invalid renderer: "+r.renderer}if(null==i)throw"Holder: couldn't render placeholder";"background"==e?(n.style.backgroundImage="url("+i+")",n.style.backgroundSize=o.width+"px "+o.height+"px"):n.setAttribute("src",i),n.setAttribute("data-holder-rendered",!0)}function a(e){switch(e.font={family:e.theme.font?e.theme.font:"Arial, Helvetica, Open Sans, sans-serif",size:s(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 t=new E({width:e.width,height:e.height}),n=t.Shape,r=new n.Rect("holderBg",{fill:e.theme.background});r.resize(e.width,e.height),t.root.add(r);var i=new n.Group("holderTextGroup",{text:e.text,align:"center",font:e.font,fill:e.theme.foreground});i.moveTo(null,null,1),t.root.add(i);var o=i.textPositionData=S(t);if(i.properties.lineHeight=o.boundingBox.height,o.lineCount>1)for(var a=0;ar;r++){var o=document.createElement("img");o.setAttribute("data-src",e),n[r].appendChild(o)}return this},run:function(e){var o={};w.vars.preempted=!0;var a=f(w.settings,e),s=[],l=[],u=[];o.renderer=a.renderer?a.renderer:w.setup.renderer,a.use_canvas?o.renderer="canvas":a.use_svg&&(o.renderer="svg"),s=v(a.images),l=v(a.bgnodes),u=v(a.stylenodes);for(var h=new RegExp(a.domain+'/(.*?)"?\\)'),d=0;d1){n.nodeValue="";for(var x=0;x 1){ for(var i = 0; i < tpdata.words.length; i++){ var word = tpdata.words[i]; @@ -738,19 +740,23 @@ Holder.js - client side image placeholders var root = sceneGraph.root; canvas.width = App.dpr(root.properties.width); canvas.height = App.dpr(root.properties.height); - ctx.textBaseline = 'top'; + ctx.textBaseline = 'middle'; ctx.fillStyle = root.children.holderBg.properties.fill; ctx.fillRect(0, 0, App.dpr(root.children.holderBg.width), App.dpr(root.children.holderBg.height)); var textGroup = root.children.holderTextGroup; ctx.font = textGroup.properties.font.weight + ' '+App.dpr(textGroup.properties.font.size)+'px ' + textGroup.properties.font.family; + + //ctx.fillStyle = '#ff0000'; + //ctx.fillRect(App.dpr(textGroup.x), App.dpr(textGroup.y), App.dpr(textGroup.textPositionData.boundingBox.width), App.dpr(textGroup.textPositionData.boundingBox.height)); + ctx.fillStyle = textGroup.properties.fill; for(var nodeKey in textGroup.children){ var textNode = textGroup.children[nodeKey]; var x = App.dpr(textGroup.x + textNode.x); - var y = App.dpr(textGroup.y + textNode.y); + var y = App.dpr(textGroup.y + textNode.y + textGroup.properties.lineHeight / 2); if(!isNaN(x) && Infinity != x && !isNaN(y) && Infinity != y){ ctx.fillText(textNode.properties.text, x,y); }