holder_rails 2.1.0 → 2.2.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: 6d02d01436ba84ee6c50bc35b0644f606abc33ed
4
- data.tar.gz: f6554f74633cff281227b93bfb21a47c8659b204
3
+ metadata.gz: 00cf2580599d5337218784c8efbcec34e86e3acc
4
+ data.tar.gz: aa74c9d961f3566c10d3889303a102656103e066
5
5
  SHA512:
6
- metadata.gz: 50202367d53117e067c6903ced20cd1b7770c8716b58e4cd6a9212a4d6eb3f36fc82f2c3393047853fe800e1de4465eb3023aadb18ae6243f143ae909fc14bed
7
- data.tar.gz: bb32c417f69957e418875f2a54d02ab77b87eae23156e5bd5afab17c7e7aa3347fc8c87786016625982956aabbc4691185dfe2e7ea80ad138ae266e074ffb44c
6
+ metadata.gz: d02496241c1759caab3976f6f848b166bccf32b39f1f17d5f5a287f8e0fcf56fc612156ee4bc99925a0e7b286cab60ad4c7130a757782a39339e2d83434d1eee
7
+ data.tar.gz: 611b7fbea28db0b8a1944b598a0386330f2a3538c7134f17bfb0689574390db6a97f83375ba730b8d421e182c1dac72a7bfbfddbcc53cd4f10a4016a56c0d203
@@ -1,3 +1,3 @@
1
1
  module HolderRails
2
- VERSION = "2.1.0"
2
+ VERSION = "2.2.0"
3
3
  end
