Permalink
Browse files

added mixins for sprite support

  • Loading branch information...
1 parent 6947fca commit bd367e481b18b3e692764711c1e77d7d4c8d96a5 @hagenburger hagenburger committed Aug 14, 2010
Showing with 106 additions and 17 deletions.
  1. +1 −1 lemonade.gemspec
  2. +3 −1 lib/lemonade.rb
  3. +50 −13 lib/lemonade/sass_functions.rb
  4. +18 −0 spec/lemonade_spec.rb
  5. +34 −2 stylesheets/lemonade.scss
View
@@ -18,7 +18,7 @@ Gem::Specification.new do |s|
s.extra_rdoc_files = ['README.md']
s.rdoc_options = ['--charset=UTF-8']
- s.files = Dir["lib/**/*"] + %w(CHANGELOG.md MIT-LICENSE Rakefile README.md)
+ s.files = Dir["lib/**/*"] + Dir["stylesheets/**/*"] + %w(CHANGELOG.md MIT-LICENSE Rakefile README.md)
s.test_files = Dir['spec/**/*']
s.require_path = 'lib'
View
@@ -80,7 +80,9 @@ def timestamps(sprite)
if defined?(Compass)
require File.expand_path('../lemonade/compass_extension', __FILE__)
- Compass::Frameworks.register('lemonade')
+ base_directory = File.join(File.dirname(__FILE__), '..')
+ stylesheets_dir = File.join(base_directory, 'stylesheets')
+ Compass::Frameworks.register('lemonade', :path => base_directory, )
end
# Rails 3.0.0.beta.2+
@@ -1,31 +1,56 @@
module Sass::Script::Functions
- def sprite_url(*args)
- url, position = sprite_url_and_position(*args)
- url
+ def sprite_url(file)
+ dir, name, basename = extract_names(file)
+ generic_image_url("#{dir}#{name}.png")
end
-
+
def sprite_position(*args)
url, position = sprite_url_and_position(*args)
position
end
-
+
def sprite_image(*args)
url, position = sprite_url_and_position(*args)
position = '0 0' == position.to_s ? '' : " #{position}"
Sass::Script::String.new("#{url}#{position}")
- end
+ end
alias_method :sprite_img, :sprite_image
+ def sprite_files_in_folder(folder)
+ assert_type folder, :String
+ count = sprite_file_list_from_folder(folder).length
+ Sass::Script::Number.new(count)
+ end
+
+ def sprite_file_from_folder(folder, n)
+ assert_type folder, :String
+ assert_type n, :Number
+ file = sprite_file_list_from_folder(folder)[n.to_i]
+ file = File.basename(file)
+ Sass::Script::String.new(File.join(folder.value, file))
+ end
+
+ def sprite_name(file)
+ dir, name, basename = extract_names(file)
+ Sass::Script::String.new(name)
+ end
+
+ def image_basename(file)
+ dir, name, basename = extract_names(file, :check_file => true)
+ Sass::Script::String.new(basename)
+ end
+
private
+ def sprite_file_list_from_folder(folder)
+ dir = File.join(Lemonade.sprites_path, folder.value)
+ Dir.glob(File.join(dir, '*.png')).sort
+ end
+
def sprite_url_and_position(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'
- end
- dir, name, filename = $1, $2, $3
- filestr = File.join(Lemonade.sprites_path, file.to_s.gsub('"', ''))
+ dir, name, basename = extract_names(file, :check_file => true)
+ filestr = File.join(Lemonade.sprites_path, file.value)
sprite = sprite_for("#{dir}/#{name}")
image = image_for(sprite, filestr, add_x, add_y, margin_top_or_both, margin_bottom)
@@ -36,6 +61,18 @@ def sprite_url_and_position(file, add_x = nil, add_y = nil, margin_top_or_both =
[generic_image_url("#{dir}#{name}.png"), background_position(-image[:y], add_x, add_y)]
end
+ def extract_names(file, options = {})
+ assert_type file, :String
+ unless (file.value =~ %r(^(.+/)?([^\.]+?)(/(.+?)\.(png))?$)) == 0
+ raise Sass::SyntaxError, "1:#{file}:"+'Please provide a file in a folder: e.g. sprites/button.png'
+ end
+ dir, name, basename = $1, $2, $4
+ if options[:check_file] and basename.nil?
+ raise Sass::SyntaxError, "2:#{file}:"+'Please provide a file in a folder: e.g. sprites/button.png'
+ end
+ [dir, name, basename]
+ end
+
def generic_image_url(image)
if defined?(Compass)
image_url(Sass::Script::String.new(image))
@@ -65,7 +102,7 @@ def sprite_for(file)
:margin_bottom => 0
}
end
-
+
def image_for(sprite, file, add_x, add_y, margin_top_or_both, margin_bottom)
unless image = sprite[:images].detect{ |image| image[:file] == file }
width, height = ChunkyPNG::Image.from_file(file).size
View
@@ -121,11 +121,29 @@ def evaluate(value)
end
it "should output the background-image URL" do
+ evaluate('sprite-url("sprites")').should == "url('/sprites.png')"
evaluate('sprite-url("sprites/10x10.png")').should == "url('/sprites.png')"
evaluate('sprite-url("sprites/20x20.png")').should == "url('/sprites.png')"
evaluate('sprite-url("other_images/test.png")').should == "url('/other_images.png')"
end
+ it "should count the PNG files in a folder" do
+ evaluate('sprite-files-in-folder("sprites")').to_i.should == 4
+ end
+
+ it "should output the n-th file in a folder" do
+ evaluate('sprite-file-from-folder("sprites", 0)').should == "sprites/10x10.png"
+ evaluate('sprite-file-from-folder("sprites", 1)').should == "sprites/150x10.png"
+ end
+
+ it "should output the filename without extention" do
+ evaluate('sprite-name("sprites")').should == "sprites"
+ evaluate('sprite-name("sprites/10x10.png")').should == "sprites"
+ end
+
+ it "should output the filename without extention" do
+ evaluate('image-basename("sprites/10x10.png")').should == "10x10"
+ end
end
View
@@ -1,6 +1,38 @@
-@mixin sprite-image($file) {
- background: sprite-image($file);
+@mixin image-dimensions($file) {
height: image-height($file);
width: image-width($file);
}
+@mixin sprite-image($file, $repeat: no-repeat) {
+ background: sprite-image($file) $repeat;
+}
+
+@mixin sized-sprite-image($file) {
+ @include sprite-image($file, "");
+ @include image-dimensions($file);
+}
+
+@mixin sprite-folder($folder, $image-dimensions: false) {
+ .#{$folder} {
+ @if $image-dimensions {
+ background: sprite-url($folder);
+ }
+ @else {
+ background: sprite-url($folder) no-repeat;
+ }
+ }
+ @for $i from 0 to sprite-files-in-folder($folder) {
+ $file: sprite-file-from-folder($folder, $i);
+ .#{$folder}-#{image-basename($file)} {
+ @extend .#{$folder};
+ background-position: sprite-position(sprite-file-from-folder($folder, $i));
+ @if $image-dimensions {
+ @include image-dimensions($file);
+ }
+ }
+ }
+}
+
+@mixin sized-sprite-folder($folder) {
+ @include sprite-folder($folder, true);
+}

0 comments on commit bd367e4

Please sign in to comment.