1/** 2 * Copyright (c) 2011-2014 Felix Gnass 3 * Licensed under the MIT license 4 */ 5(function(root, factory) { 6 7 /* CommonJS */ 8 if (typeof exports == 'object') module.exports = factory() 9 10 /* AMD module */ 11 else if (typeof define == 'function' && define.amd) define(factory) 12 13 /* Browser global */ 14 else root.Spinner = factory() 15} 16(this, function() { 17 "use strict"; 18 19 var prefixes = ['webkit', 'Moz', 'ms', 'O'] /* Vendor prefixes */ 20 , animations = {} /* Animation rules keyed by their name */ 21 , useCssAnimations /* Whether to use CSS animations or setTimeout */ 22 23 /** 24 * Utility function to create elements. If no tag name is given, 25 * a DIV is created. Optionally properties can be passed. 26 */ 27 function createEl(tag, prop) { 28 var el = document.createElement(tag || 'div') 29 , n 30 31 for(n in prop) el[n] = prop[n] 32 return el 33 } 34 35 /** 36 * Appends children and returns the parent. 37 */ 38 function ins(parent /* child1, child2, ...*/) { 39 for (var i=1, n=arguments.length; i<n; i++) 40 parent.appendChild(arguments[i]) 41 42 return parent 43 } 44 45 /** 46 * Insert a new stylesheet to hold the @keyframe or VML rules. 47 */ 48 var sheet = (function() { 49 var el = createEl('style', {type : 'text/css'}) 50 ins(document.getElementsByTagName('head')[0], el) 51 return el.sheet || el.styleSheet 52 }()) 53 54 /** 55 * Creates an opacity keyframe animation rule and returns its name. 56 * Since most mobile Webkits have timing issues with animation-delay, 57 * we create separate rules for each line/segment. 58 */ 59 function addAnimation(alpha, trail, i, lines) { 60 var name = ['opacity', trail, ~~(alpha*100), i, lines].join('-') 61 , start = 0.01 + i/lines * 100 62 , z = Math.max(1 - (1-alpha) / trail * (100-start), alpha) 63 , prefix = useCssAnimations.substring(0, useCssAnimations.indexOf('Animation')).toLowerCase() 64 , pre = prefix && '-' + prefix + '-' || '' 65 66 if (!animations[name]) { 67 sheet.insertRule( 68 '@' + pre + 'keyframes ' + name + '{' + 69 '0%{opacity:' + z + '}' + 70 start + '%{opacity:' + alpha + '}' + 71 (start+0.01) + '%{opacity:1}' + 72 (start+trail) % 100 + '%{opacity:' + alpha + '}' + 73 '100%{opacity:' + z + '}' + 74 '}', sheet.cssRules.length) 75 76 animations[name] = 1 77 } 78 79 return name 80 } 81 82 /** 83 * Tries various vendor prefixes and returns the first supported property. 84 */ 85 function vendor(el, prop) { 86 var s = el.style 87 , pp 88 , i 89 90 prop = prop.charAt(0).toUpperCase() + prop.slice(1) 91 for(i=0; i<prefixes.length; i++) {
92 pp = prefixes[i]+prop 93 if(s[pp] !== undefined) return pp 94 } 95 if(s[prop] !== undefined) return prop 96 } 97 98 /** 99 * Sets multiple style properties at once. 100 */ 101 function css(el, prop) { 102 for (var n in prop) 103 el.style[vendor(el, n)||n] = prop[n] 104 105 return el 106 } 107 108 /** 109 * Fills in default values. 110 */ 111 function merge(obj) { 112 for (var i=1; i < arguments.length; i++) { 113 var def = arguments[i] 114 for (var n in def) 115 if (obj[n] === undefined) obj[n] = def[n] 116 } 117 return obj 118 } 119 120 /** 121 * Returns the absolute page-offset of the given element. 122 */ 123 function pos(el) { 124 var o = { x:el.offsetLeft, y:el.offsetTop } 125 while((el = el.offsetParent)) 126 o.x+=el.offsetLeft, o.y+=el.offsetTop 127 128 return o 129 } 130 131 /** 132 * Returns the line color from the given string or array. 133 */ 134 function getColor(color, idx) { 135 return typeof color == 'string' ? color : color[idx % color.length] 136 } 137 138 // Built-in defaults 139 140 var defaults = { 141 lines: 12, // The number of lines to draw 142 length: 7, // The length of each line 143 width: 5, // The line thickness 144 radius: 10, // The radius of the inner circle 145 rotate: 0, // Rotation offset 146 corners: 1, // Roundness (0..1) 147 color: '#000', // #rgb or #rrggbb 148 direction: 1, // 1: clockwise, -1: counterclockwise 149 speed: 1, // Rounds per second 150 trail: 100, // Afterglow percentage 151 opacity: 1/4, // Opacity of the lines 152 fps: 20, // Frames per second when using setTimeout() 153 zIndex: 2e9, // Use a high z-index by default 154 className: 'spinner', // CSS class to assign to the element 155 top: '50%', // center vertically 156 left: '50%', // center horizontally 157 position: 'absolute' // element position 158 } 159 160 /** The constructor */ 161 function Spinner(o) { 162 this.opts = merge(o || {}, Spinner.defaults, defaults) 163 } 164 165 // Global defaults that override the built-ins: 166 Spinner.defaults = {} 167 168 merge(Spinner.prototype, { 169 170 /** 171 * Adds the spinner to the given target element. If this instance is already 172 * spinning, it is automatically removed from its previous target b calling 173 * stop() internally. 174 */ 175 spin: function(target) { 176 this.stop() 177 178 var self = this 179 , o = self.opts 180 , el = self.el = css(createEl(0, {className: o.className}), {position: o.position, width: 0, zIndex: o.zIndex}) 181 , mid = o.radius+o.length+o.width 182 183 css(el, { 184 left: o.left, 185 top: o.top 186 }) 187 188 if (target) { 189 target.insertBefore(el, target.firstChild||null) 190 } 191 192 el.setAttribute('role', 'progressbar') 193 self.lines(el, self.opts) 194 195 if (!useCssAnimations) { 196 // No CSS animation support, use setTimeout() instead 197 var i = 0 198 , start = (o.lines - 1) * (1 - o.direction) / 2 199 , alpha 200 , fps = o.fps 201 , f = fps/o.speed 202 , ostep = (1-o.opacity) / (f*o.trail / 100) 203 , astep = f/o.lines 204 205 ;(function anim() { 206 i++; 207 for (var j = 0; j < o.lines; j++) { 208 alpha = Math.max(1 - (i + (o.lines - j) * astep) % f * ostep, o.opacity) 209 210 self.opacity(el, j * o.direction + start, alpha, o) 211 } 212 self.timeout = self.el && setTimeout(anim, ~~(1000/fps)) 213 })() 214 } 215 return self 216 }, 217 218 /** 219 * Stops and removes the Spinner. 220 */ 221 stop: function() { 222 var el = this.el 223 if (el) { 224 clearTimeout(this.timeout) 225 if (el.parentNode) el.parentNode.removeChild(el) 226 this.el = undefined 227 } 228 return this 229 }, 230 231 /** 232 * Internal method that draws the individual lines. Will be overwritten 233 * in VML fallback mode below. 234 */ 235 lines: function(el, o) { 236 var i = 0 237 , start = (o.lines - 1) * (1 - o.direction) / 2 238 , seg 239 240 function fill(color, shadow) { 241 return css(createEl(), { 242 position: 'absolute', 243 width: (o.length+o.width) + 'px', 244 height: o.width + 'px', 245 background: color, 246 boxShadow: shadow, 247 transformOrigin: 'left', 248 transform: 'rotate(' + ~~(360/o.lines*i+o.rotate) + 'deg) translate(' + o.radius+'px' +',0)', 249 borderRadius: (o.corners * o.width>>1) + 'px' 250 }) 251 } 252 253 for (; i < o.lines; i++) { 254 seg = css(createEl(), { 255 position: 'absolute', 256 top: 1+~(o.width/2) + 'px',
257 transform: o.hwaccel ? 'translate3d(0,0,0)' : '', 258 opacity: o.opacity, 259 animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + ' ' + 1/o.speed + 's linear infinite' 260 }) 261 262 if (o.shadow) ins(seg, css(fill('#000', '0 0 4px ' + '#000'), {top: 2+'px'})) 263 ins(el, ins(seg, fill(getColor(o.color, i), '0 0 1px rgba(0,0,0,.1)'))) 264 } 265 return el 266 }, 267 268 /** 269 * Internal method that adjusts the opacity of a single line. 270 * Will be overwritten in VML fallback mode below. 271 */ 272 opacity: function(el, i, val) { 273 if (i < el.childNodes.length) el.childNodes[i].style.opacity = val 274 } 275 276 }) 277 278 279 function initVML() { 280 281 /* Utility function to create a VML tag */ 282 function vml(tag, attr) { 283 return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr) 284 } 285 286 // No CSS transforms but VML support, add a CSS rule for VML elements: 287 sheet.addRule('.spin-vml', 'behavior:url(#default#VML)') 288 289 Spinner.prototype.lines = function(el, o) { 290 var r = o.length+o.width 291 , s = 2*r 292 293 function grp() { 294 return css( 295 vml('group', { 296 coordsize: s + ' ' + s, 297 coordorigin: -r + ' ' + -r 298 }), 299 { width: s, height: s } 300 ) 301 } 302 303 var margin = -(o.width+o.length)*2 + 'px' 304 , g = css(grp(), {position: 'absolute', top: margin, left: margin}) 305 , i 306 307 function seg(i, dx, filter) { 308 ins(g, 309 ins(css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}), 310 ins(css(vml('roundrect', {arcsize: o.corners}), { 311 width: r, 312 height: o.width, 313 left: o.radius, 314 top: -o.width>>1, 315 filter: filter 316 }), 317 vml('fill', {color: getColor(o.color, i), opacity: o.opacity}), 318 vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change 319 ) 320 ) 321 ) 322 } 323 324 if (o.shadow) 325 for (i = 1; i <= o.lines; i++) 326 seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)') 327 328 for (i = 1; i <= o.lines; i++) seg(i) 329 return ins(el, g) 330 } 331 332 Spinner.prototype.opacity = function(el, i, val, o) { 333 var c = el.firstChild 334 o = o.shadow && o.lines || 0 335 if (c && i+o < c.childNodes.length) { 336 c = c.childNodes[i+o]; c = c && c.firstChild; c = c && c.firstChild 337 if (c) c.opacity = val 338 } 339 } 340 } 341 342 var probe = css(createEl('group'), {behavior: 'url(#default#VML)'}) 343 344 if (!vendor(probe, 'transform') && probe.adj) initVML() 345 else useCssAnimations = vendor(probe, 'animation') 346 347 return Spinner 348 349}));
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.