lib/yui/3.5.0/build/transition-timer/transition-timer-debug.js

   1 /*
   2 YUI 3.5.0 (build 5089)
   3 Copyright 2012 Yahoo! Inc. All rights reserved.
   4 Licensed under the BSD License.
   5 http://yuilibrary.com/license/
   6 */
   7 YUI.add('transition-timer', function(Y) {
   8
   9 /*
  10 * The Transition Utility provides an API for creating advanced transitions.
  11 * @module transition
  12 */
  13
  14 /*
  15 * Provides the base Transition class, for animating numeric properties.
  16 *
  17 * @module transition
  18 * @submodule transition-timer
  19 */
  20
  21
  22 var Transition = Y.Transition;
  23
  24 Y.mix(Transition.prototype, {
  25     _start: function() {
  26         if (Transition.useNative) {
  27             this._runNative();
  28         } else {
  29             this._runTimer();
  30         }
  31     },
  32
  33     _runTimer: function() {
  34         var anim = this;
  35         anim._initAttrs();
  36
  37         Transition._running[Y.stamp(anim)] = anim;
  38         anim._startTime = new Date();
  39         Transition._startTimer();
  40     },
  41
  42     _endTimer: function() {
  43         var anim = this;
  44         delete Transition._running[Y.stamp(anim)];
  45         anim._startTime = null;
  46     },
  47
  48     _runFrame: function() {
  49         var t = new Date() - this._startTime;
  50         this._runAttrs(t);
  51     },
  52
  53     _runAttrs: function(time) {
  54         var anim = this,
  55             node = anim._node,
  56             config = anim._config,
  57             uid = Y.stamp(node),
  58             attrs = Transition._nodeAttrs[uid],
  59             customAttr = Transition.behaviors,
  60             done = false,
  61             allDone = false,
  62             data,
  63             name,
  64             attribute,
  65             setter,
  66             elapsed,
  67             delay,
  68             d,
  69             t,
  70             i;
  71
  72         for (name in attrs) {
  73             if ((attribute = attrs[name]) && attribute.transition === anim) {
  74                 d = attribute.duration;
  75                 delay = attribute.delay;
  76                 elapsed = (time - delay) / 1000;
  77                 t = time;
  78                 data = {
  79                     type: 'propertyEnd',
  80                     propertyName: name,
  81                     config: config,
  82                     elapsedTime: elapsed
  83                 };
  84
  85                 setter = (i in customAttr && 'set' in customAttr[i]) ?
  86                         customAttr[i].set : Transition.DEFAULT_SETTER;
  87
  88                 done = (t >= d);
  89
  90                 if (t > d) {
  91                     t = d;
  92                 }
  93
  94                 if (!delay || time >= delay) {
  95                     setter(anim, name, attribute.from, attribute.to, t - delay, d - delay,
  96                         attribute.easing, attribute.unit);
  97
  98                     if (done) {
  99                         delete attrs[name];
 100                         anim._count--;
 101
 102                         if (config[name] && config[name].on && config[name].on.end) {
 103                             config[name].on.end.call(Y.one(node), data);
 104                         }
 105
 106                         //node.fire('transition:propertyEnd', data);
 107
 108                         if (!allDone && anim._count <= 0) {
 109                             allDone = true;
 110                             anim._end(elapsed);
 111                             anim._endTimer();
 112                         }
 113                     }
 114                 }
 115
 116             }
 117         }
 118     },
 119
 120     _initAttrs: function() {
 121         var anim = this,
 122             customAttr = Transition.behaviors,
 123             uid = Y.stamp(anim._node),
 124             attrs = Transition._nodeAttrs[uid],
 125             attribute,
 126             duration,
 127             delay,
 128             easing,
 129             val,
 130             name,
 131             mTo,
 132             mFrom,
 133             unit, begin, end;
 134
 135         for (name in attrs) {
 136             if ((attribute = attrs[name]) && attribute.transition === anim) {
 137                 duration = attribute.duration * 1000;
 138                 delay = attribute.delay * 1000;
 139                 easing = attribute.easing;
 140                 val = attribute.value;
 141
 142                 // only allow supported properties
 143                 if (name in anim._node.style || name in Y.DOM.CUSTOM_STYLES) {
 144                     begin = (name in customAttr && 'get' in customAttr[name])  ?
 145                             customAttr[name].get(anim, name) : Transition.DEFAULT_GETTER(anim, name);
 146
 147                     mFrom = Transition.RE_UNITS.exec(begin);
 148                     mTo = Transition.RE_UNITS.exec(val);
 149
 150                     begin = mFrom ? mFrom[1] : begin;
 151                     end = mTo ? mTo[1] : val;
 152                     unit = mTo ? mTo[2] : mFrom ?  mFrom[2] : ''; // one might be zero TODO: mixed units
 153
 154                     if (!unit && Transition.RE_DEFAULT_UNIT.test(name)) {
 155                         unit = Transition.DEFAULT_UNIT;
 156                     }
 157
 158                     if (typeof easing === 'string') {
 159                         if (easing.indexOf('cubic-bezier') > -1) {
 160                             easing = easing.substring(13, easing.length - 1).split(',');
 161                         } else if (Transition.easings[easing]) {
 162                             easing = Transition.easings[easing];
 163                         }
 164                     }
 165
 166                     attribute.from = Number(begin);
 167                     attribute.to = Number(end);
 168                     attribute.unit = unit;
 169                     attribute.easing = easing;
 170                     attribute.duration = duration + delay;
 171                     attribute.delay = delay;
 172                 } else {
 173                     delete attrs[name];
 174                     anim._count--;
 175                 }
 176             }
 177         }
 178     },
 179
 180     destroy: function() {
 181         this.detachAll();
 182         this._node = null;
 183     }
 184 }, true);
 185
 186 Y.mix(Y.Transition, {
 187     _runtimeAttrs: {},
 188     /*
 189      * Regex of properties that should use the default unit.
 190      *
 191      * @property RE_DEFAULT_UNIT
 192      * @static
 193      */
 194     RE_DEFAULT_UNIT: /^width|height|top|right|bottom|left|margin.*|padding.*|border.*$/i,
 195
 196     /*
 197      * The default unit to use with properties that pass the RE_DEFAULT_UNIT test.
 198      *
 199      * @property DEFAULT_UNIT
 200      * @static
 201      */
 202     DEFAULT_UNIT: 'px',
 203
 204     /*
 205      * Time in milliseconds passed to setInterval for frame processing
 206      *
 207      * @property intervalTime
 208      * @default 20
 209      * @static
 210      */
 211     intervalTime: 20,
 212
 213     /*
 214      * Bucket for custom getters and setters
 215      *
 216      * @property behaviors
 217      * @static
 218      */
 219     behaviors: {
 220         left: {
 221             get: function(anim, attr) {
 222                 return Y.DOM._getAttrOffset(anim._node, attr);
 223             }
 224         }
 225     },
 226
 227     /*
 228      * The default setter to use when setting object properties.
 229      *
 230      * @property DEFAULT_SETTER
 231      * @static
 232      */
 233     DEFAULT_SETTER: function(anim, att, from, to, elapsed, duration, fn, unit) {
 234         from = Number(from);
 235         to = Number(to);
 236
 237         var node = anim._node,
 238             val = Transition.cubicBezier(fn, elapsed / duration);
 239
 240         val = from + val[0] * (to - from);
 241
 242         if (node) {
 243             if (att in node.style || att in Y.DOM.CUSTOM_STYLES) {
 244                 unit = unit || '';
 245                 Y.DOM.setStyle(node, att, val + unit);
 246             }
 247         } else {
 248             anim._end();
 249         }
 250     },
 251
 252     /*
 253      * The default getter to use when getting object properties.
 254      *
 255      * @property DEFAULT_GETTER
 256      * @static
 257      */
 258     DEFAULT_GETTER: function(anim, att) {
 259         var node = anim._node,
 260             val = '';
 261
 262         if (att in node.style || att in Y.DOM.CUSTOM_STYLES) {
 263             val = Y.DOM.getComputedStyle(node, att);
 264         }
 265
 266         return val;
 267     },
 268
 269     _startTimer: function() {
 270         if (!Transition._timer) {
 271             Transition._timer = setInterval(Transition._runFrame, Transition.intervalTime);
 272         }
 273     },
 274
 275     _stopTimer: function() {
 276         clearInterval(Transition._timer);
 277         Transition._timer = null;
 278     },
 279
 280     /*
 281      * Called per Interval to handle each animation frame.
 282      * @method _runFrame
 283      * @private
 284      * @static
 285      */
 286     _runFrame: function() {
 287         var done = true,
 288             anim;
 289         for (anim in Transition._running) {
 290             if (Transition._running[anim]._runFrame) {
 291                 done = false;
 292                 Transition._running[anim]._runFrame();
 293             }
 294         }
 295
 296         if (done) {
 297             Transition._stopTimer();
 298         }
 299     },
 300
 301     cubicBezier: function(p, t) {
 302         var x0 = 0,
 303             y0 = 0,
 304             x1 = p[0],
 305             y1 = p[1],
 306             x2 = p[2],
 307             y2 = p[3],
 308             x3 = 1,
 309             y3 = 0,
 310
 311             A = x3 - 3 * x2 + 3 * x1 - x0,
 312             B = 3 * x2 - 6 * x1 + 3 * x0,
 313             C = 3 * x1 - 3 * x0,
 314             D = x0,
 315             E = y3 - 3 * y2 + 3 * y1 - y0,
 316             F = 3 * y2 - 6 * y1 + 3 * y0,
 317             G = 3 * y1 - 3 * y0,
 318             H = y0,
 319
 320             x = (((A*t) + B)*t + C)*t + D,
 321             y = (((E*t) + F)*t + G)*t + H;
 322
 323         return [x, y];
 324     },
 325
 326     easings: {
 327         ease: [0.25, 0, 1, 0.25],
 328         linear: [0, 0, 1, 1],
 329         'ease-in': [0.42, 0, 1, 1],
 330         'ease-out': [0, 0, 0.58, 1],
 331         'ease-in-out': [0.42, 0, 0.58, 1]
 332     },
 333
 334     _running: {},
 335     _timer: null,
 336
 337     RE_UNITS: /^(-?\d*\.?\d*){1}(em|ex|px|in|cm|mm|pt|pc|%)*$/
 338 }, true);
 339
 340 Transition.behaviors.top = Transition.behaviors.bottom = Transition.behaviors.right = Transition.behaviors.left;
 341
 342 Y.Transition = Transition;
 343
 344
 345 }, '3.5.0' ,{requires:['transition']});