bootstrap-source/bootstrap-3.0.3/docs-assets/js/holder.js
changeset 54 0ded9d7748b7
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/bootstrap-source/bootstrap-3.0.3/docs-assets/js/holder.js	Fri Dec 20 22:49:16 2013 +0100
     1.3 @@ -0,0 +1,500 @@
     1.4 +/*
     1.5 +
     1.6 +Holder - 2.2 - client side image placeholders
     1.7 +(c) 2012-2013 Ivan Malopinsky / http://imsky.co
     1.8 +
     1.9 +Provided under the MIT License.
    1.10 +Commercial use requires attribution.
    1.11 +
    1.12 +*/
    1.13 +
    1.14 +var Holder = Holder || {};
    1.15 +(function (app, win) {
    1.16 +
    1.17 +var preempted = false,
    1.18 +fallback = false,
    1.19 +canvas = document.createElement('canvas');
    1.20 +var dpr = 1, bsr = 1;
    1.21 +var resizable_images = [];
    1.22 +
    1.23 +if (!canvas.getContext) {
    1.24 +	fallback = true;
    1.25 +} else {
    1.26 +	if (canvas.toDataURL("image/png")
    1.27 +		.indexOf("data:image/png") < 0) {
    1.28 +		//Android doesn't support data URI
    1.29 +		fallback = true;
    1.30 +	} else {
    1.31 +		var ctx = canvas.getContext("2d");
    1.32 +	}
    1.33 +}
    1.34 +
    1.35 +if(!fallback){
    1.36 +    dpr = window.devicePixelRatio || 1,
    1.37 +    bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
    1.38 +}
    1.39 +
    1.40 +var ratio = dpr / bsr;
    1.41 +
    1.42 +var settings = {
    1.43 +	domain: "holder.js",
    1.44 +	images: "img",
    1.45 +	bgnodes: ".holderjs",
    1.46 +	themes: {
    1.47 +		"gray": {
    1.48 +			background: "#eee",
    1.49 +			foreground: "#aaa",
    1.50 +			size: 12
    1.51 +		},
    1.52 +		"social": {
    1.53 +			background: "#3a5a97",
    1.54 +			foreground: "#fff",
    1.55 +			size: 12
    1.56 +		},
    1.57 +		"industrial": {
    1.58 +			background: "#434A52",
    1.59 +			foreground: "#C2F200",
    1.60 +			size: 12
    1.61 +		},
    1.62 +		"sky": {
    1.63 +			background: "#0D8FDB",
    1.64 +			foreground: "#fff",
    1.65 +			size: 12
    1.66 +		},
    1.67 +		"vine": {
    1.68 +			background: "#39DBAC",
    1.69 +			foreground: "#1E292C",
    1.70 +			size: 12
    1.71 +		},
    1.72 +		"lava": {
    1.73 +			background: "#F8591A",
    1.74 +			foreground: "#1C2846",
    1.75 +			size: 12
    1.76 +		}
    1.77 +	},
    1.78 +	stylesheet: ""
    1.79 +};
    1.80 +app.flags = {
    1.81 +	dimensions: {
    1.82 +		regex: /^(\d+)x(\d+)$/,
    1.83 +		output: function (val) {
    1.84 +			var exec = this.regex.exec(val);
    1.85 +			return {
    1.86 +				width: +exec[1],
    1.87 +				height: +exec[2]
    1.88 +			}
    1.89 +		}
    1.90 +	},
    1.91 +	fluid: {
    1.92 +		regex: /^([0-9%]+)x([0-9%]+)$/,
    1.93 +		output: function (val) {
    1.94 +			var exec = this.regex.exec(val);
    1.95 +			return {
    1.96 +				width: exec[1],
    1.97 +				height: exec[2]
    1.98 +			}
    1.99 +		}
   1.100 +	},
   1.101 +	colors: {
   1.102 +		regex: /#([0-9a-f]{3,})\:#([0-9a-f]{3,})/i,
   1.103 +		output: function (val) {
   1.104 +			var exec = this.regex.exec(val);
   1.105 +			return {
   1.106 +				size: settings.themes.gray.size,
   1.107 +				foreground: "#" + exec[2],
   1.108 +				background: "#" + exec[1]
   1.109 +			}
   1.110 +		}
   1.111 +	},
   1.112 +	text: {
   1.113 +		regex: /text\:(.*)/,
   1.114 +		output: function (val) {
   1.115 +			return this.regex.exec(val)[1];
   1.116 +		}
   1.117 +	},
   1.118 +	font: {
   1.119 +		regex: /font\:(.*)/,
   1.120 +		output: function (val) {
   1.121 +			return this.regex.exec(val)[1];
   1.122 +		}
   1.123 +	},
   1.124 +	auto: {
   1.125 +		regex: /^auto$/
   1.126 +	},
   1.127 +	textmode: {
   1.128 +		regex: /textmode\:(.*)/,
   1.129 +		output: function(val){
   1.130 +			return this.regex.exec(val)[1];
   1.131 +		}
   1.132 +	}
   1.133 +}
   1.134 +
   1.135 +//getElementsByClassName polyfill
   1.136 +document.getElementsByClassName||(document.getElementsByClassName=function(e){var t=document,n,r,i,s=[];if(t.querySelectorAll)return t.querySelectorAll("."+e);if(t.evaluate){r=".//*[contains(concat(' ', @class, ' '), ' "+e+" ')]",n=t.evaluate(r,t,null,0,null);while(i=n.iterateNext())s.push(i)}else{n=t.getElementsByTagName("*"),r=new RegExp("(^|\\s)"+e+"(\\s|$)");for(i=0;i<n.length;i++)r.test(n[i].className)&&s.push(n[i])}return s})
   1.137 +
   1.138 +//getComputedStyle polyfill
   1.139 +window.getComputedStyle||(window.getComputedStyle=function(e){return this.el=e,this.getPropertyValue=function(t){var n=/(\-([a-z]){1})/g;return t=="float"&&(t="styleFloat"),n.test(t)&&(t=t.replace(n,function(){return arguments[2].toUpperCase()})),e.currentStyle[t]?e.currentStyle[t]:null},this})
   1.140 +
   1.141 +//http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications
   1.142 +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)}}
   1.143 +
   1.144 +//https://gist.github.com/991057 by Jed Schmidt with modifications
   1.145 +function selector(a){
   1.146 +	a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]);
   1.147 +	var ret=[];	b!==null&&(b.length?ret=b:b.length===0?ret=b:ret=[b]);	return ret;
   1.148 +}
   1.149 +
   1.150 +//shallow object property extend
   1.151 +function extend(a,b){
   1.152 +	var c={};
   1.153 +	for(var i in a){
   1.154 +		if(a.hasOwnProperty(i)){
   1.155 +			c[i]=a[i];
   1.156 +		}
   1.157 +	}
   1.158 +	for(var i in b){
   1.159 +		if(b.hasOwnProperty(i)){
   1.160 +			c[i]=b[i];
   1.161 +		}
   1.162 +	}
   1.163 +	return c
   1.164 +}
   1.165 +
   1.166 +//hasOwnProperty polyfill
   1.167 +if (!Object.prototype.hasOwnProperty)
   1.168 +    /*jshint -W001, -W103 */
   1.169 +    Object.prototype.hasOwnProperty = function(prop) {
   1.170 +		var proto = this.__proto__ || this.constructor.prototype;
   1.171 +		return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]);
   1.172 +	}
   1.173 +    /*jshint +W001, +W103 */
   1.174 +
   1.175 +function text_size(width, height, template) {
   1.176 +	height = parseInt(height, 10);
   1.177 +	width = parseInt(width, 10);
   1.178 +	var bigSide = Math.max(height, width)
   1.179 +	var smallSide = Math.min(height, width)
   1.180 +	var scale = 1 / 12;
   1.181 +	var newHeight = Math.min(smallSide * 0.75, 0.75 * bigSide * scale);
   1.182 +	return {
   1.183 +		height: Math.round(Math.max(template.size, newHeight))
   1.184 +	}
   1.185 +}
   1.186 +
   1.187 +function draw(args) {
   1.188 +	var ctx = args.ctx;
   1.189 +	var dimensions = args.dimensions;
   1.190 +	var template = args.template;
   1.191 +	var ratio = args.ratio;
   1.192 +	var holder = args.holder;
   1.193 +	var literal = holder.textmode == "literal";
   1.194 +	var exact = holder.textmode == "exact";
   1.195 +
   1.196 +	var ts = text_size(dimensions.width, dimensions.height, template);
   1.197 +	var text_height = ts.height;
   1.198 +	var width = dimensions.width * ratio,
   1.199 +		height = dimensions.height * ratio;
   1.200 +	var font = template.font ? template.font : "sans-serif";
   1.201 +	canvas.width = width;
   1.202 +	canvas.height = height;
   1.203 +	ctx.textAlign = "center";
   1.204 +	ctx.textBaseline = "middle";
   1.205 +	ctx.fillStyle = template.background;
   1.206 +	ctx.fillRect(0, 0, width, height);
   1.207 +	ctx.fillStyle = template.foreground;
   1.208 +	ctx.font = "bold " + text_height + "px " + font;
   1.209 +	var text = template.text ? template.text : (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height));
   1.210 +	if (literal) {
   1.211 +		var dimensions = holder.dimensions;
   1.212 +		text = dimensions.width + "x" + dimensions.height;
   1.213 +	}
   1.214 +	else if(exact && holder.exact_dimensions){
   1.215 +		var dimensions = holder.exact_dimensions;
   1.216 +		text = (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height));
   1.217 +	}
   1.218 +	var text_width = ctx.measureText(text).width;
   1.219 +	if (text_width / width >= 0.75) {
   1.220 +		text_height = Math.floor(text_height * 0.75 * (width / text_width));
   1.221 +	}
   1.222 +	//Resetting font size if necessary
   1.223 +	ctx.font = "bold " + (text_height * ratio) + "px " + font;
   1.224 +	ctx.fillText(text, (width / 2), (height / 2), width);
   1.225 +	return canvas.toDataURL("image/png");
   1.226 +}
   1.227 +
   1.228 +function render(mode, el, holder, src) {
   1.229 +	
   1.230 +	var dimensions = holder.dimensions,
   1.231 +		theme = holder.theme,
   1.232 +		text = holder.text ? decodeURIComponent(holder.text) : holder.text;
   1.233 +	var dimensions_caption = dimensions.width + "x" + dimensions.height;
   1.234 +	theme = (text ? extend(theme, {
   1.235 +		text: text
   1.236 +	}) : theme);
   1.237 +	theme = (holder.font ? extend(theme, {
   1.238 +		font: holder.font
   1.239 +	}) : theme);
   1.240 +	el.setAttribute("data-src", src);
   1.241 +	holder.theme = theme;
   1.242 +	el.holder_data = holder;
   1.243 +	
   1.244 +	if (mode == "image") {
   1.245 +		el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
   1.246 +		if (fallback || !holder.auto) {
   1.247 +			el.style.width = dimensions.width + "px";
   1.248 +			el.style.height = dimensions.height + "px";
   1.249 +		}
   1.250 +		if (fallback) {
   1.251 +			el.style.backgroundColor = theme.background;
   1.252 +		} else {
   1.253 +			el.setAttribute("src", draw({ctx: ctx, dimensions: dimensions, template: theme, ratio:ratio, holder: holder}));
   1.254 +			
   1.255 +			if(holder.textmode && holder.textmode == "exact"){
   1.256 +				resizable_images.push(el);
   1.257 +				resizable_update(el);
   1.258 +			}
   1.259 +			
   1.260 +		}
   1.261 +	} else if (mode == "background") {
   1.262 +		if (!fallback) {
   1.263 +			el.style.backgroundImage = "url(" + draw({ctx:ctx, dimensions: dimensions, template: theme, ratio: ratio, holder: holder}) + ")";
   1.264 +			el.style.backgroundSize = dimensions.width + "px " + dimensions.height + "px";
   1.265 +		}
   1.266 +	} else if (mode == "fluid") {
   1.267 +		el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
   1.268 +		if (dimensions.height.slice(-1) == "%") {
   1.269 +			el.style.height = dimensions.height
   1.270 +		} else {
   1.271 +			el.style.height = dimensions.height + "px"
   1.272 +		}
   1.273 +		if (dimensions.width.slice(-1) == "%") {
   1.274 +			el.style.width = dimensions.width
   1.275 +		} else {
   1.276 +			el.style.width = dimensions.width + "px"
   1.277 +		}
   1.278 +		if (el.style.display == "inline" || el.style.display === "" || el.style.display == "none") {
   1.279 +			el.style.display = "block";
   1.280 +		}
   1.281 +		if (fallback) {
   1.282 +			el.style.backgroundColor = theme.background;
   1.283 +		} else {
   1.284 +			resizable_images.push(el);
   1.285 +			resizable_update(el);
   1.286 +		}
   1.287 +	}
   1.288 +}
   1.289 +
   1.290 +function dimension_check(el, callback) {
   1.291 +	var dimensions = {
   1.292 +		height: el.clientHeight,
   1.293 +		width: el.clientWidth
   1.294 +	};
   1.295 +	if (!dimensions.height && !dimensions.width) {
   1.296 +		if (el.hasAttribute("data-holder-invisible")) {
   1.297 +			throw new Error("Holder: placeholder is not visible");
   1.298 +		} else {
   1.299 +			el.setAttribute("data-holder-invisible", true)
   1.300 +			setTimeout(function () {
   1.301 +				callback.call(this, el)
   1.302 +			}, 1)
   1.303 +			return null;
   1.304 +		}
   1.305 +	} else {
   1.306 +		el.removeAttribute("data-holder-invisible")
   1.307 +	}
   1.308 +	return dimensions;
   1.309 +}
   1.310 +
   1.311 +function resizable_update(element) {
   1.312 +	var images;
   1.313 +	if (element.nodeType == null) {
   1.314 +		images = resizable_images;
   1.315 +	} else {
   1.316 +		images = [element]
   1.317 +	}
   1.318 +	for (var i in images) {
   1.319 +		if (!images.hasOwnProperty(i)) {
   1.320 +			continue;
   1.321 +		}
   1.322 +		var el = images[i]
   1.323 +		if (el.holder_data) {
   1.324 +			var holder = el.holder_data;
   1.325 +			var dimensions = dimension_check(el, resizable_update)
   1.326 +			if(dimensions){
   1.327 +				if(holder.fluid){
   1.328 +					el.setAttribute("src", draw({
   1.329 +						ctx: ctx,
   1.330 +						dimensions: dimensions,
   1.331 +						template: holder.theme,
   1.332 +						ratio: ratio,
   1.333 +						holder: holder
   1.334 +					}))
   1.335 +				}
   1.336 +				if(holder.textmode && holder.textmode == "exact"){
   1.337 +					holder.exact_dimensions = dimensions;
   1.338 +					el.setAttribute("src", draw({
   1.339 +						ctx: ctx,
   1.340 +						dimensions: holder.dimensions,
   1.341 +						template: holder.theme,
   1.342 +						ratio: ratio,
   1.343 +						holder: holder
   1.344 +					}))
   1.345 +				}
   1.346 +			}
   1.347 +		}
   1.348 +	}
   1.349 +}
   1.350 +
   1.351 +function parse_flags(flags, options) {
   1.352 +	var ret = {
   1.353 +		theme: extend(settings.themes.gray, {})
   1.354 +	};
   1.355 +	var render = false;
   1.356 +	for (sl = flags.length, j = 0; j < sl; j++) {
   1.357 +		var flag = flags[j];
   1.358 +		if (app.flags.dimensions.match(flag)) {
   1.359 +			render = true;
   1.360 +			ret.dimensions = app.flags.dimensions.output(flag);
   1.361 +		} else if (app.flags.fluid.match(flag)) {
   1.362 +			render = true;
   1.363 +			ret.dimensions = app.flags.fluid.output(flag);
   1.364 +			ret.fluid = true;
   1.365 +		} else if (app.flags.textmode.match(flag)) {
   1.366 +			ret.textmode = app.flags.textmode.output(flag)
   1.367 +		} else if (app.flags.colors.match(flag)) {
   1.368 +			ret.theme = app.flags.colors.output(flag);
   1.369 +		} else if (options.themes[flag]) {
   1.370 +			//If a theme is specified, it will override custom colors
   1.371 +			if(options.themes.hasOwnProperty(flag)){
   1.372 +				ret.theme = extend(options.themes[flag], {});
   1.373 +			}
   1.374 +		} else if (app.flags.font.match(flag)) {
   1.375 +			ret.font = app.flags.font.output(flag);
   1.376 +		} else if (app.flags.auto.match(flag)) {
   1.377 +			ret.auto = true;
   1.378 +		} else if (app.flags.text.match(flag)) {
   1.379 +			ret.text = app.flags.text.output(flag);
   1.380 +		}
   1.381 +	}
   1.382 +	return render ? ret : false;
   1.383 +}
   1.384 +
   1.385 +for (var flag in app.flags) {
   1.386 +	if (!app.flags.hasOwnProperty(flag)) continue;
   1.387 +	app.flags[flag].match = function (val) {
   1.388 +		return val.match(this.regex)
   1.389 +	}
   1.390 +}
   1.391 +app.add_theme = function (name, theme) {
   1.392 +	name != null && theme != null && (settings.themes[name] = theme);
   1.393 +	return app;
   1.394 +};
   1.395 +app.add_image = function (src, el) {
   1.396 +	var node = selector(el);
   1.397 +	if (node.length) {
   1.398 +		for (var i = 0, l = node.length; i < l; i++) {
   1.399 +			var img = document.createElement("img")
   1.400 +			img.setAttribute("data-src", src);
   1.401 +			node[i].appendChild(img);
   1.402 +		}
   1.403 +	}
   1.404 +	return app;
   1.405 +};
   1.406 +app.run = function (o) {
   1.407 +	preempted = true;
   1.408 +	
   1.409 +	var options = extend(settings, o),
   1.410 +		images = [],
   1.411 +		imageNodes = [],
   1.412 +		bgnodes = [];
   1.413 +	if (typeof (options.images) == "string") {
   1.414 +		imageNodes = selector(options.images);
   1.415 +	} else if (window.NodeList && options.images instanceof window.NodeList) {
   1.416 +		imageNodes = options.images;
   1.417 +	} else if (window.Node && options.images instanceof window.Node) {
   1.418 +		imageNodes = [options.images];
   1.419 +	}
   1.420 +	
   1.421 +	if (typeof (options.bgnodes) == "string") {
   1.422 +		bgnodes = selector(options.bgnodes);
   1.423 +	} else if (window.NodeList && options.elements instanceof window.NodeList) {
   1.424 +		bgnodes = options.bgnodes;
   1.425 +	} else if (window.Node && options.bgnodes instanceof window.Node) {
   1.426 +		bgnodes = [options.bgnodes];
   1.427 +	}
   1.428 +	for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]);
   1.429 +	var holdercss = document.getElementById("holderjs-style");
   1.430 +	if (!holdercss) {
   1.431 +		holdercss = document.createElement("style");
   1.432 +		holdercss.setAttribute("id", "holderjs-style");
   1.433 +		holdercss.type = "text/css";
   1.434 +		document.getElementsByTagName("head")[0].appendChild(holdercss);
   1.435 +	}
   1.436 +	if (!options.nocss) {
   1.437 +		if (holdercss.styleSheet) {
   1.438 +			holdercss.styleSheet.cssText += options.stylesheet;
   1.439 +		} else {
   1.440 +			holdercss.appendChild(document.createTextNode(options.stylesheet));
   1.441 +		}
   1.442 +	}
   1.443 +	var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)");
   1.444 +	for (var l = bgnodes.length, i = 0; i < l; i++) {
   1.445 +		var src = window.getComputedStyle(bgnodes[i], null)
   1.446 +			.getPropertyValue("background-image");
   1.447 +		var flags = src.match(cssregex);
   1.448 +		var bgsrc = bgnodes[i].getAttribute("data-background-src");
   1.449 +		if (flags) {
   1.450 +			var holder = parse_flags(flags[1].split("/"), options);
   1.451 +			if (holder) {
   1.452 +				render("background", bgnodes[i], holder, src);
   1.453 +			}
   1.454 +		} else if (bgsrc != null) {
   1.455 +			var holder = parse_flags(bgsrc.substr(bgsrc.lastIndexOf(options.domain) + options.domain.length + 1)
   1.456 +				.split("/"), options);
   1.457 +			if (holder) {
   1.458 +				render("background", bgnodes[i], holder, src);
   1.459 +			}
   1.460 +		}
   1.461 +	}
   1.462 +	for (l = images.length, i = 0; i < l; i++) {
   1.463 +		var attr_data_src, attr_src;
   1.464 +		attr_src = attr_data_src = src = null;
   1.465 +		try {
   1.466 +			attr_src = images[i].getAttribute("src");
   1.467 +			attr_datasrc = images[i].getAttribute("data-src");
   1.468 +		} catch (e) {}
   1.469 +		if (attr_datasrc == null && !! attr_src && attr_src.indexOf(options.domain) >= 0) {
   1.470 +			src = attr_src;
   1.471 +		} else if ( !! attr_datasrc && attr_datasrc.indexOf(options.domain) >= 0) {
   1.472 +			src = attr_datasrc;
   1.473 +		}
   1.474 +		if (src) {
   1.475 +			var holder = parse_flags(src.substr(src.lastIndexOf(options.domain) + options.domain.length + 1)
   1.476 +				.split("/"), options);
   1.477 +			if (holder) {
   1.478 +				if (holder.fluid) {
   1.479 +					render("fluid", images[i], holder, src)
   1.480 +				} else {
   1.481 +					render("image", images[i], holder, src);
   1.482 +				}
   1.483 +			}
   1.484 +		}
   1.485 +	}
   1.486 +	return app;
   1.487 +};
   1.488 +contentLoaded(win, function () {
   1.489 +	if (window.addEventListener) {
   1.490 +		window.addEventListener("resize", resizable_update, false);
   1.491 +		window.addEventListener("orientationchange", resizable_update, false);
   1.492 +	} else {
   1.493 +		window.attachEvent("onresize", resizable_update)
   1.494 +	}
   1.495 +	preempted || app.run();
   1.496 +});
   1.497 +if (typeof define === "function" && define.amd) {
   1.498 +	define([], function () {
   1.499 +		return app;
   1.500 +	});
   1.501 +}
   1.502 +
   1.503 +})(Holder, window);
Impressum Datenschutzerklärung