revert multiple breaking changes introduced by the last commits

1 files changed, 121 insertions, 87 deletions

diff --git a/dist/svg.js b/dist/svg.js
index 8c1d8a5..c605e56 100644
--- a/dist/svg.js
+++ b/dist/svg.js
@@ -6,7 +6,7 @@
 * @copyright Wout Fierens <wout@impinc.co.uk>
 * @license MIT
 *
-* BUILT: Fri Mar 25 2016 00:01:14 GMT+0100 (Mitteleuropäische Zeit)
+* BUILT: Mon Mar 28 2016 17:17:10 GMT+0200 (Mitteleuropäische Sommerzeit)
 */;
 (function(root, factory) {
   if (typeof define === 'function' && define.amd) {
@@ -1307,7 +1307,9 @@ SVG.easing = {
 , '<': function(pos){return -Math.cos(pos * Math.PI / 2) + 1}
 }
 
-var someVar = 0
+SVG.morph = function(from, to) {
+  return new MorphObj(from, to).at(pos)
+}
 
 SVG.Situation = SVG.invent({
 
@@ -1316,12 +1318,15 @@ SVG.Situation = SVG.invent({
     this.reversed = false
     this.reversing = false
 
-    this.duration = o.duration
-    this.delay = o.delay
+    this.duration = new SVG.Number(o.duration).valueOf()
+    this.delay = new SVG.Number(o.delay).valueOf()
 
     this.start = +new Date() + this.delay
-    this.end = this.start + this.duration
-    this.easing = o.easing
+    this.finish = this.start + this.duration
+    this.ease = o.ease
+
+    this.loop = false
+    this.loops = false
 
     this.animations = {
       // functionToCall: [list of morphable objects]
@@ -1353,7 +1358,7 @@ SVG.Situation = SVG.invent({
 })
 
 SVG.Delay = function(delay){
-  this.delay = delay
+  this.delay = new SVG.Number(delay).valueOf()
 }
 
 SVG.FX = SVG.invent({
@@ -1362,7 +1367,7 @@ SVG.FX = SVG.invent({
     this._target = element
     this.situations = []
     this.active = false
-    this.current = null
+    this.situation = null
     this.paused = false
     this.lastPos = 0
     this.pos = 0
@@ -1373,14 +1378,14 @@ SVG.FX = SVG.invent({
     /**
      * sets or returns the target of this animation
      * @param o object || number In case of Object it holds all parameters. In case of number its the duration of the animation
-     * @param easing function || string Function which should be used for easing or easing keyword
+     * @param ease function || string Function which should be used for easing or easing keyword
      * @param delay Number indicating the delay before the animation starts
      * @return target || this
      */
-    animate: function(o, easing, delay){
+    animate: function(o, ease, delay){
 
       if(typeof o == 'object'){
-        easing = o.ease
+        ease = o.ease
         delay = o.delay
         o = o.duration
       }
@@ -1388,7 +1393,7 @@ SVG.FX = SVG.invent({
       var situation = new SVG.Situation({
         duration: o || 1000,
         delay: delay || 0,
-        easing: SVG.easing[easing || '-'] || easing
+        ease: SVG.easing[ease || '-'] || ease
       })
 
       this.queue(situation)
@@ -1424,12 +1429,12 @@ SVG.FX = SVG.invent({
 
     // returns the position at a given time
   , timeToPos: function(timestamp){
-      return (timestamp - this.current.start) / (this.current.duration)
+      return (timestamp - this.situation.start) / (this.situation.duration)
     }
 
     // returns the timestamp from a given positon
   , posToTime: function(pos){
-      return this.current.duration * pos + this.current.start
+      return this.situation.duration * pos + this.situation.start
     }
 
     // starts the animationloop
@@ -1448,9 +1453,9 @@ SVG.FX = SVG.invent({
     // kicks off the animation - only does something when the queue is curretly not active and at least one situation is set
   , start: function(){
       // dont start if already started
-      if(!this.active && this.current){
-        this.current.start = +new Date + this.current.delay
-        this.current.end = this.current.start + this.current.duration
+      if(!this.active && this.situation){
+        this.situation.start = +new Date + this.situation.delay
+        this.situation.finish = this.situation.start + this.situation.duration
 
         this.initAnimations()
         this.active = true
@@ -1469,7 +1474,7 @@ SVG.FX = SVG.invent({
       if(typeof fn == 'function' || fn instanceof SVG.Situation || fn instanceof SVG.Delay)
         this.situations.push(fn)
 
-      if(!this.current) this.current = this.situations.shift()
+      if(!this.situation) this.situation = this.situations.shift()
 
       return this
     }
@@ -1480,25 +1485,25 @@ SVG.FX = SVG.invent({
      */
   , dequeue: function(){
       // stop current animation
-      this.current && this.current.stop && this.current.stop()
+      this.situation && this.situation.stop && this.situation.stop()
 
       // get next animation from queue
-      this.current = this.situations.shift()
+      this.situation = this.situations.shift()
 
-      if(this.current){
+      if(this.situation){
 
         var fn = function(){
-          if(this.current instanceof SVG.Situation)
-            this.initAnimations().seek(0)
-          else if(this.current instanceof SVG.Delay)
+          if(this.situation instanceof SVG.Situation)
+            this.initAnimations().at(0)
+          else if(this.situation instanceof SVG.Delay)
             this.dequeue()
           else
-            this.current.call(this)
+            this.situation.call(this)
         }.bind(this)
 
         // start next animation
-        if(this.current.delay){
-          setTimeout(function(){fn()}, this.current.delay)
+        if(this.situation.delay){
+          setTimeout(function(){fn()}, this.situation.delay)
         }else{
           fn()
         }
@@ -1512,7 +1517,7 @@ SVG.FX = SVG.invent({
     // this is important when one property could be changed from another property
   , initAnimations: function() {
       var i
-      var s = this.current
+      var s = this.situation
 
       if(s.init) return this
 
@@ -1562,7 +1567,7 @@ SVG.FX = SVG.invent({
       return this
     }
   , clearCurrent: function(){
-      this.current = null
+      this.situation = null
       return this
     }
     /** stops the animation immediately
@@ -1580,7 +1585,17 @@ SVG.FX = SVG.invent({
       this.active = false
 
       if(jumpToEnd){
-        this.seek(1)
+
+        this.situation.loop = false
+
+        // TODO: test this
+        if(this.situation.loops % 2 == 0 && this.situation.reversing){
+          this.situation.reverse = true
+        }
+
+        console.log('go')
+        this.at(1)
+
       }
 
       this.stopAnimFrame()
@@ -1593,11 +1608,11 @@ SVG.FX = SVG.invent({
      * @return this
      */
   , reset: function(){
-      if(this.current){
-        var temp = this.current
+      if(this.situation){
+        var temp = this.situation
         this.stop()
-        this.current = temp
-        this.seek(0)
+        this.situation = temp
+        this.at(0)
       }
       return this
     }
@@ -1607,30 +1622,35 @@ SVG.FX = SVG.invent({
 
       this.stop(true, false)
 
-      while(this.dequeue().current && this.stop(true, false));
+      while(this.dequeue().situation && this.stop(true, false));
+
+      this.clearQueue().clearCurrent()
 
-      return this.clearQueue().clearCurrent()
+      // fire allfinished manually because the normal routine wont fire it
+      //this.target().fire('allfinished') // TODO: Here we stoped working!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+
+      return this
     }
 
     // set the internal animation pointer to the specified position and updates the visualisation
-  , seek: function(pos){
+  , at: function(pos){
       this.pos = pos
-      this.current.start = +new Date - pos * this.current.duration
-      this.current.end = this.current.start + this.current.duration
+      this.situation.start = +new Date - pos * this.situation.duration
+      this.situation.finish = this.situation.start + this.situation.duration
       return this.step(true)
     }
 
     // speeds up the animation by the given factor
     // this changes the duration of the animation
   , speed: function(speed){
-      this.current.duration = this.current.duration * this.pos + (1-this.pos) * this.current.duration / speed
-      this.current.end = this.current.start + this.current.duration
-      return this.seek(this.pos)
+      this.situation.duration = this.situation.duration * this.pos + (1-this.pos) * this.situation.duration / speed
+      this.situation.finish = this.situation.start + this.situation.duration
+      return this.at(this.pos)
     }
     // Make loopable
   , loop: function(times, reverse) {
       // store current loop and total loops
-      this.current.loop = times || true
+      this.situation.loop = this.situation.loops = times || true
 
       if(reverse) this.last().reversing = true
       return this
@@ -1648,7 +1668,7 @@ SVG.FX = SVG.invent({
   , play: function(){
       if(!this.paused) return this
       this.paused = false
-      return this.seek(this.pos)
+      return this.at(this.pos)
     }
 
     /** toggle or set the direction of the animation
@@ -1672,7 +1692,7 @@ SVG.FX = SVG.invent({
      * @return number
      */
   , progress: function(easeIt){
-      return easeIt ? this.current.easing(this.pos) : this.pos
+      return easeIt ? this.situation.ease(this.pos) : this.pos
     }
 
     /**
@@ -1698,7 +1718,7 @@ SVG.FX = SVG.invent({
       var c = this.last()
         , wrapper = function(e){
             if(e.detail.situation == c){
-              fn.call(this, e.detail.pos, e.detail.eased, c)
+              fn.call(this, e.detail.pos, SVG.morph, e.detail.eased, c)
             }
           }
 
@@ -1725,7 +1745,7 @@ SVG.FX = SVG.invent({
     // calls on every animation step for all animations
   , duringAll: function(fn){
       var wrapper = function(e){
-            fn.call(this, e.detail.pos, e.detail.eased, e.detail.fx, e.detail.situation)
+            fn.call(this, e.detail.pos, SVG.morph, e.detail.eased, e.detail.fx, e.detail.situation)
           }
 
       this.target().off('during.fx', wrapper).on('during.fx', wrapper)
@@ -1737,23 +1757,23 @@ SVG.FX = SVG.invent({
 
     /**
      * returns a float from 0-1 indicating the progress of the whole animation queue
-     * we recalculate the end time because it may be changed from methods like seek()
+     * we recalculate the finish time because it may be changed from methods like at()
      * @return number
      */
    // FIXME: current start always changes so the progress get a reset whenever one situation finishes. We need a global start which is only modified on pause and stop
   , totalProgress: function(){
-      var start = this.current.start
-        , end = this.current
+      var start = this.situation.start
+        , finish = this.situation
 
       for(var i = 0, len = this.situations.length; i < len; ++i){
-        end += (situations[i].duration || 0) + (situations[i].delay || 0)
+        finish += (situations[i].duration || 0) + (situations[i].delay || 0)
       }
 
-      return (this.pos * this.current.duration + this.start - start) / (end - start)
+      return (this.pos * this.situation.duration + this.start - start) / (finish - start)
     }
 
   , last: function(){
-      return this.situations.length ? this.situations[this.situations.length-1] : this.current
+      return this.situations.length ? this.situations[this.situations.length-1] : this.situation
     }
 
     // adds one property to the animations
@@ -1769,53 +1789,70 @@ SVG.FX = SVG.invent({
      */
   , step: function(ignoreTime){
 
+      console.log('here we are: step', ignoreTime, this.pos)
+
       // convert current time to position
       if(!ignoreTime) this.pos = this.timeToPos(+new Date)
 
-      if(this.pos >= 1 && (this.current.loop === true || (typeof this.current.loop == 'number' && --this.current.loop))){
+      if(this.pos >= 1 && (this.situation.loop === true || (typeof this.situation.loop == 'number' && --this.situation.loop))){
 
-        if(this.current.reversing){
-          this.current.reversed = !this.current.reversed
-                console.log('asd')
+        if(this.situation.reversing){
+          this.situation.reversed = !this.situation.reversed
         }
-        return this.seek(this.pos-1)
+        return this.at(this.pos-1)
       }
 
-      if(this.current.reversed) this.pos = 1 - this.pos
+      if(this.situation.reversed) this.pos = 1 - this.pos
 
       // correct position
       if(this.pos > 1)this.pos = 1
       if(this.pos < 0)this.pos = 0
 
       // apply easing
-      var eased = this.current.easing(this.pos)
+      var eased = this.situation.ease(this.pos)
 
       // call once-callbacks
-      for(var i in this.current.once){
+      for(var i in this.situation.once){
         if(i > this.lastPos && i <= eased){
-          this.current.once[i].call(this.target(), this.pos, eased)
-          delete this.current.once[i]
+          this.situation.once[i].call(this.target(), this.pos, eased)
+          delete this.situation.once[i]
         }
       }
 
+      console.log('firing during now:', this.active)
+
       // fire during callback with position, eased position and current situation as parameter
-      this.target().fire('during', {pos: this.pos, eased: eased, fx: this, situation: this.current})
+      if(this.active) this.target().fire('during', {pos: this.pos, eased: eased, fx: this, situation: this.situation})
+
+      console.log('fired')
+
+      // the user may call stop or finish in the during callback
+      // so make sure that we still have a valid situation
+      // FIXME: callbacks not getting called!
+      if(!this.situation){
+        return this
+      }
+
+      console.log('still there?')
 
       // apply the actual animation to every property
       this.eachAt()
 
       // do final code when situation is finished
-      if((this.pos == 1 && !this.current.reversed) || (this.current.reversed && this.pos == 0)){
+      if((this.pos == 1 && !this.situation.reversed) || (this.situation.reversed && this.pos == 0)){
+
+        console.log('finish up animation')
 
         // stop animation callback
         cancelAnimationFrame(this.animationFrame)
 
         // fire finished callback with current situation as parameter
-        this.target().fire('finished', {fx:this, situation: this.current})
+        this.target().fire('finished', {fx:this, situation: this.situation})
 
-        if(!this.situations.length && !this.current && this.active){
+        if(!this.situations.length/* && this.active*/){
+          console.log('all finished')
           this.target().fire('allfinished')
-          this.target().off('.fx')
+          this.target().off('.fx') // there shouldnt be any binding left, but to make sure...
           this.active = false
         }
 
@@ -1835,15 +1872,14 @@ SVG.FX = SVG.invent({
     }
 
     // calculates the step for every property and calls block with it
-    // todo: include block directly cause it is used only for this purpose
   , eachAt: function(){
-      var i, at, self = this, target = this.target(), c = this.current
+      var i, at, self = this, target = this.target(), c = this.situation
 
       // apply animations which can be called trough a method
       for(i in c.animations){
 
         at = [].concat(c.animations[i]).map(function(el){
-          return el.at ? el.at(c.easing(self.pos), self.pos) : el
+          return el.at ? el.at(c.ease(self.pos), self.pos) : el
         })
 
         target[i].apply(target, at)
@@ -1854,7 +1890,7 @@ SVG.FX = SVG.invent({
       for(i in c.attrs){
 
         at = [i].concat(c.attrs[i]).map(function(el){
-          return el.at ? el.at(c.easing(self.pos), self.pos) : el
+          return el.at ? el.at(c.ease(self.pos), self.pos) : el
         })
 
         target.attr.apply(target, at)
@@ -1865,7 +1901,7 @@ SVG.FX = SVG.invent({
       for(i in c.styles){
 
         at = [i].concat(c.styles[i]).map(function(el){
-          return el.at ? el.at(c.easing(self.pos), self.pos) : el
+          return el.at ? el.at(c.ease(self.pos), self.pos) : el
         })
 
         target.style.apply(target, at)
@@ -1888,7 +1924,7 @@ SVG.FX = SVG.invent({
             if(a.relative){
               at = at.multiply(a.at(this.pos))
             }else{
-              at = at.morph(a).at(c.easing(this.pos))
+              at = at.morph(a).at(c.ease(this.pos))
             }
             continue
           }
@@ -1898,7 +1934,7 @@ SVG.FX = SVG.invent({
             a.undo(at.extract())
 
           // and reapply it after
-          at = at.multiply(a.at(c.easing(this.pos)))
+          at = at.multiply(a.at(c.ease(this.pos)))
           continue;
 
         }
@@ -1915,9 +1951,9 @@ SVG.FX = SVG.invent({
     // adds an once-callback which is called at a specific position and never again
   , once: function(pos, fn, isEased){
 
-      if(!isEased)pos = this.current.easing(pos)
+      if(!isEased)pos = this.situation.ease(pos)
 
-      this.current.once[pos] = fn
+      this.situation.once[pos] = fn
 
       return this
     }
@@ -1929,8 +1965,8 @@ SVG.FX = SVG.invent({
   // Add method to parent elements
 , construct: {
     // Get fx module or create a new one, then animate with given duration and ease
-    animate: function(o, easing, delay) {
-      return (this.fx || (this.fx = new SVG.FX(this))).animate(o, easing, delay)
+    animate: function(o, ease, delay) {
+      return (this.fx || (this.fx = new SVG.FX(this))).animate(o, ease, delay)
     }
   , delay: function(delay){
       return (this.fx || (this.fx = new SVG.FX(this))).delay(delay)
@@ -1962,11 +1998,11 @@ SVG.FX = SVG.invent({
 // MorphObj is used whenever no morphable object is given
 SVG.MorphObj = SVG.invent({
 
-  create: function(to){
+  create: function(from, to){
     // prepare color for morphing
-    if(SVG.Color.isColor(to)) return new SVG.Color().morph(to)
+    if(SVG.Color.isColor(to)) return new SVG.Color(from).morph(to)
     // prepare number for morphing
-    if(SVG.regex.numberAndUnit.test(to)) return new SVG.Number().morph(to)
+    if(SVG.regex.numberAndUnit.test(to)) return new SVG.Number(from).morph(to)
 
     // prepare for plain morphing
     this.value = 0
@@ -1995,7 +2031,7 @@ SVG.extend(SVG.FX, {
 
     } else {
       // the MorphObj takes care about the right function used
-      this.add(a, new SVG.MorphObj(v), 'attrs')
+      this.add(a, new SVG.MorphObj(null, v), 'attrs')
     }
 
     return this
@@ -2007,7 +2043,7 @@ SVG.extend(SVG.FX, {
         this.style(key, s[key])
 
     else
-      this.add(s, new SVG.MorphObj(v), 'styles')
+      this.add(s, new SVG.MorphObj(null, v), 'styles')
 
     return this
   }
@@ -2791,9 +2827,7 @@ SVG.extend(SVG.FX, {
 
     matrix.relative = relative
 
-    var situation = this.situations.length ? this.situations[this.situations.length-1] : this.current
-
-    situation.transforms.push(matrix)
+    this.last().transforms.push(matrix)
 
     setTimeout(function(){this.start()}.bind(this), 0)