animations.tis

    namespace Animation
    {
      const animatableExpandAtts = [#height,#width,
                                    #border-top-width, #border-bottom-width, #border-left-width, #border-right-width,
                                    #border-top-color, #border-bottom-color, #border-left-color, #border-right-color,
                                    #padding-top, #padding-bottom, #padding-left, #padding-right,
                                    #margin-top,#margin-bottom,#margin-left,#margin-right,
                                    #background-color-top-left,#background-color-top-right, #background-color-bottom-left,#background-color-bottom-right,
                                    #opacity ]; 
      const animatableMoveAtts =   [#height,#width,
                                    #top, #bottom, #left, #right ]; 

      namespace Ease // collection of easing functions of Robert Penner
      {      
        // See: http://www.robertpenner.com/easing/
        
        // signature of methods: (current_time,	start_value, end_value-start_value,	total_time)

        function Linear( t, b, c, d) 
          {
            return (t/d)*c + b;
          }
        function InQuad( t, b, c, d) 
          {
            return c*(t/=d)*t + b;
          }
	      function OutQuad( t, b, c, d) 
          {
            return -c *(t/=d)*(t-2) + b;
          }
        function InOutQuad( t, b, c, d) 
          {
            if ((t/=d/2) < 1) return c/2*t*t + b;
            return -c/2 * ((--t)*(t-2) - 1) + b;
          }
        function InCubic( t, b, c, d) 
          {
            return c*(t/=d)*t*t + b;
          }
        function OutCubic( t, b, c, d) 
          {
            return c*((t=t/d-1)*t*t + 1) + b;
          }
        function InOutCubic( t, b, c, d) 
          {
            if ((t/=d/2) < 1) return c/2*t*t*t + b;
            return c/2*((t-=2)*t*t + 2) + b;
          }
	      function InQuart( t, b, c, d) 
          {
            return c*(t/=d)*t*t*t + b;
          }
	      function OutQuart ( t, b, c, d) 
          {
            return -c * ((t=t/d-1)*t*t*t - 1) + b;
          }
        function InOutQuart ( t, b, c, d) 
          {
            if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
            return -c/2 * ((t-=2)*t*t*t - 2) + b;
          }
        function InQuint ( t, b, c, d) 
          {
            return c*(t/=d)*t*t*t*t + b;
          }
        function OutQuint ( t, b, c, d) 
          {
            return c*((t=t/d-1)*t*t*t*t + 1) + b;
          }
        function InOutQuint( t, b, c, d) 
          {
            if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
            return c/2*((t-=2)*t*t*t*t + 2) + b;
          }
        function InSine( t, b, c, d) 
          {
            return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
          }
        function OutSine( t, b, c, d) 
          {
            return c * Math.sin(t/d * (Math.PI/2)) + b;
          }
	      function InOutSine( t, b, c, d) 
          {
            return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
          }
        function InExpo( t, b, c, d) 
          {
            return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
          }
        function OutExpo( t, b, c, d) 
          {
            return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
          }
        function InOutExpo( t, b, c, d) 
          {
            if (t==0) return b;
            if (t==d) return b+c;
            if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
            return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
          }
        function InCirc( t, b, c, d) 
          {
            return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
          }
        function OutCirc( t, b, c, d) 
          {
            return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
          }
        function InOutCirc( t, b, c, d) 
          {
            if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
            return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
          }
        function InElastic( t, b, c, d) 
          {
            var s=1.70158;var p=0;var a=c;
            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
            if (a < Math.abs(c)) { a=c; s=p/4; }
            else s = p/(2*Math.PI) * Math.asin (c/a);
            return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
          }
        function OutElastic( t, b, c, d) 
          {
            var s=1.70158;var p=0;var a=c;
            if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
            if (a < Math.abs(c)) { a=c; s=p/4; }
            else s = p/(2*Math.PI) * Math.asin (c/a);
            return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
          }
        function InOutElastic( t, b, c, d) 
          {
            var s=1.70158;var p=0;var a=c;
            if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
            if (a < Math.abs(c)) { a=c; s=p/4; }
            else s = p/(2*Math.PI) * Math.asin (c/a);
            if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
            return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
          }
        function InBack( t, b, c, d, s = 1.70158) 
          {
            return c*(t/=d)*t*((s+1)*t - s) + b;
          }
        function OutBack( t, b, c, d, s = 1.70158) 
          {
            return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
          }
        function InOutBack( t, b, c, d, s = 1.70158) 
          {
            if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
            return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
          }
        function OutBounce( t, b, c, d) 
          {
            if ((t/=d) < (1/2.75)) 
              return c*(7.5625*t*t) + b;
            else if (t < (2/2.75))
              return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
            else if (t < (2.5/2.75)) 
              return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
            else 
              return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
          }
        function InBounce( t, b, c, d) 
          {
            return c - OutBounce ( d-t, 0, c, d) + b;
          }
        function InOutBounce( t, b, c, d) 
          {
            if (t < d/2) return InBounce ( t*2, 0, c, d ) * .5 + b;
            return OutBounce ( t*2-d, 0, c, d ) * .5 + c*.5 + b;
          }
      } //namespace Ease 

                              
      function morphStyle(element, styleAtts, stepDelay, switchStateFunction, easeF, clearAfter = true)
      {
        // makes snapshot of CSS atts we are interesting in
        function styleSnapshot(element)
        {
          var col = {};
          for(var styleAtt in styleAtts)  
          {
            var v = element.style[styleAtt];
            if( !v ) continue;
            col[styleAtt] = v;
          }
          return col;
        }
        
        var progress = 0.0; 
               
        // makes mid value between initVal and finalVal according to progress value (0..100)
        function makeMidValue(initVal, finalVal)
        {
          if( typeof initVal == #color &&  typeof finalVal == #color) // color value
          {
            // easing is linear for colors
            var r = (progress * (finalVal.r - initVal.r) + initVal.r).toInteger();
            var g = (progress * (finalVal.g - initVal.g) + initVal.g).toInteger();
            var b = (progress * (finalVal.b - initVal.b) + initVal.b).toInteger();
            return color(r,g,b);
          }
          if( typeof initVal == #length ) // length value
          {
            var units = initVal.units;
            initVal = initVal.toFloat();
            finalVal = finalVal.toFloat();
            var v = easeF(progress, initVal, finalVal - initVal, 1.0);
            ////var v = progress * (finalVal.toFloat() - initVal.toFloat()) / 100 + initVal.toFloat();
            //stdout.printf("v=%v progress=%v %v %v\n",v,progress,initVal.toFloat(), finalVal.toFloat());
            return length(v, units );
          }
        }
        
        var initialStyles = styleSnapshot(element);
        switchStateFunction();
        var finalStyles = styleSnapshot(element);
        
        function do_morph()
        {
          progress += 0.02;
          if( progress > 1.0 ) 
          {
            if(clearAfter)
              element.style.clear(); // clear runtime styles we set in animation
            return;
          }
          for( var satt in initialStyles )
          {
            var initVal = initialStyles[satt];
            var finalVal = finalStyles[satt];
            if( !initVal || !finalVal )
              continue;
            if( initVal == finalVal )
              continue; // nothing to do
            //stdout << satt << " " << initVal << " " << finalVal << "\n";
            element.style[satt] = makeMidValue(initVal, finalVal);
          }
          return stepDelay;
        }
        element.animate(do_morph);
      }
      
      function expand(element, easeF = Animation.Ease.InQuad, stepDelay = 8)
      {
        function toggle()
        {
          if(element.state.expanded)
            element.state.collapsed = true;
          else
            element.state.expanded = true;
        }
        morphStyle(element, animatableExpandAtts, stepDelay, toggle, easeF);
      }
      
      function move( element, x, y, easeF = Animation.Ease.InQuad, stepDelay = 6)
      {
        function toggle()
        {
          element.style#left = px( x );
          element.style#top = px( y );
        }
        morphStyle(element, animatableMoveAtts, stepDelay, toggle, easeF, false);
      }
      


    }