/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-/**
- * @class Ext.Element
- */
-/**
- * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element
- * @static
- * @type Number
- */
-Ext.Element.VISIBILITY = 1;
-/**
- * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element
- * @static
- * @type Number
- */
-Ext.Element.DISPLAY = 2;
-
-/**
- * Visibility mode constant for use with {@link #setVisibilityMode}. Use offsets (x and y positioning offscreen)
- * to hide element.
- * @static
- * @type Number
- */
-Ext.Element.OFFSETS = 3;
-
-
-Ext.Element.ASCLASS = 4;
-
-/**
- * Defaults to 'x-hide-nosize'
- * @static
- * @type String
- */
-Ext.Element.visibilityCls = 'x-hide-nosize';
-
-Ext.Element.addMethods(function(){
- var El = Ext.Element,
- OPACITY = "opacity",
- VISIBILITY = "visibility",
- DISPLAY = "display",
- HIDDEN = "hidden",
- OFFSETS = "offsets",
- ASCLASS = "asclass",
- NONE = "none",
- NOSIZE = 'nosize',
- ORIGINALDISPLAY = 'originalDisplay',
- VISMODE = 'visibilityMode',
- ISVISIBLE = 'isVisible',
- data = El.data,
- getDisplay = function(dom){
- var d = data(dom, ORIGINALDISPLAY);
- if(d === undefined){
- data(dom, ORIGINALDISPLAY, d = '');
- }
- return d;
- },
- getVisMode = function(dom){
- var m = data(dom, VISMODE);
- if(m === undefined){
- data(dom, VISMODE, m = 1);
- }
- return m;
- };
-
- return {
- /**
- * The element's default display mode (defaults to "")
- * @type String
- */
- originalDisplay : "",
- visibilityMode : 1,
-
- /**
- * Sets the element's visibility mode. When setVisible() is called it
- * will use this to determine whether to set the visibility or the display property.
- * @param {Number} visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY
- * @return {Ext.Element} this
- */
- setVisibilityMode : function(visMode){
- data(this.dom, VISMODE, visMode);
- return this;
- },
-
- /**
- * Perform custom animation on this element.
- *
- * - Animation Properties
- *
- * The Animation Control Object enables gradual transitions for any member of an
- * element's style object that takes a numeric value including but not limited to
- * these properties:
- * - bottom, top, left, right
- * - height, width
- * - margin, padding
- * - borderWidth
- * - opacity
- * - fontSize
- * - lineHeight
- *
- *
- *
- * - Animation Property Attributes
- *
- * Each Animation Property is a config object with optional properties:
- *
- * - by* : relative change - start at current value, change by this value
- * - from : ignore current value, start from this value
- * - to* : start at current value, go to this value
- * - unit : any allowable unit specification
- * * do not specify both to and by for an animation property
- *
- *
- * - Animation Types
- *
- * The supported animation types:
- * - 'run' : Default
- *
-var el = Ext.get('complexEl');
-el.animate(
- // animation control object
- {
- borderWidth: {to: 3, from: 0},
- opacity: {to: .3, from: 1},
- height: {to: 50, from: el.getHeight()},
- width: {to: 300, from: el.getWidth()},
- top : {by: - 100, unit: 'px'},
- },
- 0.35, // animation duration
- null, // callback
- 'easeOut', // easing method
- 'run' // animation type ('run','color','motion','scroll')
-);
- *
- *
- * - 'color'
- *
Animates transition of background, text, or border colors.
- *
-el.animate(
- // animation control object
- {
- color: { to: '#06e' },
- backgroundColor: { to: '#e06' }
- },
- 0.35, // animation duration
- null, // callback
- 'easeOut', // easing method
- 'color' // animation type ('run','color','motion','scroll')
-);
- *
- *
- *
- * - 'motion'
- *
Animates the motion of an element to/from specific points using optional bezier
- * way points during transit.
- *
-el.animate(
- // animation control object
- {
- borderWidth: {to: 3, from: 0},
- opacity: {to: .3, from: 1},
- height: {to: 50, from: el.getHeight()},
- width: {to: 300, from: el.getWidth()},
- top : {by: - 100, unit: 'px'},
- points: {
- to: [50, 100], // go to this point
- control: [ // optional bezier way points
- [ 600, 800],
- [-100, 200]
- ]
- }
- },
- 3000, // animation duration (milliseconds!)
- null, // callback
- 'easeOut', // easing method
- 'motion' // animation type ('run','color','motion','scroll')
-);
- *
- *
- * - 'scroll'
- *
Animate horizontal or vertical scrolling of an overflowing page element.
- *
-el.animate(
- // animation control object
- {
- scroll: {to: [400, 300]}
- },
- 0.35, // animation duration
- null, // callback
- 'easeOut', // easing method
- 'scroll' // animation type ('run','color','motion','scroll')
-);
- *
- *
- *
- *
- *
- *
- * @param {Object} args The animation control args
- * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to .35)
- * @param {Function} onComplete (optional) Function to call when animation completes
- * @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to 'easeOut')
- * @param {String} animType (optional) 'run' is the default. Can also be 'color',
- * 'motion', or 'scroll'
- * @return {Ext.Element} this
- */
- animate : function(args, duration, onComplete, easing, animType){
- this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);
- return this;
- },
-
- /*
- * @private Internal animation call
- */
- anim : function(args, opt, animType, defaultDur, defaultEase, cb){
- animType = animType || 'run';
- opt = opt || {};
- var me = this,
- anim = Ext.lib.Anim[animType](
- me.dom,
- args,
- (opt.duration || defaultDur) || .35,
- (opt.easing || defaultEase) || 'easeOut',
- function(){
- if(cb) cb.call(me);
- if(opt.callback) opt.callback.call(opt.scope || me, me, opt);
- },
- me
- );
- opt.anim = anim;
- return anim;
- },
-
- // private legacy anim prep
- preanim : function(a, i){
- return !a[i] ? false : (typeof a[i] == 'object' ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});
- },
-
- /**
- * Checks whether the element is currently visible using both visibility and display properties.
- * @return {Boolean} True if the element is currently visible, else false
- */
- isVisible : function() {
- var me = this,
- dom = me.dom,
- visible = data(dom, ISVISIBLE);
-
- if(typeof visible == 'boolean'){ //return the cached value if registered
- return visible;
- }
- //Determine the current state based on display states
- visible = !me.isStyle(VISIBILITY, HIDDEN) &&
- !me.isStyle(DISPLAY, NONE) &&
- !((getVisMode(dom) == El.ASCLASS) && me.hasClass(me.visibilityCls || El.visibilityCls));
-
- data(dom, ISVISIBLE, visible);
- return visible;
- },
-
- /**
- * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
- * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
- * @param {Boolean} visible Whether the element is visible
- * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
- * @return {Ext.Element} this
- */
- setVisible : function(visible, animate){
- var me = this, isDisplay, isVisibility, isOffsets, isNosize,
- dom = me.dom,
- visMode = getVisMode(dom);
-
-
- // hideMode string override
- if (typeof animate == 'string'){
- switch (animate) {
- case DISPLAY:
- visMode = El.DISPLAY;
- break;
- case VISIBILITY:
- visMode = El.VISIBILITY;
- break;
- case OFFSETS:
- visMode = El.OFFSETS;
- break;
- case NOSIZE:
- case ASCLASS:
- visMode = El.ASCLASS;
- break;
- }
- me.setVisibilityMode(visMode);
- animate = false;
- }
-
- if (!animate || !me.anim) {
- if(visMode == El.ASCLASS ){
-
- me[visible?'removeClass':'addClass'](me.visibilityCls || El.visibilityCls);
-
- } else if (visMode == El.DISPLAY){
-
- return me.setDisplayed(visible);
-
- } else if (visMode == El.OFFSETS){
-
- if (!visible){
- me.hideModeStyles = {
- position: me.getStyle('position'),
- top: me.getStyle('top'),
- left: me.getStyle('left')
- };
- me.applyStyles({position: 'absolute', top: '-10000px', left: '-10000px'});
- } else {
- me.applyStyles(me.hideModeStyles || {position: '', top: '', left: ''});
- delete me.hideModeStyles;
- }
-
- }else{
- me.fixDisplay();
- dom.style.visibility = visible ? "visible" : HIDDEN;
- }
- }else{
- // closure for composites
- if(visible){
- me.setOpacity(.01);
- me.setVisible(true);
- }
- me.anim({opacity: { to: (visible?1:0) }},
- me.preanim(arguments, 1),
- null,
- .35,
- 'easeIn',
- function(){
- visible || me.setVisible(false).setOpacity(1);
- });
- }
- data(dom, ISVISIBLE, visible); //set logical visibility state
- return me;
- },
-
-
- /**
- * @private
- * Determine if the Element has a relevant height and width available based
- * upon current logical visibility state
- */
- hasMetrics : function(){
- var dom = this.dom;
- return this.isVisible() || (getVisMode(dom) == El.VISIBILITY);
- },
-
- /**
- * Toggles the element's visibility or display, depending on visibility mode.
- * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
- * @return {Ext.Element} this
- */
- toggle : function(animate){
- var me = this;
- me.setVisible(!me.isVisible(), me.preanim(arguments, 0));
- return me;
- },
-
- /**
- * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
- * @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly.
- * @return {Ext.Element} this
- */
- setDisplayed : function(value) {
- if(typeof value == "boolean"){
- value = value ? getDisplay(this.dom) : NONE;
- }
- this.setStyle(DISPLAY, value);
- return this;
- },
-
- // private
- fixDisplay : function(){
- var me = this;
- if(me.isStyle(DISPLAY, NONE)){
- me.setStyle(VISIBILITY, HIDDEN);
- me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default
- if(me.isStyle(DISPLAY, NONE)){ // if that fails, default to block
- me.setStyle(DISPLAY, "block");
- }
- }
- },
-
- /**
- * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
- * @return {Ext.Element} this
- */
- hide : function(animate){
- // hideMode override
- if (typeof animate == 'string'){
- this.setVisible(false, animate);
- return this;
- }
- this.setVisible(false, this.preanim(arguments, 0));
- return this;
- },
-
- /**
- * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
- * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
- * @return {Ext.Element} this
- */
- show : function(animate){
- // hideMode override
- if (typeof animate == 'string'){
- this.setVisible(true, animate);
- return this;
- }
- this.setVisible(true, this.preanim(arguments, 0));
- return this;
- }
- };
-}());
-
-
\ No newline at end of file
+\ No newline at end of file