accessibility-developer-tools
Version:
This is a library of accessibility-related testing and utility code.
123 lines (111 loc) • 4.31 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.ui.Checkbox</title>
<script src="../base.js"></script>
<script>
goog.require('goog.debug.DivConsole');
goog.require('goog.debug.LogManager');
goog.require('goog.dom');
goog.require('goog.events');
goog.require('goog.log');
goog.require('goog.ui.Checkbox');
goog.require('goog.ui.Checkbox.State');
</script>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="../css/checkbox.css">
</head>
<body>
<h1>goog.ui.Checkbox</h1>
<p>This is a tri-state checkbox.</p>
<div>
<span id="enable" class="goog-checkbox-checked"></span>Enable/disable</div>
<br>
<div><span id="all" class="goog-checkbox-undetermined"></span>root</div>
<div style="margin-left: 1em;">
<div><span id="leaf1" class="goog-checkbox-checked"></span>leaf 1</div>
<div><span id="leaf2"></span>leaf 2</div>
</div>
<br>
<div id="render">
Created with render
</div>
<br>
<div id="decorate">
Created with decorate
<span class="goog-checkbox"></span>
<span class="goog-checkbox goog-checkbox-checked"></span>
<span class="goog-checkbox goog-checkbox-undetermined"></span>
<span class="goog-checkbox goog-checkbox-disabled"></span>
</div>
<br><br>
<!-- Event log. -->
<fieldset class="goog-debug-panel">
<legend>Event Log for 'root', 'leaf1', 'leaf2'</legend>
<div id="log" style="height: 500px"></div>
</fieldset>
<script type="text/javascript">
// Set up a logger.
goog.debug.LogManager.getRoot().setLevel(goog.log.Level.ALL);
var logger = goog.log.getLogger('demo');
var logconsole = new goog.debug.DivConsole(goog.dom.getElement('log'));
logconsole.setCapturing(true);
var EVENTS = goog.object.getValues(goog.ui.Component.EventType);
goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.');
function logEvent(name, e) {
goog.log.info(logger, '"' + name + '" dispatched: ' + e.type);
}
var all = new goog.ui.Checkbox();
all.decorate(goog.dom.getElement('all'));
all.setLabel(all.getElement().parentNode);
goog.events.listen(all, EVENTS, goog.partial(logEvent, 'root'));
var leaf1 = new goog.ui.Checkbox();
leaf1.decorate(goog.dom.getElement('leaf1'));
leaf1.setLabel(leaf1.getElement().parentNode);
goog.events.listen(leaf1, EVENTS, goog.partial(logEvent, 'leaf1'));
var leaf2 = new goog.ui.Checkbox();
leaf2.decorate(goog.dom.getElement('leaf2'));
leaf2.setLabel(leaf2.getElement().parentNode);
goog.events.listen(leaf2, EVENTS, goog.partial(logEvent, 'leaf2'));
var enable = new goog.ui.Checkbox();
enable.setLabel(goog.dom.getElement('enable').parentNode);
enable.decorate(goog.dom.getElement('enable'));
var states = [false, true, null];
goog.array.forEach(states, function(state) {
new goog.ui.Checkbox(state).render(goog.dom.getElement('render'));
});
var checkbox = new goog.ui.Checkbox();
checkbox.render(goog.dom.getElement('render'));
checkbox.setEnabled(false);
var decorateNodes = goog.dom.getElementsByTagNameAndClass('span', null,
goog.dom.getElement('decorate'));
for (var i = 0, len = decorateNodes.length; i < len; i++) {
goog.ui.decorate(decorateNodes[i]);
}
function rootChanged(e) {
leaf1.setChecked(all.getChecked());
leaf2.setChecked(all.getChecked());
}
function leafChanged(e) {
var same = leaf1.getChecked() == leaf2.getChecked();
all.setChecked(same ? leaf1.getChecked() :
goog.ui.Checkbox.State.UNDETERMINED);
}
function enableTree(enable) {
all.setEnabled(enable);
leaf1.setEnabled(enable);
leaf2.setEnabled(enable);
}
goog.events.listen(all, goog.ui.Component.EventType.CHANGE, rootChanged);
goog.events.listen(leaf1, goog.ui.Component.EventType.CHANGE, leafChanged);
goog.events.listen(leaf2, goog.ui.Component.EventType.CHANGE, leafChanged);
goog.events.listen(enable, goog.ui.Component.EventType.CHANGE,
function() { enableTree(enable.getChecked()); });
</script>
</body>
</html>