git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/docs-assets/js/holder.js

   1 /*
   2
   3 Holder - 2.1 - client side image placeholders
   4 (c) 2012-2013 Ivan Malopinsky / http://imsky.co
   5
   6 Provided under the MIT License.
   7 Commercial use requires attribution.
   8
   9 */
  10
  11 var Holder = Holder || {};
  12 (function (app, win) {
  13
  14 var preempted = false,
  15 fallback = false,
  16 canvas = document.createElement('canvas');
  17
  18 if (!canvas.getContext) {
  19         fallback = true;
  20 } else {
  21         if (canvas.toDataURL("image/png")
  22                 .indexOf("data:image/png") < 0) {
  23                 //Android doesn't support data URI
  24                 fallback = true;
  25         } else {
  26                 var ctx = canvas.getContext("2d");
  27         }
  28 }
  29
  30 var dpr = 1, bsr = 1;
  31
  32 if(!fallback){
  33     dpr = window.devicePixelRatio || 1,
  34     bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
  35 }
  36
  37 var ratio = dpr / bsr;
  38
  39 //getElementsByClassName polyfill
  40 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})
  41
  42 //getComputedStyle polyfill
  43 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})
  44
  45 //http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications
  46 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)}}
  47
  48 //https://gist.github.com/991057 by Jed Schmidt with modifications
  49 function selector(a){
  50         a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]);
  51         var ret=[];     b!==null&&(b.length?ret=b:b.length===0?ret=b:ret=[b]);  return ret;
  52 }
  53
  54 //shallow object property extend
  55 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}
  56
  57 //hasOwnProperty polyfill
  58 if (!Object.prototype.hasOwnProperty)
  59     /*jshint -W001, -W103 */
  60     Object.prototype.hasOwnProperty = function(prop) {
  61                 var proto = this.__proto__ || this.constructor.prototype;
  62                 return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]);
  63         }
  64     /*jshint +W001, +W103 */
  65
  66 function text_size(width, height, template) {
  67         height = parseInt(height, 10);
  68         width = parseInt(width, 10);
  69         var bigSide = Math.max(height, width)
  70         var smallSide = Math.min(height, width)
  71         var scale = 1 / 12;
  72         var newHeight = Math.min(smallSide * 0.75, 0.75 * bigSide * scale);
  73         return {
  74                 height: Math.round(Math.max(template.size, newHeight))
  75         }
  76 }
  77
  78 function draw(ctx, dimensions, template, ratio, literal) {
  79         var ts = text_size(dimensions.width, dimensions.height, template);
  80         var text_height = ts.height;
  81         var width = dimensions.width * ratio,
  82                 height = dimensions.height * ratio;
  83         var font = template.font ? template.font : "sans-serif";
  84         canvas.width = width;
  85         canvas.height = height;
  86         ctx.textAlign = "center";
  87         ctx.textBaseline = "middle";
  88         ctx.fillStyle = template.background;
  89         ctx.fillRect(0, 0, width, height);
  90         ctx.fillStyle = template.foreground;
  91         ctx.font = "bold " + text_height + "px " + font;
  92         var text = template.text ? template.text : (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height));
  93         if (literal) {
  94                 text = template.literalText;
  95         }
  96         var text_width = ctx.measureText(text).width;
  97         if (text_width / width >= 0.75) {
  98                 text_height = Math.floor(text_height * 0.75 * (width / text_width));
  99         }
 100         //Resetting font size if necessary
 101         ctx.font = "bold " + (text_height * ratio) + "px " + font;
 102         ctx.fillText(text, (width / 2), (height / 2), width);
 103         return canvas.toDataURL("image/png");
 104 }
 105
 106 function render(mode, el, holder, src) {
 107         var dimensions = holder.dimensions,
 108                 theme = holder.theme,
 109                 text = holder.text ? decodeURIComponent(holder.text) : holder.text;
 110         var dimensions_caption = dimensions.width + "x" + dimensions.height;
 111         theme = (text ? extend(theme, {
 112                 text: text
 113         }) : theme);
 114         theme = (holder.font ? extend(theme, {
 115                 font: holder.font
 116         }) : theme);
 117         el.setAttribute("data-src", src);
 118         theme.literalText = dimensions_caption;
 119         holder.originalTheme = holder.theme;
 120         holder.theme = theme;
 121
 122         if (mode == "image") {
 123                 el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
 124                 if (fallback || !holder.auto) {
 125                         el.style.width = dimensions.width + "px";
 126                         el.style.height = dimensions.height + "px";
 127                 }
 128                 if (fallback) {
 129                         el.style.backgroundColor = theme.background;
 130                 } else {
 131                         el.setAttribute("src", draw(ctx, dimensions, theme, ratio));
 132                 }
 133         } else if (mode == "background") {
 134                 if (!fallback) {
 135                         el.style.backgroundImage = "url(" + draw(ctx, dimensions, theme, ratio) + ")";
 136                         el.style.backgroundSize = dimensions.width + "px " + dimensions.height + "px";
 137                 }
 138         } else if (mode == "fluid") {
 139                 el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
 140                 if (dimensions.height.slice(-1) == "%") {
 141                         el.style.height = dimensions.height
 142                 } else {
 143                         el.style.height = dimensions.height + "px"
 144                 }
 145                 if (dimensions.width.slice(-1) == "%") {
 146                         el.style.width = dimensions.width
 147                 } else {
 148                         el.style.width = dimensions.width + "px"
 149                 }
 150                 if (el.style.display == "inline" || el.style.display === "") {
 151                         el.style.display = "block";
 152                 }
 153                 if (fallback) {
 154                         el.style.backgroundColor = theme.background;
 155                 } else {
 156                         el.holderData = holder;
 157                         fluid_images.push(el);
 158                         fluid_update(el);
 159                 }
 160         }
 161 }
 162
 163 function fluid_update(element) {
 164         var images;
 165         if (element.nodeType == null) {
 166                 images = fluid_images;
 167         } else {
 168                 images = [element]
 169         }
 170         for (var i in images) {
 171                 var el = images[i]
 172                 if (el.holderData) {
 173                         var holder = el.holderData;
 174                         el.setAttribute("src", draw(ctx, {
 175                                 height: el.clientHeight,
 176                                 width: el.clientWidth
 177                         }, holder.theme, ratio, !! holder.literal));
 178                 }
 179         }
 180 }
 181
 182 function parse_flags(flags, options) {
 183         var ret = {
 184                 theme: settings.themes.gray
 185         };
 186         var render = false;
 187         for (sl = flags.length, j = 0; j < sl; j++) {
 188                 var flag = flags[j];
 189                 if (app.flags.dimensions.match(flag)) {
 190                         render = true;
 191                         ret.dimensions = app.flags.dimensions.output(flag);
 192                 } else if (app.flags.fluid.match(flag)) {
 193                         render = true;
 194                         ret.dimensions = app.flags.fluid.output(flag);
 195                         ret.fluid = true;
 196                 } else if (app.flags.literal.match(flag)) {
 197                         ret.literal = true;
 198                 } else if (app.flags.colors.match(flag)) {
 199                         ret.theme = app.flags.colors.output(flag);
 200                 } else if (options.themes[flag]) {
 201                         //If a theme is specified, it will override custom colors
 202                         ret.theme = options.themes[flag];
 203                 } else if (app.flags.font.match(flag)) {
 204                         ret.font = app.flags.font.output(flag);
 205                 } else if (app.flags.auto.match(flag)) {
 206                         ret.auto = true;
 207                 } else if (app.flags.text.match(flag)) {
 208                         ret.text = app.flags.text.output(flag);
 209                 }
 210         }
 211         return render ? ret : false;
 212 }
 213 var fluid_images = [];
 214 var settings = {
 215         domain: "holder.js",
 216         images: "img",
 217         bgnodes: ".holderjs",
 218         themes: {
 219                 "gray": {
 220                         background: "#eee",
 221                         foreground: "#aaa",
 222                         size: 12
 223                 },
 224                 "social": {
 225                         background: "#3a5a97",
 226                         foreground: "#fff",
 227                         size: 12
 228                 },
 229                 "industrial": {
 230                         background: "#434A52",
 231                         foreground: "#C2F200",
 232                         size: 12
 233                 }
 234         },
 235         stylesheet: ""
 236 };
 237 app.flags = {
 238         dimensions: {
 239                 regex: /^(\d+)x(\d+)$/,
 240                 output: function (val) {
 241                         var exec = this.regex.exec(val);
 242                         return {
 243                                 width: +exec[1],
 244                                 height: +exec[2]
 245                         }
 246                 }
 247         },
 248         fluid: {
 249                 regex: /^([0-9%]+)x([0-9%]+)$/,
 250                 output: function (val) {
 251                         var exec = this.regex.exec(val);
 252                         return {
 253                                 width: exec[1],
 254                                 height: exec[2]
 255                         }
 256                 }
 257         },
 258         colors: {
 259                 regex: /#([0-9a-f]{3,})\:#([0-9a-f]{3,})/i,
 260                 output: function (val) {
 261                         var exec = this.regex.exec(val);
 262                         return {
 263                                 size: settings.themes.gray.size,
 264                                 foreground: "#" + exec[2],
 265                                 background: "#" + exec[1]
 266                         }
 267                 }
 268         },
 269         text: {
 270                 regex: /text\:(.*)/,
 271                 output: function (val) {
 272                         return this.regex.exec(val)[1];
 273                 }
 274         },
 275         font: {
 276                 regex: /font\:(.*)/,
 277                 output: function (val) {
 278                         return this.regex.exec(val)[1];
 279                 }
 280         },
 281         auto: {
 282                 regex: /^auto$/
 283         },
 284         literal: {
 285                 regex: /^literal$/
 286         }
 287 }
 288 for (var flag in app.flags) {
 289         if (!app.flags.hasOwnProperty(flag)) continue;
 290         app.flags[flag].match = function (val) {
 291                 return val.match(this.regex)
 292         }
 293 }
 294 app.add_theme = function (name, theme) {
 295         name != null && theme != null && (settings.themes[name] = theme);
 296         return app;
 297 };
 298 app.add_image = function (src, el) {
 299         var node = selector(el);
 300         if (node.length) {
 301                 for (var i = 0, l = node.length; i < l; i++) {
 302                         var img = document.createElement("img")
 303                         img.setAttribute("data-src", src);
 304                         node[i].appendChild(img);
 305                 }
 306         }
 307         return app;
 308 };
 309 app.run = function (o) {
 310         var options = extend(settings, o),
 311                 images = [],
 312                 imageNodes = [],
 313                 bgnodes = [];
 314         if (typeof (options.images) == "string") {
 315                 imageNodes = selector(options.images);
 316         } else if (window.NodeList && options.images instanceof window.NodeList) {
 317                 imageNodes = options.images;
 318         } else if (window.Node && options.images instanceof window.Node) {
 319                 imageNodes = [options.images];
 320         }
 321         if (typeof (options.bgnodes) == "string") {
 322                 bgnodes = selector(options.bgnodes);
 323         } else if (window.NodeList && options.elements instanceof window.NodeList) {
 324                 bgnodes = options.bgnodes;
 325         } else if (window.Node && options.bgnodes instanceof window.Node) {
 326                 bgnodes = [options.bgnodes];
 327         }
 328         preempted = true;
 329         for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]);
 330         var holdercss = document.getElementById("holderjs-style");
 331         if (!holdercss) {
 332                 holdercss = document.createElement("style");
 333                 holdercss.setAttribute("id", "holderjs-style");
 334                 holdercss.type = "text/css";
 335                 document.getElementsByTagName("head")[0].appendChild(holdercss);
 336         }
 337         if (!options.nocss) {
 338                 if (holdercss.styleSheet) {
 339                         holdercss.styleSheet.cssText += options.stylesheet;
 340                 } else {
 341                         holdercss.appendChild(document.createTextNode(options.stylesheet));
 342                 }
 343         }
 344         var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)");
 345         for (var l = bgnodes.length, i = 0; i < l; i++) {
 346                 var src = window.getComputedStyle(bgnodes[i], null)
 347                         .getPropertyValue("background-image");
 348                 var flags = src.match(cssregex);
 349                 var bgsrc = bgnodes[i].getAttribute("data-background-src");
 350                 if (flags) {
 351                         var holder = parse_flags(flags[1].split("/"), options);
 352                         if (holder) {
 353                                 render("background", bgnodes[i], holder, src);
 354                         }
 355                 } else if (bgsrc != null) {
 356                         var holder = parse_flags(bgsrc.substr(bgsrc.lastIndexOf(options.domain) + options.domain.length + 1)
 357                                 .split("/"), options);
 358                         if (holder) {
 359                                 render("background", bgnodes[i], holder, src);
 360                         }
 361                 }
 362         }
 363         for (l = images.length, i = 0; i < l; i++) {
 364                 var attr_data_src, attr_src;
 365                 attr_src = attr_data_src = src = null;
 366                 try {
 367                         attr_src = images[i].getAttribute("src");
 368                         attr_datasrc = images[i].getAttribute("data-src");
 369                 } catch (e) {}
 370                 if (attr_datasrc == null && !! attr_src && attr_src.indexOf(options.domain) >= 0) {
 371                         src = attr_src;
 372                 } else if ( !! attr_datasrc && attr_datasrc.indexOf(options.domain) >= 0) {
 373                         src = attr_datasrc;
 374                 }
 375                 if (src) {
 376                         var holder = parse_flags(src.substr(src.lastIndexOf(options.domain) + options.domain.length + 1)
 377                                 .split("/"), options);
 378                         if (holder) {
 379                                 if (holder.fluid) {
 380                                         render("fluid", images[i], holder, src)
 381                                 } else {
 382                                         render("image", images[i], holder, src);
 383                                 }
 384                         }
 385                 }
 386         }
 387         return app;
 388 };
 389 contentLoaded(win, function () {
 390         if (window.addEventListener) {
 391                 window.addEventListener("resize", fluid_update, false);
 392                 window.addEventListener("orientationchange", fluid_update, false);
 393         } else {
 394                 window.attachEvent("onresize", fluid_update)
 395         }
 396         preempted || app.run();
 397 });
 398 if (typeof define === "function" && define.amd) {
 399         define([], function () {
 400                 return app;
 401         });
 402 }
 403
 404 })(Holder, window);