popup.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. // Copyright 2006 The Closure Library Authors. All Rights Reserved.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS-IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. /**
  15. * @fileoverview Definition of the Popup class.
  16. *
  17. * @author eae@google.com (Emil A Eklund)
  18. * @see ../demos/popup.html
  19. */
  20. goog.provide('goog.ui.Popup');
  21. goog.require('goog.math.Box');
  22. goog.require('goog.positioning.AbstractPosition');
  23. goog.require('goog.positioning.Corner');
  24. goog.require('goog.style');
  25. goog.require('goog.ui.PopupBase');
  26. /**
  27. * The Popup class provides functionality for displaying an absolutely
  28. * positioned element at a particular location in the window. It's designed to
  29. * be used as the foundation for building controls like a menu or tooltip. The
  30. * Popup class includes functionality for displaying a Popup near adjacent to
  31. * an anchor element.
  32. *
  33. * This works cross browser and thus does not use IE's createPopup feature
  34. * which supports extending outside the edge of the brower window.
  35. *
  36. * @param {Element=} opt_element A DOM element for the popup.
  37. * @param {goog.positioning.AbstractPosition=} opt_position A positioning helper
  38. * object.
  39. * @constructor
  40. * @extends {goog.ui.PopupBase}
  41. */
  42. goog.ui.Popup = function(opt_element, opt_position) {
  43. /**
  44. * Corner of the popup to used in the positioning algorithm.
  45. *
  46. * @type {goog.positioning.Corner}
  47. * @private
  48. */
  49. this.popupCorner_ = goog.positioning.Corner.TOP_START;
  50. /**
  51. * Positioning helper object.
  52. *
  53. * @private {goog.positioning.AbstractPosition|undefined}
  54. */
  55. this.position_ = opt_position || undefined;
  56. goog.ui.PopupBase.call(this, opt_element);
  57. };
  58. goog.inherits(goog.ui.Popup, goog.ui.PopupBase);
  59. goog.tagUnsealableClass(goog.ui.Popup);
  60. /**
  61. * Margin for the popup used in positioning algorithms.
  62. *
  63. * @type {goog.math.Box|undefined}
  64. * @private
  65. */
  66. goog.ui.Popup.prototype.margin_;
  67. /**
  68. * Returns the corner of the popup to used in the positioning algorithm.
  69. *
  70. * @return {goog.positioning.Corner} The popup corner used for positioning.
  71. */
  72. goog.ui.Popup.prototype.getPinnedCorner = function() {
  73. return this.popupCorner_;
  74. };
  75. /**
  76. * Sets the corner of the popup to used in the positioning algorithm.
  77. *
  78. * @param {goog.positioning.Corner} corner The popup corner used for
  79. * positioning.
  80. */
  81. goog.ui.Popup.prototype.setPinnedCorner = function(corner) {
  82. this.popupCorner_ = corner;
  83. if (this.isVisible()) {
  84. this.reposition();
  85. }
  86. };
  87. /**
  88. * @return {goog.positioning.AbstractPosition} The position helper object
  89. * associated with the popup.
  90. */
  91. goog.ui.Popup.prototype.getPosition = function() {
  92. return this.position_ || null;
  93. };
  94. /**
  95. * Sets the position helper object associated with the popup.
  96. *
  97. * @param {goog.positioning.AbstractPosition} position A position helper object.
  98. */
  99. goog.ui.Popup.prototype.setPosition = function(position) {
  100. this.position_ = position || undefined;
  101. if (this.isVisible()) {
  102. this.reposition();
  103. }
  104. };
  105. /**
  106. * Returns the margin to place around the popup.
  107. *
  108. * @return {goog.math.Box?} The margin.
  109. */
  110. goog.ui.Popup.prototype.getMargin = function() {
  111. return this.margin_ || null;
  112. };
  113. /**
  114. * Sets the margin to place around the popup.
  115. *
  116. * @param {goog.math.Box|number|null} arg1 Top value or Box.
  117. * @param {number=} opt_arg2 Right value.
  118. * @param {number=} opt_arg3 Bottom value.
  119. * @param {number=} opt_arg4 Left value.
  120. */
  121. goog.ui.Popup.prototype.setMargin = function(
  122. arg1, opt_arg2, opt_arg3, opt_arg4) {
  123. if (arg1 == null || arg1 instanceof goog.math.Box) {
  124. this.margin_ = arg1;
  125. } else {
  126. this.margin_ = new goog.math.Box(
  127. arg1,
  128. /** @type {number} */ (opt_arg2),
  129. /** @type {number} */ (opt_arg3),
  130. /** @type {number} */ (opt_arg4));
  131. }
  132. if (this.isVisible()) {
  133. this.reposition();
  134. }
  135. };
  136. /**
  137. * Repositions the popup according to the current state.
  138. * @override
  139. */
  140. goog.ui.Popup.prototype.reposition = function() {
  141. if (!this.position_) {
  142. return;
  143. }
  144. var hideForPositioning = !this.isVisible() &&
  145. this.getType() != goog.ui.PopupBase.Type.MOVE_OFFSCREEN;
  146. var el = this.getElement();
  147. if (hideForPositioning) {
  148. el.style.visibility = 'hidden';
  149. goog.style.setElementShown(el, true);
  150. }
  151. this.position_.reposition(el, this.popupCorner_, this.margin_);
  152. if (hideForPositioning) {
  153. // NOTE(eae): The visibility property is reset to 'visible' by the show_
  154. // method in PopupBase. Resetting it here causes flickering in some
  155. // situations, even if set to visible after the display property has been
  156. // set to none by the call below.
  157. goog.style.setElementShown(el, false);
  158. }
  159. };