sprite-factory 1.5.1 → 1.5.2
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +37 -30
- data/RELEASE_NOTES.md +8 -2
- data/bin/sf +2 -2
- data/lib/sprite_factory/library/rmagick.rb +1 -1
- data/lib/sprite_factory/runner.rb +32 -12
- data/lib/sprite_factory/style.rb +2 -4
- data/lib/sprite_factory.rb +2 -2
- data/test/images/formats/codeincomplete.ico +0 -0
- data/test/images/formats/github.ico +0 -0
- data/test/images/formats/stackoverflow.ico +0 -0
- data/test/images/hover/div.bar__img.icon--active.png +0 -0
- data/test/images/hover/div.bar__img.icon--focus.png +0 -0
- data/test/images/hover/div.bar__img.icon--link.png +0 -0
- data/test/images/hover/div.bar__img.icon--visited.png +0 -0
- data/test/images/hover/div.foo__img.icon--active.png +0 -0
- data/test/images/hover/div.foo__img.icon--focus.png +0 -0
- data/test/images/hover/div.foo__img.icon--link.png +0 -0
- data/test/images/hover/div.foo__img.icon--visited.png +0 -0
- data/test/images/reference/custom.png +0 -0
- data/test/images/reference/formats.css +10 -4
- data/test/images/reference/formats.png +0 -0
- data/test/images/reference/hover.css +23 -7
- data/test/images/reference/hover.png +0 -0
- data/test/images/reference/irregular.fixed.png +0 -0
- data/test/images/reference/irregular.horizontal.png +0 -0
- data/test/images/reference/irregular.margin.png +0 -0
- data/test/images/reference/irregular.packed.png +0 -0
- data/test/images/reference/irregular.padded.png +0 -0
- data/test/images/reference/irregular.png +0 -0
- data/test/images/reference/irregular.sassy.png +0 -0
- data/test/images/reference/irregular.vertical.png +0 -0
- data/test/images/reference/regular.fixed.png +0 -0
- data/test/images/reference/regular.horizontal.png +0 -0
- data/test/images/reference/regular.margin.png +0 -0
- data/test/images/reference/regular.packed.png +0 -0
- data/test/images/reference/regular.padded.png +0 -0
- data/test/images/reference/regular.png +0 -0
- data/test/images/reference/regular.sassy.png +0 -0
- data/test/images/reference/regular.vertical.png +0 -0
- data/test/runner_test.rb +47 -8
- data/test/style_test.rb +2 -2
- metadata +63 -60
data/README.md
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
Sprite Factory (v1.5.
|
1
|
+
Sprite Factory (v1.5.2)
|
2
2
|
=======================
|
3
3
|
|
4
4
|
The sprite factory is a ruby library that can be used to generate
|
@@ -88,7 +88,7 @@ Much of the behavior can be customized by overriding the following options:
|
|
88
88
|
- `:style` - specify stylesheet syntax (css, scss or sass)
|
89
89
|
- `:library` - specify image library to use (rmagick or chunkypng)
|
90
90
|
- `:selector` - specify custom css selector (see below)
|
91
|
-
- `:
|
91
|
+
- `:cssurl` - specify custom css url (see below)
|
92
92
|
- `:output_image` - specify output location for generated image (default: <input folder>.png)
|
93
93
|
- `:output_style` - specify output location for generated stylesheet (default: <input folder>.<style>)
|
94
94
|
- `:pngcrush` - pngcrush the generated output image (if pngcrush is available)
|
@@ -199,41 +199,49 @@ map '--' (double dash) to a colon ':' in any source image filename. For example:
|
|
199
199
|
span.icon_alert { ... first file ... }
|
200
200
|
span.icon_alert:hover { ... second file ... }
|
201
201
|
|
202
|
-
Customizing the CSS Image
|
203
|
-
|
202
|
+
Customizing the CSS Image Url
|
203
|
+
=============================
|
204
204
|
|
205
205
|
Within the generated CSS file, it can be tricky to get the correct path to your unified
|
206
206
|
sprite image. For example, you might be hosting your images on Amazon S3, or if you are
|
207
207
|
building a Ruby on Rails application you might need to generate URL's using the `#image_path`
|
208
|
-
helper method to ensure it gets the
|
208
|
+
helper method to ensure it gets the appropriate cache-busting query parameter.
|
209
209
|
|
210
|
-
By default, the SpriteFactory generates simple url's that contain
|
211
|
-
unified sprite image,
|
212
|
-
|
210
|
+
By default, the SpriteFactory generates simple url's that contain the basename of the
|
211
|
+
unified sprite image, e.g:
|
212
|
+
|
213
|
+
SpriteFactory.run('icons')
|
214
|
+
|
215
|
+
# generates: url(icons.png)
|
216
|
+
|
217
|
+
...but you can control the generation of these url's using the `:cssurl` option:
|
213
218
|
|
214
219
|
For most CDN's, you can prepend a simple string to the image name:
|
215
220
|
|
216
|
-
SpriteFactory.run('
|
217
|
-
:
|
221
|
+
SpriteFactory.run('icons',
|
222
|
+
:cssurl => "http://s3.amazonaws.com/")
|
218
223
|
|
219
224
|
# generates: url(http://s3.amazonaws.com/icons.png)
|
220
225
|
|
221
|
-
For more control, a simple token replacement can be performed using the $IMAGE token. For example, to
|
222
|
-
|
226
|
+
For more control, a simple token replacement can be performed using the $IMAGE token. For example, to generate calls
|
227
|
+
to custom Sass helper functions, such as those provided by [sass-rails](https://github.com/rails/sass-rails) plugin:
|
228
|
+
|
229
|
+
SpriteFactory.run('icons',
|
230
|
+
:cssurl => "image-url('$IMAGE')")
|
223
231
|
|
224
|
-
|
225
|
-
:csspath => "<%= image_path('$IMAGE') %>")
|
232
|
+
# generates: image-url('icons.png')
|
226
233
|
|
227
|
-
# generates: url(<%= image_path('icons.png') %>)
|
228
234
|
|
229
|
-
|
235
|
+
For full control, you can provide a lambda function and generate your own values:
|
230
236
|
|
231
|
-
|
237
|
+
SpriteFactory.run('icons',
|
238
|
+
:cssurl => lambda{|image| "url(#{image_path(image)})" })
|
232
239
|
|
233
|
-
|
234
|
-
:csspath => lambda{|image| image_path(image)})
|
240
|
+
# generates: url(/path/to/my/images/icons.png?v123456)
|
235
241
|
|
236
|
-
|
242
|
+
>> NOTE: the `:cssurl` option replaces `:csspath` from earlier versions. The previous option only let you
|
243
|
+
customize the path inside of the generated `url(...)`, while this new option allows you to customize the
|
244
|
+
entire value, including the outer `url(...)` itself.
|
237
245
|
|
238
246
|
Customizing the entire CSS output
|
239
247
|
=================================
|
@@ -263,18 +271,18 @@ value is a hash of image metadata that includes the following:
|
|
263
271
|
* `:width` - the image width
|
264
272
|
* `:height` - the image height
|
265
273
|
|
266
|
-
|
274
|
+
>> NOTE: the image coords can differ form the css sprite coords when padding/margin or fixed width/height options are specified)
|
267
275
|
|
268
|
-
Using sprite-factory with the Rails
|
269
|
-
|
276
|
+
Using sprite-factory with the Rails asset pipeline
|
277
|
+
==================================================
|
270
278
|
|
271
|
-
The sprite-factory gem
|
279
|
+
The sprite-factory gem plays nice with the Rails asset pipeline with a few simple steps:
|
272
280
|
|
273
281
|
Add the sprite-factory to your Gemfile, including your chosen image library dependency:
|
274
282
|
|
275
283
|
group :assets do
|
276
|
-
gem 'sprite-factory', '>= 1.
|
277
|
-
gem '
|
284
|
+
gem 'sprite-factory', '>= 1.5.2'
|
285
|
+
gem 'rmagick'
|
278
286
|
end
|
279
287
|
|
280
288
|
Store your images in Rails 3.1 `app/assets/images` sub-folders, e.g
|
@@ -290,8 +298,7 @@ Create a Rake task for regenerating your sprites, e.g. in `lib/tasks/assets.rake
|
|
290
298
|
namespace :assets do
|
291
299
|
desc 'recreate sprite images and css'
|
292
300
|
task :resprite => :environment do
|
293
|
-
SpriteFactory.
|
294
|
-
SpriteFactory.csspath = "<%= asset_path '$IMAGE' %>" # embed ERB into css file to be evaluated by asset pipeline
|
301
|
+
SpriteFactory.cssurl = "image-url('$IMAGE')" # use a sass-rails helper method to be evaluated by the rails asset pipeline
|
295
302
|
SpriteFactory.run!('app/assets/images/avatars', :output_style => 'app/assets/stylesheets/avatars.css.erb')
|
296
303
|
SpriteFactory.run!('app/assets/images/icons', :output_style => 'app/assets/stylesheets/icons.css.erb')
|
297
304
|
# ... etc ...
|
@@ -309,7 +316,7 @@ Generates
|
|
309
316
|
|
310
317
|
You can find out more here:
|
311
318
|
|
312
|
-
* [Sprite Factory
|
319
|
+
* [Sprite Factory and the Rails Asset Pipeline](http://codeincomplete.com/posts/2011/8/6/sprite_factory_1_4_1/)
|
313
320
|
|
314
321
|
Extending the Library
|
315
322
|
=====================
|
@@ -338,7 +345,7 @@ Contact
|
|
338
345
|
|
339
346
|
If you have any ideas, feedback, requests or bug reports, you can reach me at
|
340
347
|
[jake@codeincomplete.com](mailto:jake@codeincomplete.com), or via
|
341
|
-
my website: [Code inComplete](http://codeincomplete.com
|
348
|
+
my website: [Code inComplete](http://codeincomplete.com).
|
342
349
|
|
343
350
|
|
344
351
|
|
data/RELEASE_NOTES.md
CHANGED
@@ -1,5 +1,11 @@
|
|
1
|
-
|
2
|
-
|
1
|
+
January 13th 2013 - v1.5.2
|
2
|
+
--------------------------
|
3
|
+
* replaced `:csspath` option with `:cssurl` [issue #21](https://github.com/jakesgordon/sprite-factory/issues/21)
|
4
|
+
* ordered css rules by pseudoclass importance [issue #20](https://github.com/jakesgordon/sprite-factory/pull/20)
|
5
|
+
* added support for .ico files when using rmagick [issue #18](https://github.com/jakesgordon/sprite-factory/pull/18)
|
6
|
+
|
7
|
+
June 11th 2012 - v1.5.1
|
8
|
+
-----------------------
|
3
9
|
* added a new `:return => :images` option for callers that want access to the detailed `images` hash instead of the generated css content
|
4
10
|
|
5
11
|
May 10th 2012 - v1.5.0
|
data/bin/sf
CHANGED
@@ -23,7 +23,7 @@ layout_help = "specify layout orientation ( horizontal, vertical, packed
|
|
23
23
|
style_help = "specify stylesheet syntax ( css, scss, sass )"
|
24
24
|
library_help = "specify image library to use ( rmagic, chunkypng )"
|
25
25
|
selector_help = "specify custom selector to use for each css rule ( default: 'img.' )"
|
26
|
-
|
26
|
+
cssurl_help = "specify custom string to use for css image urls ( default: 'url(output image basename)' )"
|
27
27
|
output_image_help = "specify output location for generated image ( default: <input folder>.png )"
|
28
28
|
output_style_help = "specify output location for generated stylesheet ( default: <input folder>.<style>)"
|
29
29
|
pngcrush_help = "use pngcrush to optimize generated image"
|
@@ -33,7 +33,7 @@ op.on("--layout [ORIENTATION]", layout_help) {|value| options[:layou
|
|
33
33
|
op.on("--style [STYLE]", style_help) {|value| options[:style] = value }
|
34
34
|
op.on("--library [LIBRARY]", library_help) {|value| options[:library] = value }
|
35
35
|
op.on("--selector [SELECTOR]", selector_help) {|value| options[:selector] = value }
|
36
|
-
op.on("--
|
36
|
+
op.on("--cssurl [CSSURL]", cssurl_help) {|value| options[:cssurl] = value }
|
37
37
|
op.on("--output-image [PATH]", output_image_help) {|value| options[:output_image] = value }
|
38
38
|
op.on("--output-style [PATH]", output_style_help) {|value| options[:output_style] = value }
|
39
39
|
op.on("--pngcrush", pngcrush_help) {|value| options[:pngcrush] = value }
|
@@ -6,6 +6,10 @@ module SpriteFactory
|
|
6
6
|
|
7
7
|
#----------------------------------------------------------------------------
|
8
8
|
|
9
|
+
PSEUDO_CLASS_ORDER = [nil, ':link', ':visited', ':focus', ':hover', ':active'] # TODO: allow caller to specify this order ?
|
10
|
+
|
11
|
+
#----------------------------------------------------------------------------
|
12
|
+
|
9
13
|
attr :input
|
10
14
|
attr :config
|
11
15
|
|
@@ -16,7 +20,7 @@ module SpriteFactory
|
|
16
20
|
@config[:layout] ||= SpriteFactory.layout || :horizontal
|
17
21
|
@config[:library] ||= SpriteFactory.library || :rmagick
|
18
22
|
@config[:selector] ||= SpriteFactory.selector || 'img.'
|
19
|
-
@config[:
|
23
|
+
@config[:cssurl] ||= SpriteFactory.cssurl
|
20
24
|
@config[:report] ||= SpriteFactory.report
|
21
25
|
@config[:pngcrush] ||= SpriteFactory.pngcrush
|
22
26
|
@config[:nocomments] ||= SpriteFactory.nocomments
|
@@ -41,6 +45,8 @@ module SpriteFactory
|
|
41
45
|
raise RuntimeError, "set :width for fixed width, or :hmargin for horizontal margin, but not both." if width && !hmargin.zero?
|
42
46
|
raise RuntimeError, "set :height for fixed height, or :vmargin for vertical margin, but not both." if height && !hmargin.zero?
|
43
47
|
|
48
|
+
raise RuntimeError, "The legacy :csspath attribute is no longer supported, please use :cssurl instead (see README)" unless @config[:csspath].nil?
|
49
|
+
|
44
50
|
images = load_images
|
45
51
|
max = layout_images(images)
|
46
52
|
header = summary(images, max)
|
@@ -49,7 +55,7 @@ module SpriteFactory
|
|
49
55
|
|
50
56
|
css = []
|
51
57
|
css << style_comment(header) unless nocomments? # header comment
|
52
|
-
css << style(selector,
|
58
|
+
css << style(selector, css_url, images, &block) # generated styles
|
53
59
|
css << IO.read(custom_style_file) if File.exists?(custom_style_file) # custom styles
|
54
60
|
css = css.join("\n")
|
55
61
|
|
@@ -137,19 +143,19 @@ module SpriteFactory
|
|
137
143
|
File.join(input, File.basename(input) + ".#{style_name}")
|
138
144
|
end
|
139
145
|
|
140
|
-
def
|
141
|
-
base
|
142
|
-
custom = config[:
|
146
|
+
def css_url
|
147
|
+
base = File.basename(output_image_file)
|
148
|
+
custom = config[:cssurl]
|
143
149
|
if custom
|
144
150
|
if custom.is_a?(Proc)
|
145
|
-
custom.call(base)
|
151
|
+
custom.call(base) # allow custom url using a lambda
|
146
152
|
elsif custom.include?('$IMAGE')
|
147
|
-
custom.sub('$IMAGE', base)
|
153
|
+
custom.sub('$IMAGE', base) # allow custom url with simple token replacement
|
148
154
|
else
|
149
|
-
File.join(custom, base)
|
155
|
+
"url(#{File.join(custom, base)})" # allow custom url with simple prepend
|
150
156
|
end
|
151
157
|
else
|
152
|
-
base
|
158
|
+
"url(#{base})" # otherwise, just default to basename of the output image file
|
153
159
|
end
|
154
160
|
end
|
155
161
|
|
@@ -174,7 +180,7 @@ module SpriteFactory
|
|
174
180
|
raise RuntimeError, "image #{i[:name]} does not fit within a fixed width of #{width}" if width && (width < i[:width])
|
175
181
|
raise RuntimeError, "image #{i[:name]} does not fit within a fixed height of #{height}" if height && (height < i[:height])
|
176
182
|
end
|
177
|
-
images
|
183
|
+
images.sort_by {|i| [image_name_without_pseudo_class(i), image_pseudo_class_priority(i)] }
|
178
184
|
end
|
179
185
|
|
180
186
|
def map_image_filename(filename, input_path)
|
@@ -186,6 +192,20 @@ module SpriteFactory
|
|
186
192
|
[name, ext]
|
187
193
|
end
|
188
194
|
|
195
|
+
def image_name_without_pseudo_class(image)
|
196
|
+
image[:name].split(':').first
|
197
|
+
end
|
198
|
+
|
199
|
+
def image_pseudo_class(image)
|
200
|
+
image[:name].slice(/:.*?\Z/)
|
201
|
+
end
|
202
|
+
|
203
|
+
def image_pseudo_class_priority(image)
|
204
|
+
PSEUDO_CLASS_ORDER.index(image_pseudo_class(image))
|
205
|
+
end
|
206
|
+
|
207
|
+
#----------------------------------------------------------------------------
|
208
|
+
|
189
209
|
def create_sprite(images, width, height)
|
190
210
|
library.create(output_image_file, images, width, height)
|
191
211
|
pngcrush(output_image_file)
|
@@ -203,8 +223,8 @@ module SpriteFactory
|
|
203
223
|
|
204
224
|
#----------------------------------------------------------------------------
|
205
225
|
|
206
|
-
def style(selector,
|
207
|
-
defaults = Style.generate(style_name, selector,
|
226
|
+
def style(selector, url, images, &block)
|
227
|
+
defaults = Style.generate(style_name, selector, url, images) # must call, even if custom block is given, because it stashes generated css style into image[:style] attributes
|
208
228
|
if block_given?
|
209
229
|
yield images.inject({}) {|h,i| h[i[:name].to_sym] = i; h} # provide custom rule builder a hash by image name
|
210
230
|
else
|
data/lib/sprite_factory/style.rb
CHANGED
@@ -45,16 +45,14 @@ module SpriteFactory
|
|
45
45
|
|
46
46
|
#----------------------------------------------------------------------------
|
47
47
|
|
48
|
-
def self.generate(style_name, selector,
|
48
|
+
def self.generate(style_name, selector, url, images)
|
49
49
|
styles = []
|
50
50
|
images.each do |image|
|
51
51
|
attr = [
|
52
52
|
"width: #{image[:cssw]}px",
|
53
53
|
"height: #{image[:cssh]}px",
|
54
|
-
"background:
|
54
|
+
"background: #{url} #{-image[:cssx]}px #{-image[:cssy]}px no-repeat"
|
55
55
|
]
|
56
|
-
image[:path] = path
|
57
|
-
image[:selector] = selector
|
58
56
|
image[:style] = send("#{style_name}_style", attr) # make pure style available for (optional) custom rule generators (see usage of yield inside Runner#style)
|
59
57
|
styles << send(style_name, selector, image[:name], attr)
|
60
58
|
end
|
data/lib/sprite_factory.rb
CHANGED
@@ -2,7 +2,7 @@ module SpriteFactory
|
|
2
2
|
|
3
3
|
#----------------------------------------------------------------------------
|
4
4
|
|
5
|
-
VERSION = "1.5.
|
5
|
+
VERSION = "1.5.2"
|
6
6
|
SUMMARY = "Automatic CSS sprite generator"
|
7
7
|
DESCRIPTION = "Combines individual images from a directory into a single sprite image file and creates an appropriate CSS stylesheet"
|
8
8
|
LIB = File.dirname(__FILE__)
|
@@ -24,7 +24,7 @@ module SpriteFactory
|
|
24
24
|
attr_accessor :layout
|
25
25
|
attr_accessor :library
|
26
26
|
attr_accessor :selector
|
27
|
-
attr_accessor :
|
27
|
+
attr_accessor :cssurl
|
28
28
|
attr_accessor :pngcrush
|
29
29
|
attr_accessor :nocomments
|
30
30
|
end
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -3,8 +3,11 @@
|
|
3
3
|
Creating a sprite from following images:
|
4
4
|
|
5
5
|
test/images/formats/alice.gif (50x50)
|
6
|
+
test/images/formats/codeincomplete.ico (16x16)
|
7
|
+
test/images/formats/github.ico (32x32)
|
6
8
|
test/images/formats/monkey.gif (50x50)
|
7
9
|
test/images/formats/spies.jpg (150x92)
|
10
|
+
test/images/formats/stackoverflow.ico (16x16)
|
8
11
|
test/images/formats/thief.png (50x50)
|
9
12
|
|
10
13
|
Output files:
|
@@ -12,11 +15,14 @@
|
|
12
15
|
test/images/formats.css
|
13
16
|
|
14
17
|
Output size:
|
15
|
-
|
18
|
+
364x92
|
16
19
|
|
17
20
|
|
18
21
|
*/
|
19
22
|
img.alice { width: 50px; height: 50px; background: url(formats.png) 0px -21px no-repeat; }
|
20
|
-
img.
|
21
|
-
img.
|
22
|
-
img.
|
23
|
+
img.codeincomplete { width: 16px; height: 16px; background: url(formats.png) -50px -38px no-repeat; }
|
24
|
+
img.github { width: 32px; height: 32px; background: url(formats.png) -66px -30px no-repeat; }
|
25
|
+
img.monkey { width: 50px; height: 50px; background: url(formats.png) -98px -21px no-repeat; }
|
26
|
+
img.spies { width: 150px; height: 92px; background: url(formats.png) -148px 0px no-repeat; }
|
27
|
+
img.stackoverflow { width: 16px; height: 16px; background: url(formats.png) -298px -38px no-repeat; }
|
28
|
+
img.thief { width: 50px; height: 50px; background: url(formats.png) -314px -21px no-repeat; }
|
Binary file
|
@@ -2,21 +2,37 @@
|
|
2
2
|
|
3
3
|
Creating a sprite from following images:
|
4
4
|
|
5
|
-
test/images/hover/div.bar__img.icon--hover.png (18x18)
|
6
5
|
test/images/hover/div.bar__img.icon.png (18x18)
|
7
|
-
test/images/hover/div.
|
6
|
+
test/images/hover/div.bar__img.icon--link.png (18x18)
|
7
|
+
test/images/hover/div.bar__img.icon--visited.png (18x18)
|
8
|
+
test/images/hover/div.bar__img.icon--focus.png (18x18)
|
9
|
+
test/images/hover/div.bar__img.icon--hover.png (18x18)
|
10
|
+
test/images/hover/div.bar__img.icon--active.png (18x18)
|
8
11
|
test/images/hover/div.foo__img.icon.png (18x18)
|
12
|
+
test/images/hover/div.foo__img.icon--link.png (18x18)
|
13
|
+
test/images/hover/div.foo__img.icon--visited.png (18x18)
|
14
|
+
test/images/hover/div.foo__img.icon--focus.png (18x18)
|
15
|
+
test/images/hover/div.foo__img.icon--hover.png (18x18)
|
16
|
+
test/images/hover/div.foo__img.icon--active.png (18x18)
|
9
17
|
|
10
18
|
Output files:
|
11
19
|
test/images/hover.png
|
12
20
|
test/images/hover.css
|
13
21
|
|
14
22
|
Output size:
|
15
|
-
|
23
|
+
216x18
|
16
24
|
|
17
25
|
|
18
26
|
*/
|
19
|
-
div.hover div.bar img.icon
|
20
|
-
div.hover div.bar img.icon { width: 18px; height: 18px; background: url(hover.png) -18px 0px no-repeat; }
|
21
|
-
div.hover div.
|
22
|
-
div.hover div.
|
27
|
+
div.hover div.bar img.icon { width: 18px; height: 18px; background: url(hover.png) 0px 0px no-repeat; }
|
28
|
+
div.hover div.bar img.icon:link { width: 18px; height: 18px; background: url(hover.png) -18px 0px no-repeat; }
|
29
|
+
div.hover div.bar img.icon:visited { width: 18px; height: 18px; background: url(hover.png) -36px 0px no-repeat; }
|
30
|
+
div.hover div.bar img.icon:focus { width: 18px; height: 18px; background: url(hover.png) -54px 0px no-repeat; }
|
31
|
+
div.hover div.bar img.icon:hover { width: 18px; height: 18px; background: url(hover.png) -72px 0px no-repeat; }
|
32
|
+
div.hover div.bar img.icon:active { width: 18px; height: 18px; background: url(hover.png) -90px 0px no-repeat; }
|
33
|
+
div.hover div.foo img.icon { width: 18px; height: 18px; background: url(hover.png) -108px 0px no-repeat; }
|
34
|
+
div.hover div.foo img.icon:link { width: 18px; height: 18px; background: url(hover.png) -126px 0px no-repeat; }
|
35
|
+
div.hover div.foo img.icon:visited { width: 18px; height: 18px; background: url(hover.png) -144px 0px no-repeat; }
|
36
|
+
div.hover div.foo img.icon:focus { width: 18px; height: 18px; background: url(hover.png) -162px 0px no-repeat; }
|
37
|
+
div.hover div.foo img.icon:hover { width: 18px; height: 18px; background: url(hover.png) -180px 0px no-repeat; }
|
38
|
+
div.hover div.foo img.icon:active { width: 18px; height: 18px; background: url(hover.png) -198px 0px no-repeat; }
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
data/test/runner_test.rb
CHANGED
@@ -99,17 +99,17 @@ module SpriteFactory
|
|
99
99
|
|
100
100
|
#----------------------------------------------------------------------------
|
101
101
|
|
102
|
-
def
|
102
|
+
def test_default_css_url
|
103
103
|
Runner.publicize_methods do
|
104
104
|
r1 = Runner.new(REGULAR_PATH)
|
105
|
-
r2 = Runner.new(REGULAR_PATH, :
|
106
|
-
r3 = Runner.new(REGULAR_PATH, :
|
107
|
-
r4 = Runner.new(REGULAR_PATH, :
|
105
|
+
r2 = Runner.new(REGULAR_PATH, :cssurl => "http://s3.amazonaws.com/sf")
|
106
|
+
r3 = Runner.new(REGULAR_PATH, :cssurl => "foo(<%= image_path('$IMAGE') %>)")
|
107
|
+
r4 = Runner.new(REGULAR_PATH, :cssurl => lambda{|image| "foo(/very/dynamic/path/#{image})" })
|
108
108
|
|
109
|
-
assert_equal("regular.png", r1.
|
110
|
-
assert_equal("http://s3.amazonaws.com/sf/regular.png", r2.
|
111
|
-
assert_equal("<%= image_path('regular.png') %>", r3.
|
112
|
-
assert_equal("/very/dynamic/path/regular.png", r4.
|
109
|
+
assert_equal("url(regular.png)", r1.css_url, "by default, css_url should be basename of the generated sprite image")
|
110
|
+
assert_equal("url(http://s3.amazonaws.com/sf/regular.png)", r2.css_url, "allow customization by prepending to basename of the generated sprite image")
|
111
|
+
assert_equal("foo(<%= image_path('regular.png') %>)", r3.css_url, "allow customization by providing custom format string with $IMAGE token to be replaced with basename of the generated sprite image")
|
112
|
+
assert_equal("foo(/very/dynamic/path/regular.png)", r4.css_url, "allow customization by lambda function - allow caller to decide how to generate css url to sprite image")
|
113
113
|
end
|
114
114
|
end
|
115
115
|
|
@@ -186,5 +186,44 @@ module SpriteFactory
|
|
186
186
|
|
187
187
|
#----------------------------------------------------------------------------
|
188
188
|
|
189
|
+
def test_images_are_sorted_in_classname_order
|
190
|
+
Runner.publicize_methods do
|
191
|
+
expected = [
|
192
|
+
"alice",
|
193
|
+
"codeincomplete",
|
194
|
+
"github",
|
195
|
+
"monkey",
|
196
|
+
"spies",
|
197
|
+
"stackoverflow",
|
198
|
+
"thief"
|
199
|
+
]
|
200
|
+
actual = Runner.new(FORMATS_PATH).load_images.map{|i| i[:name]}
|
201
|
+
assert_equal(expected, actual)
|
202
|
+
end
|
203
|
+
end
|
204
|
+
|
205
|
+
def test_images_are_secondary_sorted_on_psuedoclass
|
206
|
+
Runner.publicize_methods do
|
207
|
+
expected = [
|
208
|
+
"div.bar img.icon",
|
209
|
+
"div.bar img.icon:link",
|
210
|
+
"div.bar img.icon:visited",
|
211
|
+
"div.bar img.icon:focus",
|
212
|
+
"div.bar img.icon:hover",
|
213
|
+
"div.bar img.icon:active",
|
214
|
+
"div.foo img.icon",
|
215
|
+
"div.foo img.icon:link",
|
216
|
+
"div.foo img.icon:visited",
|
217
|
+
"div.foo img.icon:focus",
|
218
|
+
"div.foo img.icon:hover",
|
219
|
+
"div.foo img.icon:active",
|
220
|
+
]
|
221
|
+
actual = Runner.new(HOVER_PATH).load_images.map{|i| i[:name]}
|
222
|
+
assert_equal(expected, actual)
|
223
|
+
end
|
224
|
+
end
|
225
|
+
|
226
|
+
#----------------------------------------------------------------------------
|
227
|
+
|
189
228
|
end
|
190
229
|
end
|
data/test/style_test.rb
CHANGED
@@ -39,7 +39,7 @@ module SpriteFactory
|
|
39
39
|
|
40
40
|
style = :css
|
41
41
|
selector = 'img.'
|
42
|
-
|
42
|
+
url = 'url(/path/to/sprite.png)'
|
43
43
|
images = [
|
44
44
|
{:filename => '/path/to/sprite1.png', :name => 'sprite1', :cssx => 1, :cssy => 10, :cssw => 100, :cssh => 1000},
|
45
45
|
{:filename => '/path/to/sprite2.png', :name => 'sprite2', :cssx => 2, :cssy => 20, :cssw => 200, :cssh => 2000},
|
@@ -48,7 +48,7 @@ module SpriteFactory
|
|
48
48
|
{:filename => '/path/to/sprite5.png', :name => 'sprite5', :cssx => 5, :cssy => 50, :cssw => 500, :cssh => 5000}
|
49
49
|
]
|
50
50
|
|
51
|
-
lines = Style.generate(style, selector,
|
51
|
+
lines = Style.generate(style, selector, url, images).split("\n")
|
52
52
|
|
53
53
|
assert_equal("width: 100px; height: 1000px; background: url(/path/to/sprite.png) -1px -10px no-repeat", images[0][:style], "pure style should have been stashed away in image[:style] for use by custom rule builders")
|
54
54
|
assert_equal("width: 200px; height: 2000px; background: url(/path/to/sprite.png) -2px -20px no-repeat", images[1][:style], "pure style should have been stashed away in image[:style] for use by custom rule builders")
|
metadata
CHANGED
@@ -1,58 +1,58 @@
|
|
1
|
-
--- !ruby/object:Gem::Specification
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
2
|
name: sprite-factory
|
3
|
-
version: !ruby/object:Gem::Version
|
4
|
-
|
5
|
-
|
6
|
-
- 1
|
7
|
-
- 5
|
8
|
-
- 1
|
9
|
-
version: 1.5.1
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 1.5.2
|
5
|
+
prerelease:
|
10
6
|
platform: ruby
|
11
|
-
authors:
|
7
|
+
authors:
|
12
8
|
- Jake Gordon
|
13
9
|
autorequire:
|
14
10
|
bindir: bin
|
15
11
|
cert_chain: []
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
dependencies:
|
20
|
-
- !ruby/object:Gem::Dependency
|
12
|
+
date: 2013-01-13 00:00:00.000000000 Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
21
15
|
name: rmagick
|
22
|
-
|
23
|
-
requirement: &id001 !ruby/object:Gem::Requirement
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
24
17
|
none: false
|
25
|
-
requirements:
|
26
|
-
- -
|
27
|
-
- !ruby/object:Gem::Version
|
28
|
-
|
29
|
-
- 0
|
30
|
-
version: "0"
|
18
|
+
requirements:
|
19
|
+
- - ! '>='
|
20
|
+
- !ruby/object:Gem::Version
|
21
|
+
version: '0'
|
31
22
|
type: :development
|
32
|
-
version_requirements: *id001
|
33
|
-
- !ruby/object:Gem::Dependency
|
34
|
-
name: chunky_png
|
35
23
|
prerelease: false
|
36
|
-
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
25
|
none: false
|
38
|
-
requirements:
|
39
|
-
- -
|
40
|
-
- !ruby/object:Gem::Version
|
41
|
-
|
42
|
-
|
43
|
-
|
26
|
+
requirements:
|
27
|
+
- - ! '>='
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: '0'
|
30
|
+
- !ruby/object:Gem::Dependency
|
31
|
+
name: chunky_png
|
32
|
+
requirement: !ruby/object:Gem::Requirement
|
33
|
+
none: false
|
34
|
+
requirements:
|
35
|
+
- - ! '>='
|
36
|
+
- !ruby/object:Gem::Version
|
37
|
+
version: '0'
|
44
38
|
type: :development
|
45
|
-
|
46
|
-
|
47
|
-
|
39
|
+
prerelease: false
|
40
|
+
version_requirements: !ruby/object:Gem::Requirement
|
41
|
+
none: false
|
42
|
+
requirements:
|
43
|
+
- - ! '>='
|
44
|
+
- !ruby/object:Gem::Version
|
45
|
+
version: '0'
|
46
|
+
description: Combines individual images from a directory into a single sprite image
|
47
|
+
file and creates an appropriate CSS stylesheet
|
48
|
+
email:
|
48
49
|
- jake@codeincomplete.com
|
49
|
-
executables:
|
50
|
+
executables:
|
50
51
|
- sf
|
51
52
|
extensions: []
|
52
|
-
|
53
|
-
extra_rdoc_files:
|
53
|
+
extra_rdoc_files:
|
54
54
|
- README.md
|
55
|
-
files:
|
55
|
+
files:
|
56
56
|
- .gitignore
|
57
57
|
- LICENSE
|
58
58
|
- README.md
|
@@ -73,12 +73,23 @@ files:
|
|
73
73
|
- test/images/custom/stopped.png
|
74
74
|
- test/images/empty/readme.txt
|
75
75
|
- test/images/formats/alice.gif
|
76
|
+
- test/images/formats/codeincomplete.ico
|
77
|
+
- test/images/formats/github.ico
|
76
78
|
- test/images/formats/monkey.gif
|
77
79
|
- test/images/formats/spies.jpg
|
80
|
+
- test/images/formats/stackoverflow.ico
|
78
81
|
- test/images/formats/thief.png
|
82
|
+
- test/images/hover/div.bar__img.icon--active.png
|
83
|
+
- test/images/hover/div.bar__img.icon--focus.png
|
79
84
|
- test/images/hover/div.bar__img.icon--hover.png
|
85
|
+
- test/images/hover/div.bar__img.icon--link.png
|
86
|
+
- test/images/hover/div.bar__img.icon--visited.png
|
80
87
|
- test/images/hover/div.bar__img.icon.png
|
88
|
+
- test/images/hover/div.foo__img.icon--active.png
|
89
|
+
- test/images/hover/div.foo__img.icon--focus.png
|
81
90
|
- test/images/hover/div.foo__img.icon--hover.png
|
91
|
+
- test/images/hover/div.foo__img.icon--link.png
|
92
|
+
- test/images/hover/div.foo__img.icon--visited.png
|
82
93
|
- test/images/hover/div.foo__img.icon.png
|
83
94
|
- test/images/irregular/irregular1.png
|
84
95
|
- test/images/irregular/irregular2.png
|
@@ -153,37 +164,29 @@ files:
|
|
153
164
|
- test/runner_test.rb
|
154
165
|
- test/style_test.rb
|
155
166
|
- test/test_case.rb
|
156
|
-
has_rdoc: true
|
157
167
|
homepage: https://github.com/jakesgordon/sprite-factory
|
158
168
|
licenses: []
|
159
|
-
|
160
169
|
post_install_message:
|
161
|
-
rdoc_options:
|
170
|
+
rdoc_options:
|
162
171
|
- --charset=UTF-8
|
163
|
-
require_paths:
|
172
|
+
require_paths:
|
164
173
|
- lib
|
165
|
-
required_ruby_version: !ruby/object:Gem::Requirement
|
174
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
166
175
|
none: false
|
167
|
-
requirements:
|
168
|
-
- -
|
169
|
-
- !ruby/object:Gem::Version
|
170
|
-
|
171
|
-
|
172
|
-
version: "0"
|
173
|
-
required_rubygems_version: !ruby/object:Gem::Requirement
|
176
|
+
requirements:
|
177
|
+
- - ! '>='
|
178
|
+
- !ruby/object:Gem::Version
|
179
|
+
version: '0'
|
180
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
174
181
|
none: false
|
175
|
-
requirements:
|
176
|
-
- -
|
177
|
-
- !ruby/object:Gem::Version
|
178
|
-
|
179
|
-
- 0
|
180
|
-
version: "0"
|
182
|
+
requirements:
|
183
|
+
- - ! '>='
|
184
|
+
- !ruby/object:Gem::Version
|
185
|
+
version: '0'
|
181
186
|
requirements: []
|
182
|
-
|
183
187
|
rubyforge_project:
|
184
|
-
rubygems_version: 1.
|
188
|
+
rubygems_version: 1.8.23
|
185
189
|
signing_key:
|
186
190
|
specification_version: 3
|
187
191
|
summary: Automatic CSS sprite generator
|
188
192
|
test_files: []
|
189
|
-
|