sinatra-css 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.document +5 -0
- data/.gitignore +23 -0
- data/CHANGES +4 -0
- data/LICENSE +20 -0
- data/README.rdoc +256 -0
- data/Rakefile +92 -0
- data/VERSION +1 -0
- data/lib/sinatra/css.rb +522 -0
- data/sinatra-css.gemspec +67 -0
- data/spec/fixtures/app/views/css/screen.rcss +4 -0
- data/spec/fixtures/public/insert.css +1 -0
- data/spec/fixtures/public/inserted-from-path.css +1 -0
- data/spec/sinatra/css_spec.rb +314 -0
- data/spec/spec_helper.rb +60 -0
- metadata +144 -0
data/.document
ADDED
data/.gitignore
ADDED
data/CHANGES
ADDED
data/LICENSE
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
Copyright (c) 2009 kematzy
|
|
2
|
+
|
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
|
4
|
+
a copy of this software and associated documentation files (the
|
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
|
9
|
+
the following conditions:
|
|
10
|
+
|
|
11
|
+
The above copyright notice and this permission notice shall be
|
|
12
|
+
included in all copies or substantial portions of the Software.
|
|
13
|
+
|
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.rdoc
ADDED
|
@@ -0,0 +1,256 @@
|
|
|
1
|
+
= Sinatra::CSS
|
|
2
|
+
|
|
3
|
+
A Sinatra Extension that makes working with CSS easy.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
== Installation
|
|
8
|
+
|
|
9
|
+
# Add RubyGems.org (former Gemcutter) to your RubyGems sources
|
|
10
|
+
$ gem sources -a http://rubygems.org
|
|
11
|
+
|
|
12
|
+
$ (sudo)? gem install sinatra-css
|
|
13
|
+
|
|
14
|
+
== Dependencies
|
|
15
|
+
|
|
16
|
+
This Gem depends upon the following:
|
|
17
|
+
|
|
18
|
+
=== Runtime:
|
|
19
|
+
|
|
20
|
+
* sinatra ( >= 1.0.a )
|
|
21
|
+
* sinatra-tags[http://github.com/kematzy/sinatra-tags] ( >= 0.1.0 )
|
|
22
|
+
* sinatra-outputbuffer[http://github.com/kematzy/sinatra-outputbuffer] ( >= 0.1.0 )
|
|
23
|
+
* sinatra-basics[http://github.com/kematzy/sinatra-basics] ( >= 0.5.0 )
|
|
24
|
+
|
|
25
|
+
Optionals:
|
|
26
|
+
|
|
27
|
+
* sinatra-settings[http://github.com/kematzy/sinatra-settings] (>= 0.1.1) # to view default settings in a browser display.
|
|
28
|
+
* sinatra-logger[http://github.com/kematzy/sinatra-logger] (>= 0.1.0) # to capture error messages in the log file.
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
=== Development & Tests:
|
|
32
|
+
|
|
33
|
+
* sinatra-tests (>= 0.1.6)
|
|
34
|
+
* rspec (>= 1.3.0 )
|
|
35
|
+
* rack-test (>= 0.5.3)
|
|
36
|
+
* rspec_hpricot_matchers (>= 0.1.0)
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
== Getting Started
|
|
40
|
+
|
|
41
|
+
To start using Sinatra::CSS, just require and register the extension in your App...
|
|
42
|
+
|
|
43
|
+
require 'sinatra/css'
|
|
44
|
+
|
|
45
|
+
class YourApp < Sinatra::Base
|
|
46
|
+
register(Sinatra::CSS)
|
|
47
|
+
|
|
48
|
+
<snip...>
|
|
49
|
+
|
|
50
|
+
end
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
You then get access to 6 useful helper methods:
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
=== <tt>css()</tt>
|
|
57
|
+
|
|
58
|
+
This method serves two purposes:
|
|
59
|
+
|
|
60
|
+
a) Return a stylesheet <tt><link></tt> tag with the <tt>path</tt> given.
|
|
61
|
+
|
|
62
|
+
css('/css/style.css') # =>
|
|
63
|
+
|
|
64
|
+
<link rel="stylesheet" href="/css/style.css" media="screen" type="text/css" charset="utf-8">
|
|
65
|
+
|
|
66
|
+
css('style.css', :media => :print) # =>
|
|
67
|
+
|
|
68
|
+
<link rel="stylesheet" href="/style.css" media="print" type="text/css" charset="utf-8">
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
b) When passed a *block*, a <tt><style></tt> tag will be created with the yielded block as its contents.
|
|
73
|
+
|
|
74
|
+
css do
|
|
75
|
+
"body {
|
|
76
|
+
color: blue;
|
|
77
|
+
}"
|
|
78
|
+
end
|
|
79
|
+
# =>
|
|
80
|
+
|
|
81
|
+
<style type="text/css" media="screen">
|
|
82
|
+
body { color: blue; }
|
|
83
|
+
</style>
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
=== <tt>css_custom() & css_custom_add()</tt>
|
|
87
|
+
|
|
88
|
+
These two methods works together, like this:
|
|
89
|
+
|
|
90
|
+
First you add the <tt>css_custom()</tt> method to your layout(s) (../views/layout.erb):
|
|
91
|
+
|
|
92
|
+
<html>
|
|
93
|
+
<head>
|
|
94
|
+
<snip...>
|
|
95
|
+
|
|
96
|
+
<%= css_custom %>
|
|
97
|
+
|
|
98
|
+
</head>
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
Then in your views, you can use the <tt>css_custom_add()</tt> method to add custom CSS
|
|
103
|
+
to the page, like this:
|
|
104
|
+
|
|
105
|
+
# in ../views/template.erb
|
|
106
|
+
<%= css_custom_add( "body{color: red;}" ) =>
|
|
107
|
+
|
|
108
|
+
# in ../views/shared/sidebar.erb
|
|
109
|
+
<%= css_custom_add( "#sidebar { background-color: black; }" ) =>
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
Which outputs the following in the <tt><head></tt> element of your page.
|
|
113
|
+
|
|
114
|
+
<html>
|
|
115
|
+
<head>
|
|
116
|
+
<snip...>
|
|
117
|
+
|
|
118
|
+
<style type="text/css" media="screen">
|
|
119
|
+
body { color: red; }
|
|
120
|
+
#sidebar { background-color: black; }
|
|
121
|
+
/* ...and more custom CSS */
|
|
122
|
+
</style>
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
This functionality makes it very easy to add CSS overides or page specific CSS to any page,
|
|
126
|
+
even from within multiple views.
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
=== <tt>css_custom_files() & css_custom_add_file()</tt>
|
|
130
|
+
|
|
131
|
+
These two methods also works together in a similar fashion, like this:
|
|
132
|
+
|
|
133
|
+
First of, add the <tt>css_custom_files()</tt> method to your layout(s) (../views/layout.erb):
|
|
134
|
+
|
|
135
|
+
<html>
|
|
136
|
+
<head>
|
|
137
|
+
<snip...>
|
|
138
|
+
|
|
139
|
+
<%= css_custom_files %>
|
|
140
|
+
|
|
141
|
+
</head>
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
Then in your views, you can use the <tt>css_custom_add_file()</tt> method to add a custom CSS
|
|
145
|
+
file to the page, like this:
|
|
146
|
+
|
|
147
|
+
<%= css_custom_add_file('home') #=>
|
|
148
|
+
|
|
149
|
+
<link href="/home.css" rel="stylesheet" media="screen" type="text/css" charset="utf-8" />
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
The method even accepts an Array consisting of <tt>[ filename, media ]</tt> like this:
|
|
153
|
+
|
|
154
|
+
<%= css_custom_add_file( ['/css/print', :print] ) #=>
|
|
155
|
+
|
|
156
|
+
<link href="/css/print.css" rel="stylesheet" media="print" type="text/css" charset="utf-8" />
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
You can also use the method to embed the styles of a .css file into any part of a page, like this:
|
|
160
|
+
|
|
161
|
+
# NB! path is starting from APP_ROOT/public/
|
|
162
|
+
|
|
163
|
+
css_custom_add_file('home.css',:insert_into_html) #=>
|
|
164
|
+
|
|
165
|
+
<style type="text/css" media="screen">
|
|
166
|
+
/* the contents of ../public/home.css */
|
|
167
|
+
</style>
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
You can even give a file system path to embed the styles of a globaly shared .css file
|
|
171
|
+
outside of your applications path. Providing an easy way to resuse common snippets of code.
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
# NB! make sure the path and .css file works together as a real path.
|
|
175
|
+
|
|
176
|
+
# the :path value should always be a directory without the trailing slash.
|
|
177
|
+
|
|
178
|
+
css_custom_add_file('home.css',:insert_into_html, '/path/2/some/directory')
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
<style type="text/css" media="screen">
|
|
182
|
+
/* the contents of /path/2/some/directory/home.css */
|
|
183
|
+
</style>
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
=== <tt>css_insert_file()</tt>
|
|
188
|
+
|
|
189
|
+
This is a simple convenicence method that takes a path to a CSS file
|
|
190
|
+
and inserts its content straight into the current view, without any enclosing HTML tags.
|
|
191
|
+
|
|
192
|
+
The method depends upon the settings of the <tt>:css_shared_source_files_dir</tt>
|
|
193
|
+
configuration variable defined inside your application.
|
|
194
|
+
By default this is set to <tt>'ENV['HOME']/.alt/css'</tt>.
|
|
195
|
+
|
|
196
|
+
An example of how to use this functionality:
|
|
197
|
+
|
|
198
|
+
# in your app's routes configurations
|
|
199
|
+
|
|
200
|
+
get('/css/screen.css') do
|
|
201
|
+
content_type 'text/css'
|
|
202
|
+
erb('css/screen'.to_sym, :layout => false)
|
|
203
|
+
end
|
|
204
|
+
|
|
205
|
+
|
|
206
|
+
# in views/css/screen.erb
|
|
207
|
+
|
|
208
|
+
<%= css_insert_file('blueprint/grid') %>
|
|
209
|
+
|
|
210
|
+
# => insert the contents of ENV['HOME']/.alt/css/blueprint/grid.css
|
|
211
|
+
|
|
212
|
+
|
|
213
|
+
You can also load and insert local files, ie files in your app's <tt>public/css/</tt> directory
|
|
214
|
+
by adding the <tt>:local</tt> flag to the call.
|
|
215
|
+
|
|
216
|
+
<%= css_insert_file('colors', :local) %>
|
|
217
|
+
|
|
218
|
+
# => insert the contents of /path/2/your/app/public/css/colors.css
|
|
219
|
+
|
|
220
|
+
|
|
221
|
+
|
|
222
|
+
== RTFM
|
|
223
|
+
|
|
224
|
+
If the above is not clear enough, please check the Specs for a better understanding.
|
|
225
|
+
|
|
226
|
+
|
|
227
|
+
== Errors / Bugs
|
|
228
|
+
|
|
229
|
+
If something is not behaving intuitively, it is a bug, and should be reported.
|
|
230
|
+
Report it here: http://github.com/kematzy/sinatra-css/issues
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
== TODOs
|
|
234
|
+
|
|
235
|
+
* Keep it up to date with any changes in Sinatra.
|
|
236
|
+
|
|
237
|
+
* Add bundle functionality from Sinatra::Bundles gem.
|
|
238
|
+
|
|
239
|
+
* Improve the specs a bit and add missing tests.
|
|
240
|
+
|
|
241
|
+
* Any other improvements I or You can think of.
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
== Note on Patches/Pull Requests
|
|
245
|
+
|
|
246
|
+
* Fork the project.
|
|
247
|
+
* Make your feature addition or bug fix.
|
|
248
|
+
* Add tests for it. This is important so I don't break it in a future version unintentionally.
|
|
249
|
+
* Commit, do not mess with rakefile, version, or history.
|
|
250
|
+
* (if you want to have your own version, that is fine but bump version in a commit by itself I can ignore when I pull)
|
|
251
|
+
* Send me a pull request. Bonus points for topic branches.
|
|
252
|
+
|
|
253
|
+
== Copyright
|
|
254
|
+
|
|
255
|
+
Copyright (c) 2010 kematzy. See LICENSE for details.
|
|
256
|
+
|
data/Rakefile
ADDED
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
require 'rubygems'
|
|
2
|
+
require 'rake'
|
|
3
|
+
|
|
4
|
+
begin
|
|
5
|
+
require 'jeweler'
|
|
6
|
+
Jeweler::Tasks.new do |gem|
|
|
7
|
+
gem.name = "sinatra-css"
|
|
8
|
+
gem.summary = %Q{A Sinatra Extension that makes working with CSS easy.}
|
|
9
|
+
gem.description = %Q{A Sinatra Extension that makes working with CSS easy.}
|
|
10
|
+
gem.email = "kematzy@gmail.com"
|
|
11
|
+
gem.homepage = "http://github.com/kematzy/sinatra-css"
|
|
12
|
+
gem.authors = ["kematzy"]
|
|
13
|
+
gem.add_dependency "sinatra", ">= 1.0"
|
|
14
|
+
gem.add_dependency "sinatra-tags", ">= 0.1.0"
|
|
15
|
+
gem.add_development_dependency "sinatra-tests", ">= 0.1.6"
|
|
16
|
+
gem.add_development_dependency "rspec", ">= 1.3.0"
|
|
17
|
+
# gem is a Gem::Specification... see http://www.rubygems.org/read/chapter/20 for additional settings
|
|
18
|
+
end
|
|
19
|
+
Jeweler::GemcutterTasks.new
|
|
20
|
+
rescue LoadError
|
|
21
|
+
puts "Jeweler (or a dependency) not available. Install it with: gem install jeweler"
|
|
22
|
+
end
|
|
23
|
+
|
|
24
|
+
require 'spec/rake/spectask'
|
|
25
|
+
Spec::Rake::SpecTask.new(:spec) do |spec|
|
|
26
|
+
spec.libs << 'lib' << 'spec'
|
|
27
|
+
spec.spec_opts = ["--color", "--format", "specdoc", "--require", "spec/spec_helper.rb"]
|
|
28
|
+
spec.spec_files = FileList['spec/**/*_spec.rb']
|
|
29
|
+
end
|
|
30
|
+
|
|
31
|
+
Spec::Rake::SpecTask.new(:rcov) do |spec|
|
|
32
|
+
spec.libs << 'lib' << 'spec'
|
|
33
|
+
spec.spec_opts = ["--color", "--format", "specdoc", "--require", "spec/spec_helper.rb"]
|
|
34
|
+
spec.pattern = 'spec/**/*_spec.rb'
|
|
35
|
+
spec.rcov = true
|
|
36
|
+
end
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
namespace :spec do
|
|
40
|
+
|
|
41
|
+
desc "Run all specifications quietly"
|
|
42
|
+
Spec::Rake::SpecTask.new(:quiet) do |t|
|
|
43
|
+
t.libs << "lib"
|
|
44
|
+
t.spec_opts = ["--color", "--require", "spec/spec_helper.rb"]
|
|
45
|
+
end
|
|
46
|
+
|
|
47
|
+
desc "Run specific spec verbosely (SPEC=/path/2/file)"
|
|
48
|
+
Spec::Rake::SpecTask.new(:select) do |t|
|
|
49
|
+
t.libs << "lib"
|
|
50
|
+
t.spec_files = [ENV["SPEC"]]
|
|
51
|
+
t.spec_opts = ["--color", "--format", "specdoc", "--require", "spec/spec_helper.rb"]
|
|
52
|
+
end
|
|
53
|
+
|
|
54
|
+
end
|
|
55
|
+
|
|
56
|
+
task :spec => :check_dependencies
|
|
57
|
+
|
|
58
|
+
task :default => :spec
|
|
59
|
+
|
|
60
|
+
require 'rake/rdoctask'
|
|
61
|
+
Rake::RDocTask.new do |rdoc|
|
|
62
|
+
version = File.exist?('VERSION') ? File.read('VERSION') : ""
|
|
63
|
+
|
|
64
|
+
rdoc.rdoc_dir = 'rdoc'
|
|
65
|
+
rdoc.title = "Sinatra::CSS #{version}"
|
|
66
|
+
rdoc.rdoc_files.include('README*')
|
|
67
|
+
rdoc.rdoc_files.include('lib/**/*.rb')
|
|
68
|
+
end
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
desc 'Build the rdoc HTML Files'
|
|
72
|
+
task :docs do
|
|
73
|
+
version = File.exist?('VERSION') ? IO.read('VERSION').chomp : "[Unknown]"
|
|
74
|
+
|
|
75
|
+
sh "sdoc -N --title 'Sinatra::CSS v#{version}' lib/ README.rdoc"
|
|
76
|
+
end
|
|
77
|
+
|
|
78
|
+
namespace :docs do
|
|
79
|
+
|
|
80
|
+
desc 'Remove rdoc products'
|
|
81
|
+
task :remove => [:clobber_rdoc]
|
|
82
|
+
|
|
83
|
+
desc 'Force a rebuild of the RDOC files'
|
|
84
|
+
task :rebuild => [:rerdoc]
|
|
85
|
+
|
|
86
|
+
desc 'Build docs, and open in browser for viewing (specify BROWSER)'
|
|
87
|
+
task :open => [:docs] do
|
|
88
|
+
browser = ENV["BROWSER"] || "safari"
|
|
89
|
+
sh "open -a #{browser} doc/index.html"
|
|
90
|
+
end
|
|
91
|
+
|
|
92
|
+
end
|
data/VERSION
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
0.1.5
|
data/lib/sinatra/css.rb
ADDED
|
@@ -0,0 +1,522 @@
|
|
|
1
|
+
|
|
2
|
+
require 'sinatra/base'
|
|
3
|
+
require 'sinatra/tags'
|
|
4
|
+
require 'sinatra/assets'
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
module Tilt
|
|
8
|
+
|
|
9
|
+
## RCSS (RubyCSS) support, piggy-backing onto the ERBTemplate
|
|
10
|
+
# so that we can use <% %> tags with Ruby code inside the .rcss file
|
|
11
|
+
register 'rcss', ERBTemplate
|
|
12
|
+
|
|
13
|
+
end #/module Tilt
|
|
14
|
+
|
|
15
|
+
module Sinatra
|
|
16
|
+
|
|
17
|
+
module Templates
|
|
18
|
+
|
|
19
|
+
## add support for .rcss
|
|
20
|
+
def rcss(template, options={}, locals={})
|
|
21
|
+
options[:outvar] = '@_out_buf'
|
|
22
|
+
options[:layout] = false
|
|
23
|
+
render :rcss, template, options, locals
|
|
24
|
+
end
|
|
25
|
+
|
|
26
|
+
end #/module Templates
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
##
|
|
31
|
+
# = Sinatra::CSS
|
|
32
|
+
#
|
|
33
|
+
# A Sinatra Extension that makes working with CSS easy.
|
|
34
|
+
#
|
|
35
|
+
#
|
|
36
|
+
#
|
|
37
|
+
# == Installation
|
|
38
|
+
#
|
|
39
|
+
# # Add RubyGems.org (former Gemcutter) to your RubyGems sources
|
|
40
|
+
# $ gem sources -a http://rubygems.org
|
|
41
|
+
#
|
|
42
|
+
# $ (sudo)? gem install sinatra-css
|
|
43
|
+
#
|
|
44
|
+
# == Dependencies
|
|
45
|
+
#
|
|
46
|
+
# This Gem depends upon the following:
|
|
47
|
+
#
|
|
48
|
+
# === Runtime:
|
|
49
|
+
#
|
|
50
|
+
# * sinatra ( >= 1.0.a )
|
|
51
|
+
# * sinatra-tags[http://github.com/kematzy/sinatra-tags] ( >= 0.1.0 )
|
|
52
|
+
# * sinatra-outputbuffer[http://github.com/kematzy/sinatra-outputbuffer] ( >= 0.1.0 )
|
|
53
|
+
# * sinatra-basics[http://github.com/kematzy/sinatra-basics] ( >= 0.5.0 )
|
|
54
|
+
#
|
|
55
|
+
# Optionals:
|
|
56
|
+
#
|
|
57
|
+
# * sinatra-settings[http://github.com/kematzy/sinatra-settings] (>= 0.1.1) # to view default settings in a browser display.
|
|
58
|
+
# * sinatra-logger[http://github.com/kematzy/sinatra-logger] (>= 0.1.0) # to capture error messages in the log file.
|
|
59
|
+
#
|
|
60
|
+
#
|
|
61
|
+
# === Development & Tests:
|
|
62
|
+
#
|
|
63
|
+
# * sinatra-tests (>= 0.1.6)
|
|
64
|
+
# * rspec (>= 1.3.0 )
|
|
65
|
+
# * rack-test (>= 0.5.3)
|
|
66
|
+
# * rspec_hpricot_matchers (>= 0.1.0)
|
|
67
|
+
#
|
|
68
|
+
#
|
|
69
|
+
# == Getting Started
|
|
70
|
+
#
|
|
71
|
+
# To start using Sinatra::CSS, just require and register the extension in your App...
|
|
72
|
+
#
|
|
73
|
+
# require 'sinatra/css'
|
|
74
|
+
#
|
|
75
|
+
# class YourApp < Sinatra::Base
|
|
76
|
+
# register(Sinatra::CSS)
|
|
77
|
+
#
|
|
78
|
+
# <snip...>
|
|
79
|
+
#
|
|
80
|
+
# end
|
|
81
|
+
#
|
|
82
|
+
#
|
|
83
|
+
# You then get access to 6 useful helper methods:
|
|
84
|
+
#
|
|
85
|
+
#
|
|
86
|
+
# === <tt>css()</tt>
|
|
87
|
+
#
|
|
88
|
+
# This method serves two purposes:
|
|
89
|
+
#
|
|
90
|
+
# a) Return a stylesheet <tt><link></tt> tag with the <tt>path</tt> given.
|
|
91
|
+
#
|
|
92
|
+
# css('/css/style.css') # =>
|
|
93
|
+
#
|
|
94
|
+
# <link rel="stylesheet" href="/css/style.css" media="screen" type="text/css" charset="utf-8">
|
|
95
|
+
#
|
|
96
|
+
# css('style.css', :media => :print) # =>
|
|
97
|
+
#
|
|
98
|
+
# <link rel="stylesheet" href="/style.css" media="print" type="text/css" charset="utf-8">
|
|
99
|
+
#
|
|
100
|
+
#
|
|
101
|
+
#
|
|
102
|
+
# b) When passed a *block*, a <tt><style></tt> tag will be created with the yielded block as its contents.
|
|
103
|
+
#
|
|
104
|
+
# css do
|
|
105
|
+
# "body {
|
|
106
|
+
# color: blue;
|
|
107
|
+
# }"
|
|
108
|
+
# end
|
|
109
|
+
# # =>
|
|
110
|
+
#
|
|
111
|
+
# <style type="text/css" media="screen">
|
|
112
|
+
# body { color: blue; }
|
|
113
|
+
# </style>
|
|
114
|
+
#
|
|
115
|
+
#
|
|
116
|
+
# === <tt>css_custom() & css_custom_add()</tt>
|
|
117
|
+
#
|
|
118
|
+
# These two methods works together, like this:
|
|
119
|
+
#
|
|
120
|
+
# First you add the <tt>css_custom()</tt> method to your layout(s) (../views/layout.erb):
|
|
121
|
+
#
|
|
122
|
+
# <html>
|
|
123
|
+
# <head>
|
|
124
|
+
# <snip...>
|
|
125
|
+
#
|
|
126
|
+
# <%= css_custom %>
|
|
127
|
+
#
|
|
128
|
+
# </head>
|
|
129
|
+
#
|
|
130
|
+
#
|
|
131
|
+
#
|
|
132
|
+
# Then in your views, you can use the <tt>css_custom_add()</tt> method to add custom CSS
|
|
133
|
+
# to the page, like this:
|
|
134
|
+
#
|
|
135
|
+
# # in ../views/template.erb
|
|
136
|
+
# <%= css_custom_add( "body{color: red;}" ) =>
|
|
137
|
+
#
|
|
138
|
+
# # in ../views/shared/sidebar.erb
|
|
139
|
+
# <%= css_custom_add( "#sidebar { background-color: black; }" ) =>
|
|
140
|
+
#
|
|
141
|
+
#
|
|
142
|
+
# Which outputs the following in the <tt><head></tt> element of your page.
|
|
143
|
+
#
|
|
144
|
+
# <html>
|
|
145
|
+
# <head>
|
|
146
|
+
# <snip...>
|
|
147
|
+
#
|
|
148
|
+
# <style type="text/css" media="screen">
|
|
149
|
+
# body { color: red; }
|
|
150
|
+
# #sidebar { background-color: black; }
|
|
151
|
+
# /* ...and more custom CSS */
|
|
152
|
+
# </style>
|
|
153
|
+
#
|
|
154
|
+
#
|
|
155
|
+
# This functionality makes it very easy to add CSS overides or page specific CSS to any page,
|
|
156
|
+
# even from within multiple views.
|
|
157
|
+
#
|
|
158
|
+
#
|
|
159
|
+
# === <tt>css_custom_files() & css_custom_add_file()</tt>
|
|
160
|
+
#
|
|
161
|
+
# These two methods also works together in a similar fashion, like this:
|
|
162
|
+
#
|
|
163
|
+
# First of, add the <tt>css_custom_files()</tt> method to your layout(s) (../views/layout.erb):
|
|
164
|
+
#
|
|
165
|
+
# <html>
|
|
166
|
+
# <head>
|
|
167
|
+
# <snip...>
|
|
168
|
+
#
|
|
169
|
+
# <%= css_custom_files %>
|
|
170
|
+
#
|
|
171
|
+
# </head>
|
|
172
|
+
#
|
|
173
|
+
#
|
|
174
|
+
# Then in your views, you can use the <tt>css_custom_add_file()</tt> method to add a custom CSS
|
|
175
|
+
# file to the page, like this:
|
|
176
|
+
#
|
|
177
|
+
# <%= css_custom_add_file('home') #=>
|
|
178
|
+
#
|
|
179
|
+
# <link href="/home.css" rel="stylesheet" media="screen" type="text/css" charset="utf-8" />
|
|
180
|
+
#
|
|
181
|
+
#
|
|
182
|
+
# The method even accepts an Array consisting of <tt>[ filename, media ]</tt> like this:
|
|
183
|
+
#
|
|
184
|
+
# <%= css_custom_add_file( ['/css/print', :print] ) #=>
|
|
185
|
+
#
|
|
186
|
+
# <link href="/css/print.css" rel="stylesheet" media="print" type="text/css" charset="utf-8" />
|
|
187
|
+
#
|
|
188
|
+
#
|
|
189
|
+
# You can also use the method to embed the styles of a .css file into any part of a page, like this:
|
|
190
|
+
#
|
|
191
|
+
# # NB! path is starting from APP_ROOT/public/
|
|
192
|
+
#
|
|
193
|
+
# css_custom_add_file('home.css',:insert_into_html) #=>
|
|
194
|
+
#
|
|
195
|
+
# <style type="text/css" media="screen">
|
|
196
|
+
# /* the contents of ../public/home.css */
|
|
197
|
+
# </style>
|
|
198
|
+
#
|
|
199
|
+
#
|
|
200
|
+
# You can even give a file system path to embed the styles of a globaly shared .css file
|
|
201
|
+
# outside of your applications path. Providing an easy way to resuse common snippets of code.
|
|
202
|
+
#
|
|
203
|
+
#
|
|
204
|
+
# # NB! make sure the path and .css file works together as a real path.
|
|
205
|
+
#
|
|
206
|
+
# # the :path value should always be a directory without the trailing slash.
|
|
207
|
+
#
|
|
208
|
+
# css_custom_add_file('home.css',:insert_into_html, '/path/2/some/directory')
|
|
209
|
+
#
|
|
210
|
+
#
|
|
211
|
+
# <style type="text/css" media="screen">
|
|
212
|
+
# /* the contents of /path/2/some/directory/home.css */
|
|
213
|
+
# </style>
|
|
214
|
+
#
|
|
215
|
+
#
|
|
216
|
+
#
|
|
217
|
+
# === <tt>css_insert_file()</tt>
|
|
218
|
+
#
|
|
219
|
+
# This is a simple convenicence method that takes a path to a CSS file
|
|
220
|
+
# and inserts its content straight into the current view, without any enclosing HTML tags.
|
|
221
|
+
#
|
|
222
|
+
# The method depends upon the settings of the <tt>:css_shared_source_files_dir</tt>
|
|
223
|
+
# configuration variable defined inside your application.
|
|
224
|
+
# By default this is set to <tt>'ENV['HOME']/.alt/css'</tt>.
|
|
225
|
+
#
|
|
226
|
+
# An example of how to use this functionality:
|
|
227
|
+
#
|
|
228
|
+
# # in your app's routes configurations
|
|
229
|
+
#
|
|
230
|
+
# get('/css/screen.css') do
|
|
231
|
+
# content_type 'text/css'
|
|
232
|
+
# erb('css/screen'.to_sym, :layout => false)
|
|
233
|
+
# end
|
|
234
|
+
#
|
|
235
|
+
#
|
|
236
|
+
# # in views/css/screen.erb
|
|
237
|
+
#
|
|
238
|
+
# <%= css_insert_file('blueprint/grid') %>
|
|
239
|
+
#
|
|
240
|
+
# # => insert the contents of ENV['HOME']/.alt/css/blueprint/grid.css
|
|
241
|
+
#
|
|
242
|
+
#
|
|
243
|
+
# You can also load and insert local files, ie files in your app's <tt>public/css/</tt> directory
|
|
244
|
+
# by adding the <tt>:local</tt> flag to the call.
|
|
245
|
+
#
|
|
246
|
+
# <%= css_insert_file('colors', :local) %>
|
|
247
|
+
#
|
|
248
|
+
# # => insert the contents of /path/2/your/app/public/css/colors.css
|
|
249
|
+
#
|
|
250
|
+
#
|
|
251
|
+
# == TODOs
|
|
252
|
+
#
|
|
253
|
+
# * Keep it up to date with any changes in Sinatra.
|
|
254
|
+
#
|
|
255
|
+
# * Add bundle functionality from Sinatra::Bundles gem.
|
|
256
|
+
#
|
|
257
|
+
# * Improve the specs a bit and add missing tests.
|
|
258
|
+
#
|
|
259
|
+
# * Any other improvements I or You can think of.
|
|
260
|
+
#
|
|
261
|
+
#
|
|
262
|
+
# == Copyright
|
|
263
|
+
#
|
|
264
|
+
# Copyright (c) 2010 kematzy. See LICENSE for details.
|
|
265
|
+
#
|
|
266
|
+
|
|
267
|
+
module CSS
|
|
268
|
+
VERSION = '0.1.5' unless const_defined?(:VERSION)
|
|
269
|
+
def self.version; "Sinatra::CSS v#{VERSION}"; end
|
|
270
|
+
|
|
271
|
+
|
|
272
|
+
|
|
273
|
+
module Helpers
|
|
274
|
+
|
|
275
|
+
attr_accessor :sinatra_css_custom_code, :sinatra_css_custom_files
|
|
276
|
+
|
|
277
|
+
##
|
|
278
|
+
# Return stylesheet link tag to _path_. When a _block_
|
|
279
|
+
# is passed, a style tag will be created with the yielded
|
|
280
|
+
# value as its contents.
|
|
281
|
+
#
|
|
282
|
+
# ==== Examples
|
|
283
|
+
#
|
|
284
|
+
# css do
|
|
285
|
+
# "body {
|
|
286
|
+
# color: blue;
|
|
287
|
+
# }"
|
|
288
|
+
# end
|
|
289
|
+
# # => <style>body { ... }</style>
|
|
290
|
+
#
|
|
291
|
+
#
|
|
292
|
+
# css('/css/style.css', :media => :print) # =>
|
|
293
|
+
#
|
|
294
|
+
# <link rel="stylesheet" href="/css/style.css" media="print" type="text/css" charset="utf-8">
|
|
295
|
+
#
|
|
296
|
+
# @api public
|
|
297
|
+
def css(path = nil, attrs = {}, &block)
|
|
298
|
+
attrs = { :type => 'text/css', :media => "screen" }.merge(attrs)
|
|
299
|
+
return tag(:style, yield, attrs) if block_given?
|
|
300
|
+
path = url_for("#{path.sub('.css','')}.css") unless remote_asset?(path)
|
|
301
|
+
tag(:link, { :rel => 'stylesheet', :charset => "utf-8", :href => path, :newline => true }.merge(attrs))
|
|
302
|
+
end
|
|
303
|
+
alias_method :stylesheet, :css
|
|
304
|
+
|
|
305
|
+
##
|
|
306
|
+
# Adds custom CSS to the page load from within a view, helper method and so on
|
|
307
|
+
#
|
|
308
|
+
# ==== Examples
|
|
309
|
+
#
|
|
310
|
+
# css_custom_add("body{color: green;}")
|
|
311
|
+
# => output within <style>.. tag in the <head> of document
|
|
312
|
+
#
|
|
313
|
+
# @api public
|
|
314
|
+
def css_custom_add(css)
|
|
315
|
+
@sinatra_css_custom_code ||= []
|
|
316
|
+
@sinatra_css_custom_code << css
|
|
317
|
+
end
|
|
318
|
+
|
|
319
|
+
##
|
|
320
|
+
# Add a custom CSS file to the page load from within a view, helper method and so on
|
|
321
|
+
#
|
|
322
|
+
# ==== Examples
|
|
323
|
+
#
|
|
324
|
+
# css_custom_add_file [filename, media]
|
|
325
|
+
# => output within <link href..>.. tag in the <head> of document
|
|
326
|
+
#
|
|
327
|
+
# You can also embed the styles of a .css file into the head element of a page.
|
|
328
|
+
# NB! path is starting from APP_ROOT/public/
|
|
329
|
+
#
|
|
330
|
+
# css_custom_add_file('home.css',:insert_into_html)
|
|
331
|
+
# => <style type="text/css" media="screen"> CSS content </style>
|
|
332
|
+
#
|
|
333
|
+
# You can even give a file system path to embed the styles of a .css file.
|
|
334
|
+
# NB! make sure the path and .css file works together as a real path.
|
|
335
|
+
# :path should always be a directory without the trailing slash.
|
|
336
|
+
#
|
|
337
|
+
# css_custom_add_file('home.css',:insert_into_html, '/path/2/some/directory')
|
|
338
|
+
# => <style type="text/css" media="screen"> Some Style CSS content </style>
|
|
339
|
+
#
|
|
340
|
+
# @api public
|
|
341
|
+
def css_custom_add_file(file, insert_into_html = nil, path = nil)
|
|
342
|
+
if insert_into_html.nil?
|
|
343
|
+
@sinatra_css_custom_files ||= []
|
|
344
|
+
file = [file,:screen] unless file.is_a?(Array)
|
|
345
|
+
@sinatra_css_custom_files << file
|
|
346
|
+
else
|
|
347
|
+
# read the file into css_custom_add
|
|
348
|
+
path_css = path.nil? ? self.class.public : path
|
|
349
|
+
file_css = "#{path_css}/#{file.sub('.css','')}.css"
|
|
350
|
+
if test(?f, file_css)
|
|
351
|
+
css_custom_add(IO.read(file_css))
|
|
352
|
+
else
|
|
353
|
+
err_msg = "ERROR: css_custom_add_file(:insert_into_html) method could NOT find and embed this CSS file=[ #{file_css} ]"
|
|
354
|
+
if self.respond_to?(:logger)
|
|
355
|
+
logger.warn(err_msg)
|
|
356
|
+
else
|
|
357
|
+
warn(err_msg)
|
|
358
|
+
end
|
|
359
|
+
end
|
|
360
|
+
end
|
|
361
|
+
end
|
|
362
|
+
|
|
363
|
+
##
|
|
364
|
+
# Simple convenicence method that takes a path to a CSS file
|
|
365
|
+
# and inserts its content into the current <tt>.erb</tt> file
|
|
366
|
+
#
|
|
367
|
+
# Depends upon the settings of the <tt>:css_compiled_files_dir</tt> configuration variable
|
|
368
|
+
# defined inside your application. By default it is set to <tt>'//Users/kematzy/.alt/css'</tt>
|
|
369
|
+
#
|
|
370
|
+
# ==== Examples
|
|
371
|
+
#
|
|
372
|
+
# # in your app's routes configurations
|
|
373
|
+
# get '/css/screen.css' { }
|
|
374
|
+
# get('/css/screen.css') do
|
|
375
|
+
# content_type 'text/css'
|
|
376
|
+
# erb('css/screen.css'.to_sym, :layout => false)
|
|
377
|
+
# end
|
|
378
|
+
#
|
|
379
|
+
#
|
|
380
|
+
# # in views/css/screen.css
|
|
381
|
+
# css_insert_file('blueprint/grid')
|
|
382
|
+
#
|
|
383
|
+
# which inserts the CSS code from that file into the output.
|
|
384
|
+
#
|
|
385
|
+
#
|
|
386
|
+
#
|
|
387
|
+
#
|
|
388
|
+
# @api public
|
|
389
|
+
def css_insert_file(path = '', local = nil )
|
|
390
|
+
file_path = local.nil? ? "#{self.class.css_shared_source_files_dir}/#{path}" : path
|
|
391
|
+
file_path = file_path.sub(/\.css$/,'') << ".css"
|
|
392
|
+
if test(?f, file_path)
|
|
393
|
+
content = IO.read(file_path)
|
|
394
|
+
else
|
|
395
|
+
content = "/* ERROR: the CSS file [#{file_path}] could NOT be found */"
|
|
396
|
+
end
|
|
397
|
+
content
|
|
398
|
+
end
|
|
399
|
+
|
|
400
|
+
##
|
|
401
|
+
# Outputs any custom CSS if provided from within a view, helper method and so on
|
|
402
|
+
#
|
|
403
|
+
# ==== Examples
|
|
404
|
+
#
|
|
405
|
+
# custom_css() => <style...> custom css </style>
|
|
406
|
+
#
|
|
407
|
+
# @api public
|
|
408
|
+
def css_custom(css=nil)
|
|
409
|
+
out = ''
|
|
410
|
+
out << css unless css.nil?
|
|
411
|
+
@sinatra_css_custom_code.each { |i| out << " #{i}\n" } unless @sinatra_css_custom_code.nil?
|
|
412
|
+
out = out.empty? ? '' : %Q[<style type="text/css" media="screen">\n#{out.strip}\n </style>\n]
|
|
413
|
+
end
|
|
414
|
+
|
|
415
|
+
##
|
|
416
|
+
# Outputs any custom CSS files that have been included
|
|
417
|
+
#
|
|
418
|
+
# ==== Examples
|
|
419
|
+
#
|
|
420
|
+
# css_custom_files =>
|
|
421
|
+
# <!-- custom css files -->
|
|
422
|
+
# <link href="/css/custom1.css"...>
|
|
423
|
+
# <link href="/css/custom2.css"...>
|
|
424
|
+
# <!-- /custom css files -->
|
|
425
|
+
#
|
|
426
|
+
# @api public
|
|
427
|
+
def css_custom_files
|
|
428
|
+
unless @sinatra_css_custom_files.nil?
|
|
429
|
+
out = "<!-- custom css files -->\n"
|
|
430
|
+
@sinatra_css_custom_files.each do |file| # returns an array
|
|
431
|
+
out << css(file[0], :media => file[1])
|
|
432
|
+
end
|
|
433
|
+
out << "<!-- /custom css files -->\n"
|
|
434
|
+
else
|
|
435
|
+
'' # return empty string, it's better than nil in this case
|
|
436
|
+
end
|
|
437
|
+
end
|
|
438
|
+
|
|
439
|
+
|
|
440
|
+
|
|
441
|
+
end #/ Helpers
|
|
442
|
+
|
|
443
|
+
|
|
444
|
+
|
|
445
|
+
##
|
|
446
|
+
# Handles all CSS requests, and returns the RCSS (RubyCSS) file version of it,
|
|
447
|
+
# or else passes the request on to the file system.
|
|
448
|
+
#
|
|
449
|
+
# NB! the path value given is NOT used as the name of the source directory in app/views,
|
|
450
|
+
# so ensure that there is always an app/views/css directory in place.
|
|
451
|
+
#
|
|
452
|
+
# ie:
|
|
453
|
+
# get_all_css_requests() => expects a app/views/css dir with the .rcss files
|
|
454
|
+
|
|
455
|
+
# get_all_css_requests('/stylesheets') => expects a app/views/css dir with the .rcss files
|
|
456
|
+
#
|
|
457
|
+
# ==== Examples
|
|
458
|
+
#
|
|
459
|
+
# get_all_css_requests() => catches 'site.com/css/screen.css
|
|
460
|
+
# get_all_css_requests('/stylesheets') => catches 'site.com/stylesheets/screen.css
|
|
461
|
+
#
|
|
462
|
+
# @api public
|
|
463
|
+
def get_all_css_requests(path='/css', options = {})
|
|
464
|
+
path, options = '/css', path if path.is_a?(Hash)
|
|
465
|
+
|
|
466
|
+
get("#{path}/*.css", {}) do
|
|
467
|
+
|
|
468
|
+
begin
|
|
469
|
+
options = { :cache => false, :layout => false }.merge(options)
|
|
470
|
+
|
|
471
|
+
content_type 'text/css', :charset => 'utf-8'
|
|
472
|
+
if self.settings.environment == :production
|
|
473
|
+
rcss("css/#{params[:splat].first}".to_sym, options ).gsub(/\n\r?$/,"")
|
|
474
|
+
else
|
|
475
|
+
rcss("css/#{params[:splat].first}".to_sym, options )
|
|
476
|
+
end
|
|
477
|
+
rescue Errno::ENOENT
|
|
478
|
+
content_type 'text/html' # reset the content_type
|
|
479
|
+
pass
|
|
480
|
+
end
|
|
481
|
+
end
|
|
482
|
+
end
|
|
483
|
+
|
|
484
|
+
|
|
485
|
+
|
|
486
|
+
##
|
|
487
|
+
# Registers these Extensions:
|
|
488
|
+
#
|
|
489
|
+
# * Sinatra::Tags
|
|
490
|
+
# * Sinatra::Basics::Assets
|
|
491
|
+
#
|
|
492
|
+
# Default Settings:
|
|
493
|
+
#
|
|
494
|
+
# * +:css_shared_source_files_dir+ => set the path to the Shared directory with compliled CSS templates.
|
|
495
|
+
# Default is: <tt>'ENV['HOME']/.alt/css'</tt>
|
|
496
|
+
#
|
|
497
|
+
# @api public
|
|
498
|
+
def self.registered(app)
|
|
499
|
+
app.register(Sinatra::Tags)
|
|
500
|
+
app.register(Sinatra::Assets)
|
|
501
|
+
|
|
502
|
+
app.helpers Sinatra::CSS::Helpers
|
|
503
|
+
|
|
504
|
+
# set the path to the Shared directory with compliled CSS templates
|
|
505
|
+
app.set :css_shared_source_files_dir, File.join(File.expand_path(ENV['HOME']) ,'.alt', 'css')
|
|
506
|
+
|
|
507
|
+
|
|
508
|
+
## add the extension specific options to those inspectable by :settings_inspect method
|
|
509
|
+
# provided by the Sinatra::Settings extension
|
|
510
|
+
if app.respond_to?(:sinatra_settings_for_inspection)
|
|
511
|
+
%w( css_shared_source_files_dir ).each do |m|
|
|
512
|
+
app.sinatra_settings_for_inspection << m
|
|
513
|
+
end
|
|
514
|
+
end
|
|
515
|
+
|
|
516
|
+
end #/ self.registered
|
|
517
|
+
|
|
518
|
+
end #/ CSS
|
|
519
|
+
|
|
520
|
+
register(Sinatra::CSS)
|
|
521
|
+
|
|
522
|
+
end #/ Sinatra
|