accessibility-developer-tools
Version:
This is a library of accessibility-related testing and utility code.
155 lines (136 loc) • 4.8 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.Dialog</title>
<script src="../base.js"></script>
<script>
goog.require('goog.events');
goog.require('goog.events.EventType');
goog.require('goog.html.testing');
goog.require('goog.ui.Dialog');
</script>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="../css/dialog.css">
<style>
.modal-dialog {
width: 430px;
}
</style>
</head>
<body>
<h1>goog.ui.Dialog</h1>
<div><input id="openOnKeyDown" type="checkbox">
<label>Enable open on keydown</label>
<span>(use "Space" to open dialog with no Iframe, "Enter" to open with Iframe
mask</span>
</div>
<div><input id="swapModalOnShift" type="checkbox">
<label>Enable modal change with shift when the dialog is open</label>
</div>
<button onclick="showDialog(dialog1);">
Open Dialog (no Iframe)</button>
<br>
<button onclick="showDialog(dialog2);">
Open Dialog (w/ Iframe mask)
</button>
<fieldset style="margin-top: 2em;">
<legend>A sample web page</legend>
<h2>
A World Beyond AJAX: Accessing Google's APIs from Flash and
Non-JavaScript Environments
</h2>
<cite>Vadim Spivak (Google)</cite>
<p>
AJAX isn't the only way to access Google APIs. Learn how to use Google's
services from Flash and other non-JavaScript programming environments.
We'll show you how easy it is to augment your site with dynamic search
and feed data from non-JavaScript environments.
</p>
<p>
Participants should be familiar with general web application
development.
</p>
<p>Select Element:
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</p>
<p>
<object width="425" height="344">
<param name="movie"
value="http://www.youtube.com/v/7fbz8WOec1g&hl=en&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed
src="http://www.youtube.com/v/7fbz8WOec1g&hl=en&fs=1&"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="425" height="344"></embed>
</object>
</p>
</fieldset>
<script>
goog.events.listen(document, goog.events.EventType.KEYDOWN, function(e) {
var code = e.keyCode;
if (goog.dom.getElement('openOnKeyDown').checked) {
switch (code) {
case goog.events.KeyCodes.MAC_ENTER:
case goog.events.KeyCodes.ENTER:
showDialog(dialog1);
break;
case goog.events.KeyCodes.SPACE:
showDialog(dialog2);
break;
default:
// no-op
}
}
if (goog.dom.getElement('swapModalOnShift').checked) {
switch (code) {
case goog.events.KeyCodes.SHIFT:
if (currDialog && currDialog.isVisible()) {
currDialog.setModal(!currDialog.getModal());
}
break;
default:
// no-op
}
}
});
var dialog1 = new goog.ui.Dialog();
dialog1.setSafeHtmlContent(goog.html.testing.newSafeHtmlForTest(
'<img src="http://images.icanhascheezburger.com/' +
'completestore/2009/3/25/128825075025577352.jpg" ' +
'width="400" height="255"><br>' +
'Lorem ipsum dolor sit amet, consectetuer' +
'adipiscing elit. Aenean sollicitudin ultrices urna. Proin vehicula ' +
'mauris ac est. Ut scelerisque, risus ut facilisis dictum, est massa ' +
'lacinia lorem, in fermentum purus ligula quis nunc. Duis porttitor ' +
'euismod risus. Nam hendrerit lacus vehicula augue. Duis ante.'));
dialog1.setTitle('My favorite LOLCat');
dialog1.setButtonSet(goog.ui.Dialog.ButtonSet.CONTINUE_SAVE_CANCEL);
goog.events.listen(dialog1, goog.ui.Dialog.EventType.SELECT, function(e) {
alert('You chose: ' + e.key);
});
var dialog2 = new goog.ui.Dialog(null, true);
dialog2.setTextContent('Some windowed elements leak through standard ' +
'divs so we add an iframe to mask the nasties.');
dialog2.setTitle('I have an Iframe mask :)');
dialog2.setButtonSet(goog.ui.Dialog.ButtonSet.YES_NO_CANCEL);
goog.events.listen(dialog2, goog.ui.Dialog.EventType.SELECT, function(e) {
alert('You chose: ' + e.key);
});
var currDialog;
function showDialog(dialog) {
currDialog = dialog;
dialog.setVisible(true);
}
</script>
</body>
</html>