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 +4 -4
- data/README.md +1 -1
- data/lib/holder_rails/version.rb +1 -1
- data/vendor/assets/javascripts/holder.js +145 -127
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: a425bea370d6790d57fbfd7d79837aefa07f2ab0
|
4
|
+
data.tar.gz: 0fd3ac07570b769d8135361be40c6e98e33d3c82
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 43a1b0c6540b84c901db902a5719439fd8fa42d648728b1a7d0d3527b4d2411e3acb9307b09f2e7f4bb2522b96e0cbb93f1832e377078788ee4fe40a9facf93e
|
7
|
+
data.tar.gz: d4a4dfdd4fab142073d7cacd18e79afa81e74e4c9d5cd0b7a28972f89b46e442a20d40e5841349b7ad07e9effe7e0950449e0ba216beb1994621b711bdf52fcf
|
data/README.md
CHANGED
data/lib/holder_rails/version.rb
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
/*
|
2
2
|
|
3
|
-
Holder -
|
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
|
-
|
45
|
-
|
46
|
-
|
47
|
-
var
|
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:
|
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,
|
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
|
-
|
68
|
-
|
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, {
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
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
|
-
|
94
|
-
|
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
|
114
|
-
var
|
115
|
-
|
116
|
-
|
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
|
-
|
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
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
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
|
-
|
221
|
+
"social": {
|
226
222
|
background: "#3a5a97",
|
227
223
|
foreground: "#fff",
|
228
224
|
size: 12
|
229
225
|
},
|
230
|
-
|
226
|
+
"industrial": {
|
231
227
|
background: "#434A52",
|
232
228
|
foreground: "#C2F200",
|
233
229
|
size: 12
|
234
230
|
}
|
235
231
|
},
|
236
|
-
stylesheet: "
|
232
|
+
stylesheet: ""
|
237
233
|
};
|
238
234
|
|
239
235
|
|
@@ -276,18 +272,18 @@ app.flags = {
|
|
276
272
|
}
|
277
273
|
},
|
278
274
|
font: {
|
279
|
-
|
280
|
-
|
281
|
-
|
282
|
-
|
275
|
+
regex: /font\:(.*)/,
|
276
|
+
output: function (val) {
|
277
|
+
return this.regex.exec(val)[1];
|
278
|
+
}
|
283
279
|
},
|
284
280
|
auto: {
|
285
|
-
|
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),
|
310
|
+
var options = extend(settings, o),
|
311
|
+
images = [], imageNodes = [], bgnodes = [];
|
315
312
|
|
316
|
-
if(options.images
|
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
|
-
|
327
|
-
|
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
|
-
|
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(!
|
343
|
-
holdercss
|
344
|
-
|
345
|
-
|
346
|
-
|
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 (
|
371
|
-
|
372
|
-
|
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
|
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 (
|
398
|
-
define(
|
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:
|
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-
|
11
|
+
date: 2013-07-06 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: railties
|