roundedpanel.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.
-->
<!--
  Demo file for goog.ui.RoundedPanel component
-->
<head>
  <title>goog.ui.RoundedPanel Demo</title>
  <link rel="stylesheet" href="css/demo.css">
  <link rel="stylesheet" href="../css/roundedpanel.css">
  <script src="../base.js"></script>
  <script>
    goog.require('goog.dom');
    goog.require('goog.ui.RoundedPanel');
  </script>
  <script>
    var INT_BASE = 10;
    var rp;

    /**
     * Decorates roundedPanel node through a RoundedPanel instance.
     */
    function decorateRoundedPanel() {
      // Obtain the values from the 'input' and 'select' elements.
      var panelWidth = goog.dom.getElement('panelWidth').value;
      var panelHeight = goog.dom.getElement('panelHeight').value;
      var borderWidth = parseInt(
          goog.dom.getElement('borderWidth').value,
          INT_BASE);
      var borderColor = goog.dom.getElement('borderColor').value;
      var radius = parseInt(goog.dom.getElement('radius').value, INT_BASE);
      var backgroundColor = goog.dom.getElement('backgroundColor').value;
      var cornersSelect = goog.dom.getElement('corners');
      var corners = parseInt(
          cornersSelect.options[cornersSelect.selectedIndex].value);

      // Dispose of any existing RoundedPanel instance before creating
      // a new one.
      if (rp) {
        rp.dispose();
        rp = null;
      }

      // Set the dimensions of the panel and decorate roundedPanel.
      var roundedPanelNode = goog.dom.getElement('roundedPanel');
      roundedPanelNode.style.height = panelHeight;
      roundedPanelNode.style.width = panelWidth;
      var startTime = new Date();
      rp = goog.ui.RoundedPanel.create(radius,
                                       borderWidth,
                                       borderColor,
                                       backgroundColor,
                                       corners);
      rp.decorate(roundedPanelNode);
      var endTime = new Date();

      // Display the amount of time taken to render the RoundedPanel.
      var debugNode = goog.dom.getElement('debug');
      debugNode.innerHTML = 'Rendering time: ' +
          (endTime - startTime) + 'ms';
    };


    /**
     * Sets event handlers on the 'input' and 'select' elements containing
     * values needed to create the rounded panel.
     */
    function init() {
      // Set the event handler for the 'select' element to update the panel
      // when onchange fires.
      var cornersSelect = goog.dom.getElement('corners');
      cornersSelect.onchange = decorateRoundedPanel;

      // Set the event handlers for the 'input' elements to update the panel
      // when onchange fires.
      var inputs = goog.dom.getElementsByTagNameAndClass(null, 'rpInput');
      for (var i = 0; i < inputs.length; i++) {
        inputs[i].onchange = decorateRoundedPanel;
      }

      decorateRoundedPanel();
    };
  </script>
</head>
<body>
  <div id="roundedPanel">
    <div class="goog-roundedpanel-content">
      <div>
        Panel Width:<br>
        <input type="text" class="rpInput" id="panelWidth">
      </div>
      <div>
        Panel Height:<br>
        <input type="text" class="rpInput" id="panelHeight">
      </div>
      <div>
        Border Width:<br>
        <input type="text" class="rpInput" value="1" id="borderWidth">
      </div>
      <div>
        Border Color:<br>
        <input type="text" class="rpInput" value="#fedcba" id="borderColor">
      </div>
      <div>
        Radius:<br>
        <input type="text" class="rpInput" value="1" id="radius">
      </div>
      <div>
        Background Color:<br>
        <input type="text" class="rpInput" value="#abcdef" id="backgroundColor">
      </div>
      <div>
        Corners:<br>
        <select id="corners">
          <option value="15">All</option>
          <option value="12">Top</option>
          <option value="3">Bottom</option>
          <option value="6">Left</option>
          <option value="9">Right</option>
          <option value="4">Top Left</option>
          <option value="8">Top Right</option>
          <option value="2">Bottom Left</option>
          <option value="1">Bottom Right</option>
        </select>
      </div>
      <div id="debug">Rendering Time:</div>
    </div>
  </div>
  <script type="text/javascript">
    init();
  </script>
</body>
</html>
chromium/third_party/google-closure-library/closure/goog/demos/roundedpanel.html
