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 +4 -4
- data/lib/holder_rails/version.rb +1 -1
- data/vendor/assets/javascripts/holder.js +202 -106
- metadata +3 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 00cf2580599d5337218784c8efbcec34e86e3acc
|
4
|
+
data.tar.gz: aa74c9d961f3566c10d3889303a102656103e066
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d02496241c1759caab3976f6f848b166bccf32b39f1f17d5f5a287f8e0fcf56fc612156ee4bc99925a0e7b286cab60ad4c7130a757782a39339e2d83434d1eee
|
7
|
+
data.tar.gz: 611b7fbea28db0b8a1944b598a0386330f2a3538c7134f17bfb0689574390db6a97f83375ba730b8d421e182c1dac72a7bfbfddbcc53cd4f10a4016a56c0d203
|
data/lib/holder_rails/version.rb
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
/*
|
2
2
|
|
3
|
-
Holder - 2.
|
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){
|
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(
|
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
|
-
|
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
|
157
|
-
|
158
|
-
|
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
|
308
|
+
function resizable_update(element) {
|
164
309
|
var images;
|
165
310
|
if (element.nodeType == null) {
|
166
|
-
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.
|
173
|
-
var holder = el.
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
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.
|
197
|
-
ret.
|
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
|
-
|
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
|
-
|
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",
|
392
|
-
window.addEventListener("orientationchange",
|
487
|
+
window.addEventListener("resize", resizable_update, false);
|
488
|
+
window.addEventListener("orientationchange", resizable_update, false);
|
393
489
|
} else {
|
394
|
-
window.attachEvent("onresize",
|
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.
|
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-
|
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.
|
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
|