bootstrap-source/bootstrap-3.0.3/docs-assets/js/holder.js
changeset 115 a9d04f5f5650
parent 114 6093dda9fe38
child 116 00287f05dc6a
     1.1 --- a/bootstrap-source/bootstrap-3.0.3/docs-assets/js/holder.js	Sat Jan 18 12:34:36 2014 +0100
     1.2 +++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.3 @@ -1,500 +0,0 @@
     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