added sprite position calculating

This commit is contained in:
Nico Hagenburger 2010-10-17 15:27:59 +02:00 committed by Chris Eppstein
parent 53d975ffae
commit 3e7cd28635
3 changed files with 126 additions and 10 deletions

View File

@ -1,4 +1,21 @@
module Compass::SassExtensions::Functions::Sprites module Compass::SassExtensions::Functions::Sprites
def sprite_image(uri)
uri = uri.value
path, name = Compass::Sprites.path_and_name(uri)
y = 0
last_spacing = 0
images = Compass::Sprites.sprites(name)
images.each do |image|
current_spacing = number_from_var("#{name}-#{image[:name]}-spacing")
if y > 0
y += current_spacing > last_spacing ? current_spacing : last_spacing
end
image[:y] = y
y += image[:height]
last_spacing = current_spacing
end
image_url(Sass::Script::String.new("#{path}.png"))
end
def sprite_position(file) def sprite_position(file)
name = File.dirname(file.value) name = File.dirname(file.value)
@ -8,4 +25,13 @@ module Compass::SassExtensions::Functions::Sprites
Sass::Script::String.new("0 #{y}") Sass::Script::String.new("0 #{y}")
end end
private
def number_from_var(var_name)
if var = environment.var(var_name)
var.value
else
0
end
end
end end

View File

@ -9,8 +9,8 @@ module Compass
@@sprites = {} @@sprites = {}
end end
def path_and_name(file) def path_and_name(uri)
if file =~ %r{((.+/)?(.+))/(\*)\.png} if uri =~ %r{((.+/)?(.+))/(\*)\.png}
[$1, $3, $4] [$1, $3, $4]
end end
end end
@ -29,18 +29,14 @@ module Compass
if uri =~ /\.png$/ if uri =~ /\.png$/
path, self.name = Compass::Sprites.path_and_name(uri) path, self.name = Compass::Sprites.path_and_name(uri)
glob = File.join(Compass.configuration.images_path, uri) glob = File.join(Compass.configuration.images_path, uri)
generated_image = "#{path}.png"
y = 0
Dir.glob(glob).sort.each do |file| Dir.glob(glob).sort.each do |file|
width, height = Compass::SassExtensions::Functions::ImageSize::ImageProperties.new(file).size width, height = Compass::SassExtensions::Functions::ImageSize::ImageProperties.new(file).size
images << { images << {
:name => File.basename(file, '.png'), :name => File.basename(file, '.png'),
:filename => File.basename(file), :filename => File.basename(file),
:height => height, :height => height,
:width => width, :width => width
:y => y
} }
y += height
end end
contents = <<-SCSS contents = <<-SCSS
@ -48,7 +44,7 @@ module Compass
$#{name}-sprite-dimensions: false !default; $#{name}-sprite-dimensions: false !default;
\#{$#{name}-sprite-base-class} { \#{$#{name}-sprite-base-class} {
background: image-url("#{generated_image}") no-repeat; background: sprite-image("#{uri}") no-repeat;
} }
@mixin #{name}-sprite-dimensions($sprite) { @mixin #{name}-sprite-dimensions($sprite) {
@ -84,5 +80,9 @@ module Compass
File.basename(uri)] File.basename(uri)]
end end
def to_s
""
end
end end
end end

View File

@ -21,6 +21,8 @@ describe Compass::Sprites do
" #{css.gsub('@charset "UTF-8";', '').gsub(/\n/, "\n ").strip}\n" " #{css.gsub('@charset "UTF-8";', '').gsub(/\n/, "\n ").strip}\n"
end end
# DEFAULT USAGE:
it "should generate sprite classes" do it "should generate sprite classes" do
css = render <<-SCSS css = render <<-SCSS
@import "squares/*.png"; @import "squares/*.png";
@ -95,6 +97,8 @@ describe Compass::Sprites do
CSS CSS
end end
# CUSTOMIZATIONS:
it "should be possible to change the base class" do it "should be possible to change the base class" do
css = render <<-SCSS css = render <<-SCSS
$squares-sprite-base-class: ".circles"; $squares-sprite-base-class: ".circles";
@ -107,4 +111,90 @@ describe Compass::Sprites do
CSS CSS
end end
it "should calculate the spacing between images but not before first image" do
css = render <<-SCSS
$squares-10x10-spacing: 33px;
@import "squares/*.png";
@include all-squares-sprites;
SCSS
css.should == <<-CSS
.squares-sprite, .squares-10x10, .squares-20x20 {
background: url('/squares.png') no-repeat;
}
.squares-10x10 {
background-position: 0 0;
}
.squares-20x20 {
background-position: 0 -43px;
}
CSS
end
it "should calculate the spacing between images" do
css = render <<-SCSS
$squares-20x20-spacing: 33px;
@import "squares/*.png";
@include all-squares-sprites;
SCSS
css.should == <<-CSS
.squares-sprite, .squares-10x10, .squares-20x20 {
background: url('/squares.png') no-repeat;
}
.squares-10x10 {
background-position: 0 0;
}
.squares-20x20 {
background-position: 0 -43px;
}
CSS
end
it "should calculate the maximum spacing between images" do
css = render <<-SCSS
$squares-10x10-spacing: 44px;
$squares-20x20-spacing: 33px;
@import "squares/*.png";
@include all-squares-sprites;
SCSS
css.should == <<-CSS
.squares-sprite, .squares-10x10, .squares-20x20 {
background: url('/squares.png') no-repeat;
}
.squares-10x10 {
background-position: 0 0;
}
.squares-20x20 {
background-position: 0 -54px;
}
CSS
end
it "should calculate the maximum spacing between images in reversed order" do
css = render <<-SCSS
$squares-10x10-spacing: 33px;
$squares-20x20-spacing: 44px;
@import "squares/*.png";
@include all-squares-sprites;
SCSS
css.should == <<-CSS
.squares-sprite, .squares-10x10, .squares-20x20 {
background: url('/squares.png') no-repeat;
}
.squares-10x10 {
background-position: 0 0;
}
.squares-20x20 {
background-position: 0 -54px;
}
CSS
end
end end