1 YUI.add('transition-timer', function (Y, NAME) {

     2 

     3 /**

     4 * Provides the base Transition class, for animating numeric properties.

     5 *

     6 * @module transition

     7 * @submodule transition-timer

     8 */

     9 

    10 

    11 var Transition = Y.Transition;

    12 

    13 Y.mix(Transition.prototype, {

    14     _start: function() {

    15         if (Transition.useNative) {

    16             this._runNative();

    17         } else {

    18             this._runTimer();

    19         }

    20     },

    21 

    22     _runTimer: function() {

    23         var anim = this;

    24         anim._initAttrs();

    25 

    26         Transition._running[Y.stamp(anim)] = anim;

    27         anim._startTime = new Date();

    28         Transition._startTimer();

    29     },

    30 

    31     _endTimer: function() {

    32         var anim = this;

    33         delete Transition._running[Y.stamp(anim)];

    34         anim._startTime = null;

    35     },

    36 

    37     _runFrame: function() {

    38         var t = new Date() - this._startTime;

    39         this._runAttrs(t);

    40     },

    41 

    42     _runAttrs: function(time) {

    43         var anim = this,

    44             node = anim._node,

    45             config = anim._config,

    46             uid = Y.stamp(node),

    47             attrs = Transition._nodeAttrs[uid],

    48             customAttr = Transition.behaviors,

    49             done = false,

    50             allDone = false,

    51             data,

    52             name,

    53             attribute,

    54             setter,

    55             elapsed,

    56             delay,

    57             d,

    58             t,

    59             i;

    60 

    61         for (name in attrs) {

    62             if ((attribute = attrs[name]) && attribute.transition === anim) {

    63                 d = attribute.duration;

    64                 delay = attribute.delay;

    65                 elapsed = (time - delay) / 1000;

    66                 t = time;

    67                 data = {

    68                     type: 'propertyEnd',

    69                     propertyName: name,

    70                     config: config,

    71                     elapsedTime: elapsed

    72                 };

    73 

    74                 setter = (i in customAttr && 'set' in customAttr[i]) ?

    75                         customAttr[i].set : Transition.DEFAULT_SETTER;

    76 

    77                 done = (t >= d);

    78 

    79                 if (t > d) {

    80                     t = d;

    81                 }

    82 

    83                 if (!delay || time >= delay) {

    84                     setter(anim, name, attribute.from, attribute.to, t - delay, d - delay,

    85                         attribute.easing, attribute.unit);

    86 

    87                     if (done) {

    88                         delete attrs[name];

    89                         anim._count--;

    90 

    91                         if (config[name] && config[name].on && config[name].on.end) {

    92                             config[name].on.end.call(Y.one(node), data);

    93                         }

    94 

    95                         //node.fire('transition:propertyEnd', data);

    96 

    97                         if (!allDone && anim._count <= 0) {

    98                             allDone = true;

    99                             anim._end(elapsed);

   100                             anim._endTimer();

   101                         }

   102                     }

   103                 }

   104 

   105             }

   106         }

   107     },

   108 

   109     _initAttrs: function() {

   110         var anim = this,

   111             customAttr = Transition.behaviors,

   112             uid = Y.stamp(anim._node),

   113             attrs = Transition._nodeAttrs[uid],

   114             attribute,

   115             duration,

   116             delay,

   117             easing,

   118             val,

   119             name,

   120             mTo,

   121             mFrom,

   122             unit, begin, end;

   123 

   124         for (name in attrs) {

   125             if ((attribute = attrs[name]) && attribute.transition === anim) {

   126                 duration = attribute.duration * 1000;

   127                 delay = attribute.delay * 1000;

   128                 easing = attribute.easing;

   129                 val = attribute.value;

   130 

   131                 // only allow supported properties

   132                 if (name in anim._node.style || name in Y.DOM.CUSTOM_STYLES) {

   133                     begin = (name in customAttr && 'get' in customAttr[name])  ?

   134                             customAttr[name].get(anim, name) : Transition.DEFAULT_GETTER(anim, name);

   135 

   136                     mFrom = Transition.RE_UNITS.exec(begin);

   137                     mTo = Transition.RE_UNITS.exec(val);

   138 

   139                     begin = mFrom ? mFrom[1] : begin;

   140                     end = mTo ? mTo[1] : val;

   141                     unit = mTo ? mTo[2] : mFrom ?  mFrom[2] : ''; // one might be zero TODO: mixed units

   142 

   143                     if (!unit && Transition.RE_DEFAULT_UNIT.test(name)) {

   144                         unit = Transition.DEFAULT_UNIT;

   145                     }

   146 

   147                     if (typeof easing === 'string') {

   148                         if (easing.indexOf('cubic-bezier') > -1) {

   149                             easing = easing.substring(13, easing.length - 1).split(',');

   150                         } else if (Transition.easings[easing]) {

   151                             easing = Transition.easings[easing];

   152                         }

   153                     }

   154 

   155                     attribute.from = Number(begin);

   156                     attribute.to = Number(end);

   157                     attribute.unit = unit;

   158                     attribute.easing = easing;

   159                     attribute.duration = duration + delay;

   160                     attribute.delay = delay;

   161                 } else {

   162                     delete attrs[name];

   163                     anim._count--;

   164                 }

   165             }

   166         }

   167     },

   168 

   169     destroy: function() {

   170         this.detachAll();

   171         this._node = null;

   172     }

   173 }, true);

   174 

   175 Y.mix(Y.Transition, {

   176     _runtimeAttrs: {},

   177     /*

   178      * Regex of properties that should use the default unit.

   179      *

   180      * @property RE_DEFAULT_UNIT

   181      * @static

   182      */

   183     RE_DEFAULT_UNIT: /^width|height|top|right|bottom|left|margin.*|padding.*|border.*$/i,

   184 

   185     /*

   186      * The default unit to use with properties that pass the RE_DEFAULT_UNIT test.

   187      *

   188      * @property DEFAULT_UNIT

   189      * @static

   190      */

   191     DEFAULT_UNIT: 'px',

   192 

   193     /*

   194      * Time in milliseconds passed to setInterval for frame processing

   195      *

   196      * @property intervalTime

   197      * @default 20

   198      * @static

   199      */

   200     intervalTime: 20,

   201 

   202     /*

   203      * Bucket for custom getters and setters

   204      *

   205      * @property behaviors

   206      * @static

   207      */

   208     behaviors: {

   209         left: {

   210             get: function(anim, attr) {

   211                 return Y.DOM._getAttrOffset(anim._node, attr);

   212             }

   213         }

   214     },

   215 

   216     /*

   217      * The default setter to use when setting object properties.

   218      *

   219      * @property DEFAULT_SETTER

   220      * @static

   221      */

   222     DEFAULT_SETTER: function(anim, att, from, to, elapsed, duration, fn, unit) {

   223         from = Number(from);

   224         to = Number(to);

   225 

   226         var node = anim._node,

   227             val = Transition.cubicBezier(fn, elapsed / duration);

   228 

   229         val = from + val[0] * (to - from);

   230 

   231         if (node) {

   232             if (att in node.style || att in Y.DOM.CUSTOM_STYLES) {

   233                 unit = unit || '';

   234                 Y.DOM.setStyle(node, att, val + unit);

   235             }

   236         } else {

   237             anim._end();

   238         }

   239     },

   240 

   241     /*

   242      * The default getter to use when getting object properties.

   243      *

   244      * @property DEFAULT_GETTER

   245      * @static

   246      */

   247     DEFAULT_GETTER: function(anim, att) {

   248         var node = anim._node,

   249             val = '';

   250 

   251         if (att in node.style || att in Y.DOM.CUSTOM_STYLES) {

   252             val = Y.DOM.getComputedStyle(node, att);

   253         }

   254 

   255         return val;

   256     },

   257 

   258     _startTimer: function() {

   259         if (!Transition._timer) {

   260             Transition._timer = setInterval(Transition._runFrame, Transition.intervalTime);

   261         }

   262     },

   263 

   264     _stopTimer: function() {

   265         clearInterval(Transition._timer);

   266         Transition._timer = null;

   267     },

   268 

   269     /*

   270      * Called per Interval to handle each animation frame.

   271      * @method _runFrame

   272      * @private

   273      * @static

   274      */

   275     _runFrame: function() {

   276         var done = true,

   277             anim;

   278         for (anim in Transition._running) {

   279             if (Transition._running[anim]._runFrame) {

   280                 done = false;

   281                 Transition._running[anim]._runFrame();

   282             }

   283         }

   284 

   285         if (done) {

   286             Transition._stopTimer();

   287         }

   288     },

   289 

   290     cubicBezier: function(p, t) {

   291         var x0 = 0,

   292             y0 = 0,

   293             x1 = p[0],

   294             y1 = p[1],

   295             x2 = p[2],

   296             y2 = p[3],

   297             x3 = 1,

   298             y3 = 0,

   299 

   300             A = x3 - 3 * x2 + 3 * x1 - x0,

   301             B = 3 * x2 - 6 * x1 + 3 * x0,

   302             C = 3 * x1 - 3 * x0,

   303             D = x0,

   304             E = y3 - 3 * y2 + 3 * y1 - y0,

   305             F = 3 * y2 - 6 * y1 + 3 * y0,

   306             G = 3 * y1 - 3 * y0,

   307             H = y0,

   308 

   309             x = (((A*t) + B)*t + C)*t + D,

   310             y = (((E*t) + F)*t + G)*t + H;

   311 

   312         return [x, y];

   313     },

   314 

   315     easings: {

   316         ease: [0.25, 0, 1, 0.25],

   317         linear: [0, 0, 1, 1],

   318         'ease-in': [0.42, 0, 1, 1],

   319         'ease-out': [0, 0, 0.58, 1],

   320         'ease-in-out': [0.42, 0, 0.58, 1]

   321     },

   322 

   323     _running: {},

   324     _timer: null,

   325 

   326     RE_UNITS: /^(-?\d*\.?\d*){1}(em|ex|px|in|cm|mm|pt|pc|%)*$/

   327 }, true);

   328 

   329 Transition.behaviors.top = Transition.behaviors.bottom = Transition.behaviors.right = Transition.behaviors.left;

   330 

   331 Y.Transition = Transition;

   332 

   333 

   334 }, '@VERSION@', {"requires": ["transition"]});