holder_rails 1.9.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 15875671a6199f0e92ee28d6fa5aafe84a9a63fe
4
- data.tar.gz: d0776426d64fdfefc3e49a10abca5ac1b72a74fa
3
+ metadata.gz: a425bea370d6790d57fbfd7d79837aefa07f2ab0
4
+ data.tar.gz: 0fd3ac07570b769d8135361be40c6e98e33d3c82
5
5
  SHA512:
6
- metadata.gz: 767a5464fb7f1df7375aa5b17bcbe6aed5c2069aef19ac7c78bc5373e4896c3c30c9de0a03c2ed022e94257a9c4f211b6407676fb9661bd91a395a93275b8d65
7
- data.tar.gz: 6c3474b927e2987d2a50c0f194e8b9118016c178ddc9e4a1e5a576113c376ae771ce0dc616b231ba8991cccfd47965dde332b5b2915ab530826a46cf2d9476be
6
+ metadata.gz: 43a1b0c6540b84c901db902a5719439fd8fa42d648728b1a7d0d3527b4d2411e3acb9307b09f2e7f4bb2522b96e0cbb93f1832e377078788ee4fe40a9facf93e
7
+ data.tar.gz: d4a4dfdd4fab142073d7cacd18e79afa81e74e4c9d5cd0b7a28972f89b46e442a20d40e5841349b7ad07e9effe7e0950449e0ba216beb1994621b711bdf52fcf
data/README.md CHANGED
@@ -50,7 +50,7 @@ For more information, check out [holder readme](https://github.com/imsky/holder#
50
50
 
51
51
  ## Versioning
52
52
 
53
- holder_rails 1.7.0 == Holder.js 1.7
53
+ holder_rails X.Y.Z == Holder.js X.Y
54
54
 
55
55
  ## License
56
56
 
@@ -1,3 +1,3 @@
1
1
  module HolderRails
2
- VERSION = "1.9.0"
2
+ VERSION = "2.0.0"
3
3
  end
@@ -1,6 +1,6 @@
1
1
  /*
2
2
 
3
- Holder - 1.9 - client side image placeholders
3
+ Holder - 2.0 - client side image placeholders
4
4
  (c) 2012-2013 Ivan Malopinsky / http://imsky.co
5
5
 
6
6
  Provided under the Apache 2.0 License: http://www.apache.org/licenses/LICENSE-2.0
@@ -41,19 +41,22 @@ if (!Object.prototype.hasOwnProperty)
41
41
  }
42
42
 
43
43
  function text_size(width, height, template) {
44
- var dimension_arr = [height, width].sort();
45
- var maxFactor = Math.round(dimension_arr[1] / 16),
46
- minFactor = Math.round(dimension_arr[0] / 16);
47
- var text_height = Math.max(template.size, maxFactor);
44
+ height = parseInt(height,10);
45
+ width = parseInt(width,10);
46
+ var bigSide = Math.max(height, width)
47
+ var smallSide = Math.min(height, width)
48
+ var scale = 1 / 12;
49
+ var newHeight = Math.min(smallSide * 0.75, 0.75 * bigSide * scale);
48
50
  return {
49
- height: text_height
51
+ height: Math.round(Math.max(template.size, newHeight))
50
52
  }
51
53
  }
52
54
 
53
55
  function draw(ctx, dimensions, template, ratio) {
54
56
  var ts = text_size(dimensions.width, dimensions.height, template);
55
57
  var text_height = ts.height;
56
- var width = dimensions.width * ratio, height = dimensions.height * ratio;
58
+ var width = dimensions.width * ratio,
59
+ height = dimensions.height * ratio;
57
60
  var font = template.font ? template.font : "sans-serif";
58
61
  canvas.width = width;
59
62
  canvas.height = height;
@@ -62,13 +65,14 @@ function draw(ctx, dimensions, template, ratio) {
62
65
  ctx.fillStyle = template.background;
63
66
  ctx.fillRect(0, 0, width, height);
64
67
  ctx.fillStyle = template.foreground;
65
- ctx.font = "bold " + text_height + "px "+font;
66
- var text = template.text ? template.text : (dimensions.width + "x" + dimensions.height);
67
- if (ctx.measureText(text).width / width > 1) {
68
- text_height = template.size / (ctx.measureText(text).width / width);
68
+ ctx.font = "bold " + text_height + "px " + font;
69
+ var text = template.text ? template.text : (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height));
70
+ var text_width = ctx.measureText(text).width;
71
+ if (text_width / width >= 0.75) {
72
+ text_height = Math.floor(text_height * 0.75 * (width/text_width));
69
73
  }
70
74
  //Resetting font size if necessary
71
- ctx.font = "bold " + (text_height * ratio) + "px "+font;
75
+ ctx.font = "bold " + (text_height * ratio) + "px " + font;
72
76
  ctx.fillText(text, (width / 2), (height / 2), width);
73
77
  return canvas.toDataURL("image/png");
74
78
  }
@@ -78,89 +82,71 @@ function render(mode, el, holder, src) {
78
82
  theme = holder.theme,
79
83
  text = holder.text ? decodeURIComponent(holder.text) : holder.text;
80
84
  var dimensions_caption = dimensions.width + "x" + dimensions.height;
81
- theme = (text ? extend(theme, { text: text }) : theme);
82
- theme = (holder.font ? extend(theme, {font: holder.font}) : theme);
83
-
84
- var ratio = 1;
85
- if(window.devicePixelRatio && window.devicePixelRatio > 1){
86
- ratio = window.devicePixelRatio;
87
- }
88
-
85
+ theme = (text ? extend(theme, {
86
+ text: text
87
+ }) : theme);
88
+ theme = (holder.font ? extend(theme, {
89
+ font: holder.font
90
+ }) : theme);
89
91
  if (mode == "image") {
90
92
  el.setAttribute("data-src", src);
91
93
  el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
92
-
93
- if(fallback || !holder.auto){
94
- el.style.width = dimensions.width + "px";
95
- el.style.height = dimensions.height + "px";
94
+ if (fallback || !holder.auto) {
95
+ el.style.width = dimensions.width + "px";
96
+ el.style.height = dimensions.height + "px";
96
97
  }
97
-
98
98
  if (fallback) {
99
99
  el.style.backgroundColor = theme.background;
100
-
101
- }
102
- else{
100
+ } else {
103
101
  el.setAttribute("src", draw(ctx, dimensions, theme, ratio));
104
102
  }
105
- } else {
103
+ } else if (mode == "background") {
106
104
  if (!fallback) {
107
105
  el.style.backgroundImage = "url(" + draw(ctx, dimensions, theme, ratio) + ")";
108
- el.style.backgroundSize = dimensions.width+"px "+dimensions.height+"px";
106
+ el.style.backgroundSize = dimensions.width + "px " + dimensions.height + "px";
107
+ }
108
+ } else if (mode == "fluid") {
109
+ el.setAttribute("data-src", src);
110
+ el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
111
+ if (dimensions.height.substr(-1) == "%") {
112
+ el.style.height = dimensions.height
113
+ } else {
114
+ el.style.height = dimensions.height + "px"
115
+ }
116
+ if (dimensions.width.substr(-1) == "%") {
117
+ el.style.width = dimensions.width
118
+ } else {
119
+ el.style.width = dimensions.width + "px"
120
+ }
121
+ if (el.style.display == "inline" || el.style.display == "") {
122
+ el.style.display = "block";
123
+ }
124
+ if (fallback) {
125
+ el.style.backgroundColor = theme.background;
126
+ } else {
127
+ el.holderData = holder;
128
+ fluid_images.push(el);
129
+ fluid_update(el);
109
130
  }
110
131
  }
111
132
  };
112
133
 
113
- function fluid(el, holder, src) {
114
- var dimensions = holder.dimensions,
115
- theme = holder.theme,
116
- text = holder.text;
117
- var dimensions_caption = dimensions.width + "x" + dimensions.height;
118
- theme = (text ? extend(theme, {
119
- text: text
120
- }) : theme);
121
-
122
- var fluid = document.createElement("div");
123
-
124
- fluid.style.backgroundColor = theme.background;
125
- fluid.style.color = theme.foreground;
126
- fluid.className = el.className + " holderjs-fluid";
127
- fluid.style.width = holder.dimensions.width + (holder.dimensions.width.indexOf("%")>0?"":"px");
128
- fluid.style.height = holder.dimensions.height + (holder.dimensions.height.indexOf("%")>0?"":"px");
129
- fluid.id = el.id;
130
-
131
- el.style.width=0;
132
- el.style.height=0;
133
-
134
- if (theme.text) {
135
- fluid.appendChild(document.createTextNode(theme.text))
134
+ function fluid_update(element) {
135
+ var images;
136
+ if (element.nodeType == null) {
137
+ images = fluid_images;
136
138
  } else {
137
- fluid.appendChild(document.createTextNode(dimensions_caption))
138
- fluid_images.push(fluid);
139
- setTimeout(fluid_update, 0);
140
- }
141
-
142
- el.parentNode.insertBefore(fluid, el.nextSibling)
143
-
144
- if(window.jQuery){
145
- jQuery(function($){
146
- $(el).on("load", function(){
147
- el.style.width = fluid.style.width;
148
- el.style.height = fluid.style.height;
149
- $(el).show();
150
- $(fluid).remove();
151
- });
152
- })
139
+ images = [element]
153
140
  }
154
- }
155
-
156
- function fluid_update() {
157
- for (i in fluid_images) {
158
- if(!fluid_images.hasOwnProperty(i)) continue;
159
- var el = fluid_images[i],
160
- label = el.firstChild;
161
-
162
- el.style.lineHeight = el.offsetHeight+"px";
163
- label.data = el.offsetWidth + "x" + el.offsetHeight;
141
+ for (i in images) {
142
+ var el = images[i]
143
+ if (el.holderData) {
144
+ var holder = el.holderData;
145
+ el.setAttribute("src", draw(ctx, {
146
+ height: el.clientHeight,
147
+ width: el.clientWidth
148
+ }, holder.theme, ratio));
149
+ }
164
150
  }
165
151
  }
166
152
 
@@ -186,10 +172,9 @@ function parse_flags(flags, options) {
186
172
  ret.theme = options.themes[flag];
187
173
  } else if (app.flags.text.match(flag)) {
188
174
  ret.text = app.flags.text.output(flag);
189
- } else if(app.flags.font.match(flag)){
175
+ } else if (app.flags.font.match(flag)) {
190
176
  ret.font = app.flags.font.output(flag);
191
- }
192
- else if(app.flags.auto.match(flag)){
177
+ } else if (app.flags.auto.match(flag)) {
193
178
  ret.auto = true;
194
179
  }
195
180
  }
@@ -198,6 +183,8 @@ function parse_flags(flags, options) {
198
183
 
199
184
  };
200
185
 
186
+
187
+
201
188
  if (!canvas.getContext) {
202
189
  fallback = true;
203
190
  } else {
@@ -210,6 +197,15 @@ if (!canvas.getContext) {
210
197
  }
211
198
  }
212
199
 
200
+ var dpr = 1, bsr = 1;
201
+
202
+ if(!fallback){
203
+ dpr = window.devicePixelRatio || 1,
204
+ bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
205
+ }
206
+
207
+ var ratio = dpr / bsr;
208
+
213
209
  var fluid_images = [];
214
210
 
215
211
  var settings = {
@@ -222,18 +218,18 @@ var settings = {
222
218
  foreground: "#aaa",
223
219
  size: 12
224
220
  },
225
- "social": {
221
+ "social": {
226
222
  background: "#3a5a97",
227
223
  foreground: "#fff",
228
224
  size: 12
229
225
  },
230
- "industrial": {
226
+ "industrial": {
231
227
  background: "#434A52",
232
228
  foreground: "#C2F200",
233
229
  size: 12
234
230
  }
235
231
  },
236
- stylesheet: ".holderjs-fluid {font-size:16px;font-weight:bold;text-align:center;font-family:sans-serif;margin:0}"
232
+ stylesheet: ""
237
233
  };
238
234
 
239
235
 
@@ -276,18 +272,18 @@ app.flags = {
276
272
  }
277
273
  },
278
274
  font: {
279
- regex: /font\:(.*)/,
280
- output: function(val){
281
- return this.regex.exec(val)[1];
282
- }
275
+ regex: /font\:(.*)/,
276
+ output: function (val) {
277
+ return this.regex.exec(val)[1];
278
+ }
283
279
  },
284
280
  auto: {
285
- regex: /^auto$/
281
+ regex: /^auto$/
286
282
  }
287
283
  }
288
284
 
289
285
  for (var flag in app.flags) {
290
- if(!app.flags.hasOwnProperty(flag)) continue;
286
+ if (!app.flags.hasOwnProperty(flag)) continue;
291
287
  app.flags[flag].match = function (val) {
292
288
  return val.match(this.regex)
293
289
  }
@@ -311,70 +307,90 @@ app.add_image = function (src, el) {
311
307
  };
312
308
 
313
309
  app.run = function (o) {
314
- var options = extend(settings, o), images = [];
310
+ var options = extend(settings, o),
311
+ images = [], imageNodes = [], bgnodes = [];
315
312
 
316
- if(options.images instanceof window.NodeList){
317
- imageNodes = options.images;
318
- }
319
- else if(options.images instanceof window.Node){
320
- imageNodes = [options.images];
321
- }
322
- else{
313
+ if(typeof(options.images) == "string"){
323
314
  imageNodes = selector(options.images);
324
315
  }
325
-
326
- if(options.elements instanceof window.NodeList){
327
- bgnodes = options.bgnodes;
328
- }
329
- else if(options.bgnodes instanceof window.Node){
330
- bgnodes = [options.bgnodes];
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];
331
320
  }
332
- else{
321
+
322
+ if(typeof(options.bgnodes) == "string"){
333
323
  bgnodes = selector(options.bgnodes);
324
+ } else if (window.NodeList && options.elements instanceof window.NodeList) {
325
+ bgnodes = options.bgnodes;
326
+ } else if (window.Node && options.bgnodes instanceof window.Node) {
327
+ bgnodes = [options.bgnodes];
334
328
  }
335
-
329
+
336
330
  preempted = true;
337
-
331
+
338
332
  for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]);
339
-
333
+
340
334
  var holdercss = document.getElementById("holderjs-style");
335
+ if (!holdercss) {
336
+ holdercss = document.createElement("style");
337
+ holdercss.setAttribute("id", "holderjs-style");
338
+ holdercss.type = "text/css";
339
+ document.getElementsByTagName("head")[0].appendChild(holdercss);
340
+ }
341
341
 
342
- if(!holdercss){
343
- holdercss = document.createElement("style");
344
- holdercss.setAttribute("id", "holderjs-style");
345
- holdercss.type = "text/css";
346
- document.getElementsByTagName("head")[0].appendChild(holdercss);
342
+ if (!options.nocss) {
343
+ if (holdercss.styleSheet) {
344
+ holdercss.styleSheet.cssText += options.stylesheet;
345
+ } else {
346
+ holdercss.appendChild(document.createTextNode(options.stylesheet));
347
+ }
347
348
  }
348
349
 
349
- if(holdercss.styleSheet){
350
- holdercss.styleSheet += options.stylesheet;
351
- }
352
- else{
353
- holdercss.textContent+= options.stylesheet;
354
- }
355
-
356
350
  var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)");
357
351
 
358
352
  for (var l = bgnodes.length, i = 0; i < l; i++) {
359
353
  var src = window.getComputedStyle(bgnodes[i], null)
360
354
  .getPropertyValue("background-image");
361
355
  var flags = src.match(cssregex);
356
+ var bgsrc = bgnodes[i].getAttribute("data-background-src");
357
+
362
358
  if (flags) {
363
359
  var holder = parse_flags(flags[1].split("/"), options);
364
360
  if (holder) {
365
361
  render("background", bgnodes[i], holder, src);
366
362
  }
367
363
  }
364
+ else if(bgsrc != null){
365
+ var holder = parse_flags(bgsrc.substr(bgsrc.lastIndexOf(options.domain) + options.domain.length + 1)
366
+ .split("/"), options);
367
+ if(holder){
368
+ render("background", bgnodes[i], holder, src);
369
+ }
370
+ }
368
371
  }
369
372
 
370
- for (var l = images.length, i = 0; i < l; i++) {
371
- var src = images[i].getAttribute("src") || images[i].getAttribute("data-src");
372
- if (src != null && src.indexOf(options.domain) >= 0) {
373
+ for (l = images.length, i = 0; i < l; i++) {
374
+
375
+ var attr_src = attr_data_src = src = null;
376
+
377
+ try{
378
+ attr_src = images[i].getAttribute("src");
379
+ attr_datasrc = images[i].getAttribute("data-src");
380
+ }catch(e){}
381
+
382
+ if (attr_datasrc == null && !! attr_src && attr_src.indexOf(options.domain) >= 0) {
383
+ src = attr_src;
384
+ } else if ( !! attr_datasrc && attr_datasrc.indexOf(options.domain) >= 0) {
385
+ src = attr_datasrc;
386
+ }
387
+
388
+ if (src) {
373
389
  var holder = parse_flags(src.substr(src.lastIndexOf(options.domain) + options.domain.length + 1)
374
390
  .split("/"), options);
375
391
  if (holder) {
376
392
  if (holder.fluid) {
377
- fluid(images[i], holder, src);
393
+ render("fluid", images[i], holder, src)
378
394
  } else {
379
395
  render("image", images[i], holder, src);
380
396
  }
@@ -394,8 +410,10 @@ contentLoaded(win, function () {
394
410
  preempted || app.run();
395
411
  });
396
412
 
397
- if ( typeof define === "function" && define.amd ) {
398
- define( "Holder", [], function () { return app; } );
413
+ if (typeof define === "function" && define.amd) {
414
+ define("Holder", [], function () {
415
+ return app;
416
+ });
399
417
  }
400
418
 
401
419
  })(Holder, window);
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: holder_rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.9.0
4
+ version: 2.0.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Nihad Abbasov
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2013-04-22 00:00:00.000000000 Z
11
+ date: 2013-07-06 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: railties