css_sprite 1.2.0 → 1.3.0

data/README.textile

@@ -2,29 +2,22 @@ h1. css_sprite
 
 A rails plugin/gem to generate css sprite images automatically.
 
-**************************************************************************
+*************************************************************************
 
-h2. Install
+h2. Notice
 
-install rmagick gem first:
-<pre><code>
-sudo gem install rmagick
-</code></pre>
+I have rewritten the plugin. Please check out the gem version >= 1.3.0
 
-if you have any problems with the rmagick gem, install imagemagick via macports first:
+**************************************************************************
 
-<pre><code>
-sudo port install libxml2
-sudo port install ImageMagick  
-</code></pre>
+h2. Install
 
-or via installer: <a href="http://github.com/maddox/magick-installer/tree/master">http://github.com/maddox/magick-installer/tree/master</a>
+css_sprite is dependent on the RMagick gem, please install it first.
 
 
 install it as a gem:
 
 <pre><code>
-sudo gem sources -a http://gemcutter.org
 sudo gem install css_sprite
 </code></pre>
 
@@ -37,52 +30,79 @@ script/plugin install git://github.com/flyerhzm/css_sprite.git
 
 h2. Configuration
 
-add <code>config/css_sprite.yml</code>, define about compositing what images.
+There is no need to create a configuration if you do not use sass and you do not do any customization.
+
+
+You can create <code>config/css_sprite.yml</code> to define the customization.
+
+For css
 <pre><code>
-forum_icon_vertical.gif:  # destination image file
-  sources:                # source image file list
-    - good_topic.gif
-    - mid_topic.gif
-    - unread_topic.gif
-    - sticky_topic.gif
-  orient: vertical        # composite gravity, vertical or horizontal
-  span: 5                 # span of space between two images
-  prefix: "v-"            # css class prefix
+suffix:
+  button: |
+    text-indent: -9999px;
+    display: block;
+    cursor: pointer;
+    font-size: 0;
+    line-height: 15px;
+    border: 0;
+    outline: 0;
+
+  icon: |
+    text-indent: -9999px;
+    cursor: pointer;
 </code></pre>
 
-first line defines the destination image filename.
-<code>sources</code> is a list of source image filenames what want to composite. They are parsed by <code>Dir.glob</code>.
-<code>orient</code> defines the composite gravity type, horizontal or vertical. Default is 'vertical'.
-<code>span</code> defines the span between two images. Default is 0.
-<code>prefix</code> defines a prefix for the generated css classes, to avoid conflicts with your own css classes.
+For sass
+<pre><code>
+engine: sass
+suffix:
+  button: |
+    text-indent: -9999px
+    display: block
+    cursor: pointer
+    font-size: 0
+    line-height: 15px
+    border: 0
+    outline: 0
+
+  icon: |
+    text-indent: -9999px
+    cursor: pointer
+</code></pre>
 
-you can define any number of destination image files.
+<code>engine</code> defines css (default) or sass to generate.
+<code>suffix</code> defines the customization styles for specified images. 
+The customization above means if your image's suffix is button (e.g. post_button.png), it contains the additional style with (outline: 0 and so on),
+if your image's suffix is icon (e.g. twitter_icon.png), it contains the additional style with (text-indent: -9999px and so on)
 
 **************************************************************************
 
 h2. Usage
 
-if you use it as a gem, add a task <code>lib/tasks/css_sprite.rake</code> first:
+1. create a <code>css_sprite</code> directory or css_sprite suffixed directory (e.g. widget_css_sprite) under <code>public/images</code>
+
+2. define <code>config/css_sprite.yml</code> or not
+
+3. start css_sprite server <code>rake css_sprite:start</code>
+
+4. put any images you want to do css sprite into the css_sprite directory
+
+5. then css_sprite image will be automatically generated and css_sprite.css or css_sprite.sass are generated too.
+
+****************************************************************************
+
+h2. Task
+
 <pre><code>
 require 'css_sprite'
 </code></pre>
 if you use it as a plugin, ignore the step above.
 
 then just run rake task:
-<pre><code>
-rake css_sprite:build
-</code></pre>
+<code>rake css_sprite:start</code>, start css_sprite server
+<code>rake css_sprite:stop</code>, stop css_sprite server
+<code>rake css_sprite:build</code>, build css_sprite once
 
