/hippo/src/main/webapp/ext/src/adapter/core/ext-base-anim.js

  1/*!
  2 * Ext JS Library 3.0.0
  3 * Copyright(c) 2006-2009 Ext JS, LLC
  4 * licensing@extjs.com
  5 * http://www.extjs.com/license
  6 */
  7(function(){    
  8    var EXTLIB = Ext.lib,
  9        noNegatives = /width|height|opacity|padding/i,
 10        offsetAttribute = /^((width|height)|(top|left))$/,
 11        defaultUnit = /width|height|top$|bottom$|left$|right$/i,
 12        offsetUnit =  /\d+(em|%|en|ex|pt|in|cm|mm|pc)$/i,
 13        isset = function(v){
 14            return typeof v !== 'undefined';
 15        },
 16        now = function(){
 17            return new Date();    
 18        };
 19        
 20    EXTLIB.Anim = {
 21        motion : function(el, args, duration, easing, cb, scope) {
 22            return this.run(el, args, duration, easing, cb, scope, Ext.lib.Motion);
 23        },
 24
 25        run : function(el, args, duration, easing, cb, scope, type) {
 26            type = type || Ext.lib.AnimBase;
 27            if (typeof easing == "string") {
 28                easing = Ext.lib.Easing[easing];
 29            }
 30            var anim = new type(el, args, duration, easing);
 31            anim.animateX(function() {
 32                if(Ext.isFunction(cb)){
 33                    cb.call(scope);
 34                }
 35            });
 36            return anim;
 37        }
 38    };
 39    
 40    EXTLIB.AnimBase = function(el, attributes, duration, method) {
 41        if (el) {
 42            this.init(el, attributes, duration, method);
 43        }
 44    };
 45
 46    EXTLIB.AnimBase.prototype = {
 47        doMethod: function(attr, start, end) {
 48            var me = this;
 49            return me.method(me.curFrame, start, end - start, me.totalFrames);
 50        },
 51
 52
 53        setAttr: function(attr, val, unit) {
 54            if (noNegatives.test(attr) && val < 0) {
 55                val = 0;
 56            }
 57            Ext.fly(this.el, '_anim').setStyle(attr, val + unit);
 58        },
 59
 60
 61        getAttr: function(attr) {
 62            var el = Ext.fly(this.el),
 63                val = el.getStyle(attr),
 64                a = offsetAttribute.exec(attr) || []
 65
 66            if (val !== 'auto' && !offsetUnit.test(val)) {
 67                return parseFloat(val);
 68            }
 69
 70            return (!!(a[2]) || (el.getStyle('position') == 'absolute' && !!(a[3]))) ? el.dom['offset' + a[0].charAt(0).toUpperCase() + a[0].substr(1)] : 0;
 71        },
 72
 73
 74        getDefaultUnit: function(attr) {
 75            return defaultUnit.test(attr) ? 'px' : '';
 76        },
 77
 78        animateX : function(callback, scope) {
 79            var me = this,
 80                f = function() {
 81                me.onComplete.removeListener(f);
 82                if (Ext.isFunction(callback)) {
 83                    callback.call(scope || me, me);
 84                }
 85            };
 86            me.onComplete.addListener(f, me);
 87            me.animate();
 88        },
 89
 90
 91        setRunAttr: function(attr) {            
 92            var me = this,
 93                a = this.attributes[attr],
 94                to = a.to,
 95                by = a.by,
 96                from = a.from,
 97                unit = a.unit,
 98                ra = (this.runAttrs[attr] = {}),
 99                end;
100
101            if (!isset(to) && !isset(by)){
102                return false;
103            }
104
105            var start = isset(from) ? from : me.getAttr(attr);
106            if (isset(to)) {
107                end = to;
108            }else if(isset(by)) {
109                if (Ext.isArray(start)){
110                    end = [];
111                    Ext.each(start, function(v, i){
112                        end[i] = v + by[i];
113                    });
114                }else{
115                    end = start + by;
116                }
117            }
118
119            Ext.apply(ra, {
120                start: start,
121                end: end,
122                unit: isset(unit) ? unit : me.getDefaultUnit(attr)
123            });
124        },
125
126
127        init: function(el, attributes, duration, method) {
128            var me = this,
129                actualFrames = 0,
130                mgr = EXTLIB.AnimMgr;
131                
132            Ext.apply(me, {
133                isAnimated: false,
134                startTime: null,
135                el: Ext.getDom(el),
136                attributes: attributes || {},
137                duration: duration || 1,
138                method: method || EXTLIB.Easing.easeNone,
139                useSec: true,
140                curFrame: 0,
141                totalFrames: mgr.fps,
142                runAttrs: {},
143                animate: function(){
144                    var me = this,
145                        d = me.duration;
146                    
147                    if(me.isAnimated){
148                        return false;
149                    }
150
151                    me.curFrame = 0;
152                    me.totalFrames = me.useSec ? Math.ceil(mgr.fps * d) : d;
153                    mgr.registerElement(me); 
154                },
155                
156                stop: function(finish){
157                    var me = this;
158                
159                    if(finish){
160                        me.curFrame = me.totalFrames;
161                        me._onTween.fire();
162                    }
163                    mgr.stop(me);
164                }
165            });
166
167            var onStart = function(){
168                var me = this,
169                    attr;
170                
171                me.onStart.fire();
172                me.runAttrs = {};
173                for(attr in this.attributes){
174                    this.setRunAttr(attr);
175                }
176
177                me.isAnimated = true;
178                me.startTime = now();
179                actualFrames = 0;
180            };
181
182
183            var onTween = function(){
184                var me = this;
185
186                me.onTween.fire({
187                    duration: now() - me.startTime,
188                    curFrame: me.curFrame
189                });
190
191                var ra = me.runAttrs;
192                for (var attr in ra) {
193                    this.setAttr(attr, me.doMethod(attr, ra[attr].start, ra[attr].end), ra[attr].unit);
194                }
195
196                ++actualFrames;
197            };
198
199            var onComplete = function() {
200                var me = this,
201                    actual = (now() - me.startTime) / 1000,
202                    data = {
203                        duration: actual,
204                        frames: actualFrames,
205                        fps: actualFrames / actual
206                    };
207
208                me.isAnimated = false;
209                actualFrames = 0;
210                me.onComplete.fire(data);
211            };
212
213            me.onStart = new Ext.util.Event(me);
214            me.onTween = new Ext.util.Event(me);            
215            me.onComplete = new Ext.util.Event(me);
216            (me._onStart = new Ext.util.Event(me)).addListener(onStart);
217            (me._onTween = new Ext.util.Event(me)).addListener(onTween);
218            (me._onComplete = new Ext.util.Event(me)).addListener(onComplete); 
219        }
220    };
221
222
223    Ext.lib.AnimMgr = new function() {
224        var me = this,
225            thread = null,
226            queue = [],
227            tweenCount = 0;
228
229
230        Ext.apply(me, {
231            fps: 1000,
232            delay: 1,
233            registerElement: function(tween){
234                queue.push(tween);
235                ++tweenCount;
236                tween._onStart.fire();
237                me.start();
238            },
239            
240            unRegister: function(tween, index){
241                tween._onComplete.fire();
242                index = index || getIndex(tween);
243                if (index != -1) {
244                    queue.splice(index, 1);
245                }
246
247                if (--tweenCount <= 0) {
248                    me.stop();
249                }
250            },
251            
252            start: function(){
253                if(thread === null){
254                    thread = setInterval(me.run, me.delay);
255                }
256            },
257            
258            stop: function(tween){
259                if(!tween){
260                    clearInterval(thread);
261                    for(var i = 0, len = queue.length; i < len; ++i){
262                        if(queue[0].isAnimated){
263                            me.unRegister(queue[0], 0);
264                        }
265                    }
266
267                    queue = [];
268                    thread = null;
269                    tweenCount = 0;
270                }else{
271                    me.unRegister(tween);
272                }
273            },
274            
275            run: function(){
276                var tf;
277                Ext.each(queue, function(tween){
278                    if(tween && tween.isAnimated){
279                        tf = tween.totalFrames;
280                        if(tween.curFrame < tf || tf === null){
281                            ++tween.curFrame;
282                            if(tween.useSec){
283                                correctFrame(tween);
284                            }
285                            tween._onTween.fire();
286                        }else{
287                            me.stop(tween);
288                        }
289                    }
290                }, me);
291            }
292        });
293
294        var getIndex = function(anim) {
295            var out = -1;
296            Ext.each(queue, function(item, idx){
297                if(item == anim){
298                    out = idx;
299                    return false;
300                }
301            });
302            return out;
303        };
304
305
306        var correctFrame = function(tween) {
307            var frames = tween.totalFrames,
308                frame = tween.curFrame,
309                duration = tween.duration,
310                expected = (frame * duration * 1000 / frames),
311                elapsed = (now() - tween.startTime),
312                tweak = 0;
313
314            if(elapsed < duration * 1000){
315                tweak = Math.round((elapsed / expected - 1) * frame);
316            }else{
317                tweak = frames - (frame + 1);
318            }
319            if(tweak > 0 && isFinite(tweak)){
320                if(tween.curFrame + tweak >= frames){
321                    tweak = frames - (frame + 1);
322                }
323                tween.curFrame += tweak;
324            }
325        };
326    };
327
328    EXTLIB.Bezier = new function() {
329
330        this.getPosition = function(points, t) {
331            var n = points.length,
332                tmp = [],
333                c = 1 - t, 
334                i,
335                j;
336
337            for (i = 0; i < n; ++i) {
338                tmp[i] = [points[i][0], points[i][1]];
339            }
340
341            for (j = 1; j < n; ++j) {
342                for (i = 0; i < n - j; ++i) {
343                    tmp[i][0] = c * tmp[i][0] + t * tmp[parseInt(i + 1, 10)][0];
344                    tmp[i][1] = c * tmp[i][1] + t * tmp[parseInt(i + 1, 10)][1];
345                }
346            }
347
348            return [ tmp[0][0], tmp[0][1] ];
349
350        };
351    };
352
353
354    EXTLIB.Easing = {
355        easeNone: function (t, b, c, d) {
356            return c * t / d + b;
357        },
358
359
360        easeIn: function (t, b, c, d) {
361            return c * (t /= d) * t + b;
362        },
363
364
365        easeOut: function (t, b, c, d) {
366            return -c * (t /= d) * (t - 2) + b;
367        }
368    };
369
370    (function() {
371        EXTLIB.Motion = function(el, attributes, duration, method) {
372            if (el) {
373                EXTLIB.Motion.superclass.constructor.call(this, el, attributes, duration, method);
374            }
375        };
376
377        Ext.extend(EXTLIB.Motion, Ext.lib.AnimBase);
378
379        var superclass = EXTLIB.Motion.superclass,
380            proto = EXTLIB.Motion.prototype,
381            pointsRe = /^points$/i;
382
383        Ext.apply(EXTLIB.Motion.prototype, {
384            setAttr: function(attr, val, unit){
385                var me = this,
386                    setAttr = superclass.setAttr;
387                    
388                if (pointsRe.test(attr)) {
389                    unit = unit || 'px';
390                    setAttr.call(me, 'left', val[0], unit);
391                    setAttr.call(me, 'top', val[1], unit);
392                } else {
393                    setAttr.call(me, attr, val, unit);
394                }
395            },
396            
397            getAttr: function(attr){
398                var me = this,
399                    getAttr = superclass.getAttr;
400                    
401                return pointsRe.test(attr) ? [getAttr.call(me, 'left'), getAttr.call(me, 'top')] : getAttr.call(me, attr);
402            },
403            
404            doMethod: function(attr, start, end){
405                var me = this;
406                
407                return pointsRe.test(attr)
408                        ? EXTLIB.Bezier.getPosition(me.runAttrs[attr], me.method(me.curFrame, 0, 100, me.totalFrames) / 100)
409                        : superclass.doMethod.call(me, attr, start, end);
410            },
411            
412            setRunAttr: function(attr){
413                if(pointsRe.test(attr)){
414                    
415                    var me = this,
416                        el = this.el,
417                        points = this.attributes.points,
418                        control = points.control || [],
419                        from = points.from,
420                        to = points.to,
421                        by = points.by,
422                        DOM = EXTLIB.Dom,
423                        start,
424                        i,
425                        end,
426                        len,
427                        ra;
428                  
429
430                    if(control.length > 0 && !Ext.isArray(control[0])){
431                        control = [control];
432                    }else{
433                        /*
434                        var tmp = [];
435                        for (i = 0,len = control.length; i < len; ++i) {
436                            tmp[i] = control[i];
437                        }
438                        control = tmp;
439                        */
440                    }
441
442                    Ext.fly(el, '_anim').position();
443                    DOM.setXY(el, isset(from) ? from : DOM.getXY(el));
444                    start = me.getAttr('points');
445
446
447                    if(isset(to)){
448                        end = translateValues.call(me, to, start);
449                        for (i = 0,len = control.length; i < len; ++i) {
450                            control[i] = translateValues.call(me, control[i], start);
451                        }
452                    } else if (isset(by)) {
453                        end = [start[0] + by[0], start[1] + by[1]];
454
455                        for (i = 0,len = control.length; i < len; ++i) {
456                            control[i] = [ start[0] + control[i][0], start[1] + control[i][1] ];
457                        }
458                    }
459
460                    ra = this.runAttrs[attr] = [start];
461                    if (control.length > 0) {
462                        ra = ra.concat(control);
463                    }
464
465                    ra[ra.length] = end;
466                }else{
467                    superclass.setRunAttr.call(this, attr);
468                }
469            }
470        });
471
472        var translateValues = function(val, start) {
473            var pageXY = EXTLIB.Dom.getXY(this.el);
474            return [val[0] - pageXY[0] + start[0], val[1] - pageXY[1] + start[1]];
475        };
476    })();
477})();