AbstractElement.alignment.html 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  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-AbstractElement'>/**
  19. </span> * @class Ext.dom.AbstractElement
  20. */
  21. Ext.dom.AbstractElement.override({
  22. <span id='Ext-dom-AbstractElement-method-getAnchorXY'> /**
  23. </span> * Gets the x,y coordinates specified by the anchor position on the element.
  24. * @param {String} [anchor] The specified anchor position (defaults to &quot;c&quot;). See {@link Ext.dom.Element#alignTo}
  25. * for details on supported anchor positions.
  26. * @param {Boolean} [local] True to get the local (element top/left-relative) anchor position instead
  27. * of page coordinates
  28. * @param {Object} [size] An object containing the size to use for calculating anchor position
  29. * {width: (target width), height: (target height)} (defaults to the element's current size)
  30. * @return {Array} [x, y] An array containing the element's x and y coordinates
  31. */
  32. getAnchorXY: function(anchor, local, size) {
  33. //Passing a different size is useful for pre-calculating anchors,
  34. //especially for anchored animations that change the el size.
  35. anchor = (anchor || &quot;tl&quot;).toLowerCase();
  36. size = size || {};
  37. var me = this,
  38. vp = me.dom == document.body || me.dom == document,
  39. width = size.width || vp ? window.innerWidth: me.getWidth(),
  40. height = size.height || vp ? window.innerHeight: me.getHeight(),
  41. xy,
  42. rnd = Math.round,
  43. myXY = me.getXY(),
  44. extraX = vp ? 0: !local ? myXY[0] : 0,
  45. extraY = vp ? 0: !local ? myXY[1] : 0,
  46. hash = {
  47. c: [rnd(width * 0.5), rnd(height * 0.5)],
  48. t: [rnd(width * 0.5), 0],
  49. l: [0, rnd(height * 0.5)],
  50. r: [width, rnd(height * 0.5)],
  51. b: [rnd(width * 0.5), height],
  52. tl: [0, 0],
  53. bl: [0, height],
  54. br: [width, height],
  55. tr: [width, 0]
  56. };
  57. xy = hash[anchor];
  58. return [xy[0] + extraX, xy[1] + extraY];
  59. },
  60. alignToRe: /^([a-z]+)-([a-z]+)(\?)?$/,
  61. <span id='Ext-dom-AbstractElement-method-getAlignToXY'> /**
  62. </span> * Gets the x,y coordinates to align this element with another element. See {@link Ext.dom.Element#alignTo} for more info on the
  63. * supported position values.
  64. * @param {Ext.Element/HTMLElement/String} element The element to align to.
  65. * @param {String} [position=&quot;tl-bl?&quot;] The position to align to.
  66. * @param {Array} [offsets=[0,0]] Offset the positioning by [x, y]
  67. * @return {Array} [x, y]
  68. */
  69. getAlignToXY: function(el, position, offsets, local) {
  70. local = !!local;
  71. el = Ext.get(el);
  72. //&lt;debug&gt;
  73. if (!el || !el.dom) {
  74. throw new Error(&quot;Element.alignToXY with an element that doesn't exist&quot;);
  75. }
  76. //&lt;/debug&gt;
  77. offsets = offsets || [0, 0];
  78. if (!position || position == '?') {
  79. position = 'tl-bl?';
  80. }
  81. else if (! (/-/).test(position) &amp;&amp; position !== &quot;&quot;) {
  82. position = 'tl-' + position;
  83. }
  84. position = position.toLowerCase();
  85. var me = this,
  86. matches = position.match(this.alignToRe),
  87. dw = window.innerWidth,
  88. dh = window.innerHeight,
  89. p1 = &quot;&quot;,
  90. p2 = &quot;&quot;,
  91. a1,
  92. a2,
  93. x,
  94. y,
  95. swapX,
  96. swapY,
  97. p1x,
  98. p1y,
  99. p2x,
  100. p2y,
  101. width,
  102. height,
  103. region,
  104. constrain;
  105. if (!matches) {
  106. throw &quot;Element.alignTo with an invalid alignment &quot; + position;
  107. }
  108. p1 = matches[1];
  109. p2 = matches[2];
  110. constrain = !!matches[3];
  111. //Subtract the aligned el's internal xy from the target's offset xy
  112. //plus custom offset to get the aligned el's new offset xy
  113. a1 = me.getAnchorXY(p1, true);
  114. a2 = el.getAnchorXY(p2, local);
  115. x = a2[0] - a1[0] + offsets[0];
  116. y = a2[1] - a1[1] + offsets[1];
  117. if (constrain) {
  118. width = me.getWidth();
  119. height = me.getHeight();
  120. region = el.getPageBox();
  121. //If we are at a viewport boundary and the aligned el is anchored on a target border that is
  122. //perpendicular to the vp border, allow the aligned el to slide on that border,
  123. //otherwise swap the aligned el to the opposite border of the target.
  124. p1y = p1.charAt(0);
  125. p1x = p1.charAt(p1.length - 1);
  126. p2y = p2.charAt(0);
  127. p2x = p2.charAt(p2.length - 1);
  128. swapY = ((p1y == &quot;t&quot; &amp;&amp; p2y == &quot;b&quot;) || (p1y == &quot;b&quot; &amp;&amp; p2y == &quot;t&quot;));
  129. swapX = ((p1x == &quot;r&quot; &amp;&amp; p2x == &quot;l&quot;) || (p1x == &quot;l&quot; &amp;&amp; p2x == &quot;r&quot;));
  130. if (x + width &gt; dw) {
  131. x = swapX ? region.left - width: dw - width;
  132. }
  133. if (x &lt; 0) {
  134. x = swapX ? region.right: 0;
  135. }
  136. if (y + height &gt; dh) {
  137. y = swapY ? region.top - height: dh - height;
  138. }
  139. if (y &lt; 0) {
  140. y = swapY ? region.bottom: 0;
  141. }
  142. }
  143. return [x, y];
  144. },
  145. // private
  146. getAnchor: function(){
  147. var data = (this.$cache || this.getCache()).data,
  148. anchor;
  149. if (!this.dom) {
  150. return;
  151. }
  152. anchor = data._anchor;
  153. if(!anchor){
  154. anchor = data._anchor = {};
  155. }
  156. return anchor;
  157. },
  158. // private ==&gt; used outside of core
  159. adjustForConstraints: function(xy, parent) {
  160. var vector = this.getConstrainVector(parent, xy);
  161. if (vector) {
  162. xy[0] += vector[0];
  163. xy[1] += vector[1];
  164. }
  165. return xy;
  166. }
  167. });
  168. </pre>
  169. </body>
  170. </html>