diff --git a/app/assets/javascripts/admin/all.js b/app/assets/javascripts/admin/all.js index 0e9ecec405..9a1af8871d 100644 --- a/app/assets/javascripts/admin/all.js +++ b/app/assets/javascripts/admin/all.js @@ -29,6 +29,7 @@ //= require spree //= require admin/spree_backend //= require modernizr +//= require spin //= require css_browser_selector_dev //= require responsive-tables //= require admin/spree_paypal_express diff --git a/app/assets/javascripts/admin/spree/progress.coffee b/app/assets/javascripts/admin/spree/progress.coffee new file mode 100644 index 0000000000..edc20a541b --- /dev/null +++ b/app/assets/javascripts/admin/spree/progress.coffee @@ -0,0 +1,27 @@ +$(document).ready -> + opts = + lines: 11 + length: 2 + width: 3 + radius: 9 + corners: 1 + rotate: 0 + color: '#fff' + speed: 0.8 + trail: 48 + shadow: false + hwaccel: true + className: 'spinner' + zIndex: 2e9 + top: 'auto' + left: 'auto' + + target = document.getElementById("spinner") + + $(document).ajaxStart -> + $("#progress").fadeIn() + spinner = new Spinner(opts).spin(target) + + $(document).ajaxStop -> + $("#progress").fadeOut() + diff --git a/app/assets/stylesheets/admin/components/progress.scss b/app/assets/stylesheets/admin/components/progress.scss new file mode 100644 index 0000000000..d0ac790eda --- /dev/null +++ b/app/assets/stylesheets/admin/components/progress.scss @@ -0,0 +1,35 @@ +#progress { + display: none; + position: fixed; + top: 0; + z-index: 1000; + opacity: 0.8; + width: 100%; + + .wrapper { + @include border-radius(10px); + top: -10px; + position: absolute; + left: 50%; + width: 200px; + margin-left: -100px; + padding: 11px 0; + background-color: $color-3; + color: $color-1; + text-align: center; + } + + #spinner { + position: absolute; + top: 10px; + left: 50%; + margin-left: -5px; + } + + .progress-message { + font-size: 120%; + font-weight: $font-weight-bold; + margin-top: 20px; + text-transform: uppercase; + } +} \ No newline at end of file diff --git a/vendor/assets/javascripts/spin.js b/vendor/assets/javascripts/spin.js new file mode 100644 index 0000000000..2a8642f311 --- /dev/null +++ b/vendor/assets/javascripts/spin.js @@ -0,0 +1,319 @@ +//fgnass.github.com/spin.js#v1.2.6 +!function(window, document, undefined) { + + /** + * Copyright (c) 2011 Felix Gnass [fgnass at neteye dot de] + * Licensed under the MIT license + */ + + var prefixes = ['webkit', 'Moz', 'ms', 'O'] /* Vendor prefixes */ + , animations = {} /* Animation rules keyed by their name */ + , 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 + + for(n in prop) el[n] = prop[n] + return el + } + + /** + * Appends children and returns the parent. + */ + function ins(parent /* child1, child2, ...*/) { + for (var i=1, n=arguments.length; i> 1) : parseInt(o.left, 10) + mid) + 'px', + top: (o.top == 'auto' ? tp.y-ep.y + (target.offsetHeight >> 1) : parseInt(o.top, 10) + mid) + 'px' + }) + } + + el.setAttribute('aria-role', 'progressbar') + self.lines(el, self.opts) + + if (!useCssAnimations) { + // No CSS animation support, use setTimeout() instead + var i = 0 + , fps = o.fps + , f = fps/o.speed + , ostep = (1-o.opacity) / (f*o.trail / 100) + , 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 + }, + + stop: function() { + var el = this.el + if (el) { + clearTimeout(this.timeout) + if (el.parentNode) el.parentNode.removeChild(el) + this.el = undefined + } + return this + }, + + 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+o.rotate) + 'deg) translate(' + o.radius+'px' +',0)', + borderRadius: (o.corners * 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 + } + + }) + + ///////////////////////////////////////////////////////////////////////// + // VML rendering for IE + ///////////////////////////////////////////////////////////////////////// + + /** + * Check and init VML support + */ + ;(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 rule ... + sheet.addRule('.spin-vml', 'behavior:url(#default#VML)') + + Spinner.prototype.lines = function(el, o) { + var r = o.length+o.width + , s = 2*r + + function grp() { + return css( + vml('group', { + coordsize: s + ' ' + s, + coordorigin: -r + ' ' + -r + }), + { width: s, height: s } + ) + } + + var margin = -(o.width+o.length)*2 + 'px' + , g = css(grp(), {position: 'absolute', top: margin, left: margin}) + , i + + function seg(i, dx, filter) { + ins(g, + ins(css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}), + ins(css(vml('roundrect', {arcsize: o.corners}), { + width: r, + height: o.width, + left: o.radius, + top: -o.width>>1, + filter: filter + }), + vml('fill', {color: o.color, opacity: o.opacity}), + vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change + ) + ) + ) + } + + if (o.shadow) + for (i = 1; i <= o.lines; i++) + seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)') + + for (i = 1; i <= o.lines; i++) seg(i) + return ins(el, g) + } + + 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) { + c = c.childNodes[i+o]; c = c && c.firstChild; c = c && c.firstChild + if (c) c.opacity = val + } + } + } + else + useCssAnimations = vendor(s, 'animation') + })() + + if (typeof define == 'function' && define.amd) + define(function() { return Spinner }) + else + window.Spinner = Spinner + +}(window, document)