aboutsummaryrefslogtreecommitdiff
path: root/contexts/data/lib/closure-library/closure/goog/demos/roundedpanel.html
diff options
context:
space:
mode:
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.html139
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>