holder_rails 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +24 -0
- data/README.md +31 -0
- data/Rakefile +1 -0
- data/holder_rails.gemspec +21 -0
- data/lib/holder_rails.rb +6 -0
- data/lib/holder_rails/version.rb +3 -0
- data/vendor/assets/javascripts/holder.js +192 -0
- metadata +77 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,24 @@
|
|
1
|
+
Copyright (c) 2012 Nihad Abbasov / NARKOZ
|
2
|
+
All rights reserved.
|
3
|
+
|
4
|
+
Redistribution and use in source and binary forms, with or without
|
5
|
+
modification, are permitted provided that the following conditions are met:
|
6
|
+
|
7
|
+
1. Redistributions of source code must retain the above copyright notice,
|
8
|
+
this list of conditions and the following disclaimer.
|
9
|
+
|
10
|
+
2. Redistributions in binary form must reproduce the above copyright notice,
|
11
|
+
this list of conditions and the following disclaimer in the documentation
|
12
|
+
and/or other materials provided with the distribution.
|
13
|
+
|
14
|
+
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
15
|
+
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
16
|
+
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
|
17
|
+
ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
|
18
|
+
LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
|
19
|
+
CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
|
20
|
+
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
|
21
|
+
INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
|
22
|
+
CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
|
23
|
+
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
|
24
|
+
POSSIBILITY OF SUCH DAMAGE.
|
data/README.md
ADDED
@@ -0,0 +1,31 @@
|
|
1
|
+
# Holder.js for Rails
|
2
|
+
|
3
|
+
Provides Holder.js to render image placeholders entirely on the client side.
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
Add to your Gemfile:
|
8
|
+
|
9
|
+
```ruby
|
10
|
+
gem 'holder_rails'
|
11
|
+
```
|
12
|
+
|
13
|
+
and run:
|
14
|
+
|
15
|
+
```sh
|
16
|
+
bundle install
|
17
|
+
```
|
18
|
+
|
19
|
+
## Usage
|
20
|
+
|
21
|
+
Add to your JavaScript manifest file:
|
22
|
+
|
23
|
+
```js
|
24
|
+
//= require holder
|
25
|
+
```
|
26
|
+
|
27
|
+
For more information, check out [holder readme](https://github.com/imsky/holder#readme).
|
28
|
+
|
29
|
+
## License
|
30
|
+
|
31
|
+
Released under the BSD 2-clause license. See LICENSE.txt for details.
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
@@ -0,0 +1,21 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'holder_rails/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |gem|
|
7
|
+
gem.name = "holder_rails"
|
8
|
+
gem.version = HolderRails::VERSION
|
9
|
+
gem.authors = ["Nihad Abbasov"]
|
10
|
+
gem.email = ["mail@narkoz.me"]
|
11
|
+
gem.description = %q{Provides Holder.js to render image placeholders entirely on the client side}
|
12
|
+
gem.summary = %q{Holder.js for Rails 3.1 asset pipeline}
|
13
|
+
gem.homepage = "https://github.com/narkoz/holder_rails"
|
14
|
+
|
15
|
+
gem.files = `git ls-files`.split($/)
|
16
|
+
gem.executables = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
|
17
|
+
gem.test_files = gem.files.grep(%r{^(test|spec|features)/})
|
18
|
+
gem.require_paths = ["lib"]
|
19
|
+
|
20
|
+
gem.add_dependency 'railties', '>= 3.1.0'
|
21
|
+
end
|
data/lib/holder_rails.rb
ADDED
@@ -0,0 +1,192 @@
|
|
1
|
+
/*
|
2
|
+
|
3
|
+
Holder - 1.3 - client side image placeholders
|
4
|
+
(c) 2012 Ivan Malopinsky / http://imsky.co
|
5
|
+
|
6
|
+
Provided under the Apache 2.0 License: http://www.apache.org/licenses/LICENSE-2.0
|
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
|
+
//http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications
|
19
|
+
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)}};
|
20
|
+
|
21
|
+
//https://gist.github.com/991057 by Jed Schmidt with modifications
|
22
|
+
function selector(a){
|
23
|
+
a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]);
|
24
|
+
var ret=[]; b!=null&&(b.length?ret=b:b.length==0?ret=b:ret=[b]); return ret;
|
25
|
+
}
|
26
|
+
|
27
|
+
//shallow object property extend
|
28
|
+
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}
|
29
|
+
|
30
|
+
function draw(ctx, dimensions, template) {
|
31
|
+
var dimension_arr = [dimensions.height, dimensions.width].sort();
|
32
|
+
var maxFactor = Math.round(dimension_arr[1] / 16),
|
33
|
+
minFactor = Math.round(dimension_arr[0] / 16);
|
34
|
+
var text_height = Math.max(template.size, maxFactor);
|
35
|
+
canvas.width = dimensions.width;
|
36
|
+
canvas.height = dimensions.height;
|
37
|
+
ctx.textAlign = "center";
|
38
|
+
ctx.textBaseline = "middle";
|
39
|
+
ctx.fillStyle = template.background;
|
40
|
+
ctx.fillRect(0, 0, dimensions.width, dimensions.height);
|
41
|
+
ctx.fillStyle = template.foreground;
|
42
|
+
ctx.font = "bold " + text_height + "px sans-serif";
|
43
|
+
var text = template.text ? template.text : (dimensions.width + "x" + dimensions.height);
|
44
|
+
if (Math.round(ctx.measureText(text).width) / dimensions.width > 1) {
|
45
|
+
text_height = Math.max(minFactor, template.size);
|
46
|
+
}
|
47
|
+
ctx.font = "bold " + text_height + "px sans-serif";
|
48
|
+
ctx.fillText(text, (dimensions.width / 2), (dimensions.height / 2), dimensions.width);
|
49
|
+
return canvas.toDataURL("image/png");
|
50
|
+
}
|
51
|
+
|
52
|
+
if (!canvas.getContext) {
|
53
|
+
fallback = true;
|
54
|
+
} else {
|
55
|
+
if (canvas.toDataURL("image/png").indexOf("data:image/png") < 0) {
|
56
|
+
//Android doesn't support data URI
|
57
|
+
fallback = true;
|
58
|
+
} else {
|
59
|
+
var ctx = canvas.getContext("2d");
|
60
|
+
}
|
61
|
+
}
|
62
|
+
|
63
|
+
var settings = {
|
64
|
+
domain: "holder.js",
|
65
|
+
images: "img",
|
66
|
+
themes: {
|
67
|
+
"gray": {
|
68
|
+
background: "#eee",
|
69
|
+
foreground: "#aaa",
|
70
|
+
size: 12
|
71
|
+
},
|
72
|
+
"social": {
|
73
|
+
background: "#3a5a97",
|
74
|
+
foreground: "#fff",
|
75
|
+
size: 12
|
76
|
+
},
|
77
|
+
"industrial": {
|
78
|
+
background: "#434A52",
|
79
|
+
foreground: "#C2F200",
|
80
|
+
size: 12
|
81
|
+
}
|
82
|
+
}
|
83
|
+
};
|
84
|
+
|
85
|
+
|
86
|
+
|
87
|
+
app.flags = {
|
88
|
+
dimensions: {
|
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
|
+
}
|
116
|
+
|
117
|
+
for(var flag in app.flags){
|
118
|
+
app.flags[flag].match = function (val){
|
119
|
+
return val.match(this.regex)
|
120
|
+
}
|
121
|
+
}
|
122
|
+
|
123
|
+
app.add_theme = function (name, theme) {
|
124
|
+
name != null && theme != null && (settings.themes[name] = theme);
|
125
|
+
return app;
|
126
|
+
};
|
127
|
+
|
128
|
+
app.add_image = function (src, el) {
|
129
|
+
var node = selector(el);
|
130
|
+
if (node.length) {
|
131
|
+
for (var i = 0, l = node.length; i < l; i++) {
|
132
|
+
var img = document.createElement("img")
|
133
|
+
img.setAttribute("data-src", src);
|
134
|
+
node[i].appendChild(img);
|
135
|
+
}
|
136
|
+
}
|
137
|
+
return app;
|
138
|
+
};
|
139
|
+
|
140
|
+
app.run = function (o) {
|
141
|
+
var options = extend(settings, o),
|
142
|
+
images = selector(options.images),
|
143
|
+
preempted = true;
|
144
|
+
|
145
|
+
for (var l = images.length, i = 0; i < l; i++) {
|
146
|
+
var theme = settings.themes.gray;
|
147
|
+
var src = images[i].getAttribute("data-src") || images[i].getAttribute("src");
|
148
|
+
if ( !! ~src.indexOf(options.domain)) {
|
149
|
+
var render = false,
|
150
|
+
dimensions = null,
|
151
|
+
text = null;
|
152
|
+
var flags = src.substr(src.indexOf(options.domain) + options.domain.length + 1).split("/");
|
153
|
+
for (sl = flags.length, j = 0; j < sl; j++) {
|
154
|
+
if (app.flags.dimensions.match(flags[j])) {
|
155
|
+
render = true;
|
156
|
+
dimensions = app.flags.dimensions.output(flags[j]);
|
157
|
+
} else if (app.flags.colors.match(flags[j])) {
|
158
|
+
theme = app.flags.colors.output(flags[j]);
|
159
|
+
} else if (options.themes[flags[j]]) {
|
160
|
+
//If a theme is specified, it will override custom colors
|
161
|
+
theme = options.themes[flags[j]];
|
162
|
+
} else if (app.flags.text.match(flags[j])) {
|
163
|
+
text = app.flags.text.output(flags[j]);
|
164
|
+
}
|
165
|
+
}
|
166
|
+
if (render) {
|
167
|
+
images[i].setAttribute("data-src", src);
|
168
|
+
var dimensions_caption = dimensions.width + "x" + dimensions.height;
|
169
|
+
images[i].setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
|
170
|
+
|
171
|
+
//Fallback
|
172
|
+
images[i].style.width = dimensions.width + "px";
|
173
|
+
images[i].style.height = dimensions.height + "px";
|
174
|
+
images[i].style.backgroundColor = theme.background;
|
175
|
+
|
176
|
+
var theme = (text ? extend(theme, {
|
177
|
+
text: text
|
178
|
+
}) : theme);
|
179
|
+
|
180
|
+
if (!fallback) {
|
181
|
+
images[i].setAttribute("src", draw(ctx, dimensions, theme));
|
182
|
+
}
|
183
|
+
}
|
184
|
+
}
|
185
|
+
}
|
186
|
+
return app;
|
187
|
+
};
|
188
|
+
contentLoaded(win, function () {
|
189
|
+
preempted || app.run()
|
190
|
+
})
|
191
|
+
|
192
|
+
})(Holder, window);
|
metadata
ADDED
@@ -0,0 +1,77 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: holder_rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.1
|
5
|
+
prerelease:
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Nihad Abbasov
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2012-09-07 00:00:00.000000000 Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
15
|
+
name: railties
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
17
|
+
none: false
|
18
|
+
requirements:
|
19
|
+
- - ! '>='
|
20
|
+
- !ruby/object:Gem::Version
|
21
|
+
version: 3.1.0
|
22
|
+
type: :runtime
|
23
|
+
prerelease: false
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
25
|
+
none: false
|
26
|
+
requirements:
|
27
|
+
- - ! '>='
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: 3.1.0
|
30
|
+
description: Provides Holder.js to render image placeholders entirely on the client
|
31
|
+
side
|
32
|
+
email:
|
33
|
+
- mail@narkoz.me
|
34
|
+
executables: []
|
35
|
+
extensions: []
|
36
|
+
extra_rdoc_files: []
|
37
|
+
files:
|
38
|
+
- .gitignore
|
39
|
+
- Gemfile
|
40
|
+
- LICENSE.txt
|
41
|
+
- README.md
|
42
|
+
- Rakefile
|
43
|
+
- holder_rails.gemspec
|
44
|
+
- lib/holder_rails.rb
|
45
|
+
- lib/holder_rails/version.rb
|
46
|
+
- vendor/assets/javascripts/holder.js
|
47
|
+
homepage: https://github.com/narkoz/holder_rails
|
48
|
+
licenses: []
|
49
|
+
post_install_message:
|
50
|
+
rdoc_options: []
|
51
|
+
require_paths:
|
52
|
+
- lib
|
53
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
54
|
+
none: false
|
55
|
+
requirements:
|
56
|
+
- - ! '>='
|
57
|
+
- !ruby/object:Gem::Version
|
58
|
+
version: '0'
|
59
|
+
segments:
|
60
|
+
- 0
|
61
|
+
hash: 1373212328217276062
|
62
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
63
|
+
none: false
|
64
|
+
requirements:
|
65
|
+
- - ! '>='
|
66
|
+
- !ruby/object:Gem::Version
|
67
|
+
version: '0'
|
68
|
+
segments:
|
69
|
+
- 0
|
70
|
+
hash: 1373212328217276062
|
71
|
+
requirements: []
|
72
|
+
rubyforge_project:
|
73
|
+
rubygems_version: 1.8.24
|
74
|
+
signing_key:
|
75
|
+
specification_version: 3
|
76
|
+
summary: Holder.js for Rails 3.1 asset pipeline
|
77
|
+
test_files: []
|