accessibility-developer-tools
Version:
This is a library of accessibility-related testing and utility code.
193 lines (157 loc) • 4.14 kB
HTML
<html>
<!--
Copyright 2010 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.
-->
<head>
<title>goog.events</title>
<script src="../base.js"></script>
<script>
goog.require('goog.events');
</script>
<link rel="stylesheet" href="css/demo.css">
<style>
html, body {
background-color: #FFF;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
h1 {
font: normal 24px arial;
color: #009;
margin-top: 10px;
margin-left: 10px;
margin-right: 0px;
margin-bottom: 0px;
width: 450px;
}
p {
font: normal 14px arial;
color: #999;
margin-top: 0px;
margin-left: 10px;
width: 450px;
}
#tree ul {
font: normal 12px arial;
list-style: none;
margin: 0px;
padding:0px;
}
#tree ul ul {
padding-left: 36px;
}
html>body #tree span {
position: relative;
top: -2px;
}
#tree div:hover {
background-color: #EEE;
}
#tree {
width: 300px;
height: 800px;
border: 2px solid #EEE;
float: left;
}
#log {
width: 400px;
height: 800px;
border: 2px solid #EEE;
border-left: 0px;
margin-top: 0px;
background-color: #FAFAFA;
}
</style>
<script>
var depth = 3;
var breadth = 2;
function writeTree(pos, preId) {
if (!pos) pos = 0;
document.write('<ul id="ol' + (preId || '') + '">');
for (var i = 1; i <= breadth; i++) {
document.write('<li id="li-' + (preId || '') + i + '">');
document.write('<div>');
document.write('<input type="checkbox" id="chk1-' + (preId || '') + i + '" />');
document.write('<input type="checkbox" id="chk2-' + (preId || '') + i + '" />');
document.write('<span>');
document.write((preId || '') + i);
document.write('</span></div>');
if (pos < depth) writeTree(pos + 1, (preId || '') + i + '-');
document.write('</li>');
}
document.write('</ul>');
}
// Dirty little buffered log so that logging doesn't affect times.
var start = goog.now();
var buffer = '';
var timer = null;
function log(str) {
var time = ((new Date()).getTime() - start) / 1000;
buffer = '[' + time + '] ' + str + '\n' + buffer;
clearTimeout(timer);
timer = setTimeout(sendBuffer, 250);
}
function sendBuffer() {
document.getElementById('log').value = buffer +
document.getElementById('log').value;
buffer = '';
}
function doLoad() {
if (arguments.callee.loaded) return;
arguments.callee.loaded = true;
document.getElementById('log').value = '';
log('LOADED');
log('Adding handlers');
var lis = document.getElementById('tree').getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
//lis[i].addEventListener('mousedown', handleCapture, true);
//lis[i].addEventListener('mousedown', handleBubble, false);
goog.events.listen(lis[i], 'mousedown', handleCapture, true);
goog.events.listen(lis[i], 'mousedown', handleBubble, false);
}
log('Finished adding handlers');
goog.events.listen(document.getElementById('log'),
'dblclick', function() { this.value = ''; });
}
function handleCapture(e) {
if (e.target.tagName != 'INPUT') {
var id = e.currentTarget.id.replace(/li\-/, '');
if (document.getElementById('chk1-' + id).checked) {
e.stopPropagation();
log('Capture - ' + id + ' [Cancelled]');
} else {
log('Capture - ' + id);
}
}
}
function handleBubble(e) {
if (e.target.tagName != 'INPUT') {
var id = e.currentTarget.id.replace(/li\-/, '');
if (document.getElementById('chk2-' + id).checked) {
e.stopPropagation();
log('Bubble - ' + id + ' [Cancelled]');
} else {
log('Bubble - ' + id);
}
}
}
goog.events.listen(window, 'load', doLoad);
</script>
</head>
<body>
<h1>goog.events - Stop Propagation</h1>
<p><strong>Test the cancelling of capture and bubbling events.</strong> Click
one of the nodes to see the event trace, then use the check boxes to cancel the
capture or bubble at a given branch.
(Double click the text area to clear it)</p>
<div id="tree">
<script>writeTree();</script>
</div>
<textarea id="log"></textarea>
</body>
</html>