Element.fx.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-dom-Element'>/**
  19. </span> * @class Ext.dom.Element
  20. */
  21. (function() {
  22. var Element = Ext.dom.Element,
  23. VISIBILITY = &quot;visibility&quot;,
  24. DISPLAY = &quot;display&quot;,
  25. NONE = &quot;none&quot;,
  26. HIDDEN = 'hidden',
  27. VISIBLE = 'visible',
  28. OFFSETS = &quot;offsets&quot;,
  29. ASCLASS = &quot;asclass&quot;,
  30. NOSIZE = 'nosize',
  31. ORIGINALDISPLAY = 'originalDisplay',
  32. VISMODE = 'visibilityMode',
  33. ISVISIBLE = 'isVisible',
  34. OFFSETCLASS = Ext.baseCSSPrefix + 'hide-offsets',
  35. getDisplay = function(el) {
  36. var data = (el.$cache || el.getCache()).data,
  37. display = data[ORIGINALDISPLAY];
  38. if (display === undefined) {
  39. data[ORIGINALDISPLAY] = display = '';
  40. }
  41. return display;
  42. },
  43. getVisMode = function(el){
  44. var data = (el.$cache || el.getCache()).data,
  45. visMode = data[VISMODE];
  46. if (visMode === undefined) {
  47. data[VISMODE] = visMode = Element.VISIBILITY;
  48. }
  49. return visMode;
  50. };
  51. Element.override({
  52. <span id='Ext-dom-Element-property-originalDisplay'> /**
  53. </span> * The element's default display mode.
  54. */
  55. originalDisplay : &quot;&quot;,
  56. visibilityMode : 1,
  57. <span id='Ext-dom-Element-method-setVisible'> /**
  58. </span> * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
  59. * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
  60. * @param {Boolean} visible Whether the element is visible
  61. * @param {Boolean/Object} [animate] True for the default animation, or a standard Element animation config object
  62. * @return {Ext.dom.Element} this
  63. */
  64. setVisible : function(visible, animate) {
  65. var me = this,
  66. dom = me.dom,
  67. visMode = getVisMode(me);
  68. // hideMode string override
  69. if (typeof animate == 'string') {
  70. switch (animate) {
  71. case DISPLAY:
  72. visMode = Element.DISPLAY;
  73. break;
  74. case VISIBILITY:
  75. visMode = Element.VISIBILITY;
  76. break;
  77. case OFFSETS:
  78. visMode = Element.OFFSETS;
  79. break;
  80. case NOSIZE:
  81. case ASCLASS:
  82. visMode = Element.ASCLASS;
  83. break;
  84. }
  85. me.setVisibilityMode(visMode);
  86. animate = false;
  87. }
  88. if (!animate || !me.anim) {
  89. if (visMode == Element.DISPLAY) {
  90. return me.setDisplayed(visible);
  91. } else if (visMode == Element.OFFSETS) {
  92. me[visible?'removeCls':'addCls'](OFFSETCLASS);
  93. } else if (visMode == Element.VISIBILITY) {
  94. me.fixDisplay();
  95. // Show by clearing visibility style. Explicitly setting to &quot;visible&quot; overrides parent visibility setting
  96. dom.style.visibility = visible ? '' : HIDDEN;
  97. } else if (visMode == Element.ASCLASS) {
  98. me[visible?'removeCls':'addCls'](me.visibilityCls || Element.visibilityCls);
  99. }
  100. } else {
  101. // closure for composites
  102. if (visible) {
  103. me.setOpacity(0.01);
  104. me.setVisible(true);
  105. }
  106. if (!Ext.isObject(animate)) {
  107. animate = {
  108. duration: 350,
  109. easing: 'ease-in'
  110. };
  111. }
  112. me.animate(Ext.applyIf({
  113. callback: function() {
  114. if (!visible) {
  115. me.setVisible(false).setOpacity(1);
  116. }
  117. },
  118. to: {
  119. opacity: (visible) ? 1 : 0
  120. }
  121. }, animate));
  122. }
  123. (me.$cache || me.getCache()).data[ISVISIBLE] = visible;
  124. return me;
  125. },
  126. <span id='Ext-dom-Element-method-hasMetrics'> /**
  127. </span> * @private
  128. * Determine if the Element has a relevant height and width available based
  129. * upon current logical visibility state
  130. */
  131. hasMetrics : function(){
  132. var visMode = getVisMode(this);
  133. return this.isVisible() || (visMode == Element.OFFSETS) || (visMode == Element.VISIBILITY);
  134. },
  135. <span id='Ext-dom-Element-method-toggle'> /**
  136. </span> * Toggles the element's visibility or display, depending on visibility mode.
  137. * @param {Boolean/Object} [animate] True for the default animation, or a standard Element animation config object
  138. * @return {Ext.dom.Element} this
  139. */
  140. toggle : function(animate){
  141. var me = this;
  142. me.setVisible(!me.isVisible(), me.anim(animate));
  143. return me;
  144. },
  145. <span id='Ext-dom-Element-method-setDisplayed'> /**
  146. </span> * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
  147. * @param {Boolean/String} value Boolean value to display the element using its default display, or a string to set the display directly.
  148. * @return {Ext.dom.Element} this
  149. */
  150. setDisplayed : function(value) {
  151. if(typeof value == &quot;boolean&quot;){
  152. value = value ? getDisplay(this) : NONE;
  153. }
  154. this.setStyle(DISPLAY, value);
  155. return this;
  156. },
  157. // private
  158. fixDisplay : function(){
  159. var me = this;
  160. if (me.isStyle(DISPLAY, NONE)) {
  161. me.setStyle(VISIBILITY, HIDDEN);
  162. me.setStyle(DISPLAY, getDisplay(me)); // first try reverting to default
  163. if (me.isStyle(DISPLAY, NONE)) { // if that fails, default to block
  164. me.setStyle(DISPLAY, &quot;block&quot;);
  165. }
  166. }
  167. },
  168. <span id='Ext-dom-Element-method-hide'> /**
  169. </span> * Hide this element - Uses display mode to determine whether to use &quot;display&quot; or &quot;visibility&quot;. See {@link #setVisible}.
  170. * @param {Boolean/Object} [animate] true for the default animation or a standard Element animation config object
  171. * @return {Ext.dom.Element} this
  172. */
  173. hide : function(animate){
  174. // hideMode override
  175. if (typeof animate == 'string'){
  176. this.setVisible(false, animate);
  177. return this;
  178. }
  179. this.setVisible(false, this.anim(animate));
  180. return this;
  181. },
  182. <span id='Ext-dom-Element-method-show'> /**
  183. </span> * Show this element - Uses display mode to determine whether to use &quot;display&quot; or &quot;visibility&quot;. See {@link #setVisible}.
  184. * @param {Boolean/Object} [animate] true for the default animation or a standard Element animation config object
  185. * @return {Ext.dom.Element} this
  186. */
  187. show : function(animate){
  188. // hideMode override
  189. if (typeof animate == 'string'){
  190. this.setVisible(true, animate);
  191. return this;
  192. }
  193. this.setVisible(true, this.anim(animate));
  194. return this;
  195. }
  196. });
  197. }());
  198. </pre>
  199. </body>
  200. </html>