spinjs-rails 0.0.3 → 0.0.4
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/lib/spinjs-rails/version.rb +1 -1
- data/vendor/assets/javascripts/spin.js +149 -136
- metadata +16 -5
data/lib/spinjs-rails/version.rb
CHANGED
@@ -1,47 +1,45 @@
|
|
1
|
-
//fgnass.github.com/spin.js#v1.2.
|
2
|
-
|
1
|
+
//fgnass.github.com/spin.js#v1.2.6
|
2
|
+
!function(window, document, undefined) {
|
3
3
|
|
4
|
-
/**
|
5
|
-
|
6
|
-
|
7
|
-
|
4
|
+
/**
|
5
|
+
* Copyright (c) 2011 Felix Gnass [fgnass at neteye dot de]
|
6
|
+
* Licensed under the MIT license
|
7
|
+
*/
|
8
8
|
|
9
|
-
var prefixes = ['webkit', 'Moz', 'ms', 'O']
|
10
|
-
|
11
|
-
|
9
|
+
var prefixes = ['webkit', 'Moz', 'ms', 'O'] /* Vendor prefixes */
|
10
|
+
, animations = {} /* Animation rules keyed by their name */
|
11
|
+
, useCssAnimations
|
12
12
|
|
13
13
|
/**
|
14
14
|
* Utility function to create elements. If no tag name is given,
|
15
15
|
* a DIV is created. Optionally properties can be passed.
|
16
16
|
*/
|
17
17
|
function createEl(tag, prop) {
|
18
|
-
var el = document.createElement(tag || 'div')
|
19
|
-
|
18
|
+
var el = document.createElement(tag || 'div')
|
19
|
+
, n
|
20
20
|
|
21
|
-
for(n in prop)
|
22
|
-
|
23
|
-
}
|
24
|
-
return el;
|
21
|
+
for(n in prop) el[n] = prop[n]
|
22
|
+
return el
|
25
23
|
}
|
26
24
|
|
27
25
|
/**
|
28
26
|
* Appends children and returns the parent.
|
29
27
|
*/
|
30
28
|
function ins(parent /* child1, child2, ...*/) {
|
31
|
-
for (var i=1, n=arguments.length; i<n; i++)
|
32
|
-
parent.appendChild(arguments[i])
|
33
|
-
|
34
|
-
return parent
|
29
|
+
for (var i=1, n=arguments.length; i<n; i++)
|
30
|
+
parent.appendChild(arguments[i])
|
31
|
+
|
32
|
+
return parent
|
35
33
|
}
|
36
34
|
|
37
35
|
/**
|
38
36
|
* Insert a new stylesheet to hold the @keyframe or VML rules.
|
39
37
|
*/
|
40
38
|
var sheet = function() {
|
41
|
-
var el = createEl('style')
|
42
|
-
ins(document.getElementsByTagName('head')[0], el)
|
43
|
-
return el.sheet || el.styleSheet
|
44
|
-
}()
|
39
|
+
var el = createEl('style', {type : 'text/css'})
|
40
|
+
ins(document.getElementsByTagName('head')[0], el)
|
41
|
+
return el.sheet || el.styleSheet
|
42
|
+
}()
|
45
43
|
|
46
44
|
/**
|
47
45
|
* Creates an opacity keyframe animation rule and returns its name.
|
@@ -49,39 +47,40 @@
|
|
49
47
|
* we create separate rules for each line/segment.
|
50
48
|
*/
|
51
49
|
function addAnimation(alpha, trail, i, lines) {
|
52
|
-
var name = ['opacity', trail, ~~(alpha*100), i, lines].join('-')
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
50
|
+
var name = ['opacity', trail, ~~(alpha*100), i, lines].join('-')
|
51
|
+
, start = 0.01 + i/lines*100
|
52
|
+
, z = Math.max(1 - (1-alpha) / trail * (100-start), alpha)
|
53
|
+
, prefix = useCssAnimations.substring(0, useCssAnimations.indexOf('Animation')).toLowerCase()
|
54
|
+
, pre = prefix && '-'+prefix+'-' || ''
|
57
55
|
|
58
56
|
if (!animations[name]) {
|
59
57
|
sheet.insertRule(
|
60
58
|
'@' + pre + 'keyframes ' + name + '{' +
|
61
|
-
'0%{opacity:'+z+'}' +
|
62
|
-
start + '%{opacity:'+ alpha + '}' +
|
59
|
+
'0%{opacity:' + z + '}' +
|
60
|
+
start + '%{opacity:' + alpha + '}' +
|
63
61
|
(start+0.01) + '%{opacity:1}' +
|
64
|
-
(start+trail)%100 + '%{opacity:'+ alpha + '}' +
|
65
|
-
'100%{opacity:'+ z + '}' +
|
66
|
-
'}',
|
67
|
-
|
62
|
+
(start+trail) % 100 + '%{opacity:' + alpha + '}' +
|
63
|
+
'100%{opacity:' + z + '}' +
|
64
|
+
'}', sheet.cssRules.length)
|
65
|
+
|
66
|
+
animations[name] = 1
|
68
67
|
}
|
69
|
-
return name
|
68
|
+
return name
|
70
69
|
}
|
71
70
|
|
72
71
|
/**
|
73
72
|
* Tries various vendor prefixes and returns the first supported property.
|
74
73
|
**/
|
75
74
|
function vendor(el, prop) {
|
76
|
-
var s = el.style
|
77
|
-
|
78
|
-
|
75
|
+
var s = el.style
|
76
|
+
, pp
|
77
|
+
, i
|
79
78
|
|
80
|
-
if(s[prop] !== undefined) return prop
|
81
|
-
prop = prop.charAt(0).toUpperCase() + prop.slice(1)
|
79
|
+
if(s[prop] !== undefined) return prop
|
80
|
+
prop = prop.charAt(0).toUpperCase() + prop.slice(1)
|
82
81
|
for(i=0; i<prefixes.length; i++) {
|
83
|
-
pp = prefixes[i]+prop
|
84
|
-
if(s[pp] !== undefined) return pp
|
82
|
+
pp = prefixes[i]+prop
|
83
|
+
if(s[pp] !== undefined) return pp
|
85
84
|
}
|
86
85
|
}
|
87
86
|
|
@@ -89,10 +88,10 @@
|
|
89
88
|
* Sets multiple style properties at once.
|
90
89
|
*/
|
91
90
|
function css(el, prop) {
|
92
|
-
for (var n in prop)
|
93
|
-
el.style[vendor(el, n)||n] = prop[n]
|
94
|
-
|
95
|
-
return el
|
91
|
+
for (var n in prop)
|
92
|
+
el.style[vendor(el, n)||n] = prop[n]
|
93
|
+
|
94
|
+
return el
|
96
95
|
}
|
97
96
|
|
98
97
|
/**
|
@@ -100,24 +99,22 @@
|
|
100
99
|
*/
|
101
100
|
function merge(obj) {
|
102
101
|
for (var i=1; i < arguments.length; i++) {
|
103
|
-
var def = arguments[i]
|
104
|
-
for (var n in def)
|
105
|
-
if (obj[n] === undefined) obj[n] = def[n]
|
106
|
-
}
|
102
|
+
var def = arguments[i]
|
103
|
+
for (var n in def)
|
104
|
+
if (obj[n] === undefined) obj[n] = def[n]
|
107
105
|
}
|
108
|
-
return obj
|
106
|
+
return obj
|
109
107
|
}
|
110
108
|
|
111
109
|
/**
|
112
110
|
* Returns the absolute page-offset of the given element.
|
113
111
|
*/
|
114
112
|
function pos(el) {
|
115
|
-
var o = {x:el.offsetLeft, y:el.offsetTop}
|
116
|
-
while((el = el.offsetParent))
|
117
|
-
o.x+=el.offsetLeft
|
118
|
-
|
119
|
-
|
120
|
-
return o;
|
113
|
+
var o = { x:el.offsetLeft, y:el.offsetTop }
|
114
|
+
while((el = el.offsetParent))
|
115
|
+
o.x+=el.offsetLeft, o.y+=el.offsetTop
|
116
|
+
|
117
|
+
return o
|
121
118
|
}
|
122
119
|
|
123
120
|
var defaults = {
|
@@ -125,7 +122,8 @@
|
|
125
122
|
length: 7, // The length of each line
|
126
123
|
width: 5, // The line thickness
|
127
124
|
radius: 10, // The radius of the inner circle
|
128
|
-
rotate: 0, //
|
125
|
+
rotate: 0, // Rotation offset
|
126
|
+
corners: 1, // Roundness (0..1)
|
129
127
|
color: '#000', // #rgb or #rrggbb
|
130
128
|
speed: 1, // Rounds per second
|
131
129
|
trail: 100, // Afterglow percentage
|
@@ -135,69 +133,72 @@
|
|
135
133
|
className: 'spinner', // CSS class to assign to the element
|
136
134
|
top: 'auto', // center vertically
|
137
135
|
left: 'auto' // center horizontally
|
138
|
-
}
|
136
|
+
}
|
139
137
|
|
140
138
|
/** The constructor */
|
141
139
|
var Spinner = function Spinner(o) {
|
142
|
-
if (!this.spin) return new Spinner(o)
|
143
|
-
this.opts = merge(o || {}, Spinner.defaults, defaults)
|
144
|
-
}
|
140
|
+
if (!this.spin) return new Spinner(o)
|
141
|
+
this.opts = merge(o || {}, Spinner.defaults, defaults)
|
142
|
+
}
|
143
|
+
|
144
|
+
Spinner.defaults = {}
|
145
145
|
|
146
|
-
Spinner.defaults = {};
|
147
146
|
merge(Spinner.prototype, {
|
148
147
|
spin: function(target) {
|
149
|
-
this.stop()
|
150
|
-
var self = this
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
148
|
+
this.stop()
|
149
|
+
var self = this
|
150
|
+
, o = self.opts
|
151
|
+
, el = self.el = css(createEl(0, {className: o.className}), {position: 'relative', width: 0, zIndex: o.zIndex})
|
152
|
+
, mid = o.radius+o.length+o.width
|
153
|
+
, ep // element position
|
154
|
+
, tp // target position
|
156
155
|
|
157
156
|
if (target) {
|
158
|
-
target.insertBefore(el, target.firstChild||null)
|
159
|
-
tp = pos(target)
|
160
|
-
ep = pos(el)
|
157
|
+
target.insertBefore(el, target.firstChild||null)
|
158
|
+
tp = pos(target)
|
159
|
+
ep = pos(el)
|
161
160
|
css(el, {
|
162
|
-
left: (o.left == 'auto' ? tp.x-ep.x + (target.offsetWidth >> 1) : o.left+mid) + 'px',
|
163
|
-
top: (o.top == 'auto' ? tp.y-ep.y + (target.offsetHeight >> 1) : o.top+mid) + 'px'
|
164
|
-
})
|
161
|
+
left: (o.left == 'auto' ? tp.x-ep.x + (target.offsetWidth >> 1) : parseInt(o.left, 10) + mid) + 'px',
|
162
|
+
top: (o.top == 'auto' ? tp.y-ep.y + (target.offsetHeight >> 1) : parseInt(o.top, 10) + mid) + 'px'
|
163
|
+
})
|
165
164
|
}
|
166
165
|
|
167
|
-
el.setAttribute('aria-role', 'progressbar')
|
168
|
-
self.lines(el, self.opts)
|
166
|
+
el.setAttribute('aria-role', 'progressbar')
|
167
|
+
self.lines(el, self.opts)
|
169
168
|
|
170
169
|
if (!useCssAnimations) {
|
171
170
|
// No CSS animation support, use setTimeout() instead
|
172
|
-
var i = 0
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
171
|
+
var i = 0
|
172
|
+
, fps = o.fps
|
173
|
+
, f = fps/o.speed
|
174
|
+
, ostep = (1-o.opacity) / (f*o.trail / 100)
|
175
|
+
, astep = f/o.lines
|
177
176
|
|
178
|
-
|
177
|
+
;(function anim() {
|
179
178
|
i++;
|
180
179
|
for (var s=o.lines; s; s--) {
|
181
|
-
var alpha = Math.max(1-(i+s*astep)%f * ostep, o.opacity)
|
182
|
-
self.opacity(el, o.lines-s, alpha, o)
|
180
|
+
var alpha = Math.max(1-(i+s*astep)%f * ostep, o.opacity)
|
181
|
+
self.opacity(el, o.lines-s, alpha, o)
|
183
182
|
}
|
184
|
-
self.timeout = self.el && setTimeout(anim, ~~(1000/fps))
|
185
|
-
}()
|
183
|
+
self.timeout = self.el && setTimeout(anim, ~~(1000/fps))
|
184
|
+
})()
|
186
185
|
}
|
187
|
-
return self
|
186
|
+
return self
|
188
187
|
},
|
188
|
+
|
189
189
|
stop: function() {
|
190
|
-
var el = this.el
|
190
|
+
var el = this.el
|
191
191
|
if (el) {
|
192
|
-
clearTimeout(this.timeout)
|
193
|
-
if (el.parentNode) el.parentNode.removeChild(el)
|
194
|
-
this.el = undefined
|
192
|
+
clearTimeout(this.timeout)
|
193
|
+
if (el.parentNode) el.parentNode.removeChild(el)
|
194
|
+
this.el = undefined
|
195
195
|
}
|
196
|
-
return this
|
196
|
+
return this
|
197
197
|
},
|
198
|
+
|
198
199
|
lines: function(el, o) {
|
199
|
-
var i = 0
|
200
|
-
|
200
|
+
var i = 0
|
201
|
+
, seg
|
201
202
|
|
202
203
|
function fill(color, shadow) {
|
203
204
|
return css(createEl(), {
|
@@ -208,9 +209,10 @@
|
|
208
209
|
boxShadow: shadow,
|
209
210
|
transformOrigin: 'left',
|
210
211
|
transform: 'rotate(' + ~~(360/o.lines*i+o.rotate) + 'deg) translate(' + o.radius+'px' +',0)',
|
211
|
-
borderRadius: (o.width>>1) + 'px'
|
212
|
-
})
|
212
|
+
borderRadius: (o.corners * o.width>>1) + 'px'
|
213
|
+
})
|
213
214
|
}
|
215
|
+
|
214
216
|
for (; i < o.lines; i++) {
|
215
217
|
seg = css(createEl(), {
|
216
218
|
position: 'absolute',
|
@@ -218,16 +220,20 @@
|
|
218
220
|
transform: o.hwaccel ? 'translate3d(0,0,0)' : '',
|
219
221
|
opacity: o.opacity,
|
220
222
|
animation: useCssAnimations && addAnimation(o.opacity, o.trail, i, o.lines) + ' ' + 1/o.speed + 's linear infinite'
|
221
|
-
})
|
222
|
-
|
223
|
-
|
223
|
+
})
|
224
|
+
|
225
|
+
if (o.shadow) ins(seg, css(fill('#000', '0 0 4px ' + '#000'), {top: 2+'px'}))
|
226
|
+
|
227
|
+
ins(el, ins(seg, fill(o.color, '0 0 1px rgba(0,0,0,.1)')))
|
224
228
|
}
|
225
|
-
return el
|
229
|
+
return el
|
226
230
|
},
|
231
|
+
|
227
232
|
opacity: function(el, i, val) {
|
228
|
-
if (i < el.childNodes.length) el.childNodes[i].style.opacity = val
|
233
|
+
if (i < el.childNodes.length) el.childNodes[i].style.opacity = val
|
229
234
|
}
|
230
|
-
|
235
|
+
|
236
|
+
})
|
231
237
|
|
232
238
|
/////////////////////////////////////////////////////////////////////////
|
233
239
|
// VML rendering for IE
|
@@ -236,36 +242,41 @@
|
|
236
242
|
/**
|
237
243
|
* Check and init VML support
|
238
244
|
*/
|
239
|
-
|
245
|
+
;(function() {
|
240
246
|
|
241
247
|
function vml(tag, attr) {
|
242
|
-
return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr)
|
248
|
+
return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr)
|
243
249
|
}
|
244
250
|
|
245
|
-
var s = css(createEl('group'), {behavior: 'url(#default#VML)'})
|
251
|
+
var s = css(createEl('group'), {behavior: 'url(#default#VML)'})
|
246
252
|
|
247
253
|
if (!vendor(s, 'transform') && s.adj) {
|
248
254
|
|
249
255
|
// VML support detected. Insert CSS rule ...
|
250
|
-
sheet.addRule('.spin-vml', 'behavior:url(#default#VML)')
|
256
|
+
sheet.addRule('.spin-vml', 'behavior:url(#default#VML)')
|
251
257
|
|
252
258
|
Spinner.prototype.lines = function(el, o) {
|
253
|
-
var r = o.length+o.width
|
254
|
-
|
259
|
+
var r = o.length+o.width
|
260
|
+
, s = 2*r
|
255
261
|
|
256
262
|
function grp() {
|
257
|
-
return css(
|
263
|
+
return css(
|
264
|
+
vml('group', {
|
265
|
+
coordsize: s + ' ' + s,
|
266
|
+
coordorigin: -r + ' ' + -r
|
267
|
+
}),
|
268
|
+
{ width: s, height: s }
|
269
|
+
)
|
258
270
|
}
|
259
271
|
|
260
|
-
var margin = -(o.width+o.length)*2+'px'
|
261
|
-
|
262
|
-
|
263
|
-
var i;
|
272
|
+
var margin = -(o.width+o.length)*2 + 'px'
|
273
|
+
, g = css(grp(), {position: 'absolute', top: margin, left: margin})
|
274
|
+
, i
|
264
275
|
|
265
276
|
function seg(i, dx, filter) {
|
266
277
|
ins(g,
|
267
278
|
ins(css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}),
|
268
|
-
ins(css(vml('roundrect', {arcsize:
|
279
|
+
ins(css(vml('roundrect', {arcsize: o.corners}), {
|
269
280
|
width: r,
|
270
281
|
height: o.width,
|
271
282
|
left: o.radius,
|
@@ -276,31 +287,33 @@
|
|
276
287
|
vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change
|
277
288
|
)
|
278
289
|
)
|
279
|
-
)
|
290
|
+
)
|
280
291
|
}
|
281
292
|
|
282
|
-
if (o.shadow)
|
283
|
-
for (i = 1; i <= o.lines; i++)
|
284
|
-
seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)')
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
|
293
|
+
if (o.shadow)
|
294
|
+
for (i = 1; i <= o.lines; i++)
|
295
|
+
seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)')
|
296
|
+
|
297
|
+
for (i = 1; i <= o.lines; i++) seg(i)
|
298
|
+
return ins(el, g)
|
299
|
+
}
|
300
|
+
|
290
301
|
Spinner.prototype.opacity = function(el, i, val, o) {
|
291
|
-
var c = el.firstChild
|
292
|
-
o = o.shadow && o.lines || 0
|
302
|
+
var c = el.firstChild
|
303
|
+
o = o.shadow && o.lines || 0
|
293
304
|
if (c && i+o < c.childNodes.length) {
|
294
|
-
c = c.childNodes[i+o]; c = c && c.firstChild; c = c && c.firstChild
|
295
|
-
if (c) c.opacity = val
|
305
|
+
c = c.childNodes[i+o]; c = c && c.firstChild; c = c && c.firstChild
|
306
|
+
if (c) c.opacity = val
|
296
307
|
}
|
297
|
-
}
|
298
|
-
}
|
299
|
-
else {
|
300
|
-
useCssAnimations = vendor(s, 'animation');
|
308
|
+
}
|
301
309
|
}
|
302
|
-
|
310
|
+
else
|
311
|
+
useCssAnimations = vendor(s, 'animation')
|
312
|
+
})()
|
303
313
|
|
304
|
-
|
314
|
+
if (typeof define == 'function' && define.amd)
|
315
|
+
define(function() { return Spinner })
|
316
|
+
else
|
317
|
+
window.Spinner = Spinner
|
305
318
|
|
306
|
-
}
|
319
|
+
}(window, document)
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: spinjs-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.4
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,11 +9,11 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2012-
|
12
|
+
date: 2012-09-11 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: rails
|
16
|
-
requirement:
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
17
17
|
none: false
|
18
18
|
requirements:
|
19
19
|
- - ! '>='
|
@@ -21,7 +21,12 @@ dependencies:
|
|
21
21
|
version: '3.1'
|
22
22
|
type: :runtime
|
23
23
|
prerelease: false
|
24
|
-
version_requirements:
|
24
|
+
version_requirements: !ruby/object:Gem::Requirement
|
25
|
+
none: false
|
26
|
+
requirements:
|
27
|
+
- - ! '>='
|
28
|
+
- !ruby/object:Gem::Version
|
29
|
+
version: '3.1'
|
25
30
|
description: An animated CSS3 loading spinner with VML fallback for IE.
|
26
31
|
email:
|
27
32
|
- dnagir@gmail.com
|
@@ -51,15 +56,21 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
51
56
|
- - ! '>='
|
52
57
|
- !ruby/object:Gem::Version
|
53
58
|
version: '0'
|
59
|
+
segments:
|
60
|
+
- 0
|
61
|
+
hash: 1254404581123064380
|
54
62
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
55
63
|
none: false
|
56
64
|
requirements:
|
57
65
|
- - ! '>='
|
58
66
|
- !ruby/object:Gem::Version
|
59
67
|
version: '0'
|
68
|
+
segments:
|
69
|
+
- 0
|
70
|
+
hash: 1254404581123064380
|
60
71
|
requirements: []
|
61
72
|
rubyforge_project: spinjs-rails
|
62
|
-
rubygems_version: 1.8.
|
73
|
+
rubygems_version: 1.8.24
|
63
74
|
signing_key:
|
64
75
|
specification_version: 3
|
65
76
|
summary: A spinning activity indicator for Rails 3 with no images and CSS.
|