implemented most basic sprite usage without image generation
@ -13,17 +13,6 @@ module Compass::SassExtensions::Functions::ImageSize
|
|||||||
Sass::Script::Number.new(height, ["px"])
|
Sass::Script::Number.new(height, ["px"])
|
||||||
end
|
end
|
||||||
|
|
||||||
private
|
|
||||||
def real_path(image_file)
|
|
||||||
path = image_file.value
|
|
||||||
# Compute the real path to the image on the file stystem if the images_dir is set.
|
|
||||||
if Compass.configuration.images_path
|
|
||||||
File.join(Compass.configuration.images_path, path)
|
|
||||||
else
|
|
||||||
File.join(Compass.configuration.project_path, path)
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
class ImageProperties
|
class ImageProperties
|
||||||
def initialize(file)
|
def initialize(file)
|
||||||
@file = file
|
@file = file
|
||||||
@ -55,6 +44,17 @@ private
|
|||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
private
|
||||||
|
def real_path(image_file)
|
||||||
|
path = image_file.value
|
||||||
|
# Compute the real path to the image on the file stystem if the images_dir is set.
|
||||||
|
if Compass.configuration.images_path
|
||||||
|
File.join(Compass.configuration.images_path, path)
|
||||||
|
else
|
||||||
|
File.join(Compass.configuration.project_path, path)
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
class JPEG
|
class JPEG
|
||||||
attr_reader :width, :height, :bits
|
attr_reader :width, :height, :bits
|
||||||
|
|
||||||
|
@ -1,150 +1,11 @@
|
|||||||
module Compass::SassExtensions::Functions::Sprites
|
module Compass::SassExtensions::Functions::Sprites
|
||||||
include Compass::SassExtensions::Functions::ImageSize
|
|
||||||
class SpriteInfo
|
|
||||||
attr_reader :sprite
|
|
||||||
attr_reader :sprite_item
|
|
||||||
attr_reader :type
|
|
||||||
|
|
||||||
def initialize(sprite, sprite_item = nil, position_x = nil, position_y_shift = nil)
|
def sprite_position(file)
|
||||||
@sprite = sprite
|
name = File.dirname(file.value)
|
||||||
@sprite_item = sprite_item
|
sprite = File.basename(file.value, '.png')
|
||||||
@position_x = position_x
|
y = Compass::Sprites.sprites(name).detect{ |sprite_info| sprite_info[:name] == sprite }[:y]
|
||||||
@position_y_shift = position_y_shift
|
y = "-#{y}px" unless y == 0
|
||||||
end
|
Sass::Script::String.new("0 #{y}")
|
||||||
|
|
||||||
def position
|
|
||||||
x = @position_x || 0
|
|
||||||
if @sprite_item[:index] == 0 and (@position_y_shift.nil? or @position_y_shift.value == 0)
|
|
||||||
"#{x.inspect} 0"
|
|
||||||
else
|
|
||||||
expression = "Compass::Sprites.sprites['#{@sprite[:file]}'][:images][#{@sprite_item[:index]}][:y].unary_minus"
|
|
||||||
expression << ".plus(Sass::Script::Number.new(#{@position_y_shift.value}, ['px']))" if @position_y_shift
|
|
||||||
"#{x.inspect} <%= #{expression} %>"
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
end
|
|
||||||
|
|
||||||
def sprite_url(file)
|
|
||||||
dir, name, basename = extract_names(file)
|
|
||||||
sprite = sprite_for("#{dir}#{name}")
|
|
||||||
image_url(Sass::Script::String.new(sprite[:file]))
|
|
||||||
end
|
|
||||||
|
|
||||||
def sprite_position(file, position_x = nil, position_y_shift = nil, margin_top_or_both = nil, margin_bottom = nil)
|
|
||||||
sprite, sprite_item = sprite_url_and_position(file, position_x, position_y_shift, margin_top_or_both, margin_bottom)
|
|
||||||
info = SpriteInfo.new(sprite, sprite_item, position_x, position_y_shift)
|
|
||||||
Sass::Script::String.new(info.position)
|
|
||||||
end
|
|
||||||
|
|
||||||
def sprite_image(file, *args)
|
|
||||||
pos = sprite_position(file, *args)
|
|
||||||
url = sprite_url(file)
|
|
||||||
if pos.value == "0 0"
|
|
||||||
url
|
|
||||||
else
|
|
||||||
url.plus(" ").plus(pos)
|
|
||||||
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(Compass::Sprites.sprites_path, folder.value)
|
|
||||||
Dir.glob(File.join(dir, '*.png')).sort
|
|
||||||
end
|
|
||||||
|
|
||||||
def sprite_url_and_position(file, position_x = nil, position_y_shift = nil, margin_top_or_both = nil, margin_bottom = nil)
|
|
||||||
dir, name, basename = extract_names(file, :check_file => true)
|
|
||||||
filestr = File.join(Compass::Sprites.sprites_path, file.value)
|
|
||||||
|
|
||||||
sprite_file = "#{dir}#{name}.png"
|
|
||||||
sprite = sprite_for(sprite_file)
|
|
||||||
sprite_item = image_for(sprite, filestr, position_x, position_y_shift, margin_top_or_both, margin_bottom)
|
|
||||||
|
|
||||||
# Create a temporary destination file so compass doesn't complain about a missing image
|
|
||||||
FileUtils.touch File.join(Compass::Sprites.images_path, sprite_file) unless File.exists?(File.join(Compass::Sprites.images_path, sprite_file))
|
|
||||||
|
|
||||||
[sprite, sprite_item]
|
|
||||||
end
|
|
||||||
|
|
||||||
def extract_names(file, options = {})
|
|
||||||
assert_type file, :String
|
|
||||||
unless (file.value =~ %r(^(.+/)?([^\.]+?)(/(.+?)\.(png))?$)) == 0
|
|
||||||
raise Sass::SyntaxError, '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, 'Please provide a file in a folder: e.g. sprites/button.png'
|
|
||||||
end
|
|
||||||
[dir, name, basename]
|
|
||||||
end
|
|
||||||
|
|
||||||
def sprite_for(file)
|
|
||||||
file = "#{file}.png" unless file =~ /\.png$/
|
|
||||||
Compass::Sprites.sprites[file] ||= {
|
|
||||||
:file => "#{file}",
|
|
||||||
:height => 0,
|
|
||||||
:width => 0,
|
|
||||||
:images => [],
|
|
||||||
:margin_bottom => 0
|
|
||||||
}
|
|
||||||
end
|
|
||||||
|
|
||||||
def image_for(sprite, file, position_x, position_y_shift, margin_top_or_both, margin_bottom)
|
|
||||||
image = sprite[:images].detect{ |image| image[:file] == file }
|
|
||||||
margin_top_or_both ||= Sass::Script::Number.new(0)
|
|
||||||
margin_top = margin_top_or_both.value #calculate_margin_top(sprite, margin_top_or_both, margin_bottom)
|
|
||||||
margin_bottom = (margin_bottom || margin_top_or_both).value
|
|
||||||
if image
|
|
||||||
image[:margin_top] = margin_top if margin_top > image[:margin_top]
|
|
||||||
image[:margin_bottom] = margin_bottom if margin_bottom > image[:margin_bottom]
|
|
||||||
else
|
|
||||||
width, height = ImageProperties.new(file).size
|
|
||||||
x = (position_x and position_x.numerator_units == %w(%)) ? position_x : Sass::Script::Number.new(0)
|
|
||||||
y = sprite[:height] + margin_top
|
|
||||||
y = Sass::Script::Number.new(y, y == 0 ? [] : ['px'])
|
|
||||||
image = {
|
|
||||||
:file => file,
|
|
||||||
:height => height,
|
|
||||||
:width => width,
|
|
||||||
:x => x,
|
|
||||||
:margin_top => margin_top,
|
|
||||||
:margin_bottom => margin_bottom,
|
|
||||||
:index => sprite[:images].length
|
|
||||||
}
|
|
||||||
sprite[:images] << image
|
|
||||||
end
|
|
||||||
image
|
|
||||||
rescue Errno::ENOENT
|
|
||||||
raise Sass::SyntaxError, "#{file} does not exist in sprites_dir #{Compass::Sprites.sprites_path}"
|
|
||||||
rescue ChunkyPNG::SignatureMismatch
|
|
||||||
raise Sass::SyntaxError, "#{file} is not a recognized png file, can't use for sprite creation"
|
|
||||||
end
|
end
|
||||||
|
|
||||||
end
|
end
|
||||||
|
@ -1,3 +1,3 @@
|
|||||||
%w(traversal sprites).each do |patch|
|
%w(traversal).each do |patch|
|
||||||
require "compass/sass_extensions/monkey_patches/#{patch}"
|
require "compass/sass_extensions/monkey_patches/#{patch}"
|
||||||
end
|
end
|
||||||
|
@ -1,21 +0,0 @@
|
|||||||
module Sass
|
|
||||||
|
|
||||||
module Tree
|
|
||||||
|
|
||||||
class RootNode < Node
|
|
||||||
|
|
||||||
alias_method :render_without_sprites, :render
|
|
||||||
def render
|
|
||||||
if result = render_without_sprites
|
|
||||||
Compass::Sprites.generate_sprites(options)
|
|
||||||
result = ERB.new(result).result(binding)
|
|
||||||
Compass::Sprites.reset
|
|
||||||
return result
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
end
|
|
||||||
|
|
||||||
end
|
|
||||||
|
|
||||||
end
|
|
@ -1,112 +1,91 @@
|
|||||||
require 'chunky_png'
|
require 'chunky_png'
|
||||||
|
|
||||||
module Compass::Sprites
|
module Compass
|
||||||
@@sprites = {}
|
class Sprites < Sass::Importers::Base
|
||||||
@@sprites_path = nil
|
attr_accessor :name
|
||||||
@@images_path = nil
|
|
||||||
|
class << self
|
||||||
class << self
|
def reset
|
||||||
|
@@sprites = {}
|
||||||
def sprites
|
end
|
||||||
@@sprites
|
|
||||||
end
|
def path_and_name(file)
|
||||||
|
if file =~ %r{((.+/)?(.+))/(\*)\.png}
|
||||||
def sprites_path
|
[$1, $3, $4]
|
||||||
@@sprites_path || images_path
|
|
||||||
end
|
|
||||||
|
|
||||||
def sprites_path=(path)
|
|
||||||
@@sprites_path = path
|
|
||||||
end
|
|
||||||
|
|
||||||
def images_path
|
|
||||||
@@images_path || (defined?(Compass) ? Compass.configuration.images_path : 'public/images')
|
|
||||||
end
|
|
||||||
|
|
||||||
def images_path=(path)
|
|
||||||
@@images_path = path
|
|
||||||
end
|
|
||||||
|
|
||||||
def reset
|
|
||||||
@@sprites = {}
|
|
||||||
end
|
|
||||||
|
|
||||||
def generate_sprites(options)
|
|
||||||
sprites.each do |sprite_name, sprite|
|
|
||||||
calculate_sprite sprite
|
|
||||||
if sprite_changed?(sprite_name, sprite, options)
|
|
||||||
sprite_image = generate_sprite_image sprite
|
|
||||||
save_sprite_image! sprite_image, sprite
|
|
||||||
remember_sprite_info! sprite_name, sprite, options
|
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def sprites(name)
|
||||||
|
@@sprites = {} if @@sprites.nil?
|
||||||
|
@@sprites[name] ||= []
|
||||||
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
def sprite_changed?(sprite_name, sprite, options)
|
def images
|
||||||
existing_sprite_info = options[:cache_store].retrieve("_#{sprite_name}_data", "") || {}
|
Compass::Sprites.sprites(self.name)
|
||||||
existing_sprite_info[:sprite] != sprite or existing_sprite_info[:timestamps] != timestamps(sprite)
|
|
||||||
rescue
|
|
||||||
true
|
|
||||||
end
|
end
|
||||||
|
|
||||||
def remember_sprite_info!(sprite_name, sprite, options)
|
def find(url, context = nil)
|
||||||
data = {
|
if url =~ /\.png$/
|
||||||
:sprite => sprite,
|
path, self.name = Compass::Sprites.path_and_name(url)
|
||||||
:timestamps => timestamps(sprite),
|
glob = File.join(Compass.configuration.images_path, url)
|
||||||
}
|
generated_image = "#{path}.png"
|
||||||
options[:cache_store].store("_#{sprite_name}_data", "", data)
|
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
|
||||||
|
}
|
||||||
|
y += height
|
||||||
|
end
|
||||||
|
|
||||||
|
contents = <<-SCSS
|
||||||
|
$#{name}-sprite-base-class: ".#{name}-sprite" !default;
|
||||||
|
$#{name}-sprite-dimensions: false !default;
|
||||||
|
|
||||||
|
\#{$#{name}-sprite-base-class} {
|
||||||
|
background: image-url("#{generated_image}") no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin #{name}-sprite-dimensions($sprite) {
|
||||||
|
height: image-height("#{name}/\#{$sprite}.png");
|
||||||
|
width: image-width("#{name}/\#{$sprite}.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin #{name}-sprite-position($sprite) {
|
||||||
|
background-position: sprite-position("#{path}/\#{$sprite}.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin #{name}-sprite($sprite, $dimensions: $#{name}-sprite-dimensions) {
|
||||||
|
@extend \#{$#{name}-sprite-base-class};
|
||||||
|
@include #{name}-sprite-position($sprite);
|
||||||
|
@if $dimensions {
|
||||||
|
@include #{name}-sprite-dimensions($sprite);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin all-#{name}-sprites {
|
||||||
|
#{images.map do |sprite|
|
||||||
|
%Q(.#{name}-#{sprite[:name]} { @include #{name}-sprite("#{sprite[:name]}"); })
|
||||||
|
end.join}
|
||||||
|
}
|
||||||
|
SCSS
|
||||||
|
Sass::Engine.new(contents, :filename => name, :syntax => :scss, :importer => self)
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
def key(name, options)
|
||||||
|
[self.class.name + ":" + File.dirname(File.expand_path(name)),
|
||||||
|
File.basename(name)]
|
||||||
end
|
end
|
||||||
|
|
||||||
private
|
def to_s
|
||||||
|
"fdsfd"
|
||||||
def sprite_info_file(sprite_name)
|
|
||||||
File.join(Compass::Sprites.images_path, "#{sprite_name}.sprite_info.yml")
|
|
||||||
end
|
|
||||||
|
|
||||||
def timestamps(sprite)
|
|
||||||
result = {}
|
|
||||||
sprite[:images].each do |image|
|
|
||||||
file_name = image[:file]
|
|
||||||
result[file_name] = File.ctime(file_name)
|
|
||||||
end
|
|
||||||
result
|
|
||||||
end
|
|
||||||
|
|
||||||
def calculate_sprite(sprite)
|
|
||||||
width, margin_bottom, y = 0, 0, 0
|
|
||||||
sprite[:images].each do |sprite_item|
|
|
||||||
if sprite_item[:index] == 0
|
|
||||||
margin_top = 0
|
|
||||||
elsif sprite_item[:margin_top] > margin_bottom
|
|
||||||
margin_top = sprite_item[:margin_top]
|
|
||||||
else
|
|
||||||
margin_top = margin_bottom
|
|
||||||
end
|
|
||||||
y += margin_top
|
|
||||||
sprite_item[:y] = Sass::Script::Number.new(y, ['px'])
|
|
||||||
y += sprite_item[:height]
|
|
||||||
width = sprite_item[:width] if sprite_item[:width] > width
|
|
||||||
margin_bottom = sprite_item[:margin_bottom]
|
|
||||||
end
|
|
||||||
sprite[:height] = y
|
|
||||||
sprite[:width] = width
|
|
||||||
end
|
|
||||||
|
|
||||||
def generate_sprite_image(sprite)
|
|
||||||
sprite_image = ChunkyPNG::Image.new(sprite[:width], sprite[:height], ChunkyPNG::Color::TRANSPARENT)
|
|
||||||
sprite[:images].each do |sprite_item|
|
|
||||||
sprite_item_image = ChunkyPNG::Image.from_file(sprite_item[:file])
|
|
||||||
x = (sprite[:width] - sprite_item[:width]) * (sprite_item[:x].value / 100)
|
|
||||||
y = sprite_item[:y].value
|
|
||||||
sprite_image.replace sprite_item_image, x, y
|
|
||||||
end
|
|
||||||
sprite_image
|
|
||||||
end
|
|
||||||
|
|
||||||
def save_sprite_image!(sprite_image, sprite)
|
|
||||||
sprite_image.save File.join(Compass::Sprites.images_path, sprite[:file])
|
|
||||||
end
|
end
|
||||||
|
|
||||||
end
|
end
|
||||||
|
end
|
||||||
end
|
|
Before Width: | Height: | Size: 6.0 KiB |
Before Width: | Height: | Size: 6.0 KiB |
Before Width: | Height: | Size: 6.0 KiB |
Before Width: | Height: | Size: 2.8 KiB |
@ -1,75 +0,0 @@
|
|||||||
require File.expand_path(File.dirname(__FILE__) + '/spec_helper')
|
|
||||||
|
|
||||||
describe Compass::Sprites do
|
|
||||||
|
|
||||||
before :each do
|
|
||||||
@sprite = {
|
|
||||||
:info => 'info',
|
|
||||||
:images => [
|
|
||||||
{ :file => 'file1' },
|
|
||||||
{ :file => 'file2' },
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
@file = ""
|
|
||||||
File.stub!(:read => @file)
|
|
||||||
Compass::Sprites.stub(:images_path).and_return('image_path')
|
|
||||||
File.stub!(:ctime => Time.parse('2010-01-01 12:00'))
|
|
||||||
end
|
|
||||||
|
|
||||||
###
|
|
||||||
|
|
||||||
describe '#remember_sprite_info' do
|
|
||||||
|
|
||||||
subject { Compass::Sprites }
|
|
||||||
|
|
||||||
before :each do
|
|
||||||
@options = {
|
|
||||||
:cache_store => Sass::InMemoryCacheStore.new
|
|
||||||
}
|
|
||||||
end
|
|
||||||
|
|
||||||
it 'should save sprite info to the sass cache' do
|
|
||||||
subject.remember_sprite_info!('the_sprite', @sprite, @options)
|
|
||||||
@options[:cache_store].retrieve('_the_sprite_data', "")[:sprite].should == @sprite
|
|
||||||
end
|
|
||||||
end
|
|
||||||
|
|
||||||
###
|
|
||||||
|
|
||||||
describe '#sprite_changed?' do
|
|
||||||
|
|
||||||
subject { Compass::Sprites }
|
|
||||||
|
|
||||||
before :each do
|
|
||||||
@options = {
|
|
||||||
:cache_store => Sass::InMemoryCacheStore.new
|
|
||||||
}
|
|
||||||
end
|
|
||||||
|
|
||||||
it 'should be false if nothing changed' do
|
|
||||||
subject.remember_sprite_info!('the sprite', @sprite, @options)
|
|
||||||
subject.sprite_changed?('the sprite', @sprite, @options).should be_false
|
|
||||||
end
|
|
||||||
|
|
||||||
it 'should be true if the sprite info has changed' do
|
|
||||||
subject.remember_sprite_info!('the sprite', @sprite, @options)
|
|
||||||
@sprite[:info] = 'changed info'
|
|
||||||
subject.sprite_changed?('the sprite', @sprite, @options).should be_true
|
|
||||||
end
|
|
||||||
|
|
||||||
it 'should be true if the images changed' do
|
|
||||||
subject.remember_sprite_info!('the sprite', @sprite, @options)
|
|
||||||
@sprite[:images] = []
|
|
||||||
subject.sprite_changed?('the sprite', @sprite, @options).should be_true
|
|
||||||
end
|
|
||||||
|
|
||||||
it 'should be true if a images timestamp changed' do
|
|
||||||
subject.remember_sprite_info!('the sprite', @sprite, @options)
|
|
||||||
File.stub!(:ctime => Time.now)
|
|
||||||
subject.sprite_changed?('the sprite', @sprite, @options).should be_true
|
|
||||||
end
|
|
||||||
|
|
||||||
end
|
|
||||||
|
|
||||||
end
|
|
@ -1,216 +0,0 @@
|
|||||||
require File.expand_path(File.dirname(__FILE__) + '/spec_helper')
|
|
||||||
|
|
||||||
describe Sass::Script::Functions do
|
|
||||||
|
|
||||||
before :each do
|
|
||||||
Compass::Sprites.reset
|
|
||||||
FileUtils.cp_r File.dirname(__FILE__) + '/images', IMAGES_TMP_PATH
|
|
||||||
end
|
|
||||||
|
|
||||||
after :each do
|
|
||||||
FileUtils.rm_r IMAGES_TMP_PATH
|
|
||||||
end
|
|
||||||
|
|
||||||
def image_size(file)
|
|
||||||
IO.read(IMAGES_TMP_PATH + '/' + file)[0x10..0x18].unpack('NN')
|
|
||||||
end
|
|
||||||
|
|
||||||
def evaluate(*values)
|
|
||||||
sass = 'div' + values.map{ |value| "\n background: #{value}" }.join
|
|
||||||
css = Sass::Engine.new(sass, :syntax => :sass).render
|
|
||||||
# find rendered CSS values
|
|
||||||
# strip selectors, porperty names, semicolons and whitespace
|
|
||||||
css = css.gsub(/div \{\s*background: (.+?);\s*\}\s*/m, '\\1').split(/;\s*background: /)
|
|
||||||
css = css.first if css.length == 1
|
|
||||||
return css
|
|
||||||
end
|
|
||||||
|
|
||||||
###
|
|
||||||
|
|
||||||
it "should return the sprite file name" do
|
|
||||||
evaluate('sprite-image("sprites/30x30.png")').should == "url('/sprites.png')"
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should also work with `sprite-img`" do
|
|
||||||
evaluate('sprite-img("sprites/30x30.png")').should == "url('/sprites.png')"
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should work in folders with dashes and underscores" do
|
|
||||||
evaluate('sprite-image("other_images/more-images/sprites/test.png")').should ==
|
|
||||||
"url('/other_images/more-images/sprites.png')"
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should not work without any folder" do
|
|
||||||
lambda { evaluate('sprite-image("test.png")') }.should raise_exception(Sass::SyntaxError)
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should set the background position" do
|
|
||||||
evaluate('sprite-image("sprites/30x30.png") sprite-image("sprites/150x10.png")').should ==
|
|
||||||
"url('/sprites.png') url('/sprites.png') 0 -30px"
|
|
||||||
image_size('sprites.png').should == [150, 40]
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should use the X position" do
|
|
||||||
evaluate('sprite-image("sprites/30x30.png", 5px, 0)').should == "url('/sprites.png') 5px 0"
|
|
||||||
image_size('sprites.png').should == [30, 30]
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should include the Y position" do
|
|
||||||
evaluate('sprite-image("sprites/30x30.png", 0, 3px) sprite-image("sprites/150x10.png", 0, -6px)').should ==
|
|
||||||
"url('/sprites.png') 0 3px url('/sprites.png') 0 -36px"
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should calculate 20px empty space between sprites" do
|
|
||||||
# Resulting sprite should look like (1 line = 10px height, X = placed image):
|
|
||||||
|
|
||||||
# X
|
|
||||||
#
|
|
||||||
#
|
|
||||||
# XX
|
|
||||||
# XX
|
|
||||||
#
|
|
||||||
#
|
|
||||||
# XXX
|
|
||||||
# XXX
|
|
||||||
# XXX
|
|
||||||
|
|
||||||
evaluate(
|
|
||||||
'sprite-image("sprites/10x10.png")',
|
|
||||||
'sprite-image("sprites/20x20.png", 0, 0, 20px)',
|
|
||||||
'sprite-image("sprites/30x30.png", 0, 0, 20px)'
|
|
||||||
).should == [
|
|
||||||
"url('/sprites.png')",
|
|
||||||
"url('/sprites.png') 0 -30px",
|
|
||||||
"url('/sprites.png') 0 -70px"
|
|
||||||
]
|
|
||||||
image_size('sprites.png').should == [30, 100]
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should calculate empty space between sprites and combine space like CSS margins" do
|
|
||||||
# Resulting sprite should look like (1 line = 10px height, X = placed image):
|
|
||||||
|
|
||||||
# X
|
|
||||||
#
|
|
||||||
#
|
|
||||||
#
|
|
||||||
# XX
|
|
||||||
# XX
|
|
||||||
#
|
|
||||||
# XXX
|
|
||||||
# XXX
|
|
||||||
# XXX
|
|
||||||
|
|
||||||
evaluate(
|
|
||||||
'sprite-image("sprites/10x10.png", 0, 0, 0, 30px)',
|
|
||||||
'sprite-image("sprites/20x20.png", 0, 0, 20px, 5px)',
|
|
||||||
'sprite-image("sprites/30x30.png", 0, 0, 10px)'
|
|
||||||
).should == [
|
|
||||||
"url('/sprites.png')",
|
|
||||||
"url('/sprites.png') 0 -40px",
|
|
||||||
"url('/sprites.png') 0 -70px"
|
|
||||||
]
|
|
||||||
image_size('sprites.png').should == [30, 100]
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should calculate empty space correctly when 2 output images are uses" do
|
|
||||||
evaluate(
|
|
||||||
'sprite-image("sprites/10x10.png", 0, 0, 0, 30px)',
|
|
||||||
'sprite-image("other_images/test.png")',
|
|
||||||
'sprite-image("sprites/20x20.png", 0, 0, 20px, 5px)'
|
|
||||||
).should == [
|
|
||||||
"url('/sprites.png')",
|
|
||||||
"url('/other_images.png')",
|
|
||||||
"url('/sprites.png') 0 -40px"
|
|
||||||
]
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should allow % for x positions" do
|
|
||||||
# Resulting sprite should look like (1 line = 10px height, X = placed image):
|
|
||||||
|
|
||||||
# XXXXXXXXXXXXXXX
|
|
||||||
# X
|
|
||||||
|
|
||||||
evaluate(
|
|
||||||
'sprite-image("sprites/150x10.png")',
|
|
||||||
'sprite-image("sprites/10x10.png", 100%)'
|
|
||||||
).should == [
|
|
||||||
"url('/sprites.png')",
|
|
||||||
"url('/sprites.png') 100% -10px"
|
|
||||||
]
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should not compose the same image twice" do
|
|
||||||
evaluate(
|
|
||||||
'sprite-image("sprites/10x10.png")',
|
|
||||||
'sprite-image("sprites/20x20.png")',
|
|
||||||
'sprite-image("sprites/20x20.png")' # reuse image from line above
|
|
||||||
).should == [
|
|
||||||
"url('/sprites.png')",
|
|
||||||
"url('/sprites.png') 0 -10px",
|
|
||||||
"url('/sprites.png') 0 -10px"
|
|
||||||
]
|
|
||||||
image_size('sprites.png').should == [20, 30]
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should calculate the maximum spacing between images" do
|
|
||||||
evaluate(
|
|
||||||
'sprite-image("sprites/10x10.png")',
|
|
||||||
'sprite-image("sprites/20x20.png", 0, 0, 10px)',
|
|
||||||
'sprite-image("sprites/20x20.png", 0, 0, 99px)' # 99px > 10px
|
|
||||||
).should == [
|
|
||||||
"url('/sprites.png')",
|
|
||||||
"url('/sprites.png') 0 -109px", # use 99px spacing
|
|
||||||
"url('/sprites.png') 0 -109px"
|
|
||||||
]
|
|
||||||
image_size('sprites.png').should == [20, 129]
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should calculate the maximum spacing between images for margin bottom" do
|
|
||||||
evaluate(
|
|
||||||
'sprite-image("sprites/10x10.png", 0, 0, 0, 10px)',
|
|
||||||
'sprite-image("sprites/10x10.png", 0, 0, 0, 99px)', # 99px > 10px
|
|
||||||
'sprite-image("sprites/20x20.png")'
|
|
||||||
).should == [
|
|
||||||
"url('/sprites.png')",
|
|
||||||
"url('/sprites.png')",
|
|
||||||
"url('/sprites.png') 0 -109px" # use 99px spacing
|
|
||||||
]
|
|
||||||
image_size('sprites.png').should == [20, 129]
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should output the background-position" do
|
|
||||||
evaluate(
|
|
||||||
'sprite-position("sprites/10x10.png")',
|
|
||||||
'sprite-position("sprites/20x20.png")'
|
|
||||||
).should == [
|
|
||||||
"0 0",
|
|
||||||
"0 -10px"
|
|
||||||
]
|
|
||||||
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 for the sprite" do
|
|
||||||
evaluate('sprite-name("sprites")').should == "sprites"
|
|
||||||
evaluate('sprite-name("sprites/10x10.png")').should == "sprites"
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should output the filename without extention for the sprite item" do
|
|
||||||
evaluate('image-basename("sprites/10x10.png")').should == "10x10"
|
|
||||||
end
|
|
||||||
|
|
||||||
end
|
|
@ -5,6 +5,3 @@ require 'rubygems'
|
|||||||
require 'compass'
|
require 'compass'
|
||||||
require 'rspec'
|
require 'rspec'
|
||||||
require 'rspec/autorun'
|
require 'rspec/autorun'
|
||||||
|
|
||||||
IMAGES_TMP_PATH = File.join(File.dirname(__FILE__), 'images-tmp')
|
|
||||||
Compass::Sprites.images_path = IMAGES_TMP_PATH
|
|
||||||
|
@ -1,43 +0,0 @@
|
|||||||
require File.expand_path(File.dirname(__FILE__) + '/spec_helper')
|
|
||||||
|
|
||||||
describe Compass::SassExtensions::Functions::Sprites::SpriteInfo do
|
|
||||||
|
|
||||||
def sprite_info(*args)
|
|
||||||
Compass::SassExtensions::Functions::Sprites::SpriteInfo.new(*args)
|
|
||||||
end
|
|
||||||
|
|
||||||
##
|
|
||||||
|
|
||||||
it "should output the position for the first sprite" do
|
|
||||||
sprite = { :file => "sprites.png" }
|
|
||||||
sprite_item = { :y => Sass::Script::Number.new(20, ['px']), :index => 0 }
|
|
||||||
x = Sass::Script::Number.new(10, ['px'])
|
|
||||||
sprite_info(sprite, sprite_item, x).position.should == "10px 0"
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should output the position for the second+ sprite" do
|
|
||||||
sprite = { :file => "sprites.png" }
|
|
||||||
sprite_item = { :y => Sass::Script::Number.new(20, ['px']), :index => 1 }
|
|
||||||
x = Sass::Script::Number.new(10, ['px'])
|
|
||||||
sprite_info(sprite, sprite_item, x).position.should ==
|
|
||||||
"10px <%= Compass::Sprites.sprites['sprites.png'][:images][1][:y].unary_minus %>"
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should output the position with y shift" do
|
|
||||||
sprite = { :file => "sprites.png" }
|
|
||||||
sprite_item = { :y => Sass::Script::Number.new(20, ['px']), :index => 1 }
|
|
||||||
x = Sass::Script::Number.new(10, ['px'])
|
|
||||||
y_shift = Sass::Script::Number.new(3, ['px'])
|
|
||||||
sprite_info(sprite, sprite_item, x, y_shift).position.should ==
|
|
||||||
"10px <%= Compass::Sprites.sprites['sprites.png'][:images][1][:y].unary_minus.plus(Sass::Script::Number.new(3, ['px'])) %>"
|
|
||||||
end
|
|
||||||
|
|
||||||
it "should output the position with percentage" do
|
|
||||||
sprite = { :file => "sprites.png" }
|
|
||||||
sprite_item = { :y => Sass::Script::Number.new(20, ['px']), :index => 2 }
|
|
||||||
x = Sass::Script::Number.new(100, ['%'])
|
|
||||||
sprite_info(sprite, sprite_item, x).position.should ==
|
|
||||||
"100% <%= Compass::Sprites.sprites['sprites.png'][:images][2][:y].unary_minus %>"
|
|
||||||
end
|
|
||||||
|
|
||||||
end
|
|
60
spec/sprites_spec.rb
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
require File.expand_path(File.dirname(__FILE__) + '/spec_helper')
|
||||||
|
require "compass/sprites"
|
||||||
|
|
||||||
|
describe Compass::Sprites do
|
||||||
|
|
||||||
|
before :each do
|
||||||
|
Compass.configuration.images_path = File.dirname(__FILE__) + "/test_project/public/images"
|
||||||
|
Compass.configure_sass_plugin!
|
||||||
|
Compass::Sprites.reset
|
||||||
|
end
|
||||||
|
|
||||||
|
def render(scss)
|
||||||
|
scss = %Q(@import "compass"; #{scss})
|
||||||
|
options = Compass.sass_engine_options
|
||||||
|
options[:syntax] = :scss
|
||||||
|
options[:load_paths] << Compass::Sprites.new
|
||||||
|
css = Sass::Engine.new(scss, options).render
|
||||||
|
# reformat to fit result of heredoc:
|
||||||
|
" #{css.gsub('@charset "UTF-8";', '').gsub(/\n/, "\n ").strip}\n"
|
||||||
|
end
|
||||||
|
|
||||||
|
it "should generate sprite classes" do
|
||||||
|
css = render <<-SCSS
|
||||||
|
@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 -10px; }
|
||||||
|
CSS
|
||||||
|
end
|
||||||
|
|
||||||
|
it "should generate sprite classes with dimensions" do
|
||||||
|
css = render <<-SCSS
|
||||||
|
$squares-sprite-dimensions: true;
|
||||||
|
@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;
|
||||||
|
height: 10px;
|
||||||
|
width: 10px; }
|
||||||
|
|
||||||
|
.squares-20x20 {
|
||||||
|
background-position: 0 -10px;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px; }
|
||||||
|
CSS
|
||||||
|
end
|
||||||
|
end
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |