utils.js 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. export function getPopoverStyle(placement, autoAdjustOverflow, size) {
  2. var containerRect = size.containerRect, childrenRect = size.childrenRect, contentRect = size.contentRect, systemInfo = size.systemInfo;
  3. var left = childrenRect.left - containerRect.left;
  4. var top = childrenRect.top - containerRect.top;
  5. var bottom = containerRect.bottom - childrenRect.bottom;
  6. var right = containerRect.right - childrenRect.right;
  7. var adjustedPlacement = placement;
  8. var arrowMargin = 12;
  9. var contentRectWidth = contentRect.width + arrowMargin;
  10. var contentRectHeight = contentRect.height + arrowMargin;
  11. if (autoAdjustOverflow) {
  12. if (adjustedPlacement === 'top') {
  13. if (childrenRect.top - contentRectHeight < 0) {
  14. adjustedPlacement = 'bottom';
  15. }
  16. }
  17. else if (adjustedPlacement === 'bottom') {
  18. if (childrenRect.bottom + contentRectHeight > systemInfo.windowHeight) {
  19. adjustedPlacement = 'top';
  20. }
  21. }
  22. else if (adjustedPlacement === 'left') {
  23. if (childrenRect.left - contentRectWidth < 0) {
  24. adjustedPlacement = 'right';
  25. }
  26. }
  27. else if (adjustedPlacement === 'right') {
  28. if (childrenRect.right + contentRectWidth > systemInfo.windowWidth) {
  29. adjustedPlacement = 'left';
  30. }
  31. }
  32. else if (adjustedPlacement === 'top-left') {
  33. if (childrenRect.top - contentRectHeight < 0) {
  34. adjustedPlacement = adjustedPlacement.replace('top', 'bottom');
  35. }
  36. if (childrenRect.left + contentRectWidth > systemInfo.windowWidth) {
  37. adjustedPlacement = adjustedPlacement.replace('left', 'right');
  38. }
  39. }
  40. else if (adjustedPlacement === 'top-right') {
  41. if (childrenRect.top - contentRectHeight < 0) {
  42. adjustedPlacement = adjustedPlacement.replace('top', 'bottom');
  43. }
  44. if (childrenRect.right - contentRectWidth < 0) {
  45. adjustedPlacement = adjustedPlacement.replace('right', 'left');
  46. }
  47. }
  48. else if (adjustedPlacement === 'bottom-left') {
  49. if (childrenRect.bottom + contentRectHeight > systemInfo.windowHeight) {
  50. adjustedPlacement = adjustedPlacement.replace('bottom', 'top');
  51. }
  52. if (childrenRect.left + contentRectWidth > systemInfo.windowWidth) {
  53. adjustedPlacement = adjustedPlacement.replace('left', 'right');
  54. }
  55. }
  56. else if (adjustedPlacement === 'bottom-right') {
  57. if (childrenRect.bottom + contentRectHeight > systemInfo.windowHeight) {
  58. adjustedPlacement = adjustedPlacement.replace('bottom', 'top');
  59. }
  60. if (childrenRect.right - contentRectWidth < 0) {
  61. adjustedPlacement = adjustedPlacement.replace('right', 'left');
  62. }
  63. }
  64. else if (adjustedPlacement === 'left-top') {
  65. if (childrenRect.left - contentRectWidth < 0) {
  66. adjustedPlacement = adjustedPlacement.replace('left', 'right');
  67. }
  68. if (childrenRect.top + contentRectHeight > systemInfo.windowHeight) {
  69. adjustedPlacement = adjustedPlacement.replace('top', 'bottom');
  70. }
  71. }
  72. else if (adjustedPlacement === 'left-bottom') {
  73. if (childrenRect.left - contentRectWidth < 0) {
  74. adjustedPlacement = adjustedPlacement.replace('left', 'right');
  75. }
  76. if (childrenRect.bottom - contentRectHeight < 0) {
  77. adjustedPlacement = adjustedPlacement.replace('bottom', 'top');
  78. }
  79. }
  80. else if (adjustedPlacement === 'right-top') {
  81. if (childrenRect.right + contentRectWidth > systemInfo.windowWidth) {
  82. adjustedPlacement = adjustedPlacement.replace('right', 'left');
  83. }
  84. if (childrenRect.top + contentRectHeight > systemInfo.windowHeight) {
  85. adjustedPlacement = adjustedPlacement.replace('top', 'bottom');
  86. }
  87. }
  88. else if (adjustedPlacement === 'right-bottom') {
  89. if (childrenRect.right + contentRectWidth > systemInfo.windowWidth) {
  90. adjustedPlacement = adjustedPlacement.replace('right', 'left');
  91. }
  92. if (childrenRect.bottom - contentRectHeight < 0) {
  93. adjustedPlacement = adjustedPlacement.replace('bottom', 'top');
  94. }
  95. }
  96. }
  97. var popoverContentStyle;
  98. if (adjustedPlacement === 'top') {
  99. popoverContentStyle = getStyle({
  100. left: left + childrenRect.width / 2,
  101. top: top - arrowMargin,
  102. });
  103. }
  104. else if (adjustedPlacement === 'bottom') {
  105. popoverContentStyle = getStyle({
  106. left: left + childrenRect.width / 2,
  107. bottom: bottom - arrowMargin,
  108. });
  109. }
  110. else if (adjustedPlacement === 'left') {
  111. popoverContentStyle = getStyle({
  112. left: left - arrowMargin,
  113. top: top + childrenRect.height / 2,
  114. });
  115. }
  116. else if (adjustedPlacement === 'right') {
  117. popoverContentStyle = getStyle({
  118. right: right - arrowMargin,
  119. top: top + childrenRect.height / 2,
  120. });
  121. }
  122. else if (adjustedPlacement === 'top-left') {
  123. popoverContentStyle = getStyle({
  124. left: left,
  125. top: top - arrowMargin,
  126. });
  127. }
  128. else if (adjustedPlacement === 'top-right') {
  129. popoverContentStyle = getStyle({
  130. right: right,
  131. top: top - arrowMargin,
  132. });
  133. }
  134. else if (adjustedPlacement === 'bottom-left') {
  135. popoverContentStyle = getStyle({
  136. left: left,
  137. bottom: bottom - arrowMargin,
  138. });
  139. }
  140. else if (adjustedPlacement === 'bottom-right') {
  141. popoverContentStyle = getStyle({
  142. right: right,
  143. bottom: bottom - arrowMargin,
  144. });
  145. }
  146. else if (adjustedPlacement === 'left-top') {
  147. popoverContentStyle = getStyle({
  148. left: left - arrowMargin,
  149. top: top,
  150. });
  151. }
  152. else if (adjustedPlacement === 'left-bottom') {
  153. popoverContentStyle = getStyle({
  154. left: left - arrowMargin,
  155. bottom: bottom,
  156. });
  157. }
  158. else if (adjustedPlacement === 'right-top') {
  159. popoverContentStyle = getStyle({
  160. right: right - arrowMargin,
  161. top: top,
  162. });
  163. }
  164. else if (adjustedPlacement === 'right-bottom') {
  165. popoverContentStyle = getStyle({
  166. right: right - arrowMargin,
  167. bottom: bottom,
  168. });
  169. }
  170. return {
  171. popoverContentStyle: popoverContentStyle,
  172. adjustedPlacement: adjustedPlacement,
  173. };
  174. }
  175. function getStyle(obj) {
  176. return Object.keys(obj)
  177. .map(function (item) { return "".concat(item, ": ").concat(obj[item], "px"); })
  178. .join(';');
  179. }