added sprite position calculating
This commit is contained in:
parent
53d975ffae
commit
3e7cd28635
@ -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
|
||||||
|
@ -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
|
@ -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
|
Loading…
Reference in New Issue
Block a user