added sprite position calculating
This commit is contained in:
parent
4026c51273
commit
bf47c74dc2
@ -1,4 +1,21 @@
|
||||
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)
|
||||
name = File.dirname(file.value)
|
||||
@ -8,4 +25,13 @@ module Compass::SassExtensions::Functions::Sprites
|
||||
Sass::Script::String.new("0 #{y}")
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def number_from_var(var_name)
|
||||
if var = environment.var(var_name)
|
||||
var.value
|
||||
else
|
||||
0
|
||||
end
|
||||
end
|
||||
end
|
||||
|
@ -9,8 +9,8 @@ module Compass
|
||||
@@sprites = {}
|
||||
end
|
||||
|
||||
def path_and_name(file)
|
||||
if file =~ %r{((.+/)?(.+))/(\*)\.png}
|
||||
def path_and_name(uri)
|
||||
if uri =~ %r{((.+/)?(.+))/(\*)\.png}
|
||||
[$1, $3, $4]
|
||||
end
|
||||
end
|
||||
@ -29,18 +29,14 @@ module Compass
|
||||
if uri =~ /\.png$/
|
||||
path, self.name = Compass::Sprites.path_and_name(uri)
|
||||
glob = File.join(Compass.configuration.images_path, uri)
|
||||
generated_image = "#{path}.png"
|
||||
y = 0
|
||||
Dir.glob(glob).sort.each do |file|
|
||||
width, height = Compass::SassExtensions::Functions::ImageSize::ImageProperties.new(file).size
|
||||
images << {
|
||||
:name => File.basename(file, '.png'),
|
||||
:filename => File.basename(file),
|
||||
:height => height,
|
||||
:width => width,
|
||||
:y => y
|
||||
:width => width
|
||||
}
|
||||
y += height
|
||||
end
|
||||
|
||||
contents = <<-SCSS
|
||||
@ -48,7 +44,7 @@ module Compass
|
||||
$#{name}-sprite-dimensions: false !default;
|
||||
|
||||
\#{$#{name}-sprite-base-class} {
|
||||
background: image-url("#{generated_image}") no-repeat;
|
||||
background: sprite-image("#{uri}") no-repeat;
|
||||
}
|
||||
|
||||
@mixin #{name}-sprite-dimensions($sprite) {
|
||||
@ -84,5 +80,9 @@ module Compass
|
||||
File.basename(uri)]
|
||||
end
|
||||
|
||||
def to_s
|
||||
""
|
||||
end
|
||||
|
||||
end
|
||||
end
|
@ -21,6 +21,8 @@ describe Compass::Sprites do
|
||||
" #{css.gsub('@charset "UTF-8";', '').gsub(/\n/, "\n ").strip}\n"
|
||||
end
|
||||
|
||||
# DEFAULT USAGE:
|
||||
|
||||
it "should generate sprite classes" do
|
||||
css = render <<-SCSS
|
||||
@import "squares/*.png";
|
||||
@ -95,6 +97,8 @@ describe Compass::Sprites do
|
||||
CSS
|
||||
end
|
||||
|
||||
# CUSTOMIZATIONS:
|
||||
|
||||
it "should be possible to change the base class" do
|
||||
css = render <<-SCSS
|
||||
$squares-sprite-base-class: ".circles";
|
||||
@ -107,4 +111,90 @@ describe Compass::Sprites do
|
||||
CSS
|
||||
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
|
Loading…
Reference in New Issue
Block a user