PageRenderTime 14ms CodeModel.GetById 9ms app.highlight 2ms RepoModel.GetById 0ms app.codeStats 0ms

/javascripts/lib/docs/source/Element.fx.html

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