popupbase.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884
  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 PopupBase class.
  16. *
  17. */
  18. goog.provide('goog.ui.PopupBase');
  19. goog.provide('goog.ui.PopupBase.EventType');
  20. goog.provide('goog.ui.PopupBase.Type');
  21. goog.require('goog.Timer');
  22. goog.require('goog.array');
  23. goog.require('goog.dom');
  24. goog.require('goog.dom.TagName');
  25. goog.require('goog.events');
  26. goog.require('goog.events.EventHandler');
  27. goog.require('goog.events.EventTarget');
  28. goog.require('goog.events.EventType');
  29. goog.require('goog.events.KeyCodes');
  30. goog.require('goog.fx.Transition');
  31. goog.require('goog.style');
  32. goog.require('goog.userAgent');
  33. /**
  34. * The PopupBase class provides functionality for showing and hiding a generic
  35. * container element. It also provides the option for hiding the popup element
  36. * if the user clicks outside the popup or the popup loses focus.
  37. *
  38. * @constructor
  39. * @extends {goog.events.EventTarget}
  40. * @param {Element=} opt_element A DOM element for the popup.
  41. * @param {goog.ui.PopupBase.Type=} opt_type Type of popup.
  42. */
  43. goog.ui.PopupBase = function(opt_element, opt_type) {
  44. goog.events.EventTarget.call(this);
  45. /**
  46. * An event handler to manage the events easily
  47. * @type {goog.events.EventHandler<!goog.ui.PopupBase>}
  48. * @private
  49. */
  50. this.handler_ = new goog.events.EventHandler(this);
  51. this.setElement(opt_element || null);
  52. if (opt_type) {
  53. this.setType(opt_type);
  54. }
  55. };
  56. goog.inherits(goog.ui.PopupBase, goog.events.EventTarget);
  57. goog.tagUnsealableClass(goog.ui.PopupBase);
  58. /**
  59. * Constants for type of Popup
  60. * @enum {string}
  61. */
  62. goog.ui.PopupBase.Type = {
  63. TOGGLE_DISPLAY: 'toggle_display',
  64. MOVE_OFFSCREEN: 'move_offscreen'
  65. };
  66. /**
  67. * The popup dom element that this Popup wraps.
  68. * @type {Element}
  69. * @private
  70. */
  71. goog.ui.PopupBase.prototype.element_ = null;
  72. /**
  73. * Whether the Popup dismisses itself it the user clicks outside of it or the
  74. * popup loses focus
  75. * @type {boolean}
  76. * @private
  77. */
  78. goog.ui.PopupBase.prototype.autoHide_ = true;
  79. /**
  80. * Mouse events without auto hide partner elements will not dismiss the popup.
  81. * @type {Array<Element>}
  82. * @private
  83. */
  84. goog.ui.PopupBase.prototype.autoHidePartners_ = null;
  85. /**
  86. * Clicks outside the popup but inside this element will cause the popup to
  87. * hide if autoHide_ is true. If this is null, then the entire document is used.
  88. * For example, you can use a body-size div so that clicks on the browser
  89. * scrollbar do not dismiss the popup.
  90. * @type {Element}
  91. * @private
  92. */
  93. goog.ui.PopupBase.prototype.autoHideRegion_ = null;
  94. /**
  95. * Whether the popup is currently being shown.
  96. * @type {boolean}
  97. * @private
  98. */
  99. goog.ui.PopupBase.prototype.isVisible_ = false;
  100. /**
  101. * Whether the popup should hide itself asynchrously. This was added because
  102. * there are cases where hiding the element in mouse down handler in IE can
  103. * cause textinputs to get into a bad state if the element that had focus is
  104. * hidden.
  105. * @type {boolean}
  106. * @private
  107. */
  108. goog.ui.PopupBase.prototype.shouldHideAsync_ = false;
  109. /**
  110. * The time when the popup was last shown.
  111. * @type {number}
  112. * @private
  113. */
  114. goog.ui.PopupBase.prototype.lastShowTime_ = -1;
  115. /**
  116. * The time when the popup was last hidden.
  117. * @type {number}
  118. * @private
  119. */
  120. goog.ui.PopupBase.prototype.lastHideTime_ = -1;
  121. /**
  122. * Whether to hide when the escape key is pressed.
  123. * @type {boolean}
  124. * @private
  125. */
  126. goog.ui.PopupBase.prototype.hideOnEscape_ = false;
  127. /**
  128. * Whether to enable cross-iframe dismissal.
  129. * @type {boolean}
  130. * @private
  131. */
  132. goog.ui.PopupBase.prototype.enableCrossIframeDismissal_ = true;
  133. /**
  134. * The type of popup
  135. * @type {goog.ui.PopupBase.Type}
  136. * @private
  137. */
  138. goog.ui.PopupBase.prototype.type_ = goog.ui.PopupBase.Type.TOGGLE_DISPLAY;
  139. /**
  140. * Transition to play on showing the popup.
  141. * @type {goog.fx.Transition|undefined}
  142. * @private
  143. */
  144. goog.ui.PopupBase.prototype.showTransition_;
  145. /**
  146. * Transition to play on hiding the popup.
  147. * @type {goog.fx.Transition|undefined}
  148. * @private
  149. */
  150. goog.ui.PopupBase.prototype.hideTransition_;
  151. /**
  152. * Constants for event type fired by Popup
  153. *
  154. * @enum {string}
  155. */
  156. goog.ui.PopupBase.EventType = {
  157. BEFORE_SHOW: 'beforeshow',
  158. SHOW: 'show',
  159. BEFORE_HIDE: 'beforehide',
  160. HIDE: 'hide'
  161. };
  162. /**
  163. * A time in ms used to debounce events that happen right after each other.
  164. *
  165. * A note about why this is necessary. There are two cases to consider.
  166. * First case, a popup will usually see a focus event right after it's launched
  167. * because it's typical for it to be launched in a mouse-down event which will
  168. * then move focus to the launching button. We don't want to think this is a
  169. * separate user action moving focus. Second case, a user clicks on the
  170. * launcher button to close the menu. In that case, we'll close the menu in the
  171. * focus event and then show it again because of the mouse down event, even
  172. * though the intention is to just close the menu. This workaround appears to
  173. * be the least intrusive fix.
  174. *
  175. * @type {number}
  176. */
  177. goog.ui.PopupBase.DEBOUNCE_DELAY_MS = 150;
  178. /**
  179. * @return {goog.ui.PopupBase.Type} The type of popup this is.
  180. */
  181. goog.ui.PopupBase.prototype.getType = function() {
  182. return this.type_;
  183. };
  184. /**
  185. * Specifies the type of popup to use.
  186. *
  187. * @param {goog.ui.PopupBase.Type} type Type of popup.
  188. */
  189. goog.ui.PopupBase.prototype.setType = function(type) {
  190. this.type_ = type;
  191. };
  192. /**
  193. * Returns whether the popup should hide itself asynchronously using a timeout
  194. * instead of synchronously.
  195. * @return {boolean} Whether to hide async.
  196. */
  197. goog.ui.PopupBase.prototype.shouldHideAsync = function() {
  198. return this.shouldHideAsync_;
  199. };
  200. /**
  201. * Sets whether the popup should hide itself asynchronously using a timeout
  202. * instead of synchronously.
  203. * @param {boolean} b Whether to hide async.
  204. */
  205. goog.ui.PopupBase.prototype.setShouldHideAsync = function(b) {
  206. this.shouldHideAsync_ = b;
  207. };
  208. /**
  209. * Returns the dom element that should be used for the popup.
  210. *
  211. * @return {Element} The popup element.
  212. */
  213. goog.ui.PopupBase.prototype.getElement = function() {
  214. return this.element_;
  215. };
  216. /**
  217. * Specifies the dom element that should be used for the popup.
  218. *
  219. * @param {Element} elt A DOM element for the popup.
  220. */
  221. goog.ui.PopupBase.prototype.setElement = function(elt) {
  222. this.ensureNotVisible_();
  223. this.element_ = elt;
  224. };
  225. /**
  226. * Returns whether the Popup dismisses itself when the user clicks outside of
  227. * it.
  228. * @return {boolean} Whether the Popup autohides on an external click.
  229. */
  230. goog.ui.PopupBase.prototype.getAutoHide = function() {
  231. return this.autoHide_;
  232. };
  233. /**
  234. * Sets whether the Popup dismisses itself when the user clicks outside of it.
  235. * @param {boolean} autoHide Whether to autohide on an external click.
  236. */
  237. goog.ui.PopupBase.prototype.setAutoHide = function(autoHide) {
  238. this.ensureNotVisible_();
  239. this.autoHide_ = autoHide;
  240. };
  241. /**
  242. * Mouse events that occur within an autoHide partner will not hide a popup
  243. * set to autoHide.
  244. * @param {!Element} partner The auto hide partner element.
  245. */
  246. goog.ui.PopupBase.prototype.addAutoHidePartner = function(partner) {
  247. if (!this.autoHidePartners_) {
  248. this.autoHidePartners_ = [];
  249. }
  250. goog.array.insert(this.autoHidePartners_, partner);
  251. };
  252. /**
  253. * Removes a previously registered auto hide partner.
  254. * @param {!Element} partner The auto hide partner element.
  255. */
  256. goog.ui.PopupBase.prototype.removeAutoHidePartner = function(partner) {
  257. if (this.autoHidePartners_) {
  258. goog.array.remove(this.autoHidePartners_, partner);
  259. }
  260. };
  261. /**
  262. * @return {boolean} Whether the Popup autohides on the escape key.
  263. */
  264. goog.ui.PopupBase.prototype.getHideOnEscape = function() {
  265. return this.hideOnEscape_;
  266. };
  267. /**
  268. * Sets whether the Popup dismisses itself on the escape key.
  269. * @param {boolean} hideOnEscape Whether to autohide on the escape key.
  270. */
  271. goog.ui.PopupBase.prototype.setHideOnEscape = function(hideOnEscape) {
  272. this.ensureNotVisible_();
  273. this.hideOnEscape_ = hideOnEscape;
  274. };
  275. /**
  276. * @return {boolean} Whether cross iframe dismissal is enabled.
  277. */
  278. goog.ui.PopupBase.prototype.getEnableCrossIframeDismissal = function() {
  279. return this.enableCrossIframeDismissal_;
  280. };
  281. /**
  282. * Sets whether clicks in other iframes should dismiss this popup. In some
  283. * cases it should be disabled, because it can cause spurious
  284. * @param {boolean} enable Whether to enable cross iframe dismissal.
  285. */
  286. goog.ui.PopupBase.prototype.setEnableCrossIframeDismissal = function(enable) {
  287. this.enableCrossIframeDismissal_ = enable;
  288. };
  289. /**
  290. * Returns the region inside which the Popup dismisses itself when the user
  291. * clicks, or null if it's the entire document.
  292. * @return {Element} The DOM element for autohide, or null if it hasn't been
  293. * set.
  294. */
  295. goog.ui.PopupBase.prototype.getAutoHideRegion = function() {
  296. return this.autoHideRegion_;
  297. };
  298. /**
  299. * Sets the region inside which the Popup dismisses itself when the user
  300. * clicks.
  301. * @param {Element} element The DOM element for autohide.
  302. */
  303. goog.ui.PopupBase.prototype.setAutoHideRegion = function(element) {
  304. this.autoHideRegion_ = element;
  305. };
  306. /**
  307. * Sets transition animation on showing and hiding the popup.
  308. * @param {goog.fx.Transition=} opt_showTransition Transition to play on
  309. * showing the popup.
  310. * @param {goog.fx.Transition=} opt_hideTransition Transition to play on
  311. * hiding the popup.
  312. */
  313. goog.ui.PopupBase.prototype.setTransition = function(
  314. opt_showTransition, opt_hideTransition) {
  315. this.showTransition_ = opt_showTransition;
  316. this.hideTransition_ = opt_hideTransition;
  317. };
  318. /**
  319. * Returns the time when the popup was last shown.
  320. *
  321. * @return {number} time in ms since epoch when the popup was last shown, or
  322. * -1 if the popup was never shown.
  323. */
  324. goog.ui.PopupBase.prototype.getLastShowTime = function() {
  325. return this.lastShowTime_;
  326. };
  327. /**
  328. * Returns the time when the popup was last hidden.
  329. *
  330. * @return {number} time in ms since epoch when the popup was last hidden, or
  331. * -1 if the popup was never hidden or is currently showing.
  332. */
  333. goog.ui.PopupBase.prototype.getLastHideTime = function() {
  334. return this.lastHideTime_;
  335. };
  336. /**
  337. * Returns the event handler for the popup. All event listeners belonging to
  338. * this handler are removed when the tooltip is hidden. Therefore,
  339. * the recommended usage of this handler is to listen on events in
  340. * {@link #onShow}.
  341. * @return {goog.events.EventHandler<T>} Event handler for this popup.
  342. * @protected
  343. * @this {T}
  344. * @template T
  345. */
  346. goog.ui.PopupBase.prototype.getHandler = function() {
  347. // As the template type is unbounded, narrow the "this" type
  348. var self = /** @type {!goog.ui.PopupBase} */ (this);
  349. return self.handler_;
  350. };
  351. /**
  352. * Helper to throw exception if the popup is showing.
  353. * @private
  354. */
  355. goog.ui.PopupBase.prototype.ensureNotVisible_ = function() {
  356. if (this.isVisible_) {
  357. throw Error('Can not change this state of the popup while showing.');
  358. }
  359. };
  360. /**
  361. * Returns whether the popup is currently visible.
  362. *
  363. * @return {boolean} whether the popup is currently visible.
  364. */
  365. goog.ui.PopupBase.prototype.isVisible = function() {
  366. return this.isVisible_;
  367. };
  368. /**
  369. * Returns whether the popup is currently visible or was visible within about
  370. * 150 ms ago. This is used by clients to handle a very specific, but common,
  371. * popup scenario. The button that launches the popup should close the popup
  372. * on mouse down if the popup is alrady open. The problem is that the popup
  373. * closes itself during the capture phase of the mouse down and thus the button
  374. * thinks it's hidden and this should show it again. This method provides a
  375. * good heuristic for clients. Typically in their event handler they will have
  376. * code that is:
  377. *
  378. * if (menu.isOrWasRecentlyVisible()) {
  379. * menu.setVisible(false);
  380. * } else {
  381. * ... // code to position menu and initialize other state
  382. * menu.setVisible(true);
  383. * }
  384. * @return {boolean} Whether the popup is currently visible or was visible
  385. * within about 150 ms ago.
  386. */
  387. goog.ui.PopupBase.prototype.isOrWasRecentlyVisible = function() {
  388. return this.isVisible_ ||
  389. (goog.now() - this.lastHideTime_ < goog.ui.PopupBase.DEBOUNCE_DELAY_MS);
  390. };
  391. /**
  392. * Sets whether the popup should be visible. After this method
  393. * returns, isVisible() will always return the new state, even if
  394. * there is a transition.
  395. *
  396. * @param {boolean} visible Desired visibility state.
  397. */
  398. goog.ui.PopupBase.prototype.setVisible = function(visible) {
  399. // Make sure that any currently running transition is stopped.
  400. if (this.showTransition_) this.showTransition_.stop();
  401. if (this.hideTransition_) this.hideTransition_.stop();
  402. if (visible) {
  403. this.show_();
  404. } else {
  405. this.hide_();
  406. }
  407. };
  408. /**
  409. * Repositions the popup according to the current state.
  410. * Should be overriden by subclases.
  411. */
  412. goog.ui.PopupBase.prototype.reposition = goog.nullFunction;
  413. /**
  414. * Does the work to show the popup.
  415. * @private
  416. */
  417. goog.ui.PopupBase.prototype.show_ = function() {
  418. // Ignore call if we are already showing.
  419. if (this.isVisible_) {
  420. return;
  421. }
  422. // Give derived classes and handlers a chance to customize popup.
  423. if (!this.onBeforeShow()) {
  424. return;
  425. }
  426. // Allow callers to set the element in the BEFORE_SHOW event.
  427. if (!this.element_) {
  428. throw Error('Caller must call setElement before trying to show the popup');
  429. }
  430. // Call reposition after onBeforeShow, as it may change the style and/or
  431. // content of the popup and thereby affecting the size which is used for the
  432. // viewport calculation.
  433. this.reposition();
  434. var doc = goog.dom.getOwnerDocument(this.element_);
  435. if (this.hideOnEscape_) {
  436. // Handle the escape keys. Listen in the capture phase so that we can
  437. // stop the escape key from propagating to other elements. For example,
  438. // if there is a popup within a dialog box, we want the popup to be
  439. // dismissed first, rather than the dialog.
  440. this.handler_.listen(
  441. doc, goog.events.EventType.KEYDOWN, this.onDocumentKeyDown_, true);
  442. }
  443. // Set up event handlers.
  444. if (this.autoHide_) {
  445. // Even if the popup is not in the focused document, we want to
  446. // close it on mousedowns in the document it's in.
  447. this.handler_.listen(
  448. doc, goog.events.EventType.MOUSEDOWN, this.onDocumentMouseDown_, true);
  449. if (goog.userAgent.IE) {
  450. // We want to know about deactivates/mousedowns on the document with focus
  451. // The top-level document won't get a deactivate event if the focus is
  452. // in an iframe and the deactivate fires within that iframe.
  453. // The active element in the top-level document will remain the iframe
  454. // itself.
  455. var activeElement;
  456. try {
  457. activeElement = doc.activeElement;
  458. } catch (e) {
  459. // There is an IE browser bug which can cause just the reading of
  460. // document.activeElement to throw an Unspecified Error. This
  461. // may have to do with loading a popup within a hidden iframe.
  462. }
  463. while (activeElement &&
  464. activeElement.nodeName == goog.dom.TagName.IFRAME) {
  465. try {
  466. var tempDoc = goog.dom.getFrameContentDocument(activeElement);
  467. } catch (e) {
  468. // The frame is on a different domain that its parent document
  469. // This way, we grab the lowest-level document object we can get
  470. // a handle on given cross-domain security.
  471. break;
  472. }
  473. doc = tempDoc;
  474. activeElement = doc.activeElement;
  475. }
  476. // Handle mousedowns in the focused document in case the user clicks
  477. // on the activeElement (in which case the popup should hide).
  478. this.handler_.listen(
  479. doc, goog.events.EventType.MOUSEDOWN, this.onDocumentMouseDown_,
  480. true);
  481. // If the active element inside the focused document changes, then
  482. // we probably need to hide the popup.
  483. this.handler_.listen(
  484. doc, goog.events.EventType.DEACTIVATE, this.onDocumentBlur_);
  485. } else {
  486. this.handler_.listen(
  487. doc, goog.events.EventType.BLUR, this.onDocumentBlur_);
  488. }
  489. }
  490. // Make the popup visible.
  491. if (this.type_ == goog.ui.PopupBase.Type.TOGGLE_DISPLAY) {
  492. this.showPopupElement();
  493. } else if (this.type_ == goog.ui.PopupBase.Type.MOVE_OFFSCREEN) {
  494. this.reposition();
  495. }
  496. this.isVisible_ = true;
  497. this.lastShowTime_ = goog.now();
  498. this.lastHideTime_ = -1;
  499. // If there is transition to play, we play it and fire SHOW event after
  500. // the transition is over.
  501. if (this.showTransition_) {
  502. goog.events.listenOnce(
  503. /** @type {!goog.events.EventTarget} */ (this.showTransition_),
  504. goog.fx.Transition.EventType.END, this.onShow, false, this);
  505. this.showTransition_.play();
  506. } else {
  507. // Notify derived classes and handlers.
  508. this.onShow();
  509. }
  510. };
  511. /**
  512. * Hides the popup. This call is idempotent.
  513. *
  514. * @param {?Node=} opt_target Target of the event causing the hide.
  515. * @return {boolean} Whether the popup was hidden and not cancelled.
  516. * @private
  517. */
  518. goog.ui.PopupBase.prototype.hide_ = function(opt_target) {
  519. // Give derived classes and handlers a chance to cancel hiding.
  520. if (!this.isVisible_ || !this.onBeforeHide(opt_target)) {
  521. return false;
  522. }
  523. // Remove any listeners we attached when showing the popup.
  524. if (this.handler_) {
  525. this.handler_.removeAll();
  526. }
  527. // Set visibility to hidden even if there is a transition.
  528. this.isVisible_ = false;
  529. this.lastHideTime_ = goog.now();
  530. // If there is transition to play, we play it and only hide the element
  531. // (and fire HIDE event) after the transition is over.
  532. if (this.hideTransition_) {
  533. goog.events.listenOnce(
  534. /** @type {!goog.events.EventTarget} */ (this.hideTransition_),
  535. goog.fx.Transition.EventType.END,
  536. goog.partial(this.continueHidingPopup_, opt_target), false, this);
  537. this.hideTransition_.play();
  538. } else {
  539. this.continueHidingPopup_(opt_target);
  540. }
  541. return true;
  542. };
  543. /**
  544. * Continues hiding the popup. This is a continuation from hide_. It is
  545. * a separate method so that we can add a transition before hiding.
  546. * @param {?Node=} opt_target Target of the event causing the hide.
  547. * @private
  548. */
  549. goog.ui.PopupBase.prototype.continueHidingPopup_ = function(opt_target) {
  550. // Hide the popup.
  551. if (this.type_ == goog.ui.PopupBase.Type.TOGGLE_DISPLAY) {
  552. if (this.shouldHideAsync_) {
  553. goog.Timer.callOnce(this.hidePopupElement, 0, this);
  554. } else {
  555. this.hidePopupElement();
  556. }
  557. } else if (this.type_ == goog.ui.PopupBase.Type.MOVE_OFFSCREEN) {
  558. this.moveOffscreen_();
  559. }
  560. // Notify derived classes and handlers.
  561. this.onHide(opt_target);
  562. };
  563. /**
  564. * Shows the popup element.
  565. * @protected
  566. */
  567. goog.ui.PopupBase.prototype.showPopupElement = function() {
  568. this.element_.style.visibility = 'visible';
  569. goog.style.setElementShown(this.element_, true);
  570. };
  571. /**
  572. * Hides the popup element.
  573. * @protected
  574. */
  575. goog.ui.PopupBase.prototype.hidePopupElement = function() {
  576. this.element_.style.visibility = 'hidden';
  577. goog.style.setElementShown(this.element_, false);
  578. };
  579. /**
  580. * Hides the popup by moving it offscreen.
  581. *
  582. * @private
  583. */
  584. goog.ui.PopupBase.prototype.moveOffscreen_ = function() {
  585. this.element_.style.top = '-10000px';
  586. };
  587. /**
  588. * Called before the popup is shown. Derived classes can override to hook this
  589. * event but should make sure to call the parent class method.
  590. *
  591. * @return {boolean} If anyone called preventDefault on the event object (or
  592. * if any of the handlers returns false this will also return false.
  593. * @protected
  594. */
  595. goog.ui.PopupBase.prototype.onBeforeShow = function() {
  596. return this.dispatchEvent(goog.ui.PopupBase.EventType.BEFORE_SHOW);
  597. };
  598. /**
  599. * Called after the popup is shown. Derived classes can override to hook this
  600. * event but should make sure to call the parent class method.
  601. * @protected
  602. */
  603. goog.ui.PopupBase.prototype.onShow = function() {
  604. this.dispatchEvent(goog.ui.PopupBase.EventType.SHOW);
  605. };
  606. /**
  607. * Called before the popup is hidden. Derived classes can override to hook this
  608. * event but should make sure to call the parent class method.
  609. *
  610. * @param {?Node=} opt_target Target of the event causing the hide.
  611. * @return {boolean} If anyone called preventDefault on the event object (or
  612. * if any of the handlers returns false this will also return false.
  613. * @protected
  614. */
  615. goog.ui.PopupBase.prototype.onBeforeHide = function(opt_target) {
  616. return this.dispatchEvent(
  617. {type: goog.ui.PopupBase.EventType.BEFORE_HIDE, target: opt_target});
  618. };
  619. /**
  620. * Called after the popup is hidden. Derived classes can override to hook this
  621. * event but should make sure to call the parent class method.
  622. * @param {?Node=} opt_target Target of the event causing the hide.
  623. * @protected
  624. */
  625. goog.ui.PopupBase.prototype.onHide = function(opt_target) {
  626. this.dispatchEvent(
  627. {type: goog.ui.PopupBase.EventType.HIDE, target: opt_target});
  628. };
  629. /**
  630. * Mouse down handler for the document on capture phase. Used to hide the
  631. * popup for auto-hide mode.
  632. *
  633. * @param {goog.events.BrowserEvent} e The event object.
  634. * @private
  635. */
  636. goog.ui.PopupBase.prototype.onDocumentMouseDown_ = function(e) {
  637. var target = e.target;
  638. if (!goog.dom.contains(this.element_, target) &&
  639. !this.isOrWithinAutoHidePartner_(target) &&
  640. this.isWithinAutoHideRegion_(target) && !this.shouldDebounce_()) {
  641. // Mouse click was outside popup and partners, so hide.
  642. this.hide_(target);
  643. }
  644. };
  645. /**
  646. * Handles key-downs on the document to handle the escape key.
  647. *
  648. * @param {goog.events.BrowserEvent} e The event object.
  649. * @private
  650. */
  651. goog.ui.PopupBase.prototype.onDocumentKeyDown_ = function(e) {
  652. if (e.keyCode == goog.events.KeyCodes.ESC) {
  653. if (this.hide_(e.target)) {
  654. // Eat the escape key, but only if this popup was actually closed.
  655. e.preventDefault();
  656. e.stopPropagation();
  657. }
  658. }
  659. };
  660. /**
  661. * Deactivate handler(IE) and blur handler (other browsers) for document.
  662. * Used to hide the popup for auto-hide mode.
  663. *
  664. * @param {goog.events.BrowserEvent} e The event object.
  665. * @private
  666. */
  667. goog.ui.PopupBase.prototype.onDocumentBlur_ = function(e) {
  668. if (!this.enableCrossIframeDismissal_) {
  669. return;
  670. }
  671. var doc = goog.dom.getOwnerDocument(this.element_);
  672. // Ignore blur events if the active element is still inside the popup or if
  673. // there is no longer an active element. For example, a widget like a
  674. // goog.ui.Button might programatically blur itself before losing tabIndex.
  675. if (typeof document.activeElement != 'undefined') {
  676. var activeElement = doc.activeElement;
  677. if (!activeElement || goog.dom.contains(this.element_, activeElement) ||
  678. activeElement.tagName == goog.dom.TagName.BODY) {
  679. return;
  680. }
  681. // Ignore blur events not for the document itself in non-IE browsers.
  682. } else if (e.target != doc) {
  683. return;
  684. }
  685. // Debounce the initial focus move.
  686. if (this.shouldDebounce_()) {
  687. return;
  688. }
  689. this.hide_();
  690. };
  691. /**
  692. * @param {Node} element The element to inspect.
  693. * @return {boolean} Returns true if the given element is one of the auto hide
  694. * partners or is a child of an auto hide partner.
  695. * @private
  696. */
  697. goog.ui.PopupBase.prototype.isOrWithinAutoHidePartner_ = function(element) {
  698. return goog.array.some(this.autoHidePartners_ || [], function(partner) {
  699. return element === partner || goog.dom.contains(partner, element);
  700. });
  701. };
  702. /**
  703. * @param {Node} element The element to inspect.
  704. * @return {boolean} Returns true if the element is contained within
  705. * the autohide region. If unset, the autohide region is the entire
  706. * entire document.
  707. * @private
  708. */
  709. goog.ui.PopupBase.prototype.isWithinAutoHideRegion_ = function(element) {
  710. return this.autoHideRegion_ ?
  711. goog.dom.contains(this.autoHideRegion_, element) :
  712. true;
  713. };
  714. /**
  715. * @return {boolean} Whether the time since last show is less than the debounce
  716. * delay.
  717. * @private
  718. */
  719. goog.ui.PopupBase.prototype.shouldDebounce_ = function() {
  720. return goog.now() - this.lastShowTime_ < goog.ui.PopupBase.DEBOUNCE_DELAY_MS;
  721. };
  722. /** @override */
  723. goog.ui.PopupBase.prototype.disposeInternal = function() {
  724. goog.ui.PopupBase.base(this, 'disposeInternal');
  725. this.handler_.dispose();
  726. goog.dispose(this.showTransition_);
  727. goog.dispose(this.hideTransition_);
  728. delete this.element_;
  729. delete this.handler_;
  730. delete this.autoHidePartners_;
  731. };