@@ -1,6 +1,6 @@
1
1
  /*
2
2
 
3
- Holder - 2.1 - client side image placeholders
3
+ Holder - 2.2 - client side image placeholders
4
4
  (c) 2012-2013 Ivan Malopinsky / http://imsky.co
5
5
 
6
6
  Provided under the MIT License.
@@ -14,6 +14,8 @@ var Holder = Holder || {};
14
14
  var preempted = false,
15
15
  fallback = false,
16
16
  canvas = document.createElement('canvas');
17
+ var dpr = 1, bsr = 1;
18
+ var resizable_images = [];
17
19
 
18
20
  if (!canvas.getContext) {
19
21
  fallback = true;
@@ -27,8 +29,6 @@ if (!canvas.getContext) {
27
29
  }
28
30
  }
29
31
 
30
- var dpr = 1, bsr = 1;
31
-
32
32
  if(!fallback){
33
33
  dpr = window.devicePixelRatio || 1,
34
34
  bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
@@ -36,6 +36,99 @@ if(!fallback){
36
36
 
37
37
  var ratio = dpr / bsr;
38
38
 
39
+ var settings = {
40
+ domain: "holder.js",
41
+ images: "img",
42
+ bgnodes: ".holderjs",
43
+ themes: {
44
+ "gray": {
45
+ background: "#eee",
46
+ foreground: "#aaa",
47
+ size: 12
48
+ },
49
+ "social": {
50
+ background: "#3a5a97",
51
+ foreground: "#fff",
52
+ size: 12
53
+ },
54
+ "industrial": {
55
+ background: "#434A52",
56
+ foreground: "#C2F200",
57
+ size: 12
58
+ },
59
+ "sky": {
60
+ background: "#0D8FDB",
61
+ foreground: "#fff",
62
+ size: 12
63
+ },
64
+ "vine": {
65
+ background: "#39DBAC",
66
+ foreground: "#1E292C",
67
+ size: 12
68
+ },
69
+ "lava": {
70
+ background: "#F8591A",
71
+ foreground: "#1C2846",
72
+ size: 12
73
+ }
74
+ },
75
+ stylesheet: ""
76
+ };
77
+ app.flags = {
78
+ dimensions: {
79
+ regex: /^(\d+)x(\d+)$/,
80
+ output: function (val) {
81
+ var exec = this.regex.exec(val);
82
+ return {
83
+ width: +exec[1],
84
+ height: +exec[2]
85
+ }
86
+ }
87
+ },
88
+ fluid: {
89
+ regex: /^([0-9%]+)x([0-9%]+)$/,
90
+ output: function (val) {
91
+ var exec = this.regex.exec(val);
92
+ return {
93
+ width: exec[1],
94
+ height: exec[2]
95
+ }
96
+ }
97
+ },
98
+ colors: {
99
+ regex: /#([0-9a-f]{3,})\:#([0-9a-f]{3,})/i,
100
+ output: function (val) {
101
+ var exec = this.regex.exec(val);
102
+ return {
103
+ size: settings.themes.gray.size,
104
+ foreground: "#" + exec[2],
105
+ background: "#" + exec[1]
106
+ }
107
+ }
108
+ },
109
+ text: {
110
+ regex: /text\:(.*)/,
111
+ output: function (val) {
112
+ return this.regex.exec(val)[1];
113
+ }
114
+ },
115
+ font: {
116
+ regex: /font\:(.*)/,
117
+ output: function (val) {
118
+ return this.regex.exec(val)[1];
119
+ }
120
+ },
121
+ auto: {
122
+ regex: /^auto$/
123
+ },
124
+ textmode: {
125
+ regex: /textmode\:(.*)/,
126
+ output: function(val){
127
+ return this.regex.exec(val)[1];
128
+ }
129
+ }
130
+ }
131
+
39
132
  //getElementsByClassName polyfill
40
133
  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
134
 
@@ -52,7 +145,20 @@ function selector(a){
52
145
  }
53
146
 
54
147
  //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}
148
+ function extend(a,b){
149
+ var c={};
150
+ for(var i in a){
151
+ if(a.hasOwnProperty(i)){
152
+ c[i]=a[i];
153
+ }
154
+ }
155
+ for(var i in b){
156
+ if(b.hasOwnProperty(i)){
157
+ c[i]=b[i];
158
+ }
159
+ }
160
+ return c
161
+ }
56
162
 
57
163
  //hasOwnProperty polyfill
58
164
  if (!Object.prototype.hasOwnProperty)
@@ -75,7 +181,15 @@ function text_size(width, height, template) {
75
181
  }
76
182
  }
77
183
 
78
- function draw(ctx, dimensions, template, ratio, literal) {
184
+ function draw(args) {
185
+ var ctx = args.ctx;
186
+ var dimensions = args.dimensions;
187
+ var template = args.template;
188
+ var ratio = args.ratio;
189
+ var holder = args.holder;
190
+ var literal = holder.textmode == "literal";
191
+ var exact = holder.textmode == "exact";
192
+
79
193
  var ts = text_size(dimensions.width, dimensions.height, template);
80
194
  var text_height = ts.height;
81
195
  var width = dimensions.width * ratio,
@@ -91,7 +205,12 @@ function draw(ctx, dimensions, template, ratio, literal) {
91
205
  ctx.font = "bold " + text_height + "px " + font;
92
206
  var text = template.text ? template.text : (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height));
93
207
  if (literal) {
94
- text = template.literalText;
208
+ var dimensions = holder.dimensions;
209
+ text = dimensions.width + "x" + dimensions.height;
210
+ }
211
+ else if(exact && holder.exact_dimensions){
212
+ var dimensions = holder.exact_dimensions;
213
+ text = (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height));
95
214
  }
96
215
  var text_width = ctx.measureText(text).width;
97
216
  if (text_width / width >= 0.75) {
@@ -104,6 +223,7 @@ function draw(ctx, dimensions, template, ratio, literal) {
104
223
  }
105
224
 
106
225
  function render(mode, el, holder, src) {
226
+
107
227
  var dimensions = holder.dimensions,
108
228
  theme = holder.theme,
109
229
  text = holder.text ? decodeURIComponent(holder.text) : holder.text;
@@ -115,10 +235,9 @@ function render(mode, el, holder, src) {
115
235
  font: holder.font
116
236
  }) : theme);
117
237
  el.setAttribute("data-src", src);
118
- theme.literalText = dimensions_caption;
119
- holder.originalTheme = holder.theme;
120
238
  holder.theme = theme;
121
-
239
+ el.holder_data = holder;
240
+
122
241
  if (mode == "image") {
123
242
  el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
124
243
  if (fallback || !holder.auto) {
@@ -128,11 +247,17 @@ function render(mode, el, holder, src) {
128
247
  if (fallback) {
129
248
  el.style.backgroundColor = theme.background;
130
249
  } else {
131
- el.setAttribute("src", draw(ctx, dimensions, theme, ratio));
250
+ el.setAttribute("src", draw({ctx: ctx, dimensions: dimensions, template: theme, ratio:ratio, holder: holder}));
251
+
252
+ if(holder.textmode && holder.textmode == "exact"){
253
+ resizable_images.push(el);
254
+ resizable_update(el);
255
+ }
256
+
132
257
  }
133
258
  } else if (mode == "background") {
134
259
  if (!fallback) {
135
- el.style.backgroundImage = "url(" + draw(ctx, dimensions, theme, ratio) + ")";
260
+ el.style.backgroundImage = "url(" + draw({ctx:ctx, dimensions: dimensions, template: theme, ratio: ratio, holder: holder}) + ")";
136
261
  el.style.backgroundSize = dimensions.width + "px " + dimensions.height + "px";
137
262
  }
138
263
  } else if (mode == "fluid") {
@@ -147,41 +272,82 @@ function render(mode, el, holder, src) {
147
272
  } else {
148
273
  el.style.width = dimensions.width + "px"
149
274
  }
150
- if (el.style.display == "inline" || el.style.display === "") {
275
+ if (el.style.display == "inline" || el.style.display === "" || el.style.display == "none") {
151
276
  el.style.display = "block";
152
277
  }
153
278
  if (fallback) {
154
279
  el.style.backgroundColor = theme.background;
155
280
  } else {
156
- el.holderData = holder;
157
- fluid_images.push(el);
158
- fluid_update(el);
281
+ resizable_images.push(el);
282
+ resizable_update(el);
283
+ }
284
+ }
285
+ }
286
+
287
+ function dimension_check(el, callback) {
288
+ var dimensions = {
289
+ height: el.clientHeight,
290
+ width: el.clientWidth
291
+ };
292
+ if (!dimensions.height && !dimensions.width) {
293
+ if (el.hasAttribute("data-holder-invisible")) {
294
+ throw new Error("Holder: placeholder is not visible");
295
+ } else {
296
+ el.setAttribute("data-holder-invisible", true)
297
+ setTimeout(function () {
298
+ callback.call(this, el)
299
+ }, 1)
300
+ return null;
159
301
  }
302
+ } else {
303
+ el.removeAttribute("data-holder-invisible")
160
304
  }
305
+ return dimensions;
161
306
  }
162
307
 
163
- function fluid_update(element) {
308
+ function resizable_update(element) {
164
309
  var images;
165
310
  if (element.nodeType == null) {
166
- images = fluid_images;
311
+ images = resizable_images;
167
312
  } else {
168
313
  images = [element]
169
314
  }
170
315
  for (var i in images) {
316
+ if (!images.hasOwnProperty(i)) {
317
+ continue;
318
+ }
171
319
  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));
320
+ if (el.holder_data) {
321
+ var holder = el.holder_data;
322
+ var dimensions = dimension_check(el, resizable_update)
323
+ if(dimensions){
324
+ if(holder.fluid){
325
+ el.setAttribute("src", draw({
326
+ ctx: ctx,
327
+ dimensions: dimensions,
328
+ template: holder.theme,
329
+ ratio: ratio,
330
+ holder: holder
331
+ }))
332
+ }
333
+ if(holder.textmode && holder.textmode == "exact"){
334
+ holder.exact_dimensions = dimensions;
335
+ el.setAttribute("src", draw({
336
+ ctx: ctx,
337
+ dimensions: holder.dimensions,
338
+ template: holder.theme,
339
+ ratio: ratio,
340
+ holder: holder
341
+ }))
342
+ }
343
+ }
178
344
  }
179
345
  }
180
346
  }
181
347
 
182
348
  function parse_flags(flags, options) {
183
349
  var ret = {
184
- theme: settings.themes.gray
350
+ theme: extend(settings.themes.gray, {})
185
351
  };
186
352
  var render = false;
187
353
  for (sl = flags.length, j = 0; j < sl; j++) {
@@ -193,13 +359,15 @@ function parse_flags(flags, options) {
193
359
  render = true;
194
360
  ret.dimensions = app.flags.fluid.output(flag);
195
361
  ret.fluid = true;
196
- } else if (app.flags.literal.match(flag)) {
197
- ret.literal = true;
362
+ } else if (app.flags.textmode.match(flag)) {
363
+ ret.textmode = app.flags.textmode.output(flag)
198
364
  } else if (app.flags.colors.match(flag)) {
199
365
  ret.theme = app.flags.colors.output(flag);
200
366
  } else if (options.themes[flag]) {
201
367
  //If a theme is specified, it will override custom colors
202
- ret.theme = options.themes[flag];
368
+ if(options.themes.hasOwnProperty(flag)){
369
+ ret.theme = extend(options.themes[flag], {});
370
+ }
203
371
  } else if (app.flags.font.match(flag)) {
204
372
  ret.font = app.flags.font.output(flag);
205
373
  } else if (app.flags.auto.match(flag)) {
@@ -210,81 +378,7 @@ function parse_flags(flags, options) {
210
378
  }
211
379
  return render ? ret : false;
212
380
  }
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
- }
381
+
288
382
  for (var flag in app.flags) {
289
383
  if (!app.flags.hasOwnProperty(flag)) continue;
290
384
  app.flags[flag].match = function (val) {
@@ -307,6 +401,8 @@ app.add_image = function (src, el) {
307
401
  return app;
308
402
  };
309
403
  app.run = function (o) {
404
+ preempted = true;
405
+
310
406
  var options = extend(settings, o),
311
407
  images = [],
312
408
  imageNodes = [],
@@ -318,6 +414,7 @@ app.run = function (o) {
318
414
  } else if (window.Node && options.images instanceof window.Node) {
319
415
  imageNodes = [options.images];
320
416
  }
417
+
321
418
  if (typeof (options.bgnodes) == "string") {
322
419
  bgnodes = selector(options.bgnodes);
323
420
  } else if (window.NodeList && options.elements instanceof window.NodeList) {
@@ -325,7 +422,6 @@ app.run = function (o) {
325
422
  } else if (window.Node && options.bgnodes instanceof window.Node) {
326
423
  bgnodes = [options.bgnodes];
327
424
  }
328
- preempted = true;
329
425
  for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]);
330
426
  var holdercss = document.getElementById("holderjs-style");
331
427
  if (!holdercss) {
@@ -388,10 +484,10 @@ app.run = function (o) {
388
484
  };
389
485
  contentLoaded(win, function () {
390
486
  if (window.addEventListener) {
391
- window.addEventListener("resize", fluid_update, false);
392
- window.addEventListener("orientationchange", fluid_update, false);
487
+ window.addEventListener("resize", resizable_update, false);
488
+ window.addEventListener("orientationchange", resizable_update, false);
393
489
  } else {
394
- window.attachEvent("onresize", fluid_update)
490
+ window.attachEvent("onresize", resizable_update)
395
491
  }
396
492
  preempted || app.run();
397
493
  });
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: 2.1.0
4
+ version: 2.2.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-09-28 00:00:00.000000000 Z
11
+ date: 2013-10-22 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: railties
@@ -62,7 +62,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
62
62
  version: '0'
63
63
  requirements: []
64
64
  rubyforge_project:
65
- rubygems_version: 2.0.6
65
+ rubygems_version: 2.1.7
66
66
  signing_key:
67
67
  specification_version: 4
68
68
  summary: Holder.js for Rails 3.1 asset pipeline