From cc7ae48214ebe2ca50c7327dd7689e0700f71fe8 Mon Sep 17 00:00:00 2001 From: Ivan Malopinsky Date: Mon, 18 Jun 2012 20:14:11 -0400 Subject: [PATCH 1/8] readme update --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 1bd11b7..f20ffc7 100644 --- a/README.md +++ b/README.md @@ -69,10 +69,10 @@ Holder.run({ }) ``` -Using custom colors per placeholder ------------------------------------ +Using custom colors on specific images +-------------------------------------- -Custom colors can be specified in the ``background:foreground`` format using hex notation, like this: +You don't have to create a new theme just to use custom colors. Custom colors can be specified in the ``background:foreground`` format using hex notation, like this: ```html @@ -86,7 +86,7 @@ Using partially custom settings Holder extends its default settings with the settings you provide, so you only have to include those settings you want changed. For example, you can run Holder on a specific domain like this: ```js -Holder.run({domain:"example.com}) +Holder.run({domain:"example.com"}) ``` Using custom settings on load From 8184caa438e275b37de6bee76818500d52770960 Mon Sep 17 00:00:00 2001 From: Ivan Malopinsky Date: Tue, 19 Jun 2012 19:09:38 -0400 Subject: [PATCH 2/8] update selector, feature detect for canvas --- README.md | 2 +- holder.js | 30 +++++++++++++++++++----------- 2 files changed, 20 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index f20ffc7..b89f582 100644 --- a/README.md +++ b/README.md @@ -116,7 +116,7 @@ Browser support License ------- -Holder is provided under the BSD license. Commercial use requires attribution. +Holder is provided under the [Apache 2.0 License](http://www.apache.org/licenses/LICENSE-2.0). Commercial use requires attribution. Credits ------- diff --git a/holder.js b/holder.js index 7e31f6e..7024ae7 100644 --- a/holder.js +++ b/holder.js @@ -1,23 +1,33 @@ /* + Holder - client side image placeholders (c) 2012 Ivan Malopinsky / http://imsky.co - Provided under the BSD License. Commercial use requires attribution. + + Provided under the Apache 2.0 License: http://www.apache.org/licenses/LICENSE-2.0 + Commercial use requires attribution. + */ var Holder = Holder || {}; (function (app, win) { - - //https://gist.github.com/991057 by Jed Schmidt - function selector(a,b){a=a.match(/^(\W)?(.*)/);return(b||document)["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2])}; //http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}}; + + //https://gist.github.com/991057 by Jed Schmidt with modifications + function selector(a){a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]);return b.length?b:[b]} //object property extend function extend(a,b){var c={};for(var d in a)c[d]=a[d];for(var e in b)c[e]=b[e];return c} function draw(canvas, dimensions, template) { + if(!canvas.getContext){ + return false; + } + + var ctx = canvas.getContext("2d"); + var dimension_arr = [dimensions.height, dimensions.width].sort(); var maxFactor = Math.round(dimension_arr[1] / 16), @@ -27,9 +37,7 @@ var Holder = Holder || {}; canvas.setAttribute("width", dimensions.width); canvas.setAttribute("height", dimensions.height); - - var ctx = canvas.getContext("2d"); - + ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillStyle = template.background; @@ -90,9 +98,9 @@ var Holder = Holder || {}; } app.run = function (o) { var options = extend(settings, o), - images = selector(options.images); - images = images.length != null ? images : [images]; - preempted = true; + images = selector(options.images), + preempted = true; + for(var l = images.length, i = 0; i < l; i++) { var dimensions, theme = settings.themes.gray; src = images[i].getAttribute("data-src") || images[i].getAttribute("src"); @@ -119,7 +127,7 @@ var Holder = Holder || {}; } if(render){ images[i].setAttribute("data-src", src); - images[i].setAttribute("src", draw(canvas, dimensions, theme)); + images[i].setAttribute("src", draw(canvas, dimensions, theme) || src); } } } From 843db0d4416f8b1cf3b8a843c0f8bec8a2427b67 Mon Sep 17 00:00:00 2001 From: Ivan Malopinsky Date: Wed, 20 Jun 2012 13:30:14 -0400 Subject: [PATCH 3/8] update selector to always return array --- holder.js | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/holder.js b/holder.js index 7024ae7..21644e4 100644 --- a/holder.js +++ b/holder.js @@ -15,7 +15,12 @@ var Holder = Holder || {}; function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}}; //https://gist.github.com/991057 by Jed Schmidt with modifications - function selector(a){a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]);return b.length?b:[b]} + function selector(a){ + a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]); + var ret=[]; + b!=null&&(b.length?ret=b:b.length==0?ret=b:ret=[b]) + return ret; + } //object property extend function extend(a,b){var c={};for(var d in a)c[d]=a[d];for(var e in b)c[e]=b[e];return c} @@ -84,17 +89,17 @@ var Holder = Holder || {}; name != null && theme != null && (settings.themes[name] = theme); return app; } - app.add_image = function (src, node) { - var img = document.createElement("img") - img.setAttribute("data-src", src); - var _node = selector(node) - if(_node) { - if(_node.length) { - _node = _node[0]; + app.add_image = function (src, el) { + var node = selector(el); + console.log(node) + if(node.length) { + for(var i = 0, l = node.length; i < l; i++){ + var img = document.createElement("img") + img.setAttribute("data-src", src); + node[i].appendChild(img); } - _node.appendChild(img); } - return _node ? app : false; + return app; } app.run = function (o) { var options = extend(settings, o), From 0cec2f32098d2503611c42eaeeab7d6f53723fc3 Mon Sep 17 00:00:00 2001 From: Ivan Malopinsky Date: Wed, 20 Jun 2012 13:40:46 -0400 Subject: [PATCH 4/8] remove console.log --- holder.js | 1 - 1 file changed, 1 deletion(-) diff --git a/holder.js b/holder.js index 21644e4..7036527 100644 --- a/holder.js +++ b/holder.js @@ -91,7 +91,6 @@ var Holder = Holder || {}; } app.add_image = function (src, el) { var node = selector(el); - console.log(node) if(node.length) { for(var i = 0, l = node.length; i < l; i++){ var img = document.createElement("img") From 8dd42088a972b6fbe6dc1fca042f9a7d86d225bb Mon Sep 17 00:00:00 2001 From: Ivan Malopinsky Date: Sat, 23 Jun 2012 13:30:48 -0400 Subject: [PATCH 5/8] add fallback for ie6+ and android --- README.md | 3 +- holder.js | 197 +++++++++++++++++++++++++++--------------------------- 2 files changed, 100 insertions(+), 100 deletions(-) diff --git a/README.md b/README.md index b89f582..322fd57 100644 --- a/README.md +++ b/README.md @@ -111,7 +111,8 @@ Browser support * Chrome 1+ * Firefox 3+ * Safari 4+ -* Internet Explorer 9+ +* Internet Explorer 9+, with fallback for IE6-8 +* Android 1+ License ------- diff --git a/holder.js b/holder.js index 21644e4..8f0865f 100644 --- a/holder.js +++ b/holder.js @@ -11,135 +11,134 @@ var Holder = Holder || {}; (function (app, win) { - //http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications - function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}}; - - //https://gist.github.com/991057 by Jed Schmidt with modifications - function selector(a){ - a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]); - var ret=[]; - b!=null&&(b.length?ret=b:b.length==0?ret=b:ret=[b]) - return ret; - } +//http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications +function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}}; - //object property extend - function extend(a,b){var c={};for(var d in a)c[d]=a[d];for(var e in b)c[e]=b[e];return c} +//https://gist.github.com/991057 by Jed Schmidt with modifications +function selector(a){ + a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]); + var ret=[]; b!=null&&(b.length?ret=b:b.length==0?ret=b:ret=[b]); return ret; +} + +//shallow object property extend +function extend(a,b){var c={};for(var d in a)c[d]=a[d];for(var e in b)c[e]=b[e];return c} - function draw(canvas, dimensions, template) { - - if(!canvas.getContext){ - return false; - } - - var ctx = canvas.getContext("2d"); - +function draw(ctx, dimensions, template) { var dimension_arr = [dimensions.height, dimensions.width].sort(); - var maxFactor = Math.round(dimension_arr[1] / 16), minFactor = Math.round(dimension_arr[0] / 16); - var text_height = Math.max(template.size, maxFactor); - canvas.setAttribute("width", dimensions.width); canvas.setAttribute("height", dimensions.height); - ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillStyle = template.background; ctx.fillRect(0, 0, dimensions.width, dimensions.height); ctx.fillStyle = template.foreground; ctx.font = "bold " + text_height + "px sans-serif"; - var text = dimensions.width + "x" + dimensions.height; - if(Math.round(ctx.measureText(text).width) / dimensions.width > 1) { + if (Math.round(ctx.measureText(text).width) / dimensions.width > 1) { text_height = Math.max(minFactor, template.size); } ctx.font = "bold " + text_height + "px sans-serif"; ctx.fillText(text, (dimensions.width / 2), (dimensions.height / 2), dimensions.width); return canvas.toDataURL("image/png"); +} +var dimensions_regex = /([0-9]+)x([0-9]+)/; +var hex_regex = /#([0-9a-f]{3,})\:#([0-9a-f]{3,})/i; +var preempted = false, + fallback = false; +var canvas = document.createElement('canvas'); +if (!canvas.getContext) { + fallback = true; +} else { + if (canvas.toDataURL("image/png").indexOf("data:image/png") < 0) { + //Android doesn't support data URI + fallback = true; + } else { + var ctx = canvas.getContext("2d"); } - - var dimensions_regex = /([0-9]+)x([0-9]+)/; - var hex_regex = /#([0-9a-f]{3,})\:#([0-9a-f]{3,})/i; - var canvas = document.createElement('canvas'); - var preempted = false; - - var settings = { - domain: "holder.js", - images: "img", - themes: { - "gray": { - background: "#eee", - foreground: "#aaa", - size: 12 - }, - "social": { - background: "#3a5a97", - foreground: "#fff", - size: 12 - }, - "industrial": { - background: "#434A52", - foreground: "#C2F200", - size: 12 - } +} +var settings = { + domain: "holder.js", + images: "img", + themes: { + "gray": { + background: "#eee", + foreground: "#aaa", + size: 12 + }, + "social": { + background: "#3a5a97", + foreground: "#fff", + size: 12 + }, + "industrial": { + background: "#434A52", + foreground: "#C2F200", + size: 12 } } - app.add_theme = function (name, theme) { - name != null && theme != null && (settings.themes[name] = theme); - return app; - } - app.add_image = function (src, el) { - var node = selector(el); - console.log(node) - if(node.length) { - for(var i = 0, l = node.length; i < l; i++){ - var img = document.createElement("img") - img.setAttribute("data-src", src); - node[i].appendChild(img); - } +} +app.add_theme = function (name, theme) { + name != null && theme != null && (settings.themes[name] = theme); + return app; +} +app.add_image = function (src, el) { + var node = selector(el); + if (node.length) { + for (var i = 0, l = node.length; i < l; i++) { + var img = document.createElement("img") + img.setAttribute("data-src", src); + node[i].appendChild(img); } - return app; } - app.run = function (o) { - var options = extend(settings, o), - images = selector(options.images), - preempted = true; - - for(var l = images.length, i = 0; i < l; i++) { - var dimensions, theme = settings.themes.gray; - src = images[i].getAttribute("data-src") || images[i].getAttribute("src"); - if( !! ~src.indexOf(options.domain)) { - var render = false; - for(var flags = src.substr(src.indexOf(options.domain) + options.domain.length + 1).split("/"), sl = flags.length, j = 0; j < sl; j++) { - if(flags[j].match(dimensions_regex)) { - var exec = dimensions_regex.exec(flags[j]) - dimensions = { - width: parseInt(exec[1]), - height: parseInt(exec[2]) - } - render = true; - } else if(flags[j].match(hex_regex)) { - var exec = hex_regex.exec(flags[j]); - theme = { - size: settings.themes.gray.size, - foreground: "#" + exec[2], - background: "#" + exec[1] - } - } else if(options.themes[flags[j]]) { - theme = options.themes[flags[j]]; + return app; +} +app.run = function (o) { + var options = extend(settings, o), + images = selector(options.images), + preempted = true; + for (var l = images.length, i = 0; i < l; i++) { + var dimensions, theme = settings.themes.gray; + src = images[i].getAttribute("data-src") || images[i].getAttribute("src"); + if ( !! ~src.indexOf(options.domain)) { + var render = false; + for (var flags = src.substr(src.indexOf(options.domain) + options.domain.length + 1).split("/"), sl = flags.length, j = 0; j < sl; j++) { + if (flags[j].match(dimensions_regex)) { + var exec = dimensions_regex.exec(flags[j]) + dimensions = { + width: parseInt(exec[1]), + height: parseInt(exec[2]) } + render = true; + } else if (flags[j].match(hex_regex)) { + var exec = hex_regex.exec(flags[j]); + theme = { + size: settings.themes.gray.size, + foreground: "#" + exec[2], + background: "#" + exec[1] + } + } else if (options.themes[flags[j]]) { + theme = options.themes[flags[j]]; } - if(render){ - images[i].setAttribute("data-src", src); - images[i].setAttribute("src", draw(canvas, dimensions, theme) || src); + } + if (render) { + images[i].setAttribute("data-src", src); + if (!fallback) { + images[i].setAttribute("src", draw(ctx, dimensions, theme)); + } else { + images[i].style.width = dimensions.width + "px"; + images[i].style.height = dimensions.height + "px"; + images[i].style.backgroundColor = theme.background; } } } - return app; } - contentLoaded(win, function () { - preempted || app.run() - }) + return app; +} +contentLoaded(win, function () { + preempted || app.run() +}) })(Holder, window); \ No newline at end of file From 3cf95f2754c9c06ff34576939e9f9ad30fb928e1 Mon Sep 17 00:00:00 2001 From: Ivan Malopinsky Date: Fri, 20 Jul 2012 14:27:19 -0400 Subject: [PATCH 6/8] add custom labels --- README.md | 9 +++++++++ holder.js | 10 ++++++++-- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 322fd57..118e89c 100644 --- a/README.md +++ b/README.md @@ -80,6 +80,15 @@ You don't have to create a new theme just to use custom colors. Custom colors ca The above will render a placeholder with a black background and white text. +Specifying custom text on specific images +----------------------------------------- + +You can use an entirely custom caption on the placeholder with the following settings: + +```html + +``` + Using partially custom settings ------------------------------- diff --git a/holder.js b/holder.js index 8f0865f..27ad362 100644 --- a/holder.js +++ b/holder.js @@ -36,7 +36,7 @@ function draw(ctx, dimensions, template) { ctx.fillRect(0, 0, dimensions.width, dimensions.height); ctx.fillStyle = template.foreground; ctx.font = "bold " + text_height + "px sans-serif"; - var text = dimensions.width + "x" + dimensions.height; + var text = template.text ? template.text : (dimensions.width + "x" + dimensions.height); if (Math.round(ctx.measureText(text).width) / dimensions.width > 1) { text_height = Math.max(minFactor, template.size); } @@ -46,6 +46,7 @@ function draw(ctx, dimensions, template) { } var dimensions_regex = /([0-9]+)x([0-9]+)/; var hex_regex = /#([0-9a-f]{3,})\:#([0-9a-f]{3,})/i; +var text_regex = /text\:([\w\s]+)/; var preempted = false, fallback = false; var canvas = document.createElement('canvas'); @@ -119,9 +120,14 @@ app.run = function (o) { foreground: "#" + exec[2], background: "#" + exec[1] } - } else if (options.themes[flags[j]]) { + } + else if (options.themes[flags[j]]) { theme = options.themes[flags[j]]; } + else if(flags[j].match(text_regex)){ + var exec = text_regex.exec(flags[j]); + theme.text = exec[1]; + } } if (render) { images[i].setAttribute("data-src", src); From df5dc529694b4be87e8060b88a79313bc5113b44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bernhard=20D=C3=B6bler?= Date: Sat, 21 Jul 2012 17:00:12 +0200 Subject: [PATCH 7/8] parseInt , 10 for decimal instead of octal --- holder.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/holder.js b/holder.js index 27ad362..6e6db7f 100644 --- a/holder.js +++ b/holder.js @@ -1,19 +1,19 @@ /* - - Holder - client side image placeholders - (c) 2012 Ivan Malopinsky / http://imsky.co - - Provided under the Apache 2.0 License: http://www.apache.org/licenses/LICENSE-2.0 - Commercial use requires attribution. - + +Holder - client side image placeholders +(c) 2012 Ivan Malopinsky / http://imsky.co + +Provided under the Apache 2.0 License: http://www.apache.org/licenses/LICENSE-2.0 +Commercial use requires attribution. + */ var Holder = Holder || {}; (function (app, win) { - + //http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}}; - + //https://gist.github.com/991057 by Jed Schmidt with modifications function selector(a){ a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]); @@ -22,7 +22,7 @@ function selector(a){ //shallow object property extend function extend(a,b){var c={};for(var d in a)c[d]=a[d];for(var e in b)c[e]=b[e];return c} - + function draw(ctx, dimensions, template) { var dimension_arr = [dimensions.height, dimensions.width].sort(); var maxFactor = Math.round(dimension_arr[1] / 16), @@ -109,8 +109,8 @@ app.run = function (o) { if (flags[j].match(dimensions_regex)) { var exec = dimensions_regex.exec(flags[j]) dimensions = { - width: parseInt(exec[1]), - height: parseInt(exec[2]) + width: parseInt(exec[1], 10), + height: parseInt(exec[2], 10) } render = true; } else if (flags[j].match(hex_regex)) { From 1697bfac6052810034a51c02d0347f228c89a48c Mon Sep 17 00:00:00 2001 From: Ivan Malopinsky Date: Wed, 1 Aug 2012 19:39:11 -0400 Subject: [PATCH 8/8] improve caption handling, add captions to fallback mode --- holder.js | 49 +++++++++++++++++++++++++++++-------------------- 1 file changed, 29 insertions(+), 20 deletions(-) diff --git a/holder.js b/holder.js index 6e6db7f..fa26ea5 100644 --- a/holder.js +++ b/holder.js @@ -1,6 +1,6 @@ /* -Holder - client side image placeholders +Holder - 1.2 - client side image placeholders (c) 2012 Ivan Malopinsky / http://imsky.co Provided under the Apache 2.0 License: http://www.apache.org/licenses/LICENSE-2.0 @@ -46,7 +46,7 @@ function draw(ctx, dimensions, template) { } var dimensions_regex = /([0-9]+)x([0-9]+)/; var hex_regex = /#([0-9a-f]{3,})\:#([0-9a-f]{3,})/i; -var text_regex = /text\:([\w\s]+)/; +var text_regex = /text\:(.*)/; var preempted = false, fallback = false; var canvas = document.createElement('canvas'); @@ -60,6 +60,7 @@ if (!canvas.getContext) { var ctx = canvas.getContext("2d"); } } + var settings = { domain: "holder.js", images: "img", @@ -80,11 +81,13 @@ var settings = { size: 12 } } -} +}; + app.add_theme = function (name, theme) { name != null && theme != null && (settings.themes[name] = theme); return app; -} +}; + app.add_image = function (src, el) { var node = selector(el); if (node.length) { @@ -95,54 +98,60 @@ app.add_image = function (src, el) { } } return app; -} +}; + app.run = function (o) { var options = extend(settings, o), images = selector(options.images), preempted = true; for (var l = images.length, i = 0; i < l; i++) { var dimensions, theme = settings.themes.gray; - src = images[i].getAttribute("data-src") || images[i].getAttribute("src"); + var src = images[i].getAttribute("data-src") || images[i].getAttribute("src"); if ( !! ~src.indexOf(options.domain)) { var render = false; for (var flags = src.substr(src.indexOf(options.domain) + options.domain.length + 1).split("/"), sl = flags.length, j = 0; j < sl; j++) { + var exec; if (flags[j].match(dimensions_regex)) { - var exec = dimensions_regex.exec(flags[j]) + exec = dimensions_regex.exec(flags[j]); dimensions = { - width: parseInt(exec[1], 10), - height: parseInt(exec[2], 10) - } + width: +exec[1], + height: +exec[2] + }; render = true; } else if (flags[j].match(hex_regex)) { - var exec = hex_regex.exec(flags[j]); + exec = hex_regex.exec(flags[j]); theme = { size: settings.themes.gray.size, foreground: "#" + exec[2], background: "#" + exec[1] - } + }; } else if (options.themes[flags[j]]) { theme = options.themes[flags[j]]; } else if(flags[j].match(text_regex)){ - var exec = text_regex.exec(flags[j]); + exec = text_regex.exec(flags[j]); theme.text = exec[1]; } } if (render) { images[i].setAttribute("data-src", src); - if (!fallback) { - images[i].setAttribute("src", draw(ctx, dimensions, theme)); - } else { - images[i].style.width = dimensions.width + "px"; - images[i].style.height = dimensions.height + "px"; - images[i].style.backgroundColor = theme.background; + var dimensions_caption = dimensions.width+"x"+dimensions.height; + images[i].setAttribute("alt", theme.text ? theme.text + " ["+dimensions_caption+"]" : dimensions_caption); + + //Fallback + images[i].style.width = dimensions.width + "px"; + images[i].style.height = dimensions.height + "px"; + images[i].style.backgroundColor = theme.background; + + if(!fallback){ + images[i].setAttribute("src", draw(ctx, dimensions, theme)); } } } } return app; -} +}; contentLoaded(win, function () { preempted || app.run() })