diff --git a/holder.js b/holder.js
index 8f0865f..fa26ea5 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 - 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
+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),
@@ -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\:(.*)/;
var preempted = false,
fallback = false;
var canvas = document.createElement('canvas');
@@ -59,6 +60,7 @@ if (!canvas.getContext) {
var ctx = canvas.getContext("2d");
}
}
+
var settings = {
domain: "holder.js",
images: "img",
@@ -79,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) {
@@ -94,49 +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]),
- height: parseInt(exec[2])
- }
+ 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]]) {
+ };
+ }
+ else if (options.themes[flags[j]]) {
theme = options.themes[flags[j]];
}
+ else if(flags[j].match(text_regex)){
+ 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()
})
diff --git a/index.html b/index.html
index 2bbf9b0..4a4024b 100644
--- a/index.html
+++ b/index.html
@@ -49,7 +49,7 @@ h2.ie {font:3em inherit;color:red;position:fixed;top:0px;margin:0;z-index:2;widt
It works both online and offline, and offers a chainable API to style and create placeholders with ease.
- Download Holder.js (4KB)
+ Download Holder.js (5KB)
Usage