--- /dev/null
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**\r
+ * @class Ext.Element\r
+ */\r
+/**\r
+ * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element\r
+ * @static\r
+ * @type Number\r
+ */\r
+Ext.Element.VISIBILITY = 1;\r
+/**\r
+ * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element\r
+ * @static\r
+ * @type Number\r
+ */\r
+Ext.Element.DISPLAY = 2;\r
+\r
+Ext.Element.addMethods(function(){\r
+ var VISIBILITY = "visibility",\r
+ DISPLAY = "display",\r
+ HIDDEN = "hidden",\r
+ NONE = "none", \r
+ ORIGINALDISPLAY = 'originalDisplay',\r
+ VISMODE = 'visibilityMode',\r
+ ELDISPLAY = Ext.Element.DISPLAY,\r
+ data = Ext.Element.data,\r
+ getDisplay = function(dom){\r
+ var d = data(dom, ORIGINALDISPLAY);\r
+ if(d === undefined){\r
+ data(dom, ORIGINALDISPLAY, d = '');\r
+ }\r
+ return d;\r
+ },\r
+ getVisMode = function(dom){\r
+ var m = data(dom, VISMODE);\r
+ if(m === undefined){\r
+ data(dom, VISMODE, m = 1)\r
+ }\r
+ return m;\r
+ };\r
+ \r
+ return {\r
+ /**\r
+ * The element's default display mode (defaults to "")\r
+ * @type String\r
+ */\r
+ originalDisplay : "",\r
+ visibilityMode : 1,\r
+ \r
+ /**\r
+ * Sets the element's visibility mode. When setVisible() is called it\r
+ * will use this to determine whether to set the visibility or the display property.\r
+ * @param visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY\r
+ * @return {Ext.Element} this\r
+ */\r
+ setVisibilityMode : function(visMode){ \r
+ data(this.dom, VISMODE, visMode);\r
+ return this;\r
+ },\r
+ \r
+ /**\r
+ * Perform custom animation on this element.\r
+ * <div><ul class="mdetail-params">\r
+ * <li><u>Animation Properties</u></li>\r
+ * \r
+ * <p>The Animation Control Object enables gradual transitions for any member of an\r
+ * element's style object that takes a numeric value including but not limited to\r
+ * these properties:</p><div><ul class="mdetail-params">\r
+ * <li><tt>bottom, top, left, right</tt></li>\r
+ * <li><tt>height, width</tt></li>\r
+ * <li><tt>margin, padding</tt></li>\r
+ * <li><tt>borderWidth</tt></li>\r
+ * <li><tt>opacity</tt></li>\r
+ * <li><tt>fontSize</tt></li>\r
+ * <li><tt>lineHeight</tt></li>\r
+ * </ul></div>\r
+ * \r
+ * \r
+ * <li><u>Animation Property Attributes</u></li>\r
+ * \r
+ * <p>Each Animation Property is a config object with optional properties:</p>\r
+ * <div><ul class="mdetail-params">\r
+ * <li><tt>by</tt>* : relative change - start at current value, change by this value</li>\r
+ * <li><tt>from</tt> : ignore current value, start from this value</li>\r
+ * <li><tt>to</tt>* : start at current value, go to this value</li>\r
+ * <li><tt>unit</tt> : any allowable unit specification</li>\r
+ * <p>* do not specify both <tt>to</tt> and <tt>by</tt> for an animation property</p>\r
+ * </ul></div>\r
+ * \r
+ * <li><u>Animation Types</u></li>\r
+ * \r
+ * <p>The supported animation types:</p><div><ul class="mdetail-params">\r
+ * <li><tt>'run'</tt> : Default\r
+ * <pre><code>\r
+var el = Ext.get('complexEl');\r
+el.animate(\r
+ // animation control object\r
+ {\r
+ borderWidth: {to: 3, from: 0},\r
+ opacity: {to: .3, from: 1},\r
+ height: {to: 50, from: el.getHeight()},\r
+ width: {to: 300, from: el.getWidth()},\r
+ top : {by: - 100, unit: 'px'},\r
+ },\r
+ 0.35, // animation duration\r
+ null, // callback\r
+ 'easeOut', // easing method\r
+ 'run' // animation type ('run','color','motion','scroll') \r
+);\r
+ * </code></pre>\r
+ * </li>\r
+ * <li><tt>'color'</tt>\r
+ * <p>Animates transition of background, text, or border colors.</p>\r
+ * <pre><code>\r
+el.animate(\r
+ // animation control object\r
+ {\r
+ color: { to: '#06e' },\r
+ backgroundColor: { to: '#e06' }\r
+ },\r
+ 0.35, // animation duration\r
+ null, // callback\r
+ 'easeOut', // easing method\r
+ 'color' // animation type ('run','color','motion','scroll') \r
+);\r
+ * </code></pre> \r
+ * </li>\r
+ * \r
+ * <li><tt>'motion'</tt>\r
+ * <p>Animates the motion of an element to/from specific points using optional bezier\r
+ * way points during transit.</p>\r
+ * <pre><code>\r
+el.animate(\r
+ // animation control object\r
+ {\r
+ borderWidth: {to: 3, from: 0},\r
+ opacity: {to: .3, from: 1},\r
+ height: {to: 50, from: el.getHeight()},\r
+ width: {to: 300, from: el.getWidth()},\r
+ top : {by: - 100, unit: 'px'},\r
+ points: {\r
+ to: [50, 100], // go to this point\r
+ control: [ // optional bezier way points\r
+ [ 600, 800],\r
+ [-100, 200]\r
+ ]\r
+ }\r
+ },\r
+ 3000, // animation duration (milliseconds!)\r
+ null, // callback\r
+ 'easeOut', // easing method\r
+ 'motion' // animation type ('run','color','motion','scroll') \r
+);\r
+ * </code></pre> \r
+ * </li>\r
+ * <li><tt>'scroll'</tt>\r
+ * <p>Animate horizontal or vertical scrolling of an overflowing page element.</p>\r
+ * <pre><code>\r
+el.animate(\r
+ // animation control object\r
+ {\r
+ scroll: {to: [400, 300]}\r
+ },\r
+ 0.35, // animation duration\r
+ null, // callback\r
+ 'easeOut', // easing method\r
+ 'scroll' // animation type ('run','color','motion','scroll') \r
+);\r
+ * </code></pre> \r
+ * </li>\r
+ * </ul></div>\r
+ * \r
+ * </ul></div>\r
+ * \r
+ * @param {Object} args The animation control args\r
+ * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to <tt>.35</tt>)\r
+ * @param {Function} onComplete (optional) Function to call when animation completes\r
+ * @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to <tt>'easeOut'</tt>)\r
+ * @param {String} animType (optional) <tt>'run'</tt> is the default. Can also be <tt>'color'</tt>,\r
+ * <tt>'motion'</tt>, or <tt>'scroll'</tt>\r
+ * @return {Ext.Element} this\r
+ */\r
+ animate : function(args, duration, onComplete, easing, animType){ \r
+ this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType);\r
+ return this;\r
+ },\r
+ \r
+ /*\r
+ * @private Internal animation call\r
+ */\r
+ anim : function(args, opt, animType, defaultDur, defaultEase, cb){\r
+ animType = animType || 'run';\r
+ opt = opt || {};\r
+ var me = this, \r
+ anim = Ext.lib.Anim[animType](\r
+ me.dom, \r
+ args,\r
+ (opt.duration || defaultDur) || .35,\r
+ (opt.easing || defaultEase) || 'easeOut',\r
+ function(){\r
+ if(cb) cb.call(me);\r
+ if(opt.callback) opt.callback.call(opt.scope || me, me, opt);\r
+ },\r
+ me\r
+ );\r
+ opt.anim = anim;\r
+ return anim;\r
+ },\r
+ \r
+ // private legacy anim prep\r
+ preanim : function(a, i){\r
+ return !a[i] ? false : (Ext.isObject(a[i]) ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]});\r
+ },\r
+ \r
+ /**\r
+ * Checks whether the element is currently visible using both visibility and display properties. \r
+ * @return {Boolean} True if the element is currently visible, else false\r
+ */\r
+ isVisible : function() {\r
+ return !this.isStyle(VISIBILITY, HIDDEN) && !this.isStyle(DISPLAY, NONE);\r
+ },\r
+ \r
+ /**\r
+ * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use\r
+ * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.\r
+ * @param {Boolean} visible Whether the element is visible\r
+ * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
+ * @return {Ext.Element} this\r
+ */\r
+ setVisible : function(visible, animate){\r
+ var me = this,\r
+ dom = me.dom,\r
+ isDisplay = getVisMode(this.dom) == ELDISPLAY;\r
+ \r
+ if (!animate || !me.anim) {\r
+ if(isDisplay){\r
+ me.setDisplayed(visible);\r
+ }else{\r
+ me.fixDisplay();\r
+ dom.style.visibility = visible ? "visible" : HIDDEN;\r
+ }\r
+ }else{\r
+ // closure for composites \r
+ if(visible){\r
+ me.setOpacity(.01);\r
+ me.setVisible(true);\r
+ }\r
+ me.anim({opacity: { to: (visible?1:0) }},\r
+ me.preanim(arguments, 1),\r
+ null,\r
+ .35,\r
+ 'easeIn',\r
+ function(){\r
+ if(!visible){\r
+ dom.style[isDisplay ? DISPLAY : VISIBILITY] = (isDisplay) ? NONE : HIDDEN; \r
+ Ext.fly(dom).setOpacity(1);\r
+ }\r
+ });\r
+ }\r
+ return me;\r
+ },\r
+ \r
+ /**\r
+ * Toggles the element's visibility or display, depending on visibility mode.\r
+ * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object\r
+ * @return {Ext.Element} this\r
+ */\r
+ toggle : function(animate){\r
+ var me = this;\r
+ me.setVisible(!me.isVisible(), me.preanim(arguments, 0));\r
+ return me;\r
+ },\r
+ \r
+ /**\r
+ * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.\r
+ * @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly.\r
+ * @return {Ext.Element} this\r
+ */\r
+ setDisplayed : function(value) { \r
+ if(typeof value == "boolean"){\r
+ value = value ? getDisplay(this.dom) : NONE;\r
+ }\r
+ this.setStyle(DISPLAY, value);\r
+ return this;\r
+ },\r
+ \r
+ // private\r
+ fixDisplay : function(){\r
+ var me = this;\r
+ if(me.isStyle(DISPLAY, NONE)){\r
+ me.setStyle(VISIBILITY, HIDDEN);\r
+ me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default\r
+ if(me.isStyle(DISPLAY, NONE)){ // if that fails, default to block\r
+ me.setStyle(DISPLAY, "block");\r
+ }\r
+ }\r
+ },\r
+ \r
+ /**\r
+ * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.\r
+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
+ * @return {Ext.Element} this\r
+ */\r
+ hide : function(animate){\r
+ this.setVisible(false, this.preanim(arguments, 0));\r
+ return this;\r
+ },\r
+ \r
+ /**\r
+ * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.\r
+ * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object\r
+ * @return {Ext.Element} this\r
+ */\r
+ show : function(animate){\r
+ this.setVisible(true, this.preanim(arguments, 0));\r
+ return this;\r
+ }\r
+ }\r
+}());
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff