css_sprite 1.3.4 → 1.4.0

data/README.textile

@@ -4,15 +4,30 @@ automatically css sprite.
 
 *************************************************************************
 
-h2. Notice
+h2. What css_sprite does?
 
-I have rewritten the plugin. Please check out the gem version >= 1.3.0
+css sprite generates css_sprite image and css files automatically for you follow the conventions as follows.
+
+| images under css_sprite directory | class name in css_sprite css |
+| twitter_icon.png | .twitter_icon |
+| facebook_icon.png | .facebook_icon |
+| hotmail-logo.png | .hotmail-logo |
+| gmail-logo.png | .gmail-logo |
+| icons/twitter_icon.png | .icons .twitter_icon |
+| widget/icons/twitter_icon.png | .widget .icons .twitter_icon |
+| twitter_icon_hover.png | .twitter_icon:hover |
+| twitter-icon-hover.png | .twitter-icon:hover |
+
+css_sprite directory is the directory whose name is "css_sprite" or "css_sprite" suffixed under public/images directory.
+css_sprite image is the image file automatically generated under public/images directory.
+css_sprite css is the css file automatically generated under public/stylesheets directory.
 
 **************************************************************************
 
 h2. Install
 
 css_sprite depends on the <code>rmagick</code> gem, please make sure RMagick is successfully installed on your system.
+css_sprite also depends on the <code>optipng</code> tool as default image optimization, but you can use any other image optimization tool, check the Configuration section. If you use the default optipng tool, please make sure it is successfully installed on your system.
 
 install css_sprite as a gem:
 <pre><code>sudo gem install css_sprite</code></pre>
@@ -50,9 +65,19 @@ Or you can just do the css sprite manually by <code>rake css_sprite:build</code>
 
 h2. Configuration
 
-There is no need to create any configuration by default. If you want to use sass or you want to define common styles for some related classes, you need to define <code>config/css_sprite.yml</code> file.
+There is no need to create any configuration by default. If you want some customizations as follows, you need to define <code>config/css_sprite.yml</code> file.
+
+h3. Sass
+
+<pre><code>engine:sass</code></pre>
+
+h3. Image Optimization
+
+css_sprite use *optipng* with optimization level 2 to optimize the auto generated css_sprite image. You can change it to any image optimization command.
+
+<pre><code>optimization: optipng -o 7</code></pre>
 
-h3. Examples
+h3. Customization styles
 
 * For css
 <pre><code>
@@ -96,7 +121,9 @@ if your image filename is icon suffixed (e.g. twitter_icon.png), the correspondi
 
 h2. Best Practices
 
-I have written a post "css sprite best practices":http://www.huangzhimin.com/entries/190-css-sprite-best-practices to introduce the idea that the css_sprite gem follows.
+I have written posts "css sprite best practices" to introduce the idea that the css_sprite gem follows.
+"english version":http://www.huangzhimin.com/entries/190-css-sprite-best-practices
+"chinese version":http://www.huangzhimin.com/entries/189-css-sprite-best-practices
 
 **************************************************************************
 

data/VERSION

@@ -1 +1 @@
-1.3.4
+1.4.0

