source: trunk/web/addons/job_monarch/lib/extjs-30/src/core/core/Element.fx.js @ 625

Last change on this file since 625 was 625, checked in by ramonb, 15 years ago

lib/extjs-30:

  • new ExtJS 3.0
File size: 12.2 KB
Line 
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/**
8 * @class Ext.Element
9 */
10/**
11 * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element
12 * @static
13 * @type Number
14 */
15Ext.Element.VISIBILITY = 1;
16/**
17 * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element
18 * @static
19 * @type Number
20 */
21Ext.Element.DISPLAY = 2;
22
23Ext.Element.addMethods(function(){
24    var VISIBILITY = "visibility",
25        DISPLAY = "display",
26        HIDDEN = "hidden",
27        NONE = "none",     
28        ORIGINALDISPLAY = 'originalDisplay',
29        VISMODE = 'visibilityMode',
30        ELDISPLAY = Ext.Element.DISPLAY,
31        data = Ext.Element.data,
32        getDisplay = function(dom){
33            var d = data(dom, ORIGINALDISPLAY);
34            if(d === undefined){
35                data(dom, ORIGINALDISPLAY, d = '');
36            }
37            return d;
38        },
39        getVisMode = function(dom){
40            var m = data(dom, VISMODE);
41            if(m === undefined){
42                data(dom, VISMODE, m = 1)
43            }
44            return m;
45        };
46   
47    return {
48        /**
49         * The element's default display mode  (defaults to "")
50         * @type String
51         */
52        originalDisplay : "",
53        visibilityMode : 1,
54       
55        /**
56         * Sets the element's visibility mode. When setVisible() is called it
57         * will use this to determine whether to set the visibility or the display property.
58         * @param visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY
59         * @return {Ext.Element} this
60         */
61        setVisibilityMode : function(visMode){ 
62            data(this.dom, VISMODE, visMode);
63            return this;
64        },
65       
66        /**
67         * Perform custom animation on this element.
68         * <div><ul class="mdetail-params">
69         * <li><u>Animation Properties</u></li>
70         *
71         * <p>The Animation Control Object enables gradual transitions for any member of an
72         * element's style object that takes a numeric value including but not limited to
73         * these properties:</p><div><ul class="mdetail-params">
74         * <li><tt>bottom, top, left, right</tt></li>
75         * <li><tt>height, width</tt></li>
76         * <li><tt>margin, padding</tt></li>
77         * <li><tt>borderWidth</tt></li>
78         * <li><tt>opacity</tt></li>
79         * <li><tt>fontSize</tt></li>
80         * <li><tt>lineHeight</tt></li>
81         * </ul></div>
82         *
83         *
84         * <li><u>Animation Property Attributes</u></li>
85         *
86         * <p>Each Animation Property is a config object with optional properties:</p>
87         * <div><ul class="mdetail-params">
88         * <li><tt>by</tt>*  : relative change - start at current value, change by this value</li>
89         * <li><tt>from</tt> : ignore current value, start from this value</li>
90         * <li><tt>to</tt>*  : start at current value, go to this value</li>
91         * <li><tt>unit</tt> : any allowable unit specification</li>
92         * <p>* do not specify both <tt>to</tt> and <tt>by</tt> for an animation property</p>
93         * </ul></div>
94         *
95         * <li><u>Animation Types</u></li>
96         *
97         * <p>The supported animation types:</p><div><ul class="mdetail-params">
98         * <li><tt>'run'</tt> : Default
99         * <pre><code>
100var el = Ext.get('complexEl');
101el.animate(
102    // animation control object
103    {
104        borderWidth: {to: 3, from: 0},
105        opacity: {to: .3, from: 1},
106        height: {to: 50, from: el.getHeight()},
107        width: {to: 300, from: el.getWidth()},
108        top  : {by: - 100, unit: 'px'},
109    },
110    0.35,      // animation duration
111    null,      // callback
112    'easeOut', // easing method
113    'run'      // animation type ('run','color','motion','scroll')   
114);
115         * </code></pre>
116         * </li>
117         * <li><tt>'color'</tt>
118         * <p>Animates transition of background, text, or border colors.</p>
119         * <pre><code>
120el.animate(
121    // animation control object
122    {
123        color: { to: '#06e' },
124        backgroundColor: { to: '#e06' }
125    },
126    0.35,      // animation duration
127    null,      // callback
128    'easeOut', // easing method
129    'color'    // animation type ('run','color','motion','scroll')   
130);
131         * </code></pre>
132         * </li>
133         *
134         * <li><tt>'motion'</tt>
135         * <p>Animates the motion of an element to/from specific points using optional bezier
136         * way points during transit.</p>
137         * <pre><code>
138el.animate(
139    // animation control object
140    {
141        borderWidth: {to: 3, from: 0},
142        opacity: {to: .3, from: 1},
143        height: {to: 50, from: el.getHeight()},
144        width: {to: 300, from: el.getWidth()},
145        top  : {by: - 100, unit: 'px'},
146        points: {
147            to: [50, 100],  // go to this point
148            control: [      // optional bezier way points
149                [ 600, 800],
150                [-100, 200]
151            ]
152        }
153    },
154    3000,      // animation duration (milliseconds!)
155    null,      // callback
156    'easeOut', // easing method
157    'motion'   // animation type ('run','color','motion','scroll')   
158);
159         * </code></pre>
160         * </li>
161         * <li><tt>'scroll'</tt>
162         * <p>Animate horizontal or vertical scrolling of an overflowing page element.</p>
163         * <pre><code>
164el.animate(
165    // animation control object
166    {
167        scroll: {to: [400, 300]}
168    },
169    0.35,      // animation duration
170    null,      // callback
171    'easeOut', // easing method
172    'scroll'   // animation type ('run','color','motion','scroll')   
173);
174         * </code></pre>
175         * </li>
176         * </ul></div>
177         *
178         * </ul></div>
179         *
180         * @param {Object} args The animation control args
181         * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to <tt>.35</tt>)
182         * @param {Function} onComplete (optional) Function to call when animation completes
183         * @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to <tt>'easeOut'</tt>)
184         * @param {String} animType (optional) <tt>'run'</tt> is the default. Can also be <tt>'color'</tt>,
185         * <tt>'motion'</tt>, or <tt>'scroll'</tt>
186         * @return {Ext.Element} this
187         */
188        animate : function(args, duration, onComplete, easing, animType){       
189            this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
190            return this;
191        },
192   
193        /*
194         * @private Internal animation call
195         */
196        anim : function(args, opt, animType, defaultDur, defaultEase, cb){
197            animType = animType || 'run';
198            opt = opt || {};
199            var me = this,             
200                anim = Ext.lib.Anim[animType](
201                    me.dom, 
202                    args,
203                    (opt.duration || defaultDur) || .35,
204                    (opt.easing || defaultEase) || 'easeOut',
205                    function(){
206                        if(cb) cb.call(me);
207                        if(opt.callback) opt.callback.call(opt.scope || me, me, opt);
208                    },
209                    me
210                );
211            opt.anim = anim;
212            return anim;
213        },
214   
215        // private legacy anim prep
216        preanim : function(a, i){
217            return !a[i] ? false : (Ext.isObject(a[i]) ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
218        },
219       
220        /**
221         * Checks whether the element is currently visible using both visibility and display properties.         
222         * @return {Boolean} True if the element is currently visible, else false
223         */
224        isVisible : function() {
225            return !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE);
226        },
227       
228        /**
229         * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
230         * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
231         * @param {Boolean} visible Whether the element is visible
232         * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
233         * @return {Ext.Element} this
234         */
235         setVisible : function(visible, animate){
236            var me = this,
237                dom = me.dom,
238                isDisplay = getVisMode(this.dom) == ELDISPLAY;
239               
240            if (!animate || !me.anim) {
241                if(isDisplay){
242                    me.setDisplayed(visible);
243                }else{
244                    me.fixDisplay();
245                    dom.style.visibility = visible ? "visible" : HIDDEN;
246                }
247            }else{
248                // closure for composites           
249                if(visible){
250                    me.setOpacity(.01);
251                    me.setVisible(true);
252                }
253                me.anim({opacity: { to: (visible?1:0) }},
254                        me.preanim(arguments, 1),
255                        null,
256                        .35,
257                        'easeIn',
258                        function(){
259                             if(!visible){
260                                 dom.style[isDisplay ? DISPLAY : VISIBILITY] = (isDisplay) ? NONE : HIDDEN;                     
261                                 Ext.fly(dom).setOpacity(1);
262                             }
263                        });
264            }
265            return me;
266        },
267   
268        /**
269         * Toggles the element's visibility or display, depending on visibility mode.
270         * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
271         * @return {Ext.Element} this
272         */
273        toggle : function(animate){
274            var me = this;
275            me.setVisible(!me.isVisible(), me.preanim(arguments, 0));
276            return me;
277        },
278   
279        /**
280         * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
281         * @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly.
282         * @return {Ext.Element} this
283         */
284        setDisplayed : function(value) {           
285            if(typeof value == "boolean"){
286               value = value ? getDisplay(this.dom) : NONE;
287            }
288            this.setStyle(DISPLAY, value);
289            return this;
290        },
291       
292        // private
293        fixDisplay : function(){
294            var me = this;
295            if(me.isStyle(DISPLAY, NONE)){
296                me.setStyle(VISIBILITY, HIDDEN);
297                me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default
298                if(me.isStyle(DISPLAY, NONE)){ // if that fails, default to block
299                    me.setStyle(DISPLAY, "block");
300                }
301            }
302        },
303   
304        /**
305         * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
306         * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
307         * @return {Ext.Element} this
308         */
309        hide : function(animate){
310            this.setVisible(false, this.preanim(arguments, 0));
311            return this;
312        },
313   
314        /**
315        * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
316        * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
317         * @return {Ext.Element} this
318         */
319        show : function(animate){
320            this.setVisible(true, this.preanim(arguments, 0));
321            return this;
322        }
323    }
324}());
Note: See TracBrowser for help on using the repository browser.