css_sprite 1.5.0 → 2.0.0
Sign up to get free protection for your applications and to get access to all the features.
- data/.rvmrc +1 -1
- data/README.textile +5 -2
- data/css_sprite.gemspec +1 -1
- data/lib/css_sprite/sprite.rb +47 -40
- data/lib/css_sprite/version.rb +1 -1
- data/spec/css_sprite/sprite_spec.rb +5 -21
- data/spec/spec_helper.rb +1 -1
- metadata +25 -10
data/.rvmrc
CHANGED
@@ -1,2 +1,2 @@
|
|
1
1
|
rvm_gemset_create_on_use_flag=1
|
2
|
-
rvm gemset use
|
2
|
+
rvm gemset use css_sprite
|
data/README.textile
CHANGED
@@ -7,8 +7,8 @@ automatically css sprite.
|
|
7
7
|
h2. Best Practices
|
8
8
|
|
9
9
|
I have written posts "css sprite best practices" to introduce the idea that the css_sprite gem follows.
|
10
|
-
"english version":http://
|
11
|
-
"chinese version":http://
|
10
|
+
"english version":http://huangzhimin.com/2010/04/03/css-sprite-best-practices-english-version
|
11
|
+
"chinese version":http://huangzhimin.com/2010/04/02/css-sprite-best-practices-chinese-version
|
12
12
|
|
13
13
|
otaviofcs wrote a brazilian version to introduce the css_sprite gem, check it here: "http://blog.riopro.com.br/2010/04/22/acabaram-as-desculpas-para-nao-usar-css-sprite-na-sua-aplicacao/":http://blog.riopro.com.br/2010/04/22/acabaram-as-desculpas-para-nao-usar-css-sprite-na-sua-aplicacao/
|
14
14
|
and he also build a demo, "http://github.com/riopro/css_sprite_demo":http://github.com/riopro/css_sprite_demo
|
@@ -93,6 +93,7 @@ image_path: app/assets/images
|
|
93
93
|
stylesheet_path: app/assets/stylesheets
|
94
94
|
css_images_path: assets
|
95
95
|
disable_optimization: true
|
96
|
+
use_asset_url: true
|
96
97
|
</code></pre>
|
97
98
|
|
98
99
|
h3. ImageType
|
@@ -103,6 +104,8 @@ css_sprite uses RMagick to compose the images by default. It uses PaletteMatteTy
|
|
103
104
|
|
104
105
|
Check the detailed information of image_type here: http://www.imagemagick.org/RMagick/doc/constants.html#ImageType
|
105
106
|
|
107
|
+
for gif transparency, you must use <code>image_type: TrueColorMatteType</code>.
|
108
|
+
|
106
109
|
h3. Destination Image Format
|
107
110
|
|
108
111
|
css_sprite saves the css sprite image as a png file by default. You can change it to gif or any other format like
|
data/css_sprite.gemspec
CHANGED
data/lib/css_sprite/sprite.rb
CHANGED
@@ -1,5 +1,5 @@
|
|
1
1
|
require 'find'
|
2
|
-
require '
|
2
|
+
require 'mini_magick'
|
3
3
|
require 'yaml'
|
4
4
|
require 'enumerator'
|
5
5
|
|
@@ -85,22 +85,30 @@ class Sprite
|
|
85
85
|
results = []
|
86
86
|
sources = all_images(directory)
|
87
87
|
dest_image_path = dest_image_path(directory)
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
dest_image.write(dest_image_path)
|
88
|
+
return results if sources.empty?
|
89
|
+
last_y = 0
|
90
|
+
sources.each do |source|
|
91
|
+
source_image = get_image(source)
|
92
|
+
property =
|
93
|
+
x = 0
|
94
|
+
y = last_y
|
95
|
+
results << image_properties(source, directory).merge(:x => x, :y => y)
|
96
|
+
last_y = y + source_image[:height]
|
97
|
+
end
|
98
|
+
|
99
|
+
command = MiniMagick::CommandBuilder.new('montage')
|
100
|
+
sources.each do |source|
|
101
|
+
command.push command.escape_string source
|
103
102
|
end
|
103
|
+
command.push('-tile 1x')
|
104
|
+
command.push("-geometry +0+0")
|
105
|
+
command.push('-background None')
|
106
|
+
command.push('-gravity West')
|
107
|
+
command.push('-format')
|
108
|
+
format = @config['format'] || "PNG"
|
109
|
+
command.push(command.escape_string(format))
|
110
|
+
command.push(command.escape_string(dest_image_path))
|
111
|
+
MiniMagick::Image.new(nil).run(command)
|
104
112
|
results
|
105
113
|
end
|
106
114
|
|
@@ -167,7 +175,11 @@ class Sprite
|
|
167
175
|
end
|
168
176
|
|
169
177
|
f.print class_names(results).join(",\n")
|
170
|
-
|
178
|
+
if @config['use_asset_url']
|
179
|
+
f.print " \n background: asset-url('#{dest_image_name}', image) no-repeat\n"
|
180
|
+
else
|
181
|
+
f.print " \n background: url('/#{@css_images_path}/#{dest_image_name}?#{dest_image_time.to_i}') no-repeat\n"
|
182
|
+
end
|
171
183
|
|
172
184
|
results.each do |result|
|
173
185
|
f.print "#{class_name(result[:name])}\n"
|
@@ -199,7 +211,11 @@ class Sprite
|
|
199
211
|
end
|
200
212
|
|
201
213
|
f.print class_names(results).join(",\n")
|
202
|
-
|
214
|
+
if @config['use_asset_url']
|
215
|
+
f.print " \{\n background: asset-url('#{dest_image_name}', image) no-repeat;\n\}\n"
|
216
|
+
else
|
217
|
+
f.print " \{\n background: url('/#{@css_images_path}/#{dest_image_name}?#{dest_image_time.to_i}') no-repeat;\n\}\n"
|
218
|
+
end
|
203
219
|
|
204
220
|
results.each do |result|
|
205
221
|
f.print "#{class_name(result[:name])} \{\n"
|
@@ -254,47 +270,38 @@ class Sprite
|
|
254
270
|
File.join(@stylesheet_path, File.basename(directory) + "." + @engine)
|
255
271
|
end
|
256
272
|
|
257
|
-
# append src_image to the dest_image with position (x, y)
|
258
|
-
def composite_images(dest_image, src_image, x, y)
|
259
|
-
width = [src_image.columns + x, dest_image.columns].max
|
260
|
-
height = [src_image.rows + y, dest_image.rows].max
|
261
|
-
image = Magick::Image.new(width, height) {self.background_color = 'none'}
|
262
|
-
image.composite!(dest_image, 0, 0, Magick::CopyCompositeOp)
|
263
|
-
image.composite!(src_image, x, y, Magick::CopyCompositeOp)
|
264
|
-
image
|
265
|
-
end
|
266
|
-
|
267
273
|
# get the Magick::Image
|
268
274
|
def get_image(image_filename)
|
269
|
-
|
275
|
+
MiniMagick::Image.open(image_filename)
|
270
276
|
end
|
271
277
|
|
272
278
|
# get image properties, including name, width and height
|
273
|
-
def image_properties(
|
274
|
-
name = get_image_name(
|
275
|
-
|
279
|
+
def image_properties(image_path, directory)
|
280
|
+
name = get_image_name(image_path, directory)
|
281
|
+
image = get_image(image_path)
|
282
|
+
need_wh?(image_path, directory) ? {:name => name, :width => image[:width], :height => image[:height]} : {:name => name}
|
276
283
|
end
|
277
284
|
|
278
285
|
# check if the hover class needs width and height
|
279
286
|
# if the hover class has the same width and height property with not hover class,
|
280
287
|
# then the hover class does not need width and height
|
281
|
-
def need_wh?(
|
282
|
-
name = get_image_name(
|
288
|
+
def need_wh?(image_path, directory)
|
289
|
+
name = get_image_name(image_path, directory)
|
283
290
|
if hover?(name) or active?(name)
|
284
|
-
not_file =
|
291
|
+
not_file = image_path.sub(/[_-](hover|active)\./, '.').sub(/[_-](hover|active)\//, '/')
|
285
292
|
if File.exist?(not_file)
|
293
|
+
image = get_image(image_path)
|
286
294
|
not_image = get_image(not_file)
|
287
|
-
return false if image
|
295
|
+
return false if image[:width] == not_image[:width] and image[:height] == not_image[:height]
|
288
296
|
end
|
289
297
|
end
|
290
298
|
return true
|
291
299
|
end
|
292
300
|
|
293
301
|
# get the image name substracting base directory and extname
|
294
|
-
def get_image_name(
|
295
|
-
|
296
|
-
|
297
|
-
image.filename.slice(directory_length...-extname_length)
|
302
|
+
def get_image_name(image_path, directory)
|
303
|
+
extname_length = File.extname(image_path).length
|
304
|
+
image_path.slice(directory.length+1...-extname_length)
|
298
305
|
end
|
299
306
|
|
300
307
|
# test if the filename contains a hover or active.
|
data/lib/css_sprite/version.rb
CHANGED
@@ -151,35 +151,19 @@ describe Sprite do
|
|
151
151
|
|
152
152
|
describe "get_image" do
|
153
153
|
it "should get a image" do
|
154
|
-
@sprite.get_image(File.join(IMAGE_PATH, 'css_sprite/gmail_logo.png')).class.should ==
|
154
|
+
@sprite.get_image(File.join(IMAGE_PATH, 'css_sprite/gmail_logo.png')).class.should == MiniMagick::Image
|
155
155
|
end
|
156
156
|
end
|
157
157
|
|
158
158
|
describe "image_properties" do
|
159
159
|
it "should get image properties" do
|
160
|
-
|
161
|
-
@sprite.image_properties(
|
160
|
+
image_path = File.join(@directory_path, 'gmail_logo.png')
|
161
|
+
@sprite.image_properties(image_path, @directory_path).should == {:name => 'gmail_logo', :width => 103, :height => 36}
|
162
162
|
end
|
163
163
|
|
164
164
|
it "should get a image with parent" do
|
165
|
-
|
166
|
-
@sprite.image_properties(
|
167
|
-
end
|
168
|
-
end
|
169
|
-
|
170
|
-
describe "composite_images" do
|
171
|
-
it "should composite two images into one horizontally" do
|
172
|
-
image1 = @sprite.get_image(File.join(@directory_path, 'gmail_logo.png'))
|
173
|
-
image2 = @sprite.get_image(File.join(@directory_path, 'hotmail_logo.png'))
|
174
|
-
image = @sprite.composite_images(image1, image2, image1.columns, 0)
|
175
|
-
@sprite.image_properties(image, @directory_path).should == {:name => nil, :width => 206, :height => 36}
|
176
|
-
end
|
177
|
-
|
178
|
-
it "should composite two images into one verically" do
|
179
|
-
image1 = @sprite.get_image(File.join(@directory_path, 'gmail_logo.png'))
|
180
|
-
image2 = @sprite.get_image(File.join(@directory_path, 'hotmail_logo.png'))
|
181
|
-
image = @sprite.composite_images(image1, image2, 0, image1.rows)
|
182
|
-
@sprite.image_properties(image, @directory_path).should == {:name => nil, :width => 103, :height => 72}
|
165
|
+
image_path = File.join(@directory_path, 'icons/twitter_icon.png')
|
166
|
+
@sprite.image_properties(image_path, @directory_path).should == {:name => 'icons/twitter_icon', :width => 14, :height => 14}
|
183
167
|
end
|
184
168
|
end
|
185
169
|
end
|
data/spec/spec_helper.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: css_sprite
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version:
|
4
|
+
version: 2.0.0
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,11 +9,11 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date:
|
12
|
+
date: 2013-01-10 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
|
-
name:
|
16
|
-
requirement:
|
15
|
+
name: mini_magick
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
17
17
|
none: false
|
18
18
|
requirements:
|
19
19
|
- - ! '>='
|
@@ -21,10 +21,15 @@ dependencies:
|
|
21
21
|
version: '0'
|
22
22
|
type: :runtime
|
23
23
|
prerelease: false
|
24
|
-
version_requirements:
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
25
|
+
none: false
|
26
|
+
requirements:
|
27
|
+
- - ! '>='
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: '0'
|
25
30
|
- !ruby/object:Gem::Dependency
|
26
31
|
name: rspec
|
27
|
-
requirement:
|
32
|
+
requirement: !ruby/object:Gem::Requirement
|
28
33
|
none: false
|
29
34
|
requirements:
|
30
35
|
- - ! '>='
|
@@ -32,10 +37,15 @@ dependencies:
|
|
32
37
|
version: '0'
|
33
38
|
type: :runtime
|
34
39
|
prerelease: false
|
35
|
-
version_requirements:
|
40
|
+
version_requirements: !ruby/object:Gem::Requirement
|
41
|
+
none: false
|
42
|
+
requirements:
|
43
|
+
- - ! '>='
|
44
|
+
- !ruby/object:Gem::Version
|
45
|
+
version: '0'
|
36
46
|
- !ruby/object:Gem::Dependency
|
37
47
|
name: mocha
|
38
|
-
requirement:
|
48
|
+
requirement: !ruby/object:Gem::Requirement
|
39
49
|
none: false
|
40
50
|
requirements:
|
41
51
|
- - ! '>='
|
@@ -43,7 +53,12 @@ dependencies:
|
|
43
53
|
version: '0'
|
44
54
|
type: :runtime
|
45
55
|
prerelease: false
|
46
|
-
version_requirements:
|
56
|
+
version_requirements: !ruby/object:Gem::Requirement
|
57
|
+
none: false
|
58
|
+
requirements:
|
59
|
+
- - ! '>='
|
60
|
+
- !ruby/object:Gem::Version
|
61
|
+
version: '0'
|
47
62
|
description: css_sprite is a rails plugin/gem to generate css sprite image automatically.
|
48
63
|
email:
|
49
64
|
- flyerhzm@gmail.com
|
@@ -103,7 +118,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
103
118
|
version: '0'
|
104
119
|
requirements: []
|
105
120
|
rubyforge_project:
|
106
|
-
rubygems_version: 1.8.
|
121
|
+
rubygems_version: 1.8.24
|
107
122
|
signing_key:
|
108
123
|
specification_version: 3
|
109
124
|
summary: css_sprite is a rails plugin/gem to generate css sprite image automatically.
|