-the result css is generated at <code>public/stylesheets/css_sprite.css</code>
-<pre><code>
-/* do not touch - generated through 'rake css_sprite:build' */
-.v-forum_icon_vertical { background: url('/images/forum_icon_vertical.gif?1265358559') no-repeat; }
-.v-good_topic { background-position: 0px 0px; width: 20px; height: 19px; }
-.v-mid_topic { background-position: 0px -29px; width: 20px; height: 19px; }
-.v-sticky_topic { background-position: 0px -58px; width: 19px; height: 18px; }
-.v-unread_topic { background-position: 0px -86px; width: 19px; height: 18px; }
-.v-plectix_logo { background-position: 0px -114px; width: 125px; height: 47px; }
-</code></pre>
 
 **************************************************************************
 

data/Rakefile

@@ -18,6 +18,7 @@ Jeweler::Tasks.new do |gemspec|
   gemspec.homepage = "" 
   gemspec.authors = ["Richard Huang"]
   gemspec.files.exclude '.gitignore'
+  gemspec.add_dependency 'rmagick'
 end
 Jeweler::GemcutterTasks.new
 

data/VERSION

@@ -1 +1 @@
-1.1.0
+1.3.0

data/css_sprite.gemspec

@@ -5,7 +5,7 @@
 
 Gem::Specification.new do |s|
   s.name = %q{css_sprite}
-  s.version = "1.2.0"
+  s.version = "1.3.0"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Richard Huang"]
@@ -21,9 +21,16 @@ Gem::Specification.new do |s|
      "Rakefile",
      "VERSION",
      "css_sprite.gemspec",
+     "lib/automatic.rb",
      "lib/css_sprite.rb",
      "lib/css_sprite/sprite.rb",
      "spec/css_sprite/sprite_spec.rb",
+     "spec/public/images/css_sprite/.DS_Store",
+     "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/twitter_icon.png",
+     "spec/public/images/css_sprite/not_image.txt",
      "spec/spec.opts",
      "spec/spec_helper.rb",
      "tasks/css_sprite_tasks.rake"

data/lib/automatic.rb

@@ -0,0 +1,15 @@
+require 'rubygems'
+require File.join(File.dirname(__FILE__), 'css_sprite/sprite.rb')
+
+# We need Rails.root, but not require 'rails', so hack it
+class Rails
+  def self.root
+    Dir.pwd
+  end
+end
+
+loop do
+  sleep 1
+  
+  Sprite.new.check
+end

data/lib/css_sprite/sprite.rb

@@ -1,64 +1,186 @@
+require 'find'
 require 'RMagick'
+require 'yaml'
 
-class Sprite  
-  CONFIG_PATH = RAILS_ROOT + '/config/'
-  IMAGE_PATH = RAILS_ROOT + '/public/images/'
-  PUBLIC_PATH = RAILS_ROOT + '/public/stylesheets/'
+class Sprite
   
-  def initialize
-    @output = {}
+  def initialize(options={})
+    @image_path = File.join(Rails.root, 'public/images')
+    @stylesheet_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'))
+    else
+      @config = options
+    end
   end
   
   def build
-    sprite_config = File.open(CONFIG_PATH + 'css_sprite.yml') {|f| YAML::load(f)}
-    sprite_config.each do |dest, configs|
-      output_image(dest, configs)
-    end  
-    output_css
-    
+    directories = css_sprite_directories
+    directories.each { |directory| output_image(directory) }
+    output_stylesheet
+  end
+  
+  def check
+    directories = css_sprite_directories
+    directories.each do |directory|
+      if expire?(directory)
+        output_image(directory)
+      end
+    end
+    output_stylesheet
+  end
+  
+  def expire?(directory)
+    if sass?
+      stylesheet_path = dest_sass_path(directory)
+    else
+      stylesheet_path = dest_css_path(directory)
+    end
+    !File.exist?(stylesheet_path) or File.new(directory).mtime > File.new(stylesheet_path).mtime
   end
   
-  def output_image(dest, configs)
+  def output_stylesheet
+    if sass?
+      output_sass
+    else
+      output_css
+    end
+  end
+  
+  def sass?
+    @config['engine'] == 'sass'
+  end
+  
+  def css_sprite_directories
+    Dir.entries(@image_path).collect do |d|
+      File.join(@image_path, d) if File.directory?(File.join(@image_path, d)) and d =~ /css_sprite$/
+    end.compact
+  end
+  
+  def output_image(directory)
     results = []
