accessibility-developer-tools
Version:
This is a library of accessibility-related testing and utility code.
140 lines (129 loc) • 4.53 kB
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>