| <!DOCTYPE html> |
| <html> |
| <!-- |
| Copyright 2008 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> |
