accessibility-developer-tools
Version:
This is a library of accessibility-related testing and utility code.
397 lines (358 loc) • 14.3 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.Button and goog.ui.ToggleButton</title>
<script src="../base.js"></script>
<script>
goog.require('goog.array');
goog.require('goog.debug.DivConsole');
goog.require('goog.debug.LogManager');
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.log');
goog.require('goog.object');
goog.require('goog.ui.Button');
goog.require('goog.ui.ButtonRenderer');
goog.require('goog.ui.ButtonSide');
goog.require('goog.ui.CustomButton');
goog.require('goog.ui.CustomButtonRenderer');
goog.require('goog.ui.FlatButtonRenderer');
goog.require('goog.ui.LinkButtonRenderer');
goog.require('goog.ui.ToggleButton');
goog.require('goog.ui.decorate');
goog.require('goog.dom.TagName');
</script>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="../css/button.css">
<link rel="stylesheet" href="../css/custombutton.css">
<link rel="stylesheet" href="../css/flatbutton.css">
<link rel="stylesheet" href="../css/linkbutton.css">
<style>
/* Base class for all icon elements. */
.icon {
height: 16px;
width: 16px;
margin: 0 1px;
background-image: url(../images/toolbar_icons.gif);
background-repeat: no-repeat;
vertical-align: middle;
}
/* "Highlight" icon. */
.highlight-icon{
background-position: -64px;
}
/* "Insert Image" icon. */
.insert-image-icon {
background-position: -80px;
}
/* Custom style for the "default" button. */
.default-button {
font-weight: bold;
}
</style>
</head>
<body>
<h1>goog.ui.Button</h1>
<fieldset>
<legend>
The first <strong>Button</strong> was created programmatically,
the second by decorating an <strong><input></strong> element:
</legend>
<div id="b1"></div>
<label>
Enable button:<input type="checkbox" id="b1_enable" checked/>
</label>
<br/>
<br/>
<input type="button" id="b2" title="Tooltip extracted from title"
value="My Button" disabled="true"/><br/>
<label>Enable button:<input type="checkbox" id="b2_enable"/></label>
<br/>
</fieldset>
<br/>
<h2>goog.ui.FlatButtonRenderer</h2>
<fieldset>
<legend>
Buttons made with <strong><div></strong>'s instead of
<strong><input></strong>'s or <strong><button></strong>'s
The first rendered, the second decorated:
</legend>
<div id="fb1"></div>
<label>
Enable button:<input type="checkbox" id="fb1_enable" checked/>
</label>
<br/>
<br/>
<div id="fb2" class="goog-flat-button goog-flat-button-disabled"
title="Tooltip extracted from title">My Flat Button</div><br/>
<label>Enable button:<input type="checkbox" id="fb2_enable"/></label>
<br/>
<br/>
<div id="fb3" class="goog-flat-button goog-flat-button-collapse-right">
Combined
</div><div id="fb4" class="goog-flat-button goog-flat-button-collapse-left">
Buttons
</div>
<br/>
</fieldset>
<br/>
<h2>goog.ui.LinkButtonRenderer</h2>
<fieldset>
<legend>
Like FlatButtonRenderer, except the style makes the button appear to be a
link.
</legend>
<div id="lb"></div>
<label>
Enable button:<input type="checkbox" id="lb_enable" checked/>
</label>
</fieldset>
<h2>goog.ui.CustomButton & goog.ui.ToggleButton</h2>
<fieldset>
<legend>
These buttons were rendered using <strong>goog.ui.CustomButton</strong>:
</legend>
<br/>
These buttons were created programmatically:<br/>
<div id="cb1"></div>
<br/>
These buttons were created by decorating some DIVs, and they dispatch
state transition events (watch the event log):<br/>
<div id="cb2">
<!-- On FF2, if you don't enclose the contents of the button in a SPAN,
the bold element isn't rendered. Works on every other browser. -->
<div id="foo" class="goog-custom-button" title="Title specified in HTML">
<span>Decorated <b>Button</b>, yay!</span>
</div>
<div id="bar" class="goog-custom-button goog-custom-button-disabled"
title="Initialized to DISABLED in HTML...">Decorated Disabled</div>
<div id="fee" class="goog-custom-button">Another Button</div>
<div id="btn1"
class="goog-custom-button goog-custom-button-collapse-right">
Archive
</div><div id="btn2" class="goog-custom-button goog-custom-button-collapse-right goog-custom-button-collapse-left">
Delete
</div><div id="btn3"
class="goog-custom-button goog-custom-button-collapse-left">
Report Spam
</div>
</div>
<br/>
Use these <strong>ToggleButton</strong>s to hide/show and enable/disable
the middle button:<br/>
<div id="toggleEnable" class="goog-toggle-button"
title="Click here to enable/disable the button above">Enable</div>
<div id="hideShow"
class="goog-toggle-button goog-custom-button-checked"
title="Click here to hide/show the button above">Show</div>
<br/><br/>
Combined toggle buttons:<br/>
<div id="btn4" class="goog-toggle-button goog-custom-button-collapse-right">
Bold
</div><div id="btn5" class="goog-toggle-button goog-custom-button-collapse-right goog-custom-button-collapse-left">
Italics
</div><div id="btn6" class="goog-toggle-button goog-custom-button-collapse-left goog-custom-button-checked">
Underlined
</div>
<br/>
<br/>
These buttons have icons, and the second one has an extra CSS class:<br/>
<div id="iconbuttons"></div>
<br/>
<span class="hint">
The button with the <span style="font-weight:bold;color:orange;">orange
outline</span> has keyboard focus. Hit Enter to activate focused buttons.
</span>
</fieldset>
<br/>
<div id="perf"></div>
<!-- Event log. -->
<fieldset class="goog-debug-panel">
<legend>Event Log</legend>
<div id="log"></div>
</fieldset>
<script type="text/javascript">
var timer = goog.now();
// 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(e) {
goog.log.info(logger, '"' + e.target.getCaption() + '" dispatched: ' + e.type);
}
// Create the first button programmatically.
var b1 = new goog.ui.Button('Hello!');
b1.render(goog.dom.getElement('b1'));
b1.setTooltip('I changed the tooltip using setTooltip() ' +
'after the button was rendered.');
goog.events.listen(b1, EVENTS, logEvent);
goog.events.listen(goog.dom.getElement('b1_enable'),
goog.events.EventType.CLICK,
function(e) {
b1.setEnabled(e.target.checked);
});
goog.events.listen(b1, goog.ui.Component.EventType.ACTION,
function(e) {
var newCaption = window.prompt('Enter new caption for button:');
b1.setCaption(newCaption || 'Empty');
});
// Create the second button by decorating an element.
var b2 = new goog.ui.Button();
b2.decorate(goog.dom.getElement('b2'));
goog.events.listen(b2, EVENTS, logEvent);
goog.events.listen(goog.dom.getElement('b2_enable'),
goog.events.EventType.CLICK,
function(e) {
b2.setEnabled(e.target.checked);
});
goog.events.listen(b2, goog.ui.Component.EventType.ACTION,
function(e) {
alert('The value of the button is: ' + b2.getValue());
});
// Create flat buttons that use divs instead of button or input elements.
// Render 1st flat button.
var fb1 = new goog.ui.Button('Hello!',
goog.ui.FlatButtonRenderer.getInstance());
fb1.render(goog.dom.getElement('fb1'));
fb1.setTooltip('I changed the tooltip using setTooltip() ' +
'after the button was rendered.');
goog.events.listen(fb1, EVENTS, logEvent);
goog.events.listen(goog.dom.getElement('fb1_enable'),
goog.events.EventType.CLICK,
function(e) {
fb1.setEnabled(e.target.checked);
});
goog.events.listen(fb1, goog.ui.Component.EventType.ACTION,
function(e) {
var newCaption = window.prompt('Enter new caption for button:');
fb1.setCaption(newCaption || 'Empty');
});
// Decorate 2nd flat button.
var fb2 = goog.ui.decorate(goog.dom.getElement('fb2'));
goog.events.listen(fb2, EVENTS, logEvent);
goog.events.listen(goog.dom.getElement('fb2_enable'),
goog.events.EventType.CLICK,
function(e) {
fb2.setEnabled(e.target.checked);
});
goog.events.listen(fb2, goog.ui.Component.EventType.ACTION,
function(e) {
alert('The caption of the button is: ' + fb2.getCaption());
});
// Decorate 3rd and 4th flat buttons.
goog.ui.decorate(goog.dom.getElement('fb3'));
goog.ui.decorate(goog.dom.getElement('fb4'));
// Create buttons that look like links.
var lb = new goog.ui.Button('Hello!',
goog.ui.LinkButtonRenderer.getInstance());
lb.render(goog.dom.getElement('lb'));
lb.setTooltip('I changed the tooltip using setTooltip() ' +
'after the button was rendered.');
goog.events.listen(lb, EVENTS, logEvent);
goog.events.listen(goog.dom.getElement('lb_enable'),
goog.events.EventType.CLICK,
function(e) {
lb.setEnabled(e.target.checked);
});
goog.events.listen(lb, goog.ui.Component.EventType.ACTION,
function(e) {
var newCaption = window.prompt('Enter new caption for button:');
lb.setCaption(newCaption || 'Empty');
});
// Create some custom buttons.
var disabledButton, leftButton, centerButton, rightButton;
var customButtons = [
new goog.ui.CustomButton('Button'),
new goog.ui.CustomButton('Another Button'),
disabledButton = new goog.ui.CustomButton('Disabled Button'),
new goog.ui.CustomButton('Yet Another Button'),
leftButton = new goog.ui.CustomButton('Left'),
centerButton = new goog.ui.CustomButton('Center'),
rightButton = new goog.ui.CustomButton('Right'),
];
disabledButton.setEnabled(false);
leftButton.setCollapsed(goog.ui.ButtonSide.END);
centerButton.setCollapsed(goog.ui.ButtonSide.BOTH);
rightButton.setCollapsed(goog.ui.ButtonSide.START);
goog.array.forEach(customButtons, function(b) {
b.render(goog.dom.getElement('cb1'));
goog.events.listen(b, goog.ui.Component.EventType.ACTION,
function(e) {
var newCaption = window.prompt('Enter new caption for button:');
b.setCaption(newCaption || 'Empty');
});
goog.events.listen(b, EVENTS, logEvent);
});
// Decorate some custom buttons.
var cb2 = [];
var decoratedButtons = goog.array.map(
['foo', 'bar', 'fee', 'btn1', 'btn2', 'btn3'],
goog.dom.getElement);
goog.array.forEach(decoratedButtons, function(element) {
// Since the elements to be decorated each have the correct "marker" CSS
// class ("goog-custom-button"), we can use the renderer registry to get
// the appropriate control instance to decorate them.
var button = goog.ui.decorate(element);
button.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
cb2.push(button);
goog.events.listen(button, EVENTS, logEvent);
});
// Decorate toggle buttons.
var toggleEnableElem = goog.dom.getElement('toggleEnable');
var toggleEnable = goog.ui.decorate(toggleEnableElem);
toggleEnable.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
goog.events.listen(toggleEnable, EVENTS, logEvent);
goog.events.listen(toggleEnable, goog.ui.Component.EventType.ACTION,
function(e) {
cb2[1].setEnabled(e.target.isChecked());
});
var hideShowElem = goog.dom.getElement('hideShow');
var hideShow = new goog.ui.decorate(hideShowElem);
hideShow.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
goog.events.listen(hideShow, EVENTS, logEvent);
goog.events.listen(hideShow, goog.ui.Component.EventType.ACTION,
function(e) {
cb2[1].setVisible(e.target.isChecked());
});
// Decorate combined toggle buttons.
var cb3 = [];
var combinedButtons = goog.array.map(['btn4', 'btn5', 'btn6'],
goog.dom.getElement);
goog.array.forEach(combinedButtons, function(element) {
var button = goog.ui.decorate(element);
button.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
cb3.push(button);
goog.events.listen(button, EVENTS, logEvent);
});
// Use a DIV with a background image as the icon, and a SPAN as the caption.
var iconbutton1 = new goog.ui.ToggleButton([
goog.dom.createDom(goog.dom.TagName.DIV, 'icon insert-image-icon goog-inline-block'),
goog.dom.createDom(goog.dom.TagName.SPAN, {'style': 'vertical-align:middle'},
'Insert Image')
]);
iconbutton1.render(goog.dom.getElement('iconbuttons'));
goog.events.listen(iconbutton1, EVENTS, logEvent);
// Add a custom style, too.
var iconbutton2 = new goog.ui.ToggleButton([
goog.dom.createDom(goog.dom.TagName.DIV, 'icon highlight-icon goog-inline-block'),
goog.dom.createDom(goog.dom.TagName.SPAN, {'style': 'vertical-align:middle'},
'Highlight Text')
]);
iconbutton2.addClassName('default-button');
iconbutton2.render(goog.dom.getElement('iconbuttons'));
goog.events.listen(iconbutton2, EVENTS, logEvent);
goog.dom.setTextContent(goog.dom.getElement('perf'),
(goog.now() - timer) + 'ms');
</script>
</body>
</html>