lemonade 0.1.0 → 0.2.0

data/README.md

@@ -1,7 +1,7 @@
 Lemonade—On the fly sprite generator for Sass/Compass
 =====================================================
 
-Usage (SCSS or Sass):
+Usage ([SCSS or Sass](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html)):
 
     .fanta {
       background: sprite-image("bottles/fanta.png");
@@ -40,10 +40,16 @@ Background
 Installation
 ------------
 
-    gem install haml
-    gem install compass
-    gem install rmagick
     gem install lemonade
+    
+
+Current State
+-------------
+
+* Compass standalone finished
+* Rails Sass integration finished
+* Staticmatic integration finished
+* Haml integration (with “:sass” filter): work in progress
 
 
 Options
@@ -62,6 +68,28 @@ Output (assuming the calculated position would be “0 -50px” as shown above):
       background: url('/images/bottles.png') 12px -47px;
     }
 
+If you need empty space around the current image, this will add 20px transparent space above and below.
+
+    .seven-up {
+      background: sprite-image("bottles/seven-up.png", 0, 0, 20px);
+    }
+    
+This one adds 20px above, 30px below:
+    
+    .seven-up {
+      background: sprite-image("bottles/seven-up.png", 0, 0, 20px, 30px);
+    }
+
+Right aligned images are possible:
+
+    .seven-up {
+      background: sprite-image("bottles/seven-up.png", 100%, 4px);
+    }
+    
+The original image will be placed on the right side of the sprite image.
+Use this, if you have a link with an arrow on the right side (like Apple).
+    
+
 
 Note on Patches/Pull Requests
 -----------------------------

data/Rakefile

@@ -10,6 +10,9 @@ begin
     gem.email = "gems@hagenburger.net"
     gem.homepage = "http://github.com/hagenburger/lemonade"
     gem.authors = ["Nico Hagenburger"]
+    gem.add_dependency "haml", ">= 3.0.0"
+    gem.add_dependency "compass", ">= 0.10.0"
+    gem.add_dependency "rmagick"
     gem.add_development_dependency "rspec", ">= 1.2.9"
   end
   Jeweler::GemcutterTasks.new

data/VERSION

@@ -1 +1 @@
-0.1.0
+0.2.0

data/lemonade.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = %q{lemonade}
-  s.version = "0.1.0"
+  s.version = "0.2.0"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Nico Hagenburger"]
-  s.date = %q{2010-05-11}
+  s.date = %q{2010-05-21}
   s.description = %q{Generates sprites on the fly by using `background: sprite-image("sprites/logo.png")`.}
   s.email = %q{gems@hagenburger.net}
   s.extra_rdoc_files = [
@@ -26,9 +26,11 @@ Gem::Specification.new do |s|
      "lib/lemonade.rb",
      "lib/lemonade/lemonade.rb",
      "lib/lemonade/sass_extensions/functions/lemonade.rb",
-     "spec/images/other_images/more-images/sprites/test-2.png",
-     "spec/images/sprites/test-1.png",
-     "spec/images/sprites/test-2.png",
+     "spec/images/other_images/more-images/sprites/test.png",
+     "spec/images/sprites/10x10.png",
+     "spec/images/sprites/150x10.png",
+     "spec/images/sprites/20x20.png",
+     "spec/images/sprites/30x30.png",
      "spec/lemonade_spec.rb",
      "spec/spec.opts",
      "spec/spec_helper.rb"
@@ -48,11 +50,20 @@ Gem::Specification.new do |s|
     s.specification_version = 3
 
     if Gem::Version.new(Gem::VERSION) >= Gem::Version.new('1.2.0') then
+      s.add_runtime_dependency(%q<haml>, [">= 3.0.0"])
+      s.add_runtime_dependency(%q<compass>, [">= 0.10.0"])
+      s.add_runtime_dependency(%q<rmagick>, [">= 0"])
       s.add_development_dependency(%q<rspec>, [">= 1.2.9"])
     else
+      s.add_dependency(%q<haml>, [">= 3.0.0"])
+      s.add_dependency(%q<compass>, [">= 0.10.0"])
+      s.add_dependency(%q<rmagick>, [">= 0"])
       s.add_dependency(%q<rspec>, [">= 1.2.9"])
     end
   else
+    s.add_dependency(%q<haml>, [">= 3.0.0"])
+    s.add_dependency(%q<compass>, [">= 0.10.0"])
+    s.add_dependency(%q<rmagick>, [">= 0"])
     s.add_dependency(%q<rspec>, [">= 1.2.9"])
   end
 end

data/lib/lemonade.rb

@@ -7,6 +7,7 @@ end
 
 require 'rubygems'
 require 'compass'
+require 'sass/plugin'
 require 'rmagick'
 require File.dirname(__FILE__) + '/lemonade/sass_extensions/functions/lemonade'
 require File.dirname(__FILE__) + '/lemonade/lemonade'
@@ -17,10 +18,34 @@ end
 
 module Compass
   class Compiler
-    alias_method :complile_without_comprass, :compile
+    alias_method :compile_without_lemonade, :compile
     def compile(sass_filename, css_filename)
-      complile_without_comprass sass_filename, css_filename
+      compile_without_lemonade sass_filename, css_filename
       Lemonade::generate_sprites
     end
   end
-end
+end
+
+module Sass
+  module Plugin
+    alias_method :update_stylesheets_without_lemonade, :update_stylesheets
+    def update_stylesheets
+      if update_stylesheets_without_lemonade
+        Lemonade::generate_sprites
+      end
+    end
+  end
+end
+
+module Sass
+  class Engine
+    alias_method :render_without_lemonade, :render
+    def render
+      if result = render_without_lemonade
+        Lemonade::generate_sprites
+        result
+      end
+    end
+    alias_method :to_css, :render
+  end
+end

data/lib/lemonade/lemonade.rb

@@ -9,12 +9,14 @@ module Lemonade
         sprite[:images].each do |image|
           file = File.join(Compass.configuration.images_path, image[:file])
           single_image  = Magick::Image::read(file).first
-          sprite_image.composite!(single_image, image[:x], image[:y], Magick::OverCompositeOp)
+          x = (sprite[:width] - image[:width]) * image[:x]
+          sprite_image.composite!(single_image, x, image[:y], Magick::OverCompositeOp)
         end
         file = File.join(Compass.configuration.images_path, "#{ sprite_name }.png")
         sprite_image.write file
       end
       $lemonade_sprites = nil
+      $lemonade_space_bottom = 0
     end
   end
 end

data/lib/lemonade/sass_extensions/functions/lemonade.rb

@@ -1,6 +1,6 @@
 module Lemonade::SassExtensions::Functions::Lemonade
 
-  def sprite_image(file, add_x = nil, add_y = nil)
+  def sprite_image(file, add_x = nil, add_y = nil, margin_top_or_both = nil, margin_bottom = nil)
     assert_type file, :String
     unless (file.to_s =~ %r(^"(.+/)?(.+?)/(.+?)\.(png|gif|jpg)"$)) == 0
       raise Sass::SyntaxError, 'Please provide a file in a folder: e.g. sprites/button.png'
@@ -8,15 +8,17 @@ module Lemonade::SassExtensions::Functions::Lemonade
     dir, name, filename = $1, $2, $3
     height = image_height(file).value
     width = image_width(file).value
+    margin_top = calculate_margin_top(margin_top_or_both, margin_bottom)
 
     $lemonade_sprites ||= {}
     sprite = $lemonade_sprites["#{ dir }/#{ name }"] ||= { :height => 0, :width => 0, :images => [] }
-    x, y = 0, sprite[:height]
-    sprite[:height] += height
+    x = (add_x and add_x.numerator_units == %w(%)) ? add_x.value / 100 : 0
+    y = sprite[:height] + margin_top
+    sprite[:height] += height + margin_top
     sprite[:width] = width if width > sprite[:width]
-    position = background_position(x, y, add_x, add_y)
     sprite[:images] << { :file => file.to_s.gsub('"', ''), :height => height, :width => width, :x => x, :y => y }
 
+    position = background_position(0, y, add_x, add_y)
     file = image_url(Sass::Script::String.new("#{ dir }#{ name }.png"))
     Sass::Script::String.new("#{ file }#{ position }")
   end
@@ -25,11 +27,18 @@ private
 
   def background_position(x, y, add_x, add_y)
     y = -y
-    x += add_x.value if add_x
+    x = add_x ? add_x.to_s : 0
     y += add_y.value if add_y
-    unless x == 0 and y == 0
-      " #{ x }#{ 'px' unless x == 0 } #{ y }#{ 'px' unless y == 0 }"
+    unless (add_x.nil? or add_x.value == 0) and y == 0
+      " #{ x } #{ y }#{ 'px' unless y == 0 }"
     end
   end
+  
+  def calculate_margin_top(margin_top_or_both, margin_bottom)
+    margin_top_or_both = margin_top_or_both ? margin_top_or_both.value : 0
+    margin_top = ($lemonade_margin_bottom ||= 0) > margin_top_or_both ? $lemonade_margin_bottom : margin_top_or_both
+    $lemonade_margin_bottom = margin_bottom ? margin_bottom.value : margin_top_or_both
+    margin_top
+  end
 
 end

data/spec/lemonade_spec.rb

@@ -3,12 +3,18 @@ require File.expand_path(File.dirname(__FILE__) + '/spec_helper')
 describe Lemonade::SassExtensions::Functions::Lemonade do
   before :each do
     @sass = Sass::Environment.new
+    $lemonade_sprites = nil
+    $lemonade_margin_bottom = nil
     FileUtils.cp_r File.dirname(__FILE__) + '/images', IMAGES_TMP_PATH
   end
   
   after :each do
     FileUtils.rm_r IMAGES_TMP_PATH
-    $lemonade_sprites = nil
+  end
+  
+  def image_size(file)
+    Lemonade::generate_sprites
+    IO.read(IMAGES_TMP_PATH + '/' + file)[0x10..0x18].unpack('NN')
   end
   
   def evaluate(value)
@@ -16,11 +22,11 @@ describe Lemonade::SassExtensions::Functions::Lemonade do
   end
   
   it "should return the sprite file name" do
-    evaluate('sprite-image("sprites/test-1.png")').should == "url('/sprites.png')"
+    evaluate('sprite-image("sprites/30x30.png")').should == "url('/sprites.png')"
   end
   
   it "should work in folders with dashes and underscores" do
-    evaluate('sprite-image("other_images/more-images/sprites/test-2.png")').should ==
+    evaluate('sprite-image("other_images/more-images/sprites/test.png")').should ==
       "url('/other_images/more-images/sprites.png')"
   end
   
@@ -29,14 +35,68 @@ describe Lemonade::SassExtensions::Functions::Lemonade do
   end
   
   it "should set the background position" do
-    evaluate('sprite-image("sprites/test-1.png")').should == "url('/sprites.png')"
-    evaluate('sprite-image("sprites/test-2.png")').should == "url('/sprites.png') 0 -30px"
-    Lemonade::generate_sprites
-    File.exists?(IMAGES_TMP_PATH + '/sprites.png').should be_true
+    evaluate('sprite-image("sprites/30x30.png")').should == "url('/sprites.png')"
+    evaluate('sprite-image("sprites/150x10.png")').should == "url('/sprites.png') 0 -30px"
+    image_size('sprites.png').should == [150, 40]
   end
   
   it "should use the X position" do
-    evaluate('sprite-image("sprites/test-1.png", 5px, 0)').should == "url('/sprites.png') 5px 0"
+    evaluate('sprite-image("sprites/30x30.png", 5px, 0)').should == "url('/sprites.png') 5px 0"
+    image_size('sprites.png').should == [30, 30]
+  end
+  
+  it "should calculate 20px empty space between sprites" do
+    # Resulting sprite should look like (1 line = 10px height, X = placed image):
+    
+    # X
+    # 
+    # 
+    # XX
+    # XX
+    # 
+    # 
+    # XXX
+    # XXX
+    # XXX
+    
+    evaluate('sprite-image("sprites/10x10.png")').should == "url('/sprites.png')"
+    # space before #2: 20px
+    evaluate('sprite-image("sprites/20x20.png", 0, 0, 20px)').should == "url('/sprites.png') 0 -30px"
+    # space after #2: 20px
+    evaluate('sprite-image("sprites/30x30.png")').should == "url('/sprites.png') 0 -70px"
+    image_size('sprites.png').should == [30, 100]
+  end
+  
+  it "should calculate empty space between sprites and combine space like CSS margins" do
+    # Resulting sprite should look like (1 line = 10px height, X = placed image):
+    
+    # X
+    # 
+    # 
+    # 
+    # XX
+    # XX
+    # 
+    # XXX
+    # XXX
+    # XXX
+    
+    evaluate('sprite-image("sprites/10x10.png", 0, 0, 0, 30px)').should == "url('/sprites.png')"
+    # space between #1 and #2: 30px (=> 30px > 20px)
+    evaluate('sprite-image("sprites/20x20.png", 0, 0, 20px, 5px)').should == "url('/sprites.png') 0 -40px"
+    # space between #2 and #3: 10px (=> 5px < 10px)
+    evaluate('sprite-image("sprites/30x30.png", 0, 0, 10px)').should == "url('/sprites.png') 0 -70px"
+    image_size('sprites.png').should == [30, 100]
+  end
+  
+  it "should allow % for x positions" do
+    # Resulting sprite should look like (1 line = 10px height, X = placed image):
+    
+    # XXXXXXXXXXXXXXX
+    #               X
+    
+    evaluate('sprite-image("sprites/150x10.png")')
+    evaluate('sprite-image("sprites/10x10.png", 100%)').should == "url('/sprites.png') 100% -10px"
   end
   
 end

metadata

@@ -4,9 +4,9 @@ version: !ruby/object:Gem::Version
   prerelease: false
   segments: 
   - 0
-  - 1
+  - 2
   - 0
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors: 
 - Nico Hagenburger
@@ -14,13 +14,56 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-05-11 00:00:00 +02:00
+date: 2010-05-21 00:00:00 +02:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
-  name: rspec
+  name: haml
   prerelease: false
   requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        segments: 
+        - 3
+        - 0
+        - 0
+        version: 3.0.0
+  type: :runtime
+  version_requirements: *id001
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id002 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        segments: 
+        - 0
+        - 10
+        - 0
+        version: 0.10.0
+  type: :runtime
+  version_requirements: *id002
+- !ruby/object:Gem::Dependency 
+  name: rmagick
+  prerelease: false
+  requirement: &id003 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        segments: 
+        - 0
+        version: "0"
+  type: :runtime
+  version_requirements: *id003
+- !ruby/object:Gem::Dependency 
+  name: rspec
+  prerelease: false
+  requirement: &id004 !ruby/object:Gem::Requirement 
     none: false
     requirements: 
     - - ">="
@@ -31,7 +74,7 @@ dependencies:
         - 9
         version: 1.2.9
   type: :development
-  version_requirements: *id001
+  version_requirements: *id004
 description: "Generates sprites on the fly by using `background: sprite-image(\"sprites/logo.png\")`."
 email: gems@hagenburger.net
 executables: []
@@ -51,9 +94,11 @@ files:
 - lib/lemonade.rb
 - lib/lemonade/lemonade.rb
 - lib/lemonade/sass_extensions/functions/lemonade.rb
-- spec/images/other_images/more-images/sprites/test-2.png
-- spec/images/sprites/test-1.png
-- spec/images/sprites/test-2.png
+- spec/images/other_images/more-images/sprites/test.png
+- spec/images/sprites/10x10.png
+- spec/images/sprites/150x10.png
+- spec/images/sprites/20x20.png
+- spec/images/sprites/30x30.png
 - spec/lemonade_spec.rb
 - spec/spec.opts
 - spec/spec_helper.rb