Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

update spinjs to version 1.2.5

  • Loading branch information...
commit a31087a586b9ea9da9c8a58b5370f530f5556719 1 parent dece50b
@hibariya hibariya authored
Showing with 120 additions and 109 deletions.
  1. +120 −109 vendor/assets/javascripts/spin.js
View
229 vendor/assets/javascripts/spin.js
@@ -1,4 +1,4 @@
-//fgnass.github.com/spin.js#v1.2.2
+//fgnass.github.com/spin.js#v1.2.5
(function(window, document, undefined) {
/**
@@ -6,17 +6,17 @@
* Licensed under the MIT license
*/
- var prefixes = ['webkit', 'Moz', 'ms', 'O'], /* Vendor prefixes */
- animations = {}, /* Animation rules keyed by their name */
- useCssAnimations;
+ var prefixes = ['webkit', 'Moz', 'ms', 'O']; /* Vendor prefixes */
+ var animations = {}; /* Animation rules keyed by their name */
+ var useCssAnimations;
/**
* Utility function to create elements. If no tag name is given,
* a DIV is created. Optionally properties can be passed.
*/
function createEl(tag, prop) {
- var el = document.createElement(tag || 'div'),
- n;
+ var el = document.createElement(tag || 'div');
+ var n;
for(n in prop) {
el[n] = prop[n];
@@ -25,24 +25,23 @@
}
/**
- * Inserts child1 before child2. If child2 is not specified,
- * child1 is appended. If child2 has no parentNode, child2 is
- * appended first.
+ * Appends children and returns the parent.
*/
- function ins(parent, child1, child2) {
- if(child2 && !child2.parentNode) ins(parent, child2);
- parent.insertBefore(child1, child2||null);
+ function ins(parent /* child1, child2, ...*/) {
+ for (var i=1, n=arguments.length; i<n; i++) {
+ parent.appendChild(arguments[i]);
+ }
return parent;
}
/**
* Insert a new stylesheet to hold the @keyframe or VML rules.
*/
- var sheet = (function() {
+ var sheet = function() {
var el = createEl('style');
ins(document.getElementsByTagName('head')[0], el);
return el.sheet || el.styleSheet;
- })();
+ }();
/**
* Creates an opacity keyframe animation rule and returns its name.
@@ -50,11 +49,11 @@
* we create separate rules for each line/segment.
*/
function addAnimation(alpha, trail, i, lines) {
- var name = ['opacity', trail, ~~(alpha*100), i, lines].join('-'),
- start = 0.01 + i/lines*100,
- z = Math.max(1-(1-alpha)/trail*(100-start) , alpha),
- prefix = useCssAnimations.substring(0, useCssAnimations.indexOf('Animation')).toLowerCase(),
- pre = prefix && '-'+prefix+'-' || '';
+ var name = ['opacity', trail, ~~(alpha*100), i, lines].join('-');
+ var start = 0.01 + i/lines*100;
+ var z = Math.max(1-(1-alpha)/trail*(100-start) , alpha);
+ var prefix = useCssAnimations.substring(0, useCssAnimations.indexOf('Animation')).toLowerCase();
+ var pre = prefix && '-'+prefix+'-' || '';
if (!animations[name]) {
sheet.insertRule(
@@ -74,9 +73,9 @@
* Tries various vendor prefixes and returns the first supported property.
**/
function vendor(el, prop) {
- var s = el.style,
- pp,
- i;
+ var s = el.style;
+ var pp;
+ var i;
if(s[prop] !== undefined) return prop;
prop = prop.charAt(0).toUpperCase() + prop.slice(1);
@@ -121,57 +120,69 @@
return o;
}
+ var defaults = {
+ lines: 12, // The number of lines to draw
+ length: 7, // The length of each line
+ width: 5, // The line thickness
+ radius: 10, // The radius of the inner circle
+ rotate: 0, // rotation offset
+ color: '#000', // #rgb or #rrggbb
+ speed: 1, // Rounds per second
+ trail: 100, // Afterglow percentage
+ opacity: 1/4, // Opacity of the lines
+ fps: 20, // Frames per second when using setTimeout()
+ zIndex: 2e9, // Use a high z-index by default
+ className: 'spinner', // CSS class to assign to the element
+ top: 'auto', // center vertically
+ left: 'auto' // center horizontally
+ };
+
/** The constructor */
var Spinner = function Spinner(o) {
if (!this.spin) return new Spinner(o);
this.opts = merge(o || {}, Spinner.defaults, defaults);
- },
- defaults = Spinner.defaults = {
- lines: 12, // The number of lines to draw
- length: 7, // The length of each line
- width: 5, // The line thickness
- radius: 10, // The radius of the inner circle
- color: '#000', // #rgb or #rrggbb
- speed: 1, // Rounds per second
- trail: 100, // Afterglow percentage
- opacity: 1/4,
- fps: 20
- },
- proto = Spinner.prototype = {
+ };
+
+ Spinner.defaults = {};
+ merge(Spinner.prototype, {
spin: function(target) {
this.stop();
- var self = this,
- el = self.el = css(createEl(), {position: 'relative'}),
- ep, // element position
- tp; // target position
+ var self = this;
+ var o = self.opts;
+ var el = self.el = css(createEl(0, {className: o.className}), {position: 'relative', zIndex: o.zIndex});
+ var mid = o.radius+o.length+o.width;
+ var ep; // element position
+ var tp; // target position
if (target) {
- tp = pos(ins(target, el, target.firstChild));
+ target.insertBefore(el, target.firstChild||null);
+ tp = pos(target);
ep = pos(el);
css(el, {
- left: (target.offsetWidth >> 1) - ep.x+tp.x + 'px',
- top: (target.offsetHeight >> 1) - ep.y+tp.y + 'px'
+ left: (o.left == 'auto' ? tp.x-ep.x + (target.offsetWidth >> 1) : o.left+mid) + 'px',
+ top: (o.top == 'auto' ? tp.y-ep.y + (target.offsetHeight >> 1) : o.top+mid) + 'px'
});
}
+
el.setAttribute('aria-role', 'progressbar');
self.lines(el, self.opts);
+
if (!useCssAnimations) {
// No CSS animation support, use setTimeout() instead
- var o = self.opts,
- i = 0,
- fps = o.fps,
- f = fps/o.speed,
- ostep = (1-o.opacity)/(f*o.trail / 100),
- astep = f/o.lines;
-
- (function anim() {
+ var i = 0;
+ var fps = o.fps;
+ var f = fps/o.speed;
+ var ostep = (1-o.opacity)/(f*o.trail / 100);
+ var astep = f/o.lines;
+
+ !function anim() {
i++;
for (var s=o.lines; s; s--) {
var alpha = Math.max(1-(i+s*astep)%f * ostep, o.opacity);
self.opacity(el, o.lines-s, alpha, o);
}
self.timeout = self.el && setTimeout(anim, ~~(1000/fps));
- })();
+ }();
}
return self;
},
@@ -183,81 +194,86 @@
this.el = undefined;
}
return this;
+ },
+ lines: function(el, o) {
+ var i = 0;
+ var seg;
+
+ function fill(color, shadow) {
+ return css(createEl(), {
+ position: 'absolute',
+ width: (o.length+o.width) + 'px',
+ height: o.width + 'px',
+ background: color,
+ boxShadow: shadow,
+ transformOrigin: 'left',
+ transform: 'rotate(' + ~~(360/o.lines*i+o.rotate) + 'deg) translate(' + o.radius+'px' +',0)',
+ borderRadius: (o.width>>1) + 'px'
+ });
+ }
+ for (; i < o.lines; i++) {
+ seg = css(createEl(), {
+ position: 'absolute',
+ top: 1+~(o.width/2) + 'px',
+ transform: o.hwaccel ? 'translate3d(0,0,0)' : '',
+ opacity: o.opacity,
+ animation: useCssAnimations && addAnimation(o.opacity, o.trail, i, o.lines) + ' ' + 1/o.speed + 's linear infinite'
+ });
+ if (o.shadow) ins(seg, css(fill('#000', '0 0 4px ' + '#000'), {top: 2+'px'}));
+ ins(el, ins(seg, fill(o.color, '0 0 1px rgba(0,0,0,.1)')));
+ }
+ return el;
+ },
+ opacity: function(el, i, val) {
+ if (i < el.childNodes.length) el.childNodes[i].style.opacity = val;
}
- };
- proto.lines = function(el, o) {
- var i = 0,
- seg;
-
- function fill(color, shadow) {
- return css(createEl(), {
- position: 'absolute',
- width: (o.length+o.width) + 'px',
- height: o.width + 'px',
- background: color,
- boxShadow: shadow,
- transformOrigin: 'left',
- transform: 'rotate(' + ~~(360/o.lines*i) + 'deg) translate(' + o.radius+'px' +',0)',
- borderRadius: (o.width>>1) + 'px'
- });
- }
- for (; i < o.lines; i++) {
- seg = css(createEl(), {
- position: 'absolute',
- top: 1+~(o.width/2) + 'px',
- transform: 'translate3d(0,0,0)',
- opacity: o.opacity,
- animation: useCssAnimations && addAnimation(o.opacity, o.trail, i, o.lines) + ' ' + 1/o.speed + 's linear infinite'
- });
- if (o.shadow) ins(seg, css(fill('#000', '0 0 4px ' + '#000'), {top: 2+'px'}));
- ins(el, ins(seg, fill(o.color, '0 0 1px rgba(0,0,0,.1)')));
- }
- return el;
- };
- proto.opacity = function(el, i, val) {
- if (i < el.childNodes.length) el.childNodes[i].style.opacity = val;
- };
+ });
/////////////////////////////////////////////////////////////////////////
// VML rendering for IE
/////////////////////////////////////////////////////////////////////////
- /**
+ /**
* Check and init VML support
*/
- (function() {
- var s = css(createEl('group'), {behavior: 'url(#default#VML)'}),
- i;
+ !function() {
+
+ function vml(tag, attr) {
+ return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr);
+ }
+
+ var s = css(createEl('group'), {behavior: 'url(#default#VML)'});
if (!vendor(s, 'transform') && s.adj) {
- // VML support detected. Insert CSS rules ...
- for (i=4; i--;) sheet.addRule(['group', 'roundrect', 'fill', 'stroke'][i], 'behavior:url(#default#VML)');
+ // VML support detected. Insert CSS rule ...
+ sheet.addRule('.spin-vml', 'behavior:url(#default#VML)');
- proto.lines = function(el, o) {
- var r = o.length+o.width,
- s = 2*r;
+ Spinner.prototype.lines = function(el, o) {
+ var r = o.length+o.width;
+ var s = 2*r;
function grp() {
- return css(createEl('group', {coordsize: s +' '+s, coordorigin: -r +' '+-r}), {width: s, height: s});
+ return css(vml('group', {coordsize: s +' '+s, coordorigin: -r +' '+-r}), {width: s, height: s});
}
- var g = grp(),
- margin = ~(o.length+o.radius+o.width)+'px',
- i;
+ var margin = -(o.width+o.length)*2+'px';
+ var g = css(grp(), {position: 'absolute', top: margin, left: margin});
+
+ var i;
function seg(i, dx, filter) {
ins(g,
ins(css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}),
- ins(css(createEl('roundrect', {arcsize: 1}), {
+ ins(css(vml('roundrect', {arcsize: 1}), {
width: r,
height: o.width,
left: o.radius,
top: -o.width>>1,
filter: filter
}),
- createEl('fill', {color: o.color, opacity: o.opacity}),
- createEl('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change
+ vml('fill', {color: o.color, opacity: o.opacity}),
+ vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change
)
)
);
@@ -268,15 +284,10 @@
seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)');
}
}
- for (i = 1; i <= o.lines; i++) {
- seg(i);
- }
- return ins(css(el, {
- margin: margin + ' 0 0 ' + margin,
- zoom: 1
- }), g);
+ for (i = 1; i <= o.lines; i++) seg(i);
+ return ins(el, g);
};
- proto.opacity = function(el, i, val, o) {
+ Spinner.prototype.opacity = function(el, i, val, o) {
var c = el.firstChild;
o = o.shadow && o.lines || 0;
if (c && i+o < c.childNodes.length) {
@@ -288,7 +299,7 @@
else {
useCssAnimations = vendor(s, 'animation');
}
- })();
+ }();
window.Spinner = Spinner;
Please sign in to comment.
Something went wrong with that request. Please try again.