Skip to content
GitLab
Commit 4b34f494 authored by Mark Otto's avatar Mark Otto
Browse files

Update Holder.js 1.6 to 1.9

parent 6f275c61
Hide whitespace changes
Inline Side-by-side
Showing
with 113 additions and 54 deletions
+113 -54
docs/assets/js/holder/holder.js
+ 113
- 54
View file @ 4b34f494
/* /*
Holder - 1.6 - client side image placeholders Holder - 1.9 - client side image placeholders
(c) 2012 Ivan Malopinsky / http://imsky.co (c) 2012-2013 Ivan Malopinsky / http://imsky.co
Provided under the Apache 2.0 License: http://www.apache.org/licenses/LICENSE-2.0 Provided under the Apache 2.0 License: http://www.apache.org/licenses/LICENSE-2.0
Commercial use requires attribution. Commercial use requires attribution.
...@@ -33,6 +33,13 @@ function selector(a){ ...@@ -33,6 +33,13 @@ function selector(a){
//shallow object property extend //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 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}
//hasOwnProperty polyfill
if (!Object.prototype.hasOwnProperty)
Object.prototype.hasOwnProperty = function(prop) {
var proto = this.__proto__ || this.constructor.prototype;
return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]);
}
function text_size(width, height, template) { function text_size(width, height, template) {
var dimension_arr = [height, width].sort(); var dimension_arr = [height, width].sort();
var maxFactor = Math.round(dimension_arr[1] / 16), var maxFactor = Math.round(dimension_arr[1] / 16),
...@@ -47,6 +54,7 @@ function draw(ctx, dimensions, template, ratio) { ...@@ -47,6 +54,7 @@ function draw(ctx, dimensions, template, ratio) {
var ts = text_size(dimensions.width, dimensions.height, template); var ts = text_size(dimensions.width, dimensions.height, template);
var text_height = ts.height; var text_height = ts.height;
var width = dimensions.width * ratio, height = dimensions.height * ratio; var width = dimensions.width * ratio, height = dimensions.height * ratio;
var font = template.font ? template.font : "sans-serif";
canvas.width = width; canvas.width = width;
canvas.height = height; canvas.height = height;
ctx.textAlign = "center"; ctx.textAlign = "center";
...@@ -54,39 +62,42 @@ function draw(ctx, dimensions, template, ratio) { ...@@ -54,39 +62,42 @@ function draw(ctx, dimensions, template, ratio) {
ctx.fillStyle = template.background; ctx.fillStyle = template.background;
ctx.fillRect(0, 0, width, height); ctx.fillRect(0, 0, width, height);
ctx.fillStyle = template.foreground; ctx.fillStyle = template.foreground;
ctx.font = "bold " + text_height + "px sans-serif"; ctx.font = "bold " + text_height + "px "+font;
var text = template.text ? template.text : (dimensions.width + "x" + dimensions.height); var text = template.text ? template.text : (dimensions.width + "x" + dimensions.height);
if (ctx.measureText(text).width / width > 1) { if (ctx.measureText(text).width / width > 1) {
text_height = template.size / (ctx.measureText(text).width / width); text_height = template.size / (ctx.measureText(text).width / width);
} }
ctx.font = "bold " + (text_height * ratio) + "px sans-serif"; //Resetting font size if necessary
ctx.font = "bold " + (text_height * ratio) + "px "+font;
ctx.fillText(text, (width / 2), (height / 2), width); ctx.fillText(text, (width / 2), (height / 2), width);
return canvas.toDataURL("image/png"); return canvas.toDataURL("image/png");
} }
function render(mode, el, holder, src) { function render(mode, el, holder, src) {
var dimensions = holder.dimensions, var dimensions = holder.dimensions,
theme = holder.theme, theme = holder.theme,
text = holder.text; text = holder.text ? decodeURIComponent(holder.text) : holder.text;
var dimensions_caption = dimensions.width + "x" + dimensions.height; var dimensions_caption = dimensions.width + "x" + dimensions.height;
theme = (text ? extend(theme, { theme = (text ? extend(theme, { text: text }) : theme);
text: text theme = (holder.font ? extend(theme, {font: holder.font}) : theme);
}) : theme);
var ratio = 1; var ratio = 1;
if(window.devicePixelRatio && window.devicePixelRatio > 1){ if(window.devicePixelRatio && window.devicePixelRatio > 1){
ratio = window.devicePixelRatio; ratio = window.devicePixelRatio;
} }
if (mode == "image") { if (mode == "image") {
el.setAttribute("data-src", src); el.setAttribute("data-src", src);
el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption); el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
el.style.width = dimensions.width + "px";
el.style.height = dimensions.height + "px"; if(fallback || !holder.auto){
el.style.width = dimensions.width + "px";
el.style.height = dimensions.height + "px";
}
if (fallback) { if (fallback) {
el.style.backgroundColor = theme.background; el.style.backgroundColor = theme.background;
} }
else{ else{
el.setAttribute("src", draw(ctx, dimensions, theme, ratio)); el.setAttribute("src", draw(ctx, dimensions, theme, ratio));
...@@ -108,14 +119,7 @@ function fluid(el, holder, src) { ...@@ -108,14 +119,7 @@ function fluid(el, holder, src) {
text: text text: text
}) : theme); }) : theme);
var fluid = document.createElement("table"); var fluid = document.createElement("div");
fluid.setAttribute("cellspacing",0)
fluid.setAttribute("cellpadding",0)
fluid.setAttribute("border",0)
var row = document.createElement("tr")
.appendChild(document.createElement("td")
.appendChild(document.createTextNode(theme.text)));
fluid.style.backgroundColor = theme.background; fluid.style.backgroundColor = theme.background;
fluid.style.color = theme.foreground; fluid.style.color = theme.foreground;
...@@ -124,31 +128,38 @@ function fluid(el, holder, src) { ...@@ -124,31 +128,38 @@ function fluid(el, holder, src) {
fluid.style.height = holder.dimensions.height + (holder.dimensions.height.indexOf("%")>0?"":"px"); fluid.style.height = holder.dimensions.height + (holder.dimensions.height.indexOf("%")>0?"":"px");
fluid.id = el.id; fluid.id = el.id;
var frag = document.createDocumentFragment(), el.style.width=0;
tbody = document.createElement("tbody"), el.style.height=0;
tr = document.createElement("tr"),
td = document.createElement("td");
tr.appendChild(td);
tbody.appendChild(tr);
frag.appendChild(tbody);
if (theme.text) { if (theme.text) {
td.appendChild(document.createTextNode(theme.text)) fluid.appendChild(document.createTextNode(theme.text))
fluid.appendChild(frag);
} else { } else {
td.appendChild(document.createTextNode(dimensions_caption)) fluid.appendChild(document.createTextNode(dimensions_caption))
fluid.appendChild(frag);
fluid_images.push(fluid); fluid_images.push(fluid);
setTimeout(fluid_update, 0); setTimeout(fluid_update, 0);
} }
el.parentNode.replaceChild(fluid, el); el.parentNode.insertBefore(fluid, el.nextSibling)
if(window.jQuery){
jQuery(function($){
$(el).on("load", function(){
el.style.width = fluid.style.width;
el.style.height = fluid.style.height;
$(el).show();
$(fluid).remove();
});
})
}
} }
function fluid_update() { function fluid_update() {
for (i in fluid_images) { for (i in fluid_images) {
var el = fluid_images[i]; if(!fluid_images.hasOwnProperty(i)) continue;
var label = el.getElementsByTagName("td")[0].firstChild; var el = fluid_images[i],
label = el.firstChild;
el.style.lineHeight = el.offsetHeight+"px";
label.data = el.offsetWidth + "x" + el.offsetHeight; label.data = el.offsetWidth + "x" + el.offsetHeight;
} }
} }
...@@ -175,6 +186,11 @@ function parse_flags(flags, options) { ...@@ -175,6 +186,11 @@ function parse_flags(flags, options) {
ret.theme = options.themes[flag]; ret.theme = options.themes[flag];
} else if (app.flags.text.match(flag)) { } else if (app.flags.text.match(flag)) {
ret.text = app.flags.text.output(flag); ret.text = app.flags.text.output(flag);
} else if(app.flags.font.match(flag)){
ret.font = app.flags.font.output(flag);
}
else if(app.flags.auto.match(flag)){
ret.auto = true;
} }
} }
...@@ -199,7 +215,7 @@ var fluid_images = []; ...@@ -199,7 +215,7 @@ var fluid_images = [];
var settings = { var settings = {
domain: "holder.js", domain: "holder.js",
images: "img", images: "img",
elements: ".holderjs", bgnodes: ".holderjs",
themes: { themes: {
"gray": { "gray": {
background: "#eee", background: "#eee",
...@@ -217,13 +233,13 @@ var settings = { ...@@ -217,13 +233,13 @@ var settings = {
size: 12 size: 12
} }
}, },
stylesheet: ".holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;border-collapse:collapse;border:0;vertical-align:middle;margin:0}" stylesheet: ".holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;margin:0}"
}; };
app.flags = { app.flags = {
dimensions: { dimensions: {
regex: /(\d+)x(\d+)/, regex: /^(\d+)x(\d+)$/,
output: function (val) { output: function (val) {
var exec = this.regex.exec(val); var exec = this.regex.exec(val);
return { return {
...@@ -233,7 +249,7 @@ app.flags = { ...@@ -233,7 +249,7 @@ app.flags = {
} }
}, },
fluid: { fluid: {
regex: /([0-9%]+)x([0-9%]+)/, regex: /^([0-9%]+)x([0-9%]+)$/,
output: function (val) { output: function (val) {
var exec = this.regex.exec(val); var exec = this.regex.exec(val);
return { return {
...@@ -258,10 +274,20 @@ app.flags = { ...@@ -258,10 +274,20 @@ app.flags = {
output: function (val) { output: function (val) {
return this.regex.exec(val)[1]; return this.regex.exec(val)[1];
} }
},
font: {
regex: /font\:(.*)/,
output: function(val){
return this.regex.exec(val)[1];
}
},
auto: {
regex: /^auto$/
} }
} }
for (var flag in app.flags) { for (var flag in app.flags) {
if(!app.flags.hasOwnProperty(flag)) continue;
app.flags[flag].match = function (val) { app.flags[flag].match = function (val) {
return val.match(this.regex) return val.match(this.regex)
} }
...@@ -285,29 +311,58 @@ app.add_image = function (src, el) { ...@@ -285,29 +311,58 @@ app.add_image = function (src, el) {
}; };
app.run = function (o) { app.run = function (o) {
var options = extend(settings, o), var options = extend(settings, o), images = [];
images_nodes = selector(options.images),
elements = selector(options.elements), if(options.images instanceof window.NodeList){
preempted = true, imageNodes = options.images;
images = []; }
else if(options.images instanceof window.Node){
imageNodes = [options.images];
}
else{
imageNodes = selector(options.images);
}
if(options.elements instanceof window.NodeList){
bgnodes = options.bgnodes;
}
else if(options.bgnodes instanceof window.Node){
bgnodes = [options.bgnodes];
}
else{
bgnodes = selector(options.bgnodes);
}
for (i = 0, l = images_nodes.length; i < l; i++) images.push(images_nodes[i]); preempted = true;
var holdercss = document.createElement("style"); for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]);
holdercss.type = "text/css";
holdercss.styleSheet ? holdercss.styleSheet.cssText = options.stylesheet : holdercss.textContent = options.stylesheet; var holdercss = document.getElementById("holderjs-style");
document.getElementsByTagName("head")[0].appendChild(holdercss);
if(!holdercss){
holdercss = document.createElement("style");
holdercss.setAttribute("id", "holderjs-style");
holdercss.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(holdercss);
}
if(holdercss.styleSheet){
holdercss.styleSheet += options.stylesheet;
}
else{
holdercss.textContent+= options.stylesheet;
}
var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)"); var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)");
for (var l = elements.length, i = 0; i < l; i++) { for (var l = bgnodes.length, i = 0; i < l; i++) {
var src = window.getComputedStyle(elements[i], null) var src = window.getComputedStyle(bgnodes[i], null)
.getPropertyValue("background-image"); .getPropertyValue("background-image");
var flags = src.match(cssregex); var flags = src.match(cssregex);
if (flags) { if (flags) {
var holder = parse_flags(flags[1].split("/"), options); var holder = parse_flags(flags[1].split("/"), options);
if (holder) { if (holder) {
render("background", elements[i], holder, src); render("background", bgnodes[i], holder, src);
} }
} }
} }
...@@ -339,4 +394,8 @@ contentLoaded(win, function () { ...@@ -339,4 +394,8 @@ contentLoaded(win, function () {
preempted || app.run(); preempted || app.run();
}); });
})(Holder, window); if ( typeof define === "function" && define.amd ) {
define( "Holder", [], function () { return app; } );
}
})(Holder, window);
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment