sprite 0.1.0 → 0.1.1
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +144 -61
- data/Rakefile +4 -0
- data/VERSION +1 -1
- data/bin/sprite +8 -0
- data/lib/sprite/builder.rb +142 -0
- data/lib/sprite/image_combiner.rb +30 -0
- data/lib/sprite/runner.rb +30 -0
- data/lib/sprite.rb +20 -4
- data/rails/init.rb +2 -0
- data/sprite.gemspec +9 -13
- data/tasks/sprite_tasks.rake +7 -2
- metadata +12 -15
- data/config/css_sprite_example_config.yml +0 -24
- data/lib/sprite/sprite.rb +0 -84
- data/spec/resources/good_topic.gif +0 -0
- data/spec/resources/mid_topic.gif +0 -0
- data/spec/spec.opts +0 -8
- data/spec/spec_helper.rb +0 -6
- data/spec/sprite_spec.rb +0 -36
data/README.md
CHANGED
@@ -1,14 +1,12 @@
|
|
1
1
|
# sprite #
|
2
2
|
|
3
|
-
`sprite` is a gem that helps generate css sprite images automagically. It's aim is to support all web frameworks (Merb/Rails/Sinatra)
|
3
|
+
`sprite` is a gem that helps generate css sprite images automagically. It's aim is to support all web frameworks (Merb/Rails/Sinatra), and have extensible output generator. By default, it supports CSS and SASS output (via mixins).
|
4
4
|
|
5
|
-
|
5
|
+
## INSTALL ##
|
6
6
|
|
7
|
-
|
7
|
+
### Install the `rmagick` gem ###
|
8
8
|
|
9
|
-
|
10
|
-
|
11
|
-
install rmagick gem first:
|
9
|
+
`sprite` currently requires the rmagick gem. to install it, use
|
12
10
|
|
13
11
|
gem install rmagick
|
14
12
|
|
@@ -19,93 +17,178 @@ if you have any problems with the rmagick gem, install imagemagick via macports
|
|
19
17
|
|
20
18
|
or via installer: http://github.com/maddox/magick-installer/tree/master
|
21
19
|
|
22
|
-
|
20
|
+
### Install the `sprite` gem ###
|
21
|
+
|
22
|
+
Install the `sprite` gem from gemcutter
|
23
23
|
|
24
24
|
gem sources -a http://gemcutter.org
|
25
|
-
gem install
|
25
|
+
gem install sprite
|
26
26
|
|
27
|
-
### if using
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
### if using rails ###
|
27
|
+
### if using Merb ###
|
28
|
+
|
29
|
+
With Merb 1.1 and Bundler, just add the line `gem 'sprite'` your ./Gemfile and then run `gem bundle`
|
32
30
|
|
33
|
-
|
31
|
+
### if using Rails ###
|
34
32
|
|
35
|
-
|
33
|
+
add to environment.rb
|
36
34
|
|
37
35
|
config.gem "sprite"
|
38
36
|
|
39
|
-
|
37
|
+
or install as a plugin
|
40
38
|
|
41
|
-
|
39
|
+
script/plugin install git://github.com/gistinc/sprite.git
|
42
40
|
|
43
|
-
|
41
|
+
## USAGE ##
|
44
42
|
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
- mid_topic.gif
|
49
|
-
- unread_topic.gif
|
50
|
-
- sticky_topic.gif
|
51
|
-
orient: vertical # composite gravity, vertical or horizontal
|
52
|
-
span: 5 # span of space between two images
|
43
|
+
if installed as a gem, at your root project folder you can just run
|
44
|
+
|
45
|
+
sprite
|
53
46
|
|
54
|
-
|
55
|
-
`sources` is a list of source image filenames what want to composite. They are parsed by <code>Dir.glob</code>.
|
56
|
-
`orient` defines the composite gravity type, horizontal or vertical. Default is 'vertical'.
|
57
|
-
`span` defines the span between two images. Default is 0.
|
47
|
+
if you would rather not install the gem, you can also use it with rake
|
58
48
|
|
59
|
-
|
49
|
+
rake sprite:build
|
60
50
|
|
61
|
-
***
|
62
51
|
|
63
|
-
|
52
|
+
### Intelligent Defaults ###
|
64
53
|
|
65
|
-
|
54
|
+
Without having to configure anything, `sprite` will allow you to easily generate sprites based on a couple default folder settings we give you right off the bat.
|
66
55
|
|
67
|
-
|
56
|
+
For example, given you have the following setup:
|
57
|
+
|
58
|
+
public/
|
59
|
+
images/
|
60
|
+
sprites/
|
61
|
+
black-icons/
|
62
|
+
stop.png
|
63
|
+
go.png
|
64
|
+
back.png
|
65
|
+
forward.png
|
66
|
+
|
67
|
+
weather/
|
68
|
+
sunny.gif
|
69
|
+
rainy.gif
|
70
|
+
cloudy.gif
|
71
|
+
|
72
|
+
Running `sprite` with no configuration file will generate the following new files:
|
73
|
+
|
74
|
+
public/
|
75
|
+
stylesheets/
|
76
|
+
sprites.css
|
77
|
+
images/
|
78
|
+
sprites/
|
79
|
+
black-icons.png
|
80
|
+
weather.png
|
68
81
|
|
69
|
-
|
82
|
+
Any folders within `public/images/sprites/` will get compressed into a merged image file at the same
|
83
|
+
location. Then `sprites.css` will get generated in the stylesheets folder with all the class definitions for
|
84
|
+
these files. Just add a link to `sprites.css` into your html <head> and you're ready to go!
|
70
85
|
|
71
|
-
|
86
|
+
|
87
|
+
## CONFIGURATION ##
|
88
|
+
|
89
|
+
Configuration of `sprite` is done via `config/sprite.yml`. It allows you to set sprite configuration options, and fine tune exactly which sprites get generated where.
|
72
90
|
|
73
|
-
|
91
|
+
* `config:` section defines all the global properties for sprite generation. Such as how it generates the styles, where it looks for images, where it writes it output file to, and what image file format it uses by default
|
92
|
+
- `style:` defines how the style rules are outputted. built in options are `css`, `sass`, and `sass_mixin`. (defaults to `css`)
|
93
|
+
- `output_path:` defines the file path where your style settings get written (defaults to `public/stylesheets/sprites`). the file extension not needed as it will be set based on the `style:` setting
|
94
|
+
- `image_output_path:` defines the folder path where the combined sprite images files are written (defaults to `public/images/sprites/`)
|
95
|
+
- `source_path:` defines the folder where source image files are read from (defaults to `public/images/`)
|
96
|
+
- `sprites_class:` defines the class name that gets added to all sprite stylesheet rules (defaults to `sprites`)
|
97
|
+
- `default_format:` defines the default file image format of the generated files. (defaults to `png`)
|
98
|
+
- `class_separator:` used to generated the class name by separating the image name and sprite name (defaults to `-`)
|
99
|
+
|
100
|
+
* `images:` section provides an array of configurations which define which image files are built, and where they get their sprites from. each image setup provides the following config options:
|
101
|
+
- `name:` name of image (required)
|
102
|
+
- `sources:` defines a list of source image filenames to build the target image from (required). They are parsed by <code>Dir.glob</code>
|
103
|
+
- `align:` defines the composite gravity type, horizontal or vertical. (defaults to `vertical`)
|
104
|
+
- `spaced_by:` spacing (in pixels) between the combined images. (defaults to `0`)
|
105
|
+
- `format:` define what image file format gets created (optional, uses `default_format` setting if not set)
|
106
|
+
|
107
|
+
you can define any number of destination image files.
|
108
|
+
|
109
|
+
### Sample Configuration `config/sprite.yml` ###
|
74
110
|
|
75
|
-
the
|
111
|
+
# defines the base configuration options (file paths, etc, default style, etc)
|
76
112
|
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
113
|
+
config:
|
114
|
+
style: css
|
115
|
+
output_path: public/sass/mixins/sprites.sass
|
116
|
+
image_output_path: public/images/sprites/
|
117
|
+
source_path: public/images/
|
118
|
+
sprites_class: 'sprites'
|
119
|
+
class_separator: '-'
|
120
|
+
default_format: png
|
121
|
+
|
122
|
+
# defines what sprite collections get created
|
123
|
+
images:
|
124
|
+
|
125
|
+
# creates a public/images/sprites/blue_stars.png image with 4 sprites in it
|
126
|
+
- name: blue_stars
|
127
|
+
format: png
|
128
|
+
align: horizontal
|
129
|
+
spaced_by: 50
|
130
|
+
sources:
|
131
|
+
- icons/blue-stars/small.png
|
132
|
+
- icons/blue-stars/medium.png
|
133
|
+
- icons/blue-stars/large.png
|
134
|
+
- icons/blue-stars/xlarge.png
|
135
|
+
|
136
|
+
# creates a public/images/sprites/green-stars.jpg image with
|
137
|
+
# all the gif files contained within /images/icons/green-stars/
|
138
|
+
- name: green_stars
|
139
|
+
format: png
|
140
|
+
align: vertical
|
141
|
+
spaced_by: 50
|
142
|
+
sources:
|
143
|
+
- icons/green-stars/*.gif
|
144
|
+
|
145
|
+
### Style Settings ###
|
146
|
+
|
147
|
+
By default, it will use with `style: css` and generate the file at `public/stylesheets/sprites.css`
|
148
|
+
|
149
|
+
.sprites.blue-stars-small {
|
150
|
+
background: url('/images/icons/blue-stars/small.png') no-repeat 0px 0px;
|
151
|
+
width: 12px;
|
152
|
+
height: 6px;
|
81
153
|
}
|
82
|
-
.
|
83
|
-
|
84
|
-
|
85
|
-
|
154
|
+
.sprites.blue-stars-medium {
|
155
|
+
background: url('/images/icons/blue-stars/medium.png') no-repeat 0px 6px;
|
156
|
+
width: 30px;
|
157
|
+
height: 15px;
|
86
158
|
}
|
87
|
-
.
|
88
|
-
|
89
|
-
|
90
|
-
|
159
|
+
.sprites.blue-stars-large {
|
160
|
+
background: url('/images/icons/blue-stars/large.png') no-repeat 0px 21px;
|
161
|
+
width: 60px;
|
162
|
+
height: 30px;
|
91
163
|
}
|
92
|
-
.
|
93
|
-
|
94
|
-
|
95
|
-
|
164
|
+
.sprites.blue-stars-xlarge {
|
165
|
+
background: url('/images/icons/blue-stars/xlarge.png') no-repeat 0px 96px;
|
166
|
+
width: 100px;
|
167
|
+
height: 75px;
|
96
168
|
}
|
97
169
|
|
170
|
+
We also support mixin syntax via `style: sass_mixin`. If set, sprite will only generate a yml with your specific sprite configurations. It then provides a SASS mixin which you can use in order to mix in these sprites anywhere within your SASS stylesheets.
|
171
|
+
|
172
|
+
// you can then use your sprite like this
|
173
|
+
.largebluestar
|
174
|
+
+sprite("blue-stars", "large")
|
175
|
+
|
176
|
+
.mysmallbluestar
|
177
|
+
+sprite("blue-stars", "small")
|
178
|
+
|
179
|
+
## ABOUT `sprite` ##
|
98
180
|
|
99
|
-
|
181
|
+
`sprite` was originally based off of Richard Huang's excellent Rails plugin: [css_sprite](http://github.com/flyerhzm/css_sprite)
|
100
182
|
|
101
|
-
|
183
|
+
Since then it's been rebuilt (with some reuse of the image generation code) to be a general purpose ruby executable, with hooks for merb/rails/sinatra
|
102
184
|
|
103
|
-
merbjedi - reorganized as a general purpose ruby plugin for merb/rails/sinatra/
|
104
185
|
|
105
|
-
|
186
|
+
## LICENSE ##
|
106
187
|
|
188
|
+
Released under the MIT License
|
107
189
|
|
108
|
-
|
190
|
+
## COPYRIGHT ##
|
109
191
|
|
192
|
+
Copyright (c) 2009 Gist
|
110
193
|
|
111
|
-
Copyright (c) 2009 [Richard Huang
|
194
|
+
Original Codebase Copyright (c) 2009 [Richard Huang]
|
data/Rakefile
CHANGED
@@ -18,6 +18,10 @@ Jeweler::Tasks.new do |gemspec|
|
|
18
18
|
gemspec.homepage = "http://github.com/merbjedi/sprite"
|
19
19
|
gemspec.authors = ["Jacques Crocker", "Richard Huang"]
|
20
20
|
gemspec.files.exclude '.gitignore'
|
21
|
+
|
22
|
+
# removing test files and specs from the gem to save space
|
23
|
+
gemspec.files -= Dir.glob("spec/**/*")
|
24
|
+
gemspec.test_files = []
|
21
25
|
end
|
22
26
|
Jeweler::GemcutterTasks.new
|
23
27
|
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
0.1.
|
1
|
+
0.1.1
|
data/bin/sprite
ADDED
@@ -0,0 +1,8 @@
|
|
1
|
+
#!/usr/bin/env ruby
|
2
|
+
# The compass command line utility
|
3
|
+
|
4
|
+
require File.expand_path(File.join(File.dirname(__FILE__), '..', 'lib', 'sprite'))
|
5
|
+
require File.expand_path(File.join(File.dirname(__FILE__), '..', 'lib', 'sprite', 'runner'))
|
6
|
+
|
7
|
+
command = Sprite::Runner.new(ARGV)
|
8
|
+
exit command.run!
|
@@ -0,0 +1,142 @@
|
|
1
|
+
require 'fileutils'
|
2
|
+
module Sprite
|
3
|
+
class Builder
|
4
|
+
DEFAULT_CONFIG_PATH = 'config/sprite.yml'
|
5
|
+
|
6
|
+
attr_reader :config
|
7
|
+
attr_reader :images
|
8
|
+
attr_reader :output
|
9
|
+
|
10
|
+
def self.from_config(path = nil)
|
11
|
+
|
12
|
+
results = {}
|
13
|
+
config_path = File.join(Sprite.root, path || DEFAULT_CONFIG_PATH)
|
14
|
+
begin
|
15
|
+
results = File.open(config_path) {|f| YAML::load(f)} || {}
|
16
|
+
rescue => e
|
17
|
+
puts "Unable to read sprite config: #{Sprite.root+"/"+config_path}"
|
18
|
+
puts e.to_s
|
19
|
+
end
|
20
|
+
|
21
|
+
new(results["config"], results["images"])
|
22
|
+
end
|
23
|
+
|
24
|
+
def initialize(config = nil, images = nil)
|
25
|
+
@config = config || {}
|
26
|
+
set_config_defaults
|
27
|
+
|
28
|
+
@images = images || []
|
29
|
+
expand_image_paths
|
30
|
+
|
31
|
+
# freeze hashes
|
32
|
+
@config = @config.dup.freeze
|
33
|
+
@images = @images.dup.freeze
|
34
|
+
|
35
|
+
# initialize output
|
36
|
+
@output = {}
|
37
|
+
end
|
38
|
+
|
39
|
+
def build
|
40
|
+
@output = {}
|
41
|
+
|
42
|
+
if images.size > 0
|
43
|
+
# create images
|
44
|
+
images.each do |image|
|
45
|
+
output_image(image)
|
46
|
+
end
|
47
|
+
|
48
|
+
# write css
|
49
|
+
output_file
|
50
|
+
end
|
51
|
+
end
|
52
|
+
|
53
|
+
def output_image(image)
|
54
|
+
results = []
|
55
|
+
sources = image['sources'].to_a
|
56
|
+
return unless sources.length > 0
|
57
|
+
|
58
|
+
name = image['name']
|
59
|
+
spaced_by = image['spaced_by'] || 0
|
60
|
+
|
61
|
+
combiner = ImageCombiner.new
|
62
|
+
|
63
|
+
dest_image = combiner.get_image(sources.shift)
|
64
|
+
results << combiner.image_properties(dest_image).merge(:x => 0, :y => 0)
|
65
|
+
sources.each do |source|
|
66
|
+
source_image = combiner.get_image(source)
|
67
|
+
if image['align'].to_s == 'horizontal'
|
68
|
+
x = dest_image.columns + spaced_by
|
69
|
+
y = 0
|
70
|
+
else
|
71
|
+
x = 0
|
72
|
+
y = dest_image.rows + spaced_by
|
73
|
+
end
|
74
|
+
results << combiner.image_properties(source_image).merge(:x => x, :y => y, :group => name)
|
75
|
+
dest_image = combiner.composite_images(dest_image, source_image, x, y)
|
76
|
+
end
|
77
|
+
@output[name] = results
|
78
|
+
|
79
|
+
# set up path
|
80
|
+
path = image_path(name, image['format'])
|
81
|
+
FileUtils.mkdir_p(File.dirname(path))
|
82
|
+
|
83
|
+
# write sprite image file to disk
|
84
|
+
dest_image.write(path)
|
85
|
+
end
|
86
|
+
|
87
|
+
def output_file
|
88
|
+
# set up path
|
89
|
+
path = output_path("css")
|
90
|
+
FileUtils.mkdir_p(File.dirname(path))
|
91
|
+
|
92
|
+
# set up class_name to append to each rule
|
93
|
+
sprites_class = config['sprites_class'] ? ".#{config['sprites_class']}" : ""
|
94
|
+
|
95
|
+
# write stylesheet file to disk
|
96
|
+
File.open(path, 'w') do |f|
|
97
|
+
@output.each do |dest, results|
|
98
|
+
results.each do |result|
|
99
|
+
f.puts "#{sprites_class}.#{result[:group]}#{config['class_separator']}#{result[:name]} {"
|
100
|
+
f.puts " background: url('/images/#{dest}') no-repeat #{result[:x]}px #{result[:y]}px;"
|
101
|
+
f.puts " width: #{result[:width]}px;"
|
102
|
+
f.puts " height: #{result[:height]}px;"
|
103
|
+
f.puts "}"
|
104
|
+
end
|
105
|
+
end
|
106
|
+
end
|
107
|
+
end
|
108
|
+
|
109
|
+
protected
|
110
|
+
|
111
|
+
def output_path(file_ext)
|
112
|
+
"#{Sprite.root}/#{config['output_path']}.#{file_ext}"
|
113
|
+
end
|
114
|
+
|
115
|
+
def image_path(name, format)
|
116
|
+
"#{Sprite.root}/#{config['image_output_path']}#{name}.#{format}"
|
117
|
+
end
|
118
|
+
|
119
|
+
# sets all the default values on the config
|
120
|
+
def set_config_defaults
|
121
|
+
@config['style'] ||= 'css'
|
122
|
+
@config['output_path'] ||= 'public/stylesheets/sprites'
|
123
|
+
@config['image_output_path'] ||= 'public/images/sprites/'
|
124
|
+
@config['source_path'] ||= 'public/images/'
|
125
|
+
@config['default_format'] ||= 'png'
|
126
|
+
@config['class_separator'] ||= '-'
|
127
|
+
@config["sprites_class"] ||= 'sprites'
|
128
|
+
end
|
129
|
+
|
130
|
+
# expands out sources, taking the Glob paths and turning them into separate entries in the array
|
131
|
+
def expand_image_paths
|
132
|
+
# cycle through image sources and expand out globs
|
133
|
+
@images.each do |image|
|
134
|
+
# expand out all the globs
|
135
|
+
image['sources'] = image['sources'].to_a.map{ |source|
|
136
|
+
Dir.glob(File.join(Sprite.root, @config['source_path'], source))
|
137
|
+
}.flatten.compact
|
138
|
+
end
|
139
|
+
end
|
140
|
+
|
141
|
+
end
|
142
|
+
end
|
@@ -0,0 +1,30 @@
|
|
1
|
+
module Sprite
|
2
|
+
class ImageCombiner
|
3
|
+
def initialize
|
4
|
+
# avoid loading rmagick till the last possible moment
|
5
|
+
require 'rmagick'
|
6
|
+
end
|
7
|
+
|
8
|
+
def composite_images(dest_image, src_image, x, y)
|
9
|
+
width = [src_image.columns + x, dest_image.columns].max
|
10
|
+
height = [src_image.rows + y, dest_image.rows].max
|
11
|
+
image = Magick::Image.new(width, height)
|
12
|
+
image.opacity = Magick::MaxRGB
|
13
|
+
|
14
|
+
image.composite!(dest_image, 0, 0, Magick::OverCompositeOp)
|
15
|
+
image.composite!(src_image, x, y, Magick::OverCompositeOp)
|
16
|
+
image
|
17
|
+
end
|
18
|
+
|
19
|
+
|
20
|
+
# Image Utility Methods
|
21
|
+
def get_image(image_filename)
|
22
|
+
image = Magick::Image::read(image_filename).first
|
23
|
+
end
|
24
|
+
|
25
|
+
def image_properties(image)
|
26
|
+
{:name => File.basename(image.filename).split('.')[0], :width => image.columns, :height => image.rows}
|
27
|
+
end
|
28
|
+
|
29
|
+
end
|
30
|
+
end
|
@@ -0,0 +1,30 @@
|
|
1
|
+
module Sprite
|
2
|
+
class Runner
|
3
|
+
|
4
|
+
attr_accessor :options
|
5
|
+
def initialize(args)
|
6
|
+
self.options = set_options(args)
|
7
|
+
end
|
8
|
+
|
9
|
+
def set_options(args)
|
10
|
+
opts = {}
|
11
|
+
# TODO
|
12
|
+
# edit options with passed in args
|
13
|
+
opts
|
14
|
+
end
|
15
|
+
|
16
|
+
# run sprite creator
|
17
|
+
def run!
|
18
|
+
begin
|
19
|
+
Sprite::Builder.from_config(options[:path]).build
|
20
|
+
# rescue Exception => e
|
21
|
+
# # catch errors
|
22
|
+
# puts "ERROR"
|
23
|
+
# puts e
|
24
|
+
# return 1
|
25
|
+
end
|
26
|
+
0
|
27
|
+
end
|
28
|
+
|
29
|
+
end
|
30
|
+
end
|
data/lib/sprite.rb
CHANGED
@@ -1,6 +1,22 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
1
|
+
module Sprite
|
2
|
+
|
3
|
+
# provides the root directory to use when reading and writing files
|
4
|
+
def self.root
|
5
|
+
@root ||= nil
|
6
|
+
|
7
|
+
# set the root to the framework setting (if not already set)
|
8
|
+
@root ||= begin
|
9
|
+
if defined?(Rails)
|
10
|
+
Rails.root
|
11
|
+
elsif defined?(Merb)
|
12
|
+
Merb.root
|
13
|
+
else
|
14
|
+
"."
|
15
|
+
end
|
16
|
+
end
|
17
|
+
@root
|
18
|
+
end
|
5
19
|
end
|
6
20
|
|
21
|
+
require 'sprite/builder'
|
22
|
+
require 'sprite/image_combiner'
|
data/rails/init.rb
ADDED
data/sprite.gemspec
CHANGED
@@ -5,13 +5,15 @@
|
|
5
5
|
|
6
6
|
Gem::Specification.new do |s|
|
7
7
|
s.name = %q{sprite}
|
8
|
-
s.version = "0.1.
|
8
|
+
s.version = "0.1.1"
|
9
9
|
|
10
10
|
s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
|
11
11
|
s.authors = ["Jacques Crocker", "Richard Huang"]
|
12
|
-
s.date = %q{2009-11-
|
12
|
+
s.date = %q{2009-11-17}
|
13
|
+
s.default_executable = %q{sprite}
|
13
14
|
s.description = %q{sprite is a rails/merb plugin that generates sprites for css, sass}
|
14
15
|
s.email = %q{merbjedi@gmail.com}
|
16
|
+
s.executables = ["sprite"]
|
15
17
|
s.extra_rdoc_files = [
|
16
18
|
"README.md"
|
17
19
|
]
|
@@ -20,14 +22,12 @@ Gem::Specification.new do |s|
|
|
20
22
|
"README.md",
|
21
23
|
"Rakefile",
|
22
24
|
"VERSION",
|
23
|
-
"
|
25
|
+
"bin/sprite",
|
24
26
|
"lib/sprite.rb",
|
25
|
-
"lib/sprite/
|
26
|
-
"
|
27
|
-
"
|
28
|
-
"
|
29
|
-
"spec/spec_helper.rb",
|
30
|
-
"spec/sprite_spec.rb",
|
27
|
+
"lib/sprite/builder.rb",
|
28
|
+
"lib/sprite/image_combiner.rb",
|
29
|
+
"lib/sprite/runner.rb",
|
30
|
+
"rails/init.rb",
|
31
31
|
"sprite.gemspec",
|
32
32
|
"tasks/sprite_tasks.rake"
|
33
33
|
]
|
@@ -36,10 +36,6 @@ Gem::Specification.new do |s|
|
|
36
36
|
s.require_paths = ["lib"]
|
37
37
|
s.rubygems_version = %q{1.3.5}
|
38
38
|
s.summary = %q{generate your css sprites automagically}
|
39
|
-
s.test_files = [
|
40
|
-
"spec/spec_helper.rb",
|
41
|
-
"spec/sprite_spec.rb"
|
42
|
-
]
|
43
39
|
|
44
40
|
if s.respond_to? :specification_version then
|
45
41
|
current_version = Gem::Specification::CURRENT_SPECIFICATION_VERSION
|
data/tasks/sprite_tasks.rake
CHANGED
@@ -1,8 +1,13 @@
|
|
1
|
+
require File.join(File.dirname(__FILE__), '../lib/sprite/sprite.rb')
|
1
2
|
|
2
3
|
namespace :sprite do
|
3
|
-
desc "
|
4
|
+
desc "build sprite images based on config/sprite.yml"
|
4
5
|
task :build do
|
5
|
-
require File.join(File.dirname(__FILE__), '../lib/sprite/sprite.rb')
|
6
6
|
Sprite.new.build
|
7
7
|
end
|
8
|
+
|
9
|
+
task :list => [:build] do
|
10
|
+
# TODO
|
11
|
+
# list all the currently configured sprites
|
12
|
+
end
|
8
13
|
end
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: sprite
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Jacques Crocker
|
@@ -10,14 +10,14 @@ autorequire:
|
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
12
|
|
13
|
-
date: 2009-11-
|
14
|
-
default_executable:
|
13
|
+
date: 2009-11-17 00:00:00 -08:00
|
14
|
+
default_executable: sprite
|
15
15
|
dependencies: []
|
16
16
|
|
17
17
|
description: sprite is a rails/merb plugin that generates sprites for css, sass
|
18
18
|
email: merbjedi@gmail.com
|
19
|
-
executables:
|
20
|
-
|
19
|
+
executables:
|
20
|
+
- sprite
|
21
21
|
extensions: []
|
22
22
|
|
23
23
|
extra_rdoc_files:
|
@@ -27,14 +27,12 @@ files:
|
|
27
27
|
- README.md
|
28
28
|
- Rakefile
|
29
29
|
- VERSION
|
30
|
-
-
|
30
|
+
- bin/sprite
|
31
31
|
- lib/sprite.rb
|
32
|
-
- lib/sprite/
|
33
|
-
-
|
34
|
-
-
|
35
|
-
-
|
36
|
-
- spec/spec_helper.rb
|
37
|
-
- spec/sprite_spec.rb
|
32
|
+
- lib/sprite/builder.rb
|
33
|
+
- lib/sprite/image_combiner.rb
|
34
|
+
- lib/sprite/runner.rb
|
35
|
+
- rails/init.rb
|
38
36
|
- sprite.gemspec
|
39
37
|
- tasks/sprite_tasks.rake
|
40
38
|
has_rdoc: true
|
@@ -65,6 +63,5 @@ rubygems_version: 1.3.5
|
|
65
63
|
signing_key:
|
66
64
|
specification_version: 3
|
67
65
|
summary: generate your css sprites automagically
|
68
|
-
test_files:
|
69
|
-
|
70
|
-
- spec/sprite_spec.rb
|
66
|
+
test_files: []
|
67
|
+
|
@@ -1,24 +0,0 @@
|
|
1
|
-
config:
|
2
|
-
base_directory: public/images
|
3
|
-
css_output: tmp/css_sprite.css
|
4
|
-
|
5
|
-
images:
|
6
|
-
- description: Stars with transparency
|
7
|
-
sources:
|
8
|
-
- sc-mcstars0.png
|
9
|
-
- sc-mcstars1.png
|
10
|
-
- sc-mcstars2.png
|
11
|
-
- sc-mcstars3.png
|
12
|
-
target: stars_png_with_transparency.png
|
13
|
-
align: horizontal
|
14
|
-
spaced_by: 50
|
15
|
-
|
16
|
-
- description: Stars as JPEG
|
17
|
-
sources:
|
18
|
-
- sc-0.jpg
|
19
|
-
- sc-1.jpg
|
20
|
-
- sc-2.jpg
|
21
|
-
- sc-3.jpg
|
22
|
-
target: stars_as_jpg.jpg
|
23
|
-
align: vertical
|
24
|
-
spaced_by: 50
|
data/lib/sprite/sprite.rb
DELETED
@@ -1,84 +0,0 @@
|
|
1
|
-
require 'RMagick'
|
2
|
-
|
3
|
-
class Sprite
|
4
|
-
CONFIG_PATH = RAILS_ROOT + '/config/'
|
5
|
-
DEFAULT_IMAGE_PATH = RAILS_ROOT + '/public/images/'
|
6
|
-
CSS_OUTPUT = RAILS_ROOT + '/tmp/css_sprite.css'
|
7
|
-
|
8
|
-
def initialize
|
9
|
-
@image_path = DEFAULT_IMAGE_PATH
|
10
|
-
@config_files = Dir.glob("#{CONFIG_PATH}/css_sprite*.yml")
|
11
|
-
end
|
12
|
-
|
13
|
-
def build
|
14
|
-
@config_files.each do |config_file|
|
15
|
-
@output = {}
|
16
|
-
sprite_config = File.open(config_file) {|f| YAML::load(f)}
|
17
|
-
@image_path = (sprite_config['config']['base_directory'])?RAILS_ROOT+"/"+sprite_config['config']['base_directory']+"/":DEFAULT_IMAGE_PATH
|
18
|
-
@css_output = (sprite_config['config']['css_output'])?RAILS_ROOT+"/"+sprite_config['config']['css_output']:CSS_OUTPUT
|
19
|
-
sprite_config['images'].each do |configuration|
|
20
|
-
output_image(configuration)
|
21
|
-
end
|
22
|
-
output_css(sprite_config)
|
23
|
-
end
|
24
|
-
end
|
25
|
-
|
26
|
-
def output_image(configuration)
|
27
|
-
results = []
|
28
|
-
sources = configuration['sources'].collect {|source| Dir.glob(@image_path+source)}.flatten
|
29
|
-
dest = configuration['target'] || sources[0].gsub(/\./,"_sprite.")
|
30
|
-
spaced_by = configuration['spaced_by'] || 0
|
31
|
-
dest_image = get_image(sources.shift)
|
32
|
-
results << image_properties(dest_image).merge(:x => 0, :y => 0)
|
33
|
-
sources.each do |source|
|
34
|
-
source_image = get_image(source)
|
35
|
-
if configuration['align'] == 'horizontal'
|
36
|
-
gravity = Magick::EastGravity
|
37
|
-
x = dest_image.columns + spaced_by
|
38
|
-
y = 0
|
39
|
-
else
|
40
|
-
gravity = Magick::SouthGravity
|
41
|
-
x = 0
|
42
|
-
y = dest_image.rows + spaced_by
|
43
|
-
end
|
44
|
-
results << image_properties(source_image).merge(:x => x, :y => y)
|
45
|
-
dest_image = composite_images(dest_image, source_image, x, y)
|
46
|
-
end
|
47
|
-
@output[dest] = results
|
48
|
-
dest_image.write(@image_path + dest)
|
49
|
-
end
|
50
|
-
|
51
|
-
def output_css(configuration)
|
52
|
-
File.open(@css_output, 'w') do |f|
|
53
|
-
@output.each do |dest, results|
|
54
|
-
results.each do |result|
|
55
|
-
f.puts ".#{result[:name]}"
|
56
|
-
f.puts "\tbackground: url('/images/#{dest}') no-repeat #{result[:x]}px #{result[:y]}px;"
|
57
|
-
f.puts "\twidth: #{result[:width]}px;"
|
58
|
-
f.puts "\theight: #{result[:height]}px;"
|
59
|
-
f.puts ""
|
60
|
-
end
|
61
|
-
end
|
62
|
-
end
|
63
|
-
end
|
64
|
-
|
65
|
-
def composite_images(dest_image, src_image, x, y)
|
66
|
-
width = [src_image.columns + x, dest_image.columns].max
|
67
|
-
height = [src_image.rows + y, dest_image.rows].max
|
68
|
-
image = Magick::Image.new(width, height)
|
69
|
-
image.opacity = Magick::MaxRGB
|
70
|
-
|
71
|
-
image.composite!(dest_image, 0, 0, Magick::OverCompositeOp)
|
72
|
-
image.composite!(src_image, x, y, Magick::OverCompositeOp)
|
73
|
-
image
|
74
|
-
end
|
75
|
-
|
76
|
-
def get_image(image_filename)
|
77
|
-
image = Magick::Image::read(image_filename).first
|
78
|
-
end
|
79
|
-
|
80
|
-
def image_properties(image)
|
81
|
-
{:name => File.basename(image.filename).split('.')[0], :width => image.columns, :height => image.rows}
|
82
|
-
end
|
83
|
-
|
84
|
-
end
|
Binary file
|
Binary file
|
data/spec/spec.opts
DELETED
data/spec/spec_helper.rb
DELETED
data/spec/sprite_spec.rb
DELETED
@@ -1,36 +0,0 @@
|
|
1
|
-
require File.dirname(__FILE__) + '/spec_helper'
|
2
|
-
|
3
|
-
describe Sprite do
|
4
|
-
before(:all) do
|
5
|
-
@sprite = Sprite.new
|
6
|
-
end
|
7
|
-
|
8
|
-
context "get_image" do
|
9
|
-
it "should get a image" do
|
10
|
-
@sprite.get_image(File.join(File.dirname(__FILE__), 'resources/good_topic.gif')).class.should == Magick::Image
|
11
|
-
end
|
12
|
-
end
|
13
|
-
|
14
|
-
context "image_properties" do
|
15
|
-
it "should get image properties" do
|
16
|
-
image = @sprite.get_image(File.join(File.dirname(__FILE__), 'resources/good_topic.gif'))
|
17
|
-
@sprite.image_properties(image).should == {:name => 'good_topic', :width => 20, :height => 19}
|
18
|
-
end
|
19
|
-
end
|
20
|
-
|
21
|
-
context "composite_images" do
|
22
|
-
it "should composite two images into one horizontally" do
|
23
|
-
image1 = @sprite.get_image(File.join(File.dirname(__FILE__), 'resources/good_topic.gif'))
|
24
|
-
image2 = @sprite.get_image(File.join(File.dirname(__FILE__), 'resources/mid_topic.gif'))
|
25
|
-
image = @sprite.composite_images(image1, image2, image1.columns, 0)
|
26
|
-
@sprite.image_properties(image).should == {:name => nil, :width => 40, :height => 19}
|
27
|
-
end
|
28
|
-
|
29
|
-
it "should composite two images into one verically" do
|
30
|
-
image1 = @sprite.get_image(File.join(File.dirname(__FILE__), 'resources/good_topic.gif'))
|
31
|
-
image2 = @sprite.get_image(File.join(File.dirname(__FILE__), 'resources/mid_topic.gif'))
|
32
|
-
image = @sprite.composite_images(image1, image2, 0, image1.rows)
|
33
|
-
@sprite.image_properties(image).should == {:name => nil, :width => 20, :height => 38}
|
34
|
-
end
|
35
|
-
end
|
36
|
-
end
|