data/css_sprite.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = %q{css_sprite}
-  s.version = "1.3.4"
+  s.version = "1.4.0"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Richard Huang"]
-  s.date = %q{2010-04-07}
+  s.date = %q{2010-04-08}
   s.description = %q{css_sprite is a rails plugin/gem to generate css sprite image automatically.}
   s.email = %q{flyerhzm@gmail.com}
   s.extra_rdoc_files = [
@@ -30,6 +30,7 @@ Gem::Specification.new do |s|
      "spec/public/images/css_sprite/gmail_logo.png",
      "spec/public/images/css_sprite/hotmail_logo.png",
      "spec/public/images/css_sprite/icons/facebook_icon.png",
+     "spec/public/images/css_sprite/icons/facebook_icon_hover.png",
      "spec/public/images/css_sprite/icons/twitter_icon.png",
      "spec/public/images/css_sprite/not_image.txt",
      "spec/spec.opts",

data/lib/css_sprite/sprite.rb

@@ -8,7 +8,6 @@ class Sprite
   def initialize(options={})
     @image_path = File.expand_path(File.join(Rails.root, 'public/images'))
     @stylesheet_path = File.expand_path(File.join(Rails.root, 'public/stylesheets'))
-    @todo = {}
     
     if File.exist?(File.join(Rails.root, 'config/css_sprite.yml'))
       @config = YAML::load_file(File.join(Rails.root, 'config/css_sprite.yml'))
@@ -19,18 +18,20 @@ class Sprite
   
   def build
     directories = css_sprite_directories
-    directories.each { |directory| output_image(directory) }
-    output_stylesheet
+    directories.each { |directory| execute(directory) }
   end
   
   def check
     directories = css_sprite_directories
-    directories.each do |directory|
-      if expire?(directory)
-        output_image(directory)
-      end
+    directories.each { |directory| execute(directory) if expire?(directory) }
+  end
+  
+  def execute(directory)
+    results = output_image(directory)
+    unless results.empty?
+      optimize_image(directory)
+      output_stylesheet(directory, results)
     end
-    output_stylesheet
   end
   
   def expire?(directory)
@@ -42,11 +43,11 @@ class Sprite
     !File.exist?(stylesheet_path) or File.new(directory).mtime > File.new(stylesheet_path).mtime
   end
   
-  def output_stylesheet
+  def output_stylesheet(directory, results)
     if sass?
-      output_sass
+      output_sass(directory, results)
     else
-      output_css
+      output_css(directory, results)
     end
   end
   
@@ -76,74 +77,74 @@ class Sprite
         results << image_properties(source_image, directory).merge(:x => x, :y => y)
         dest_image = composite_images(dest_image, source_image, x, y)
       end
-      dest_image.image_type = Magick::PaletteMatteType
       dest_image.write(dest_image_path)
     end
-    @todo[directory] = results
+    results
+  end
+  
+  def optimize_image(directory)
+    dest_image_path = dest_image_path(directory)
+    @config['optimization'] ? system("#{@config['optimization']} #{dest_image_path}") : system("optipng -quiet #{dest_image_path}")
   end
 
-  def output_css
-    @todo.each do |directory, results|
-      unless results.empty?
-        dest_image_name = dest_image_name(directory)
-        dest_css_path = dest_css_path(directory)
-        dest_image_time = File.new(dest_image_path(directory)).mtime
-        File.open(dest_css_path, 'w') do |f|
-          if @config['suffix']
-            @config['suffix'].each do |key, value|
-              cns = class_names(results, :suffix => key)
-              unless cns.empty?
-                f.print cns.join(",\n")
-                f.print " \{\n"
-                f.print value.split("\n").collect { |text| "  " + text }.join("\n")
-                f.print "\}\n"
-              end
+  def output_css(directory, results)
+    unless results.empty?
+      dest_image_name = dest_image_name(directory)
+      dest_css_path = dest_css_path(directory)
+      dest_image_time = File.new(dest_image_path(directory)).mtime
+      File.open(dest_css_path, 'w') do |f|
+        if @config['suffix']
+          @config['suffix'].each do |key, value|
+            cns = class_names(results, :suffix => key)
+            unless cns.empty?
+              f.print cns.join(",\n")
+              f.print " \{\n"
+              f.print value.split("\n").collect { |text| "  " + text }.join("\n")
+              f.print "\}\n"
             end
           end
-          
-          f.print class_names(results).join(",\n")
-          f.print " \{\n  background: url('/images/#{dest_image_name}?#{dest_image_time.to_i}') no-repeat;\n\}\n"
+        end
         
-          results.each do |result|
-            f.print "#{class_name(result[:name])} \{"
-            f.print " background-position: #{-result[:x]}px #{-result[:y]}px;"
-            f.print " width: #{result[:width]}px;"
-            f.print " height: #{result[:height]}px;"
-            f.print " \}\n"
-          end
+        f.print class_names(results).join(",\n")
+        f.print " \{\n  background: url('/images/#{dest_image_name}?#{dest_image_time.to_i}') no-repeat;\n\}\n"
+      
+        results.each do |result|
+          f.print "#{class_name(result[:name])} \{"
+          f.print " background-position: #{-result[:x]}px #{-result[:y]}px;"
+          f.print " width: #{result[:width]}px;"
+          f.print " height: #{result[:height]}px;"
+          f.print " \}\n"
         end
       end
     end
   end
   
-  def output_sass
-    @todo.each do |directory, results|
-      unless results.empty?
-        dest_image_name = dest_image_name(directory)
-        dest_sass_path = dest_sass_path(directory)
-        dest_image_time = File.new(dest_image_path(directory)).mtime
-        File.open(dest_sass_path, 'w') do |f|
-          if @config['suffix']
-            @config['suffix'].each do |key, value|
-              cns = class_names(results, :suffix => key)
-              unless cns.empty?
-                f.print cns.join(",\n")
-                f.print "\n"
-                f.print value.split("\n").collect { |text| "  " + text }.join("\n")
-                f.print "\n"
-              end
+  def output_sass(directory, results)
+    unless results.empty?
+      dest_image_name = dest_image_name(directory)
+      dest_sass_path = dest_sass_path(directory)
+      dest_image_time = File.new(dest_image_path(directory)).mtime
+      File.open(dest_sass_path, 'w') do |f|
+        if @config['suffix']
+          @config['suffix'].each do |key, value|
+            cns = class_names(results, :suffix => key)
+            unless cns.empty?
+              f.print cns.join(",\n")
+              f.print "\n"
+              f.print value.split("\n").collect { |text| "  " + text }.join("\n")
+              f.print "\n"
             end
           end
-          
-          f.print class_names(results).join(",\n")
-          f.print " \n  background: url('/images/#{dest_image_name}?#{dest_image_time.to_i}') no-repeat\n"
+        end
         
-          results.each do |result|
-            f.print "#{class_name(result[:name])}\n"
-            f.print "  background-position: #{-result[:x]}px #{-result[:y]}px\n"
-            f.print "  width: #{result[:width]}px\n"
-            f.print "  height: #{result[:height]}px\n"
-          end
+        f.print class_names(results).join(",\n")
+        f.print " \n  background: url('/images/#{dest_image_name}?#{dest_image_time.to_i}') no-repeat\n"
+      
+        results.each do |result|
+          f.print "#{class_name(result[:name])}\n"
+          f.print "  background-position: #{-result[:x]}px #{-result[:y]}px\n"
+          f.print "  width: #{result[:width]}px\n"
+          f.print "  height: #{result[:height]}px\n"
         end
       end
     end
@@ -160,7 +161,7 @@ class Sprite
   end
   
   def class_name(name)
-    ".#{name.gsub('/', ' .')}"
+    ".#{name.gsub('/', ' .').sub(/[_-]hover$/, ':hover')}"
   end
   
   def all_images(directory)

data/spec/css_sprite/sprite_spec.rb

@@ -12,7 +12,11 @@ describe Sprite do
     end
     
     it "should build css_sprite image and sass" do
-      Sprite.new(:engine => :sass).build
+      Sprite.new('engine' => 'sass').build
+    end
+    
+    it "should build another image optimization" do
+      Sprite.new('optimization' => "optipng -o 1").build
     end
   end
   
@@ -34,6 +38,7 @@ describe Sprite do
     it "should read all images from a directory" do
       expected_images = [File.join(IMAGE_PATH, 'css_sprite/icons/twitter_icon.png'),
                          File.join(IMAGE_PATH, 'css_sprite/icons/facebook_icon.png'),
+                         File.join(IMAGE_PATH, 'css_sprite/icons/facebook_icon_hover.png'),
                          File.join(IMAGE_PATH, 'css_sprite/hotmail_logo.png'),
                          File.join(IMAGE_PATH, 'css_sprite/gmail_logo.png')]
       actual_images = @sprite.all_images(File.join(IMAGE_PATH, 'css_sprite'))
@@ -63,6 +68,23 @@ describe Sprite do
     end
   end
   
+  describe "class_name" do
+    it "should get class_name with simple name" do
+      @sprite.class_name("twitter_icon").should == ".twitter_icon"
+    end
+    
+    it "should get class_name with parent class" do
+      @sprite.class_name("icons/twitter_icon").should == ".icons .twitter_icon"
+    end
+    
+    it "should get class_name with hover class" do
+      @sprite.class_name("icons/twitter_icon_hover").should == ".icons .twitter_icon:hover"
+      @sprite.class_name("icons/twitter-icon-hover").should == ".icons .twitter-icon:hover"
+      @sprite.class_name("twitter_hover_icon").should == ".twitter_hover_icon"
+      @sprite.class_name("twitter_hover_icon_hover").should == ".twitter_hover_icon:hover"
+    end
+  end
+  
   describe "dest_image_path" do
     it "should get css_sprite image path for a directory" do
       @sprite.dest_image_path(File.join(IMAGE_PATH, 'css_sprite')).should == File.join(IMAGE_PATH, 'css_sprite.png')

metadata

@@ -4,9 +4,9 @@ version: !ruby/object:Gem::Version
   prerelease: false
   segments: 
   - 1
-  - 3
   - 4
-  version: 1.3.4
+  - 0
+  version: 1.4.0
 platform: ruby
 authors: 
 - Richard Huang
@@ -14,7 +14,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-04-07 00:00:00 +08:00
+date: 2010-04-08 00:00:00 +08:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -52,6 +52,7 @@ files:
 - spec/public/images/css_sprite/gmail_logo.png
 - spec/public/images/css_sprite/hotmail_logo.png
 - spec/public/images/css_sprite/icons/facebook_icon.png
+- spec/public/images/css_sprite/icons/facebook_icon_hover.png
 - spec/public/images/css_sprite/icons/twitter_icon.png
 - spec/public/images/css_sprite/not_image.txt
 - spec/spec.opts