https://www.stadtwerk-am-see.de/de/static/js/spinner/spin.js?nc=1790923960777

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

355               transform: o.hwaccel ? 'translate3d(0,0,0)' : '',
356               opacity: o.opacity,
357               animation: useCssAnimations && addAnimation(o.opacity, o.trail, start + i * o.direction, o.lines) + ' ' + 1/o.speed + 's linear infinite'
358            })
359
360            if (o.shadow) ins(seg, css(fill('#000', '0 0 4px ' + '#000'), {top: 2+'px'}))
361
362            ins(el, ins(seg, fill(o.color, '0 0 1px rgba(0,0,0,.1)')))
363         }
364         return el
365      },
366
367      /**
368       * Internal method that adjusts the opacity of a single line.
369       * Will be overwritten in VML fallback mode below.
370       */
371      opacity: function(el, i, val) {
372         if (i < el.childNodes.length) el.childNodes[i].style.opacity = val
373      }
374
375   })
376
377
378   function initVML() {
379
380      /* Utility function to create a VML tag */
381      function vml(tag, attr) {
382         return createEl('<' + tag + ' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">', attr)
383      }
384
385      // No CSS transforms but VML support, add a CSS rule for VML elements:
386      sheet.addRule('.spin-vml', 'behavior:url(#default#VML)')
387
388      Spinner.prototype.lines = function(el, o) {
389         var r = o.length+o.width
390            , s = 2*r
391
392         function grp() {
393            return css(
394               vml('group', {
395                  coordsize: s + ' ' + s,
396                  coordorigin: -r + ' ' + -r
397               }),
398               { width: s, height: s }
399            )
400         }
401
402         var margin = -(o.width+o.length)*2 + 'px'
403            , g = css(grp(), {position: 'absolute', top: margin, left: margin})
404            , i
405
406         function seg(i, dx, filter) {
407            ins(g,
408               ins(css(grp(), {rotation: 360 / o.lines * i + 'deg', left: ~~dx}),
409                  ins(css(vml('roundrect', {arcsize: o.corners}), {
410                        width: r,
411                        height: o.width,
412                        left: o.radius,
413                        top: -o.width>>1,
414                        filter: filter
415                     }),
416                     vml('fill', {color: o.color, opacity: o.opacity}),
417                     vml('stroke', {opacity: 0}) // transparent stroke to fix color bleeding upon opacity change
418                  )
419               )
420            )
421         }
422         
423         if (o.shadow)
424            for (i = 1; i <= o.lines; i++)
425               seg(i, -2, 'progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)')
426               
427         for (i = 1; i <= o.lines; i++) seg(i)
428         return ins(el, g)
429      }
430      
431      Spinner.prototype.opacity = function(el, i, val, o) {
432         var c = el.firstChild
433         o = o.shadow && o.lines || 0
434         if (c && i+o < c.childNodes.length) {
435            c = c.childNodes[i+o]; c = c && c.firstChild; c = c && c.firstChild
436            if (c) c.opacity = val
437         }
438      }
439   }
440   
441   var probe = css(createEl('group'), {behavior: 'url(#default#VML)'})
442
443   if (!vendor(probe, 'transform') && probe.adj) initVML()
444   else useCssAnimations = vendor(probe, 'animation')
445
446   return Spinner
447}));