diff options
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/demos/roundedpanel.html')
-rw-r--r-- | contexts/data/lib/closure-library/closure/goog/demos/roundedpanel.html | 139 |
1 files changed, 0 insertions, 139 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/roundedpanel.html b/contexts/data/lib/closure-library/closure/goog/demos/roundedpanel.html deleted file mode 100644 index c11b111..0000000 --- a/contexts/data/lib/closure-library/closure/goog/demos/roundedpanel.html +++ /dev/null @@ -1,139 +0,0 @@ -<!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> |