cthulhu/test/html/aria-progressbar.html

130 lines
3.5 KiB
HTML
Raw Permalink Normal View History

<html>
<head>
<title>ARIA Progress Bar</title>
<style type="text/css">
<!--
span[role="progressbar"] { color: red; font-family: courier; font-size: .1em;}
*[aria-hidden] { visibility: hidden; }
div[role="group"] { border: 3px solid black; width: 50%; }
-->
</style>
<script>
<!--
function displayProgress(progress)
{
var valueNow = parseInt(progress.getAttribute("aria-valuenow"));
var valueMin = parseInt(progress.getAttribute("aria-valuemin"));
var valueMax = parseInt(progress.getAttribute("aria-valuemax"));
// I'm sure there's something better than using a loop, but I don't feel like looking it up right now
var progressText = "|";
var count = valueMin;
for (; count < valueNow; count += 2) {
progressText += "*";
}
for (; count < valueMax; count += 2) {
progressText += "-";
}
progressText += "|";
progress.firstChild.data = progressText;
return false;
}
var gProgressId = "progress1"; // for now just a global to store the progress id
var gbUpdate = false;
var gTimerId = null;
function updateProgress()
{
// will update the first time it is drawn but so what - this is a prototype !
var progress = document.getElementById(gProgressId);
var valueNow = parseInt(progress.getAttribute("aria-valuenow"));
var valueMin = parseInt(progress.getAttribute("aria-valuemin"));
var valueMax = parseInt(progress.getAttribute("aria-valuemax"));
valueNow += 5;
if (valueNow < valueMin) {
valueNow = valueMin;
}
if (valueNow > valueMax) {
valueNow = valueMax; //loop around
}
progress.setAttribute("aria-valuenow", valueNow);
displayProgress(progress);
if (valueNow == valueMax) {
stopProgress();
var schedule = document.getElementById("schedule");
schedule.removeAttribute("aria-hidden");
schedule.className += ""; // Force IE7 reflow
}
}
function startProgress()
{
gbUpdate = true;
gTimerId = setInterval("updateProgress();", 400);
document.getElementById("disabled").removeAttribute("disabled");
}
function stopProgress()
{
gbUpdate = false;
if ( gTimerId != null) {
clearInterval(gTimerId);
gTimerId = null;
}
document.getElementById("disabled").setAttribute("disabled", "true");
}
-->
</script><style type="text/css"></style>
</head>
<body onload="displayProgress(document.getElementById(gProgressId));">
<p>Here is a progress bar that you can start and stop using the buttons below. Both the progress bar and the schedule are within an assertive live region.</p>
<p style="margin-top:2em;">
<button onclick="startProgress();">Load schedule</button><span style="padding-left:5em;">&nbsp;</span>
<button id="disabled" onclick="stopProgress();" disabled="true">Cancel</button>
</p>
<p></p>
<div role="group" aria-live="assertive" aria-labelledby="scheduleLabel">
<h1 id="scheduleLabel">My schedule</h1>
<p> Loading schedule ...
<span role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="50" id="progress1" title="My progress">|-------------------------|</span>
<table id="schedule" aria-hidden="true" border="1" cellpadding="3" cellspacing="0">
<tbody><tr>
<td>Monday</td>
<td>Work</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Work</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Work</td>
</tr>
<tr>
<td>Thursday</td>
<td>Work</td>
</tr>
<tr>
<td>Friday</td>
<td>Work</td>
</tr>
<tr>
<td>Saturday</td>
<td>Play</td>
</tr>
<tr>
<td>Sunday</td>
<td>Play</td>
</tr>
</tbody></table>
</p></div>
</body>
</html>