| <!DOCTYPE html> |
| <html> |
| <!-- |
| Copyright 2010 The Closure Library Authors. All Rights Reserved. |
| |
| Use of this source code is governed by the Apache License, Version 2.0. |
| See the COPYING file for details. |
| --> |
| <head> |
| <title>goog.ui.Popup</title> |
| <script src="../base.js"></script> |
| <script> |
| if (typeof goog == 'undefined') { |
| alert('Closure failed to load'); |
| } else { |
| goog.require('goog.events'); |
| goog.require('goog.events.EventType'); |
| goog.require('goog.positioning.ClientPosition'); |
| goog.require('goog.positioning.Corner'); |
| goog.require('goog.positioning.AnchoredViewportPosition'); |
| goog.require('goog.ui.Popup'); |
| } |
| </script> |
| |
| <link rel="stylesheet" href="css/demo.css"> |
| <style> |
| .popup { |
| position:absolute; |
| background-color:#e0ecff; |
| color:black; |
| visibility:hidden; |
| width:100px; |
| height:100px; |
| font-size: 80%; |
| border:solid red 1px; |
| -moz-outline:0; |
| outline:0; |
| } |
| button { |
| border: solid black 1px; |
| margin-left: 50%; |
| } |
| label { |
| display: block; |
| width: 15em; |
| } |
| #abs-box { |
| border: solid black 2px; |
| height: 200px; |
| width: 200px; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>goog.ui.Popup</h1> |
| <div id='popup' class='popup' tabindex="0"></div> |
| |
| <p>Positioning relative to an anchor element</p> |
| <form> |
| <strong>Button Corner</strong> |
| <label for="button_corner_tl"> |
| <input type="radio" id="button_corner_tl" name="button_corner" value="tl">Top Left |
| </label> |
| <label for="button_corner_tr"> |
| <input type="radio" id="button_corner_tr" name="button_corner" value="tr">Top Right |
| </label> |
| <label for="button_corner_bl"> |
| <input type="radio" id="button_corner_bl" name="button_corner" value="bl" checked="checked">Bottom Left |
| </label> |
| <label for="button_corner_br"> |
| <input type="radio" id="button_corner_br" name="button_corner" value="br">Bottom Right |
| </label> |
| <br> |
| <strong>Popup Corner</strong> |
| <label for="menu_corner_tl"> |
| <input type="radio" id="menu_corner_tl" name="menu_corner" value="tl" checked/>Top Left |
| </label> |
| <label for="menu_corner_tr"> |
| <input type="radio" id="menu_corner_tr" name="menu_corner" value="tr">Top Right |
| </label> |
| <label for="menu_corner_bl"> |
| <input type="radio" id="menu_corner_bl" name="menu_corner" value="bl">Bottom Left |
| </label> |
| <label for="menu_corner_br"> |
| <input type="radio" id="menu_corner_br" name="menu_corner" value="br">Bottom Right |
| </label> |
| |
| <br> |
| <strong>Margin</strong> |
| Top: <input id="margin_top" size=2 value="0"> |
| Right: <input id="margin_right" size=2 value="0"> |
| Bottom: <input id="margin_bottom" size=2 value="0"> |
| Left: <input id="margin_left" size=2 value="0"> |
| |
| |
| <br> |
| <br> |
| <br> |
| </form> |
| |
| <button id="btn" onclick="showPopup()"> |
| Press me! |
| </button> |
| |
| <br> |
| <br> |
| |
| <h3>Iframe to test cross frame dismissal</h3> |
| <iframe src="about:blank"></iframe> |
| |
| <br> |
| <br> |
| |
| <hr> |
| <h3>Positioning at coordinates</h3> |
| <div id="abs-box"></div> |
| |
| <script> |
| var popupElt = document.getElementById('popup'); |
| var popup = new goog.ui.Popup(popupElt); |
| popup.setHideOnEscape(true); |
| popup.setAutoHide(true); |
| var showingBecauseOfBox = false; |
| |
| goog.events.listen(window, goog.events.EventType.RESIZE, onResize); |
| goog.events.listen(document, goog.events.EventType.MOUSEMOVE, onMouseMove); |
| // goog.events.listen(absBox, goog.events.EventType.MOUSEOUT, |
| // onAbsBoxMouseOut); |
| |
| function showPopup() { |
| var btn = document.getElementById('btn'); |
| var buttonCorner = toCorner( |
| getCheckedValue(document.forms[0].elements['button_corner'])); |
| var menuCorner = toCorner( |
| getCheckedValue(document.forms[0].elements['menu_corner'])); |
| |
| var t = parseInt(document.getElementById('margin_top').value); |
| var r = parseInt(document.getElementById('margin_right').value); |
| var b = parseInt(document.getElementById('margin_bottom').value); |
| var l = parseInt(document.getElementById('margin_left').value); |
| var margin = new goog.math.Box(t, r, b, l); |
| |
| popup.setVisible(false); |
| popup.setPinnedCorner(menuCorner); |
| popup.setMargin(margin); |
| popup.setPosition(new goog.positioning.AnchoredViewportPosition(btn, |
| buttonCorner)); |
| popup.setVisible(true); |
| } |
| |
| function onResize(e) { |
| if (popup && popup.isVisible()) { |
| popup.reposition(); |
| } |
| } |
| |
| function onMouseMove(e) { |
| var absBox = document.getElementById('abs-box'); |
| |
| var offset = goog.style.getViewportPageOffset( |
| goog.dom.getOwnerDocument(absBox)); |
| var size = goog.style.getSize(absBox); |
| |
| var boxPagePosition = goog.style.getPageOffset(absBox); |
| var boxClientPosition = new goog.math.Coordinate( |
| boxPagePosition.x - offset.x, |
| boxPagePosition.y - offset.y); |
| |
| if (e.clientX >= boxClientPosition.x && |
| e.clientX < (boxClientPosition.x + size.width) && |
| e.clientY >= boxClientPosition.y && |
| e.clientY < (boxClientPosition.y + size.height)) { |
| popup.setPinnedCorner(goog.positioning.Corner.TOP_LEFT); |
| popup.setPosition(new goog.positioning.ClientPosition( |
| e.clientX, e.clientY)); |
| popup.setVisible(true); |
| showingBecauseOfBox = true; |
| } else if (showingBecauseOfBox) { |
| popup.setVisible(false); |
| showingBecauseOfBox = false; |
| } |
| } |
| |
| function getCheckedValue(radioObj) { |
| for (var i = 0; i < radioObj.length; i++) { |
| if (radioObj[i].checked) { |
| return radioObj[i].value; |
| } |
| } |
| } |
| |
| function toCorner(val) { |
| switch (val) { |
| case "tl": |
| return goog.positioning.Corner.TOP_LEFT; |
| case "tr": |
| return goog.positioning.Corner.TOP_RIGHT; |
| case "bl": |
| return goog.positioning.Corner.BOTTOM_LEFT; |
| case "br": |
| return goog.positioning.Corner.BOTTOM_RIGHT; |
| } |
| } |
| </script> |
| </body> |
| </html> |