/javascripts/lib/docs/source/Element.fx.html
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>