-<html>\r
-<head>\r
- <title>The source code</title>\r
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body onload="prettyPrint();">\r
- <pre class="prettyprint lang-js">/**\r
- * @class Ext.Element\r
- */\r
-<div id="prop-Ext.Element-VISIBILITY"></div>/**\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
-<div id="prop-Ext.Element-DISPLAY"></div>/**\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
- <div id="prop-Ext.Element-originalDisplay"></div>/**\r
- * The element's default display mode (defaults to "")\r
- * @type String\r
- */\r
- originalDisplay : "",\r
- visibilityMode : 1,\r
- \r
- <div id="method-Ext.Element-setVisibilityMode"></div>/**\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
- <div id="method-Ext.Element-animate"></div>/**\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
- <div id="method-Ext.Element-isVisible"></div>/**\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
- <div id="method-Ext.Element-setVisible"></div>/**\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
- <div id="method-Ext.Element-toggle"></div>/**\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
- <div id="method-Ext.Element-setDisplayed"></div>/**\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
- <div id="method-Ext.Element-hide"></div>/**\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
- <div id="method-Ext.Element-show"></div>/**\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
-}());</pre> \r
-</body>\r
-</html>
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../prettify/prettify.js"></script>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-core-Element'>/**
+</span> * @class Ext.core.Element
+ */
+<span id='Ext-core-Element-property-VISIBILITY'>/**
+</span> * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element
+ * @static
+ * @type Number
+ */
+Ext.core.Element.VISIBILITY = 1;
+<span id='Ext-core-Element-property-DISPLAY'>/**
+</span> * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element
+ * @static
+ * @type Number
+ */
+Ext.core.Element.DISPLAY = 2;
+
+<span id='Ext-core-Element-property-OFFSETS'>/**
+</span> * Visibility mode constant for use with {@link #setVisibilityMode}. Use offsets (x and y positioning offscreen)
+ * to hide element.
+ * @static
+ * @type Number
+ */
+Ext.core.Element.OFFSETS = 3;
+
+
+Ext.core.Element.ASCLASS = 4;
+
+<span id='Ext-core-Element-property-visibilityCls'>/**
+</span> * Defaults to 'x-hide-nosize'
+ * @static
+ * @type String
+ */
+Ext.core.Element.visibilityCls = Ext.baseCSSPrefix + 'hide-nosize';
+
+Ext.core.Element.addMethods(function(){
+ var El = Ext.core.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 {
+<span id='Ext-core-Element-property-originalDisplay'> /**
+</span> * The element's default display mode (defaults to "")
+ * @type String
+ */
+ originalDisplay : "",
+ visibilityMode : 1,
+
+<span id='Ext-core-Element-method-setVisibilityMode'> /**
+</span> * 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.core.Element.VISIBILITY or Ext.core.Element.DISPLAY
+ * @return {Ext.core.Element} this
+ */
+ setVisibilityMode : function(visMode){
+ data(this.dom, VISMODE, visMode);
+ return this;
+ },
+
+<span id='Ext-core-Element-method-isVisible'> /**
+</span> * 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.hasCls(me.visibilityCls || El.visibilityCls));
+
+ data(dom, ISVISIBLE, visible);
+ return visible;
+ },
+
+<span id='Ext-core-Element-method-setVisible'> /**
+</span> * 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.core.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?'removeCls':'addCls'](me.visibilityCls || El.visibilityCls);
+
+ } else if (visMode == El.DISPLAY){
+
+ return me.setDisplayed(visible);
+
+ } else if (visMode == El.OFFSETS){
+
+ if (!visible){
+ // Remember position for restoring, if we are not already hidden by offsets.
+ if (!me.hideModeStyles) {
+ me.hideModeStyles = {
+ position: me.getStyle('position'),
+ top: me.getStyle('top'),
+ left: me.getStyle('left')
+ };
+ }
+ me.applyStyles({position: 'absolute', top: '-10000px', left: '-10000px'});
+ }
+
+ // Only "restore" as position if we have actually been hidden using offsets.
+ // Calling setVisible(true) on a positioned element should not reposition it.
+ else if (me.hideModeStyles) {
+ me.applyStyles(me.hideModeStyles || {position: '', top: '', left: ''});
+ delete me.hideModeStyles;
+ }
+
+ }else{
+ me.fixDisplay();
+ // Show by clearing visibility style. Explicitly setting to "visible" overrides parent visibility setting.
+ dom.style.visibility = visible ? '' : HIDDEN;
+ }
+ }else{
+ // closure for composites
+ if(visible){
+ me.setOpacity(0.01);
+ me.setVisible(true);
+ }
+ if (!Ext.isObject(animate)) {
+ animate = {
+ duration: 350,
+ easing: 'ease-in'
+ };
+ }
+ me.animate(Ext.applyIf({
+ callback: function() {
+ visible || me.setVisible(false).setOpacity(1);
+ },
+ to: {
+ opacity: (visible) ? 1 : 0
+ }
+ }, animate));
+ }
+ data(dom, ISVISIBLE, visible); //set logical visibility state
+ return me;
+ },
+
+
+<span id='Ext-core-Element-method-hasMetrics'> /**
+</span> * @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.OFFSETS) || (getVisMode(dom) == El.VISIBILITY);
+ },
+
+<span id='Ext-core-Element-method-toggle'> /**
+</span> * 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.core.Element} this
+ */
+ toggle : function(animate){
+ var me = this;
+ me.setVisible(!me.isVisible(), me.anim(animate));
+ return me;
+ },
+
+<span id='Ext-core-Element-method-setDisplayed'> /**
+</span> * 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.core.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");
+ }
+ }
+ },
+
+<span id='Ext-core-Element-method-hide'> /**
+</span> * 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.core.Element} this
+ */
+ hide : function(animate){
+ // hideMode override
+ if (typeof animate == 'string'){
+ this.setVisible(false, animate);
+ return this;
+ }
+ this.setVisible(false, this.anim(animate));
+ return this;
+ },
+
+<span id='Ext-core-Element-method-show'> /**
+</span> * 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.core.Element} this
+ */
+ show : function(animate){
+ // hideMode override
+ if (typeof animate == 'string'){
+ this.setVisible(true, animate);
+ return this;
+ }
+ this.setVisible(true, this.anim(animate));
+ return this;
+ }
+ };
+}());</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff