sprite-factory 1.5.1 → 1.5.2
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.
- 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
|
-
|