Permalink
Browse files

Added support for per-image selectors, including :hover psuedo-class …

…selectors (issue #12 and issue #14)
  • Loading branch information...
1 parent ee25737 commit f7c672aab2407290251d8ceac16475db5ce1e966 @jakesgordon committed May 10, 2012
View
@@ -1,4 +1,4 @@
-Sprite Factory (v1.4.3)
+Sprite Factory (v1.5.0)
=======================
The sprite factory is a ruby library that can be used to generate
@@ -13,6 +13,7 @@ The library provides:
* support for multiple layout algorithms - horizontal, vertical or [packed](http://codeincomplete.com/posts/2011/5/7/bin_packing/)
* support for any stylesheet syntax, including [CSS](http://www.w3.org/Style/CSS/) and [Sass](http://sass-lang.com/).
* support for any image library, including [RMagick](http://rmagick.rubyforge.org/) and [ChunkyPNG](https://github.com/wvanbergen/chunky_png).
+ * support for any css selector style, including :hover pseudo-class selectors
* support for pngcrush'n the generated image file
* compatible with Rails 3.1 asset pipeline
@@ -136,7 +137,17 @@ Customizing the CSS Selector
By default, the CSS generated is fairly simple. It assumes you will be using `<img>`
elements for your sprites, and that the basename of each individual file is suitable for
-use as a CSS classname. For example:
+use as a CSS classname. For example, the following files:
+
+ images/icons/high.png
+ images/icons/medium.png
+ images/icons/low.png
+
+... when run with:
+
+ SpriteFactory.run!('images/icons')
+
+... will generate the following css:
img.high { width: 16px; height: 16px; background: url(images/icons.png) 0px 0px no-repeat; }
img.medium { width: 16px; height: 16px; background: url(images/icons.png) -16px 0px no-repeat; }
@@ -147,12 +158,47 @@ example:
SpriteFactory.run!('images/icons', :selector => 'span.icon_')
-will generate:
+... will generate:
span.icon_high { width: 16px; height: 16px; background: url(images/icons.png) 0px 0px no-repeat; }
span.icon_medium { width: 16px; height: 16px; background: url(images/icons.png) -16px 0px no-repeat; }
span.icon_low { width: 16px; height: 16px; background: url(images/icons.png) -32px 0px no-repeat; }
+Customizing the CSS Selector Per Image
+======================================
+
+If you want to specify a custom selector for each individual image, then name the image files
+accordingly - the library will map '\_\_' (double underscore) to a single space ' ' in any source
+image filename. For example:
+
+ images/icons/div.foo__span.icon_alert.png
+ images/icons/div.bar__span.icon_alert.png
+
+... when run with:
+
+ SpriteFactory.run!('images/icons', :selector => 'div.example')
+
+... will generate:
+
+ div.example div.foo span.icon_alert { ... first file ... }
+ div.example div.bar span.icon_alert { ... second file ... }
+
+
+If you want to specify a psuedo class such as `:hover` for some of your images, the library will also
+map '--' (double dash) to a colon ':' in any source image filename. For example:
+
+ images/icons/alert.png
+ images/icons/alert--hover.png
+
+... when run with:
+
+ SpriteFactory.run!('images/icons', :selector => 'span.icon_')
+
+... will generate:
+
+ span.icon_alert { ... first file ... }
+ span.icon_alert:hover { ... second file ... }
+
Customizing the CSS Image Path
==============================
View
@@ -1,8 +1,10 @@
-UNRELEASED - v1.4.3
+UNRELEASED - v1.5.0
-------------------
* @halida added a new `margin` option to (optionally) separate images in generated spritesheet to avoid 'bleeding' when browser scales the sprite (e.g. when user increases text size)
* added `padding` support for `packed` layout
* added `margin` support for `packed` layout
+ * added support for using source image filename as automatic css selector (issue #12)
+ * added support for `:hover` (and other pseudo-class) selectors (issue #14)
February 29th 2012 - v1.4.2
---------------------------
View
@@ -46,6 +46,8 @@ task :reference do
regenerate.call('test/images/irregular', :output => 'test/images/irregular.fixed', :selector => 'img.fixed_', :width => 100, :height => 100)
regenerate.call('test/images/irregular', :output => 'test/images/irregular.sassy', :selector => 'img.sassy_', :style => :sass)
+ regenerate.call('test/images/hover', :output => 'test/images/hover', :selector => 'div.hover ', :style => :css)
+
regenerate.call('test/images/custom', :output => 'test/images/custom') do |images|
rules = []
rules << "div.running img.button { cursor: pointer; #{images[:running][:style]} }"
View
@@ -2,7 +2,7 @@ module SpriteFactory
#----------------------------------------------------------------------------
- VERSION = "1.4.3"
+ VERSION = "1.5.0"
SUMMARY = "Automatic CSS sprite generator"
DESCRIPTION = "Combines individual images from a directory into a single sprite image file and creates an appropriate CSS stylesheet"
LIB = File.dirname(__FILE__)
@@ -166,16 +166,22 @@ def load_images
input_path = Pathname.new(input)
images = library.load(image_files)
images.each do |i|
- i[:name] = Pathname.new(i[:filename]).relative_path_from(input_path).to_s.gsub(File::SEPARATOR, "_")
- i[:ext] = File.extname(i[:name])
- i[:name] = i[:name][0...-i[:ext].length] unless i[:ext].empty?
-
+ i[:name], i[:ext] = map_image_filename(i[:filename], input_path)
raise RuntimeError, "image #{i[:name]} does not fit within a fixed width of #{width}" if width && (width < i[:width])
raise RuntimeError, "image #{i[:name]} does not fit within a fixed height of #{height}" if height && (height < i[:height])
end
images
end
+ def map_image_filename(filename, input_path)
+ name = Pathname.new(filename).relative_path_from(input_path).to_s.gsub(File::SEPARATOR, "_")
+ name = name.gsub('--', ':')
+ name = name.gsub('__', ' ')
+ ext = File.extname(name)
+ name = name[0...-ext.length] unless ext.empty?
+ [name, ext]
+ end
+
def create_sprite(images, width, height)
library.create(output_image_file, images, width, height)
pngcrush(output_image_file)
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,22 @@
+/*
+
+ Creating a sprite from following images:
+
+ test/images/hover/div.bar__img.icon--hover.png (18x18)
+ test/images/hover/div.bar__img.icon.png (18x18)
+ test/images/hover/div.foo__img.icon--hover.png (18x18)
+ test/images/hover/div.foo__img.icon.png (18x18)
+
+ Output files:
+ test/images/hover.png
+ test/images/hover.css
+
+ Output size:
+ 72x18
+
+
+*/
+div.hover div.bar img.icon:hover { width: 18px; height: 18px; background: url(hover.png) 0px 0px no-repeat; }
+div.hover div.bar img.icon { width: 18px; height: 18px; background: url(hover.png) -18px 0px no-repeat; }
+div.hover div.foo img.icon:hover { width: 18px; height: 18px; background: url(hover.png) -36px 0px no-repeat; }
+div.hover div.foo img.icon { width: 18px; height: 18px; background: url(hover.png) -54px 0px no-repeat; }
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -22,6 +22,7 @@
<link href='custom.css' rel='stylesheet' type='text/css' media='screen'></link>
<link href='formats.css' rel='stylesheet' type='text/css' media='screen'></link>
<link href='subfolders.css' rel='stylesheet' type='text/css' media='screen'></link>
+ <link href='hover.css' rel='stylesheet' type='text/css' media='screen'></link>
<style>
img { border: 1px solid red; }
</style>
@@ -160,6 +161,12 @@
<img src='s.gif' class='usa_amy'>
<img src='s.gif' class='usa_bob'>
+ <h1>With Hover State</h1>
+ <div class='hover'>
+ <div class='foo'><img src='s.gif' class='icon'></div>
+ <div class='bar'><img src='s.gif' class='icon'></div>
+ </div>
+
<script>
SpriteFactory = {
toggleTimer: function() {
View
@@ -136,6 +136,12 @@ def test_generate_sprite_using_images_in_subfolders
#----------------------------------------------------------------------------
+ def test_generate_sprites_with_hover_pseudo_class
+ integration_test(HOVER_PATH, :selector => 'div.hover ')
+ end
+
+ #----------------------------------------------------------------------------
+
def test_generate_sprite_with_nocss
input = REGULAR_PATH
output = File.basename(REGULAR_PATH)
View
@@ -15,6 +15,7 @@ class TestCase < Test::Unit::TestCase
FORMATS_PATH = 'test/images/formats'
EMPTY_PATH = 'test/images/empty'
SUBFOLDERS_PATH = 'test/images/subfolders'
+ HOVER_PATH = 'test/images/hover'
REGULAR = SpriteFactory.find_files(File.join(REGULAR_PATH, '*.png'))
IRREGULAR = SpriteFactory.find_files(File.join(IRREGULAR_PATH, '*.png'))

0 comments on commit f7c672a

Please sign in to comment.