popup.html | Explore in Territory

<!DOCTYPE html>
<html>
<!--
Copyright 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>
chromium/third_party/google-closure-library/closure/goog/demos/popup.html
