stylus_assets 0.3.0 → 0.4.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +81 -2
- data/lib/stylus_assets/version.rb +1 -1
- data/vendor/assets/javascripts/stylus_assets.js.coffee.erb +29 -10
- metadata +3 -3
data/README.md
CHANGED
@@ -9,7 +9,7 @@ have a look at [Ruby Stylus](https://github.com/lucasmazza/ruby-stylus).
|
|
9
9
|
Tested on MRI Ruby 1.8.7, 1.9.2, 1.9.3, REE and the latest version of JRuby.
|
10
10
|
|
11
11
|
## Why a Style template?
|
12
|
-
|
12
|
+
|
13
13
|
Why would you like to have JavaScript Style Templates? If you have a lot of domain models that describes a UI, you can
|
14
14
|
convert them dynamically to CSS and have nice style logic in the template instead of code that manipulates the DOM
|
15
15
|
style attributes.
|
@@ -103,7 +103,7 @@ StylusAssets::StylusTemplate.variable_prefix = true
|
|
103
103
|
```
|
104
104
|
|
105
105
|
All following examples are prefix free.
|
106
|
-
|
106
|
+
|
107
107
|
## Render
|
108
108
|
|
109
109
|
When you have a template named `header` with the given content:
|
@@ -151,6 +151,85 @@ will result in
|
|
151
151
|
}
|
152
152
|
```
|
153
153
|
|
154
|
+
### Lists
|
155
|
+
|
156
|
+
If you pass an array as variable value, it'll converted into a list:
|
157
|
+
|
158
|
+
```CSS
|
159
|
+
for c in cols
|
160
|
+
.{c}
|
161
|
+
border: 0px
|
162
|
+
```
|
163
|
+
|
164
|
+
that is rendered with
|
165
|
+
|
166
|
+
```javascript
|
167
|
+
JSST['header']({ cols: [1, 2, 3] })
|
168
|
+
```
|
169
|
+
|
170
|
+
will generate
|
171
|
+
|
172
|
+
```CSS
|
173
|
+
.1 {
|
174
|
+
border: 0;
|
175
|
+
}
|
176
|
+
.2 {
|
177
|
+
border: 0;
|
178
|
+
}
|
179
|
+
.3 {
|
180
|
+
border: 0;
|
181
|
+
}
|
182
|
+
```
|
183
|
+
|
184
|
+
### Sets
|
185
|
+
|
186
|
+
If you pass an object as variable value, it'll converted into a set:
|
187
|
+
|
188
|
+
```CSS
|
189
|
+
for p in obj
|
190
|
+
.{p[0]}
|
191
|
+
margin-left: 5px
|
192
|
+
```
|
193
|
+
|
194
|
+
that is rendered with
|
195
|
+
|
196
|
+
```javascript
|
197
|
+
JSST['header']({ obj: { prop1: 'test1', prop2: 'test2' } })
|
198
|
+
```
|
199
|
+
|
200
|
+
will generate
|
201
|
+
|
202
|
+
```CSS
|
203
|
+
.prop1 {
|
204
|
+
margin-left: 5px;
|
205
|
+
}
|
206
|
+
.prop2 {
|
207
|
+
margin-left: 5px;
|
208
|
+
}
|
209
|
+
```
|
210
|
+
|
211
|
+
Whenever a set is detected, a helper funtion `get` is added:
|
212
|
+
|
213
|
+
```Stylus
|
214
|
+
get(hash, key)
|
215
|
+
return pair[1] if pair[0] == key for pair in hash
|
216
|
+
```
|
217
|
+
|
218
|
+
which allows you the access a value by its name:
|
219
|
+
|
220
|
+
```CSS
|
221
|
+
.{get(obj, 'prop1')}
|
222
|
+
border: 0px
|
223
|
+
```
|
224
|
+
|
225
|
+
will generate
|
226
|
+
|
227
|
+
```CSS
|
228
|
+
.test1 {
|
229
|
+
border: 0px;
|
230
|
+
}
|
231
|
+
```
|
232
|
+
|
154
233
|
### Default variables
|
155
234
|
|
156
235
|
You do not need to define the variables in the Stylus stylesheet, as they will be created before compilation, but you
|
@@ -4,10 +4,13 @@ class window.StylusAssets
|
|
4
4
|
|
5
5
|
# Whether to prefix variables with a $ on not
|
6
6
|
@prefixVariables = <%= StylusAssets::StylusTemplate.variable_prefix %>
|
7
|
-
|
7
|
+
|
8
8
|
# Test if object is an array
|
9
9
|
@isArray = Array.isArray or (obj) -> !!(obj and obj.concat and obj.unshift and not obj.callee)
|
10
|
-
|
10
|
+
|
11
|
+
# Test if object is an object
|
12
|
+
@isObject = (obj) -> obj is Object(obj)
|
13
|
+
|
11
14
|
# Render stylus css with its variables to plain css
|
12
15
|
#
|
13
16
|
# @param [String] css the stylus css
|
@@ -18,8 +21,9 @@ class window.StylusAssets
|
|
18
21
|
@render: (name, css, variables = {}, doc = undefined) ->
|
19
22
|
result = undefined
|
20
23
|
newVariables = {}
|
24
|
+
hasSet = false
|
21
25
|
prefix = if StylusAssets.prefixVariables then '$' else ''
|
22
|
-
|
26
|
+
|
23
27
|
# Replace existing less variables
|
24
28
|
#
|
25
29
|
for variable, value of variables
|
@@ -28,17 +32,32 @@ class window.StylusAssets
|
|
28
32
|
if StylusAssets.isArray(value)
|
29
33
|
list = ''
|
30
34
|
list += "'#{ v }' " for v in value
|
35
|
+
|
31
36
|
value = list.substring(0, list.length - 1)
|
32
37
|
|
38
|
+
if StylusAssets.isObject(value)
|
39
|
+
hasSet = true
|
40
|
+
|
41
|
+
set = ''
|
42
|
+
set += "('#{ k }' '#{ v }') " for k, v of value
|
43
|
+
|
44
|
+
value = set.substring(0, set.length - 1)
|
45
|
+
|
33
46
|
if existing.test css
|
34
47
|
css = css.replace existing, "#{ prefix }#{ variable } = #{ value }"
|
35
48
|
else
|
36
49
|
newVariables[variable] = value
|
37
50
|
|
38
|
-
# Add
|
51
|
+
# Add new Stylus variables
|
39
52
|
#
|
40
53
|
style = ''
|
41
54
|
style += "#{ prefix }#{ variable } = #{ value }\n" for variable, value of newVariables
|
55
|
+
|
56
|
+
if hasSet
|
57
|
+
style += """
|
58
|
+
get(hash, key)
|
59
|
+
return pair[1] if pair[0] == key for pair in hash\n
|
60
|
+
"""
|
42
61
|
style += css
|
43
62
|
|
44
63
|
# Compile the Stylus stylesheet
|
@@ -76,7 +95,7 @@ class window.StylusAssets
|
|
76
95
|
# Stylus imports
|
77
96
|
#
|
78
97
|
class StylusAssets.Imports
|
79
|
-
|
98
|
+
|
80
99
|
@functions = '''
|
81
100
|
vendors = moz webkit o ms official
|
82
101
|
|
@@ -88,7 +107,7 @@ vendors = moz webkit o ms official
|
|
88
107
|
// require a color
|
89
108
|
|
90
109
|
require-color(color)
|
91
|
-
unless color is a 'color'
|
110
|
+
unless color is a 'color'
|
92
111
|
error('RGB or HSL value expected, got a ' + -string(color))
|
93
112
|
|
94
113
|
// require a unit
|
@@ -105,7 +124,7 @@ require-string(str)
|
|
105
124
|
|
106
125
|
// apply js Math function
|
107
126
|
|
108
|
-
math(n, fn)
|
127
|
+
math(n, fn)
|
109
128
|
require-unit(n)
|
110
129
|
require-string(fn)
|
111
130
|
-math(n, fn)
|
@@ -208,7 +227,7 @@ lighten(color, amount)
|
|
208
227
|
|
209
228
|
fade-out(color, amount)
|
210
229
|
color - rgba(black, percent-to-decimal(amount))
|
211
|
-
|
230
|
+
|
212
231
|
// increase opacity by amount
|
213
232
|
|
214
233
|
fade-in(color, amount)
|
@@ -296,7 +315,7 @@ join(delim, vals...)
|
|
296
315
|
// add a css rule to the containing block
|
297
316
|
|
298
317
|
// - This definition allows add-property to be used as a mixin
|
299
|
-
// - It has the same effect as interpolation but allows users
|
318
|
+
// - It has the same effect as interpolation but allows users
|
300
319
|
// to opt for a functional style
|
301
320
|
|
302
321
|
add-property-function = add-property
|
@@ -305,4 +324,4 @@ add-property(name, expr)
|
|
305
324
|
{name} expr
|
306
325
|
else
|
307
326
|
add-property-function(name, expr)
|
308
|
-
'''
|
327
|
+
'''
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: stylus_assets
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.4.0
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2012-
|
12
|
+
date: 2012-08-22 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: tilt
|
@@ -88,7 +88,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
88
88
|
version: '0'
|
89
89
|
segments:
|
90
90
|
- 0
|
91
|
-
hash: -
|
91
|
+
hash: -3115701335073958094
|
92
92
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
93
93
|
none: false
|
94
94
|
requirements:
|