-    sources = configs['sources'].collect {|source| Dir.glob(IMAGE_PATH + source)}.flatten
-    span = configs['span'] || 0
-    dest_image = get_image(sources.shift)
-    results << image_properties(dest_image).merge(:x => 0, :y => 0, :prefix => configs['prefix'])
-    sources.each do |source|
-      source_image = get_image(source)
-      if configs['orient'] == 'horizontal'
-        gravity = Magick::EastGravity
-        x = dest_image.columns + span
-        y = 0
-      else
+    sources = all_images(directory)
+    dest_image_path = dest_image_path(directory)
+    span = 5
+    unless sources.empty?
+      dest_image = get_image(sources.shift)
+      results << image_properties(dest_image).merge(:x => 0, :y => 0)
+      sources.each do |source|
+        source_image = get_image(source)
         gravity = Magick::SouthGravity
         x = 0
         y = dest_image.rows + span
+        results << image_properties(source_image).merge(:x => x, :y => y)
+        dest_image = composite_images(dest_image, source_image, x, y)
       end
-      results << image_properties(source_image).merge(:x => x, :y => y, :prefix => configs['prefix'])
-      dest_image = composite_images(dest_image, source_image, x, y)
+      dest_image.write(dest_image_path)
     end
-    @output[dest] = results
-    dest_image.write(IMAGE_PATH + dest)
+    @todo[directory] = results
   end
-  
+
   def output_css
-    File.open(PUBLIC_PATH + 'css_sprite.css', 'w') do |f|
-      f.puts "/* do not touch - generated through 'rake css_sprite:build' */"
-      @output.each do |dest, results|
-        basename = File.basename(dest, File.extname(dest))
-        f.puts ".#{results.first[:prefix]}#{basename} { background: url('/images/#{dest}?#{Time.now.to_i}') no-repeat; }"
-        results.each do |result|
-          f.print ".#{result[:prefix]}#{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"
+    @todo.each do |directory, results|
+      unless results.empty?
+        dest_image_name = dest_image_name(directory)
+        dest_css_path = dest_css_path(directory)
+        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
+          end
+          
+          f.print class_names(results).join(",\n")
+          f.print " \{\n  background: url('/images/#{dest_image_name}?#{Time.now.to_i}') no-repeat;\n\}\n"
+        
+          results.each do |result|
+            f.print ".#{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
   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)
+        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
+          end
+          
+          f.print class_names(results).join(",\n")
+          f.print " \n  background: url('/images/#{dest_image_name}?#{Time.now.to_i}') no-repeat\n"
+        
+          results.each do |result|
+            f.print ".#{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
+    end
+  end
+  
+  def class_names(results, options={})
+    options = {:count_per_line => 5}.merge(options)
+    class_names = []
+    results = results.select { |result| result[:name] =~ %r|#{options[:suffix]}$| } if options[:suffix]
+    results.each_slice(options[:count_per_line]) do |batch_results|
+      class_names << batch_results.collect { |result| ".#{result[:name]}" }.join(', ')
+    end
+    class_names
+  end
+  
+  def all_images(directory)
+    images = []
+    Find.find(directory) do |path|
+      if path =~ /\.(png|gif|jpg|jpeg)$/
+        images << path
+      end
+    end
+    images
+  end
+  
+  def dest_image_path(directory)
+    directory + ".png"
+  end
+  
+  def dest_image_name(directory)
+    File.basename(directory) + ".png"
+  end
+  
+  def dest_css_path(directory)
+    File.join(@stylesheet_path, File.basename(directory) + '.css')
+  end
+
+  def dest_sass_path(directory)
+    File.join(@stylesheet_path, 'sass', File.basename(directory) + '.sass')
+  end
+  
   def composite_images(dest_image, src_image, x, y)
     width = [src_image.columns + x, dest_image.columns].max
     height = [src_image.rows + y, dest_image.rows].max
@@ -69,11 +191,11 @@ class Sprite
   end
   
   def get_image(image_filename)
-    image = Magick::Image::read(image_filename).first
+    Magick::Image::read(image_filename).first
   end
   
   def image_properties(image)
-    {:name => File.basename(image.filename).split('.')[0], :width => image.columns, :height => image.rows}
+    {:name => File.basename(image.filename, File.extname(image.filename)), :width => image.columns, :height => image.rows}
   end
     
 end

data/lib/css_sprite.rb

@@ -1,5 +1,6 @@
+require 'css_sprite/sprite'
 require 'rake'
 
 unless Rake::Task.task_defined? "css_sprite:build"
   load File.join(File.dirname(__FILE__), '..', 'tasks', 'css_sprite_tasks.rake')
-end
+end

data/spec/css_sprite/sprite_spec.rb

@@ -5,32 +5,109 @@ describe Sprite do
     @sprite = Sprite.new
   end
   
-  context "get_image" do
+  describe "build" do
+    it "should build css_sprite image and css" do
+      @sprite.build
+    end
+    
+    it "should build css_sprite image and sass" do
+      Sprite.new(:engine => :sass).build
+    end
+  end
+  
+  describe "css_sprite_directories" do
+    it "should read two direcoties" do
+      expected_directories = [File.join(IMAGE_PATH, 'another_css_sprite'),
+                                  File.join(IMAGE_PATH, 'css_sprite')]
+      @sprite.css_sprite_directories.should == expected_directories
+    end
+  end
+  
+  describe "output_image" do
+    it "should output a css_sprite image for a directory" do
+      @sprite.output_image(File.join(IMAGE_PATH, 'css_sprite'))
+    end
+  end
+  
+  describe "all_images" 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/hotmail_logo.png'),
+                         File.join(IMAGE_PATH, 'css_sprite/gmail_logo.png')]
+      @sprite.all_images(File.join(IMAGE_PATH, 'css_sprite')).should == expected_images
+    end
+  end
+  
+  describe "class_names" do
+    before(:all) do
+      @results = [{:name => 'gmail_logo'}, {:name => 'hotmail_logo'}, {:name => 'yahoo_logo'}, 
+                 {:name => 'gmail_button'}, {:name => 'hotmail_button'}, {:name => 'yahoo_button'}]
+    end
+    
+    it "should get class_names with default options" do
+      @sprite.class_names(@results).should == [".gmail_logo, .hotmail_logo, .yahoo_logo, .gmail_button, .hotmail_button", ".yahoo_button"]
+    end
+
+    it "should get class_names with 3 count_per_line" do
+      @sprite.class_names(@results, :count_per_line => 3).should == [".gmail_logo, .hotmail_logo, .yahoo_logo", ".gmail_button, .hotmail_button, .yahoo_button"]
+    end
+    
+    it "should get specified class_names with suffix" do
+      @sprite.class_names(@results, :suffix => 'logo').should == [".gmail_logo, .hotmail_logo, .yahoo_logo"]
+    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')
+    end
+  end
+
+  describe "dest_image_name" do
+    it "should get css_sprite image name for a directory" do
+      @sprite.dest_image_name(File.join(IMAGE_PATH, 'css_sprite')).should == 'css_sprite.png'
+    end
+  end
+
+  describe "dest_css_path" do
+    it "should get css_sprite css path for a directory" do
+      @sprite.dest_css_path(File.join(IMAGE_PATH, 'css_sprite')).should == File.join(STYLESHEET_PATH, 'css_sprite.css')
+    end
+  end
+
+  describe "dest_sass_path" do
+    it "should get sass_sprite css path for a directory" do
+      @sprite.dest_sass_path(File.join(IMAGE_PATH, 'css_sprite')).should == File.join(STYLESHEET_PATH, 'sass', 'css_sprite.sass')
+    end
+  end
+  
+  describe "get_image" do
     it "should get a image" do
-      @sprite.get_image(File.join(File.dirname(__FILE__), '../resources/good_topic.gif')).class.should == Magick::Image
+      @sprite.get_image(File.join(IMAGE_PATH, 'css_sprite/gmail_logo.png')).class.should == Magick::Image
     end
   end
   
-  context "image_properties" do
+  describe "image_properties" do
     it "should get image properties" do
-      image = @sprite.get_image(File.join(File.dirname(__FILE__), '../resources/good_topic.gif'))
-      @sprite.image_properties(image).should == {:name => 'good_topic', :width => 20, :height => 19}
+      image = @sprite.get_image(File.join(IMAGE_PATH, 'css_sprite/gmail_logo.png'))
+      @sprite.image_properties(image).should == {:name => 'gmail_logo', :width => 103, :height => 36}
     end
   end
   
-  context "composite_images" do
+  describe "composite_images" do
     it "should composite two images into one horizontally" do
-      image1 = @sprite.get_image(File.join(File.dirname(__FILE__), '../resources/good_topic.gif'))
-      image2 = @sprite.get_image(File.join(File.dirname(__FILE__), '../resources/mid_topic.gif'))
+      image1 = @sprite.get_image(File.join(IMAGE_PATH, 'css_sprite/gmail_logo.png'))
+      image2 = @sprite.get_image(File.join(IMAGE_PATH, 'css_sprite/hotmail_logo.png'))
       image = @sprite.composite_images(image1, image2, image1.columns, 0)
-      @sprite.image_properties(image).should == {:name => nil, :width => 40, :height => 19}
+      @sprite.image_properties(image).should == {:name => "", :width => 206, :height => 36}
     end
     
     it "should composite two images into one verically" do
-      image1 = @sprite.get_image(File.join(File.dirname(__FILE__), '../resources/good_topic.gif'))
-      image2 = @sprite.get_image(File.join(File.dirname(__FILE__), '../resources/mid_topic.gif'))
+      image1 = @sprite.get_image(File.join(IMAGE_PATH, 'css_sprite/gmail_logo.png'))
+      image2 = @sprite.get_image(File.join(IMAGE_PATH, 'css_sprite/hotmail_logo.png'))
       image = @sprite.composite_images(image1, image2, 0, image1.rows)
-      @sprite.image_properties(image).should == {:name => nil, :width => 20, :height => 38}
+      @sprite.image_properties(image).should == {:name => "", :width => 103, :height => 72}
     end
   end
 end

data/spec/spec_helper.rb

@@ -2,5 +2,12 @@ require 'rubygems'
 require 'spec/autorun'
 require 'date'
 
-RAILS_ROOT = '.'
+class Rails
+  def self.root
+    File.dirname(__FILE__)
+  end
+end
+
+IMAGE_PATH = File.join(Rails.root, 'public/images')
+STYLESHEET_PATH = File.join(Rails.root, 'public/stylesheets')
 require File.join(File.dirname(__FILE__), '/../lib/css_sprite.rb')

data/tasks/css_sprite_tasks.rake

@@ -1,7 +1,56 @@
 namespace :css_sprite do  
-  desc "buid css sprite image"
+  desc "build css sprite image once"
   task :build do
     require File.join(File.dirname(__FILE__), '../lib/css_sprite/sprite.rb')
     Sprite.new.build
   end
+  
+  desc "start css sprite server"
+  task :start do
+    if RUBY_PLATFORM.include?('mswin32')
+      # exec "start "
+      # puts "css_sprite server started sucessfully."
+      puts "not support windows yet."
+    else
+      file_path = "#{Rails.root}/tmp/pids/css_sprite.pid"
+      if File.exists?(file_path)
+        puts "css_sprite server is started. I haven't done anything."
+      else
+        pid = fork do
+          automatic_script = File.join(File.dirname(__FILE__), '..', 'lib', 'automatic.rb')
+          exec "ruby #{automatic_script}"
+        end
+      
+        sleep(1)
+        File.open("#{Rails.root}/tmp/pids/css_sprite.pid", "w") { |f| f << pid }
+        puts "css_sprite server started sucessfully."
+      end
+    end
+  end
+  
+  desc "stop css sprite server"
+  task :stop do
+    if RUBY_PLATFORM.include?('mswin32')
+      # exec "taskkill "
+      # puts "css_sprite server shutdown sucessfully."
+      puts "not support windows yet."
+    else
+      file_path = "#{Rails.root}/tmp/pids/css_sprite.pid"
+      if File.exists?(file_path)
+        fork do
+          File.open(file_path, "r") do |f|
+           pid = f.readline
+           Process.kill('TERM', pid.to_i)
+          end
+        end
+
+        Process.wait
+        File.unlink(file_path)
+        puts "css_sprite server shutdown sucessfully."
+      else
+        puts "css_sprite server is not running. I haven't done anything."
+      end
+    end
+  end
+  
 end

metadata

@@ -4,9 +4,9 @@ version: !ruby/object:Gem::Version
   prerelease: false
   segments: 
   - 1
-  - 2
+  - 3
   - 0
-  version: 1.2.0
+  version: 1.3.0
 platform: ruby
 authors: 
 - Richard Huang
@@ -43,9 +43,16 @@ files:
 - Rakefile
 - VERSION
 - css_sprite.gemspec
+- lib/automatic.rb
 - lib/css_sprite.rb
 - lib/css_sprite/sprite.rb
 - spec/css_sprite/sprite_spec.rb
+- spec/public/images/css_sprite/.DS_Store
+- 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/twitter_icon.png
+- spec/public/images/css_sprite/not_image.txt
 - spec/spec.opts
 - spec/spec_helper.rb
 - tasks/css_sprite_tasks.rake