added sprite position calculating

This commit is contained in:
Nico Hagenburger 2010-10-17 15:27:59 +02:00 committed by Chris Eppstein
parent 4026c51273
commit bf47c74dc2
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)
@ -7,5 +24,14 @@ module Compass::SassExtensions::Functions::Sprites
y = "-#{y}px" unless y == 0 y = "-#{y}px" unless y == 0
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,26 +29,22 @@ 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
$#{name}-sprite-base-class: ".#{name}-sprite" !default; $#{name}-sprite-base-class: ".#{name}-sprite" !default;
$#{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) {
@ -83,6 +79,10 @@ module Compass
[self.class.name + ":" + File.dirname(File.expand_path(uri)), [self.class.name + ":" + File.dirname(File.expand_path(uri)),
File.basename(uri)] File.basename(uri)]
end end
def to_s
""
end
end end
end end

View File

@ -20,6 +20,8 @@ describe Compass::Sprites do
# reformat to fit result of heredoc: # reformat to fit result of heredoc:
" #{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
@ -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";
@ -106,5 +110,91 @@ 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