<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
xmlns:aaa="http://www.w3.org/2005/07/aaa">
<head>
<title>inline: Toolbar Example 1</title>
<style type="text/css">
#container ul[role="toolbar"]{
float: left;
text-align: center;
padding-bottom: .25em;
padding-top: .25em;
padding-left: .25em;
list-style: none;
border-top: black 1px solid;
border-left: black 1px solid;
border-bottom: black 1px solid;
border-right: black 1px solid;
}
#container li[role="button"]{
float: left;
text-align: center;
margin-right: .25em;
padding-left: .25em;
padding-right: .25em;
width: 1em;
font-weight: bold;
height: 100%;
list-style: none;
}
#container li[aria-pressed="true"] {
border-top: black 3px solid;
border-left: black 3px solid;
border-bottom: black 1px solid;
border-right: black 1px solid;
}
#container li[aria-pressed="false"] {
border-top: black 1px solid;
border-left: black 1px solid;
border-bottom: black 3px solid;
border-right: black 3px solid;
}
#container li[aria-pressed="true"]:focus,
#container li[aria-pressed="true"]:active{
border-top: #CCCCCC 3px solid;
border-left: #CCCCCC 3px solid;
border-bottom: #CCCCCC 1px solid;
border-right: #CCCCCC 1px solid;
color: white;
background-color: black;
}
#container li[aria-pressed="false"]:focus,
#container li[aria-pressed="false"]:active{
border-top: #CCCCCC 1px solid;
border-left: #CCCCCC 1px solid;
border-bottom: #CCCCCC 3px solid;
border-right: #CCCCCC 3px solid;
color: white;
background-color: black;
}
#container ul div.italic{
font-style: italic;
}
textarea.example1 {
clear: both;
padding: .25em;
width: 50%;
height: 200px;
}
textarea.example2 {
clear: both;
padding: .25em;
width: 50%;
height: 200px;
font-style:italic;
}
.hide {
position: absolute;
top: -20em;
left: -200em;
}
</style>
<script type="text/javascript">
//globals.js
/**
*
* The Globale Variables
*/
if (!window.Node) {
var Node = { // If there is no Node object, define one
ELEMENT_NODE: 1, // with the following properties and values.
ATTRIBUTE_NODE: 2, // Note that these are HTML node types only.
TEXT_NODE: 3, // For XML-specific nodes, you need to add
COMMENT_NODE: 8, // other constants here.
DOCUMENT_NODE: 9,
DOCUMENT_FRAGMENT_NODE: 11
}
}
var KEY_PAGEUP = 33;
var KEY_PAGEDOWN = 34;
var KEY_END = 35;
var KEY_HOME = 36;
var KEY_LEFT = 37;
var KEY_UP = 38;
var KEY_RIGHT = 39;
var KEY_DOWN = 40;
var KEY_SPACE = 32;
var KEY_TAB = 9;
var KEY_BACKSPACE = 8;
var KEY_DELETE = 46;
var KEY_ENTER = 13;
var KEY_INSERT = 45;
var KEY_ESCAPE = 27;
var KEY_F1 = 112;
var KEY_F2 = 113;
var KEY_F3 = 114;
var KEY_F4 = 115;
var KEY_F5 = 116;
var KEY_F6 = 117;
var KEY_F7 = 118;
var KEY_F8 = 119;
var KEY_F9 = 120;
var KEY_F10 = 121;
var KEY_M = 77;
var NS_XHTML = "http://www.w3.org/1999/xhtml"
var NS_STATE = "http://www.w3.org/2005/07/aaa";
// **********************************************
// *
// * Commonly used helper functions
// *
// **********************************************
/**
*
* nextSiblingElement
*
* @contructor
*/
function nextSiblingElement( node ) {
var next_node = node.nextSibling;
while( next_node
&& (next_node.nodeType != Node.ELEMENT_NODE) ) {
next_node = next_node.nextSibling;
} // endwhile
return next_node;
}
/**
*
* previousSiblingElement
*
* @param ( node ) node object for which you are looking for the next sibling element node
*
* @return ( node) next sibling or "null"
*/
function previousSiblingElement( node ) {
var next_node = node.previousSibling;
while( next_node
&& (next_node.nodeType != Node.ELEMENT_NODE) ) {
next_node = next_node.previousSibling;
} // endwhile
return next_node;
}
/**
*
* firstChildElement
*
* @param ( node ) node object for which you are looking for the first child element node
*
* @return ( node) next sibling or "null"
*/
function firstChildElement( node ) {
var next_node = node.firstChild;
while( next_node
&& (next_node.nodeType != Node.ELEMENT_NODE) ) {
next_node = next_node.nextSibling;
} // endwhile
return next_node;
}
/**
*
* getTextContentOfNode
*
* @contructor
*/
function getTextContentOfNode( node ) {
var next_node = node.firstChild;
var str = "";
while( next_node ) {
if( (next_node.nodeType == Node.TEXT_NODE ) &&
(next_node.length > 0 )
)
str += next_node.data;
next_node = next_node.nextSibling;
} // endwhile
return str;
}
/**
*
* setTextContentOfNode
*
* @contructor
*/
function setTextContentOfNode( node, text ) {
// Generate a new text node with the text value
var text_node = document.createTextNode(text);
// Remove child nodes to remove text
while (node.firstChild) {
node.removeChild(node.firstChild);
} // while
// Append new text to the container element
node.appendChild( text_node );
}
//widgets_inline.js
// JavaScript Document
if (!window.Node) {
var Node = { // If there is no Node object, define one
ELEMENT_NODE: 1, // with the following properties and values.
ATTRIBUTE_NODE: 2, // Note that these are HTML node types only.
TEXT_NODE: 3, // For XML-specific nodes, you need to add
COMMENT_NODE: 8, // other constants here.
DOCUMENT_NODE: 9,
DOCUMENT_FRAGMENT_NODE: 11
}
}
var ARIA_STATE = "aria-";
/**
* Widgets Object is used to initialize a set of controls
* and provide a conveinence fuction to cancel event propagration
* @construtor
*/
function Widgets() {
this.widgets = new Array();
}
/**
* add is member of the Widgets Object
* and used add a widget ot the list of widgets to be intitialized
* as part of the onload event
* The controls array is the list of controls to initialize
* @member Enable
* @return none
*/
Widgets.prototype.add = function(obj) {
this.widgets[this.widgets.length] = obj;
}
/**
* init is member of the Widgets Object
* and is called by the onload event to initialize widgets in the web resource
* The controls array is the list of controls to initialize
* @member Enable
* @return none
*/
Widgets.prototype.init = function() {
for(var i = 0; i < this.widgets.length; i++ )
this.widgets[i].init();
}
//
// convience function for getting the node based on id
function _$( id ) {
return document.getElementById( id );
}
//
// WebBrowser object to abstract accessibility API differences between web standards supporting browsers and Internet Explorer 7.0
//
// The state variable keeps track of current state of checkbox
function WebBrowser() {
}
//
// keyCode is a function to get the keycode from a keypress event
//
// @param ( event object) event is an event object
//
// @return ( keycode )
WebBrowser.prototype.keyCode = function( event ) {
var e = event || window.event;
return e.keyCode;
}
/**
* OnClick Event Simulator
*
* @param ( node ) DOM node object
* @return nothing
*/
if( document.createEvent ) {
// If a web standards based browser implement this function
WebBrowser.prototype.simulateOnClickEvent = function( node ) {
// W3C DOM Events way to trigger a "click" event
var e = document.createEvent('MouseEvents');
e.initEvent( 'click', true, true );
node.dispatchEvent( e );
}
} else {
// If a Microsoft IE based browser implement this function
WebBrowser.prototype.simulateOnClickEvent = function( node ) {
var e = document.createEventObject();
node.fireEvent( "onclick", e );
} // endif
}
if ( document.addEventListener ) {
// If a web standards based browser implement this function
WebBrowser.prototype.setMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
if( clickHandler )
document.addEventListener( "click", clickHandler, true );
if( downHandler )
document.addEventListener( "mousedown", downHandler, true );
if( moveHandler )
document.addEventListener( "mousemove", moveHandler, true );
if( upHandler)
document.addEventListener( "mouseup", upHandler, true );
}
WebBrowser.prototype.releaseMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
if( upHandler)
document.removeEventListener( "mouseup", upHandler, true );
if( moveHandler )
document.removeEventListener( "mousemove", moveHandler, true );
if( downHandler )
document.removeEventListener( "mousedown", downHandler, true );
if( clickHandler )
document.removeEventListener( "click", clickHandler, true );
}
} else {
// If a Microsoft IE based browser implement this function
WebBrowser.prototype.setMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
node.setCapture();
if( clickHandler)
node.attachEvent( "onclick", clickHandler );
if( downHandler)
node.attachEvent( "onmousedown", downHandler );
if( moveHandler )
node.attachEvent( "onmousemove", moveHandler );
if( upHandler )
node.attachEvent( "onmouseup", upHandler );
} // endif
WebBrowser.prototype.releaseMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {
if( upHandler )
node.detachEvent( "onmouseup", upHandler );
if( moveHandler )
node.detachEvent( "onmousemove", moveHandler );
if( downHandler)
node.detachEvent( "onmousedown", downHandler );
if( clickHandler)
node.detachEvent( "onclick", clickHandler );
node.releaseCapture();
} // endif
}
if (typeof document.documentElement.setAttributeNS != 'undefined') {
WebBrowser.prototype.stopPropagation = function( event ) {
event.stopPropagation();
event.preventDefault();
return false;
}
WebBrowser.prototype.target = function( event ) {
return event.target;
}
WebBrowser.prototype.attrName = function( event ) {
return event.attrName
}
WebBrowser.prototype.charCode = function(event) {
return event.charCode;
}
WebBrowser.prototype.calculateOffsetLeft = function( node ) {
return node.offsetLeft;
}
WebBrowser.prototype.calculateOffsetTop = function( node ) {
return node.offsetTop;
}
WebBrowser.prototype.pageX = function( e ) {
return e.pageX;
}
WebBrowser.prototype.pageY = function( e ) {
return e.pageY;
}
WebBrowser.prototype.setNodePosition = function(node,left,top) {
node.style.left = left+"px";
node.style.top = top+"px";
}
} else {
WebBrowser.prototype.stopPropagation = function( event ) {
event.cancelBubble = true;
event.returnValue = false;
return false;
}
WebBrowser.prototype.charCode = function(event) {
return window.browser.keyCode( event );
}
WebBrowser.prototype.target = function( event ) {
return event.srcElement;
}
WebBrowser.prototype.attrName = function( event ) {
return event.propertyName;
}
WebBrowser.prototype.calculateOffsetLeft = function(node) {
var offset = 0;
while( node ) {
offset += node.offsetLeft;
node = node.offsetParent;
}
return offset;
}
WebBrowser.prototype.calculateOffsetTop = function(node) {
var offset = 0;
while( node ) {
offset = offset + node.offsetTop;
node = node.offsetParent;
}
return offset;
}
WebBrowser.prototype.pageX = function( e ) {
return e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
}
WebBrowser.prototype.pageY = function( e ) {
return e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);
}
WebBrowser.prototype.setNodePosition = function(node,left,top) {
offsetx = 0;
offsety = 0;
nnode = node.offsetParent
while( nnode ) {
offsetx = offsetx + nnode.offsetLeft;
offsety = offsety + nnode.offsetTop;
nnode = nnode.offsetParent;
}
node.style.left = left-offsetx+"px";
node.style.top = top-offsety+"px";
}
};
if (document.addEventListener) {
// Functions for W3C Standards compliant implementation of adding event handlers
WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
elmTarget.addEventListener(sEventName, fCallback, false);
returnValue = true;
};
WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
elmTarget.removeEventListener(sEventName, fCallback, false);
returnValue = true;
};
WebBrowser.prototype.addChangeEvent = function(elmTarget, fCallback) {
elmTarget.addEventListener("DOMAttrModified", fCallback, false);
returnValue = true;
};
} else {
if(document.attachEvent) {
// IE Specific Event handler functions
WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
returnValue = elmTarget.attachEvent('on' + sEventName, fCallback);
};
WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
returnValue = elmTarget.detachEvent('on' + sEventName, fCallback);
};
WebBrowser.prototype.addChangeEvent = function(elmTarget, fCallback) {
returnValue = elmTarget.attachEvent("onpropertychange", fCallback);
};
} else {
// For browsers that do not support W3C or IE event functions
WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
return false;
};
WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
return false;
};
WebBrowser.prototype.addChangeEvent = function(elmTarget, fCallback) {
return false;
};
}
}
widgets_flag = true;
var widgets = new Widgets();
var browser = new WebBrowser();
function initApp() {
widgets.init();
}
//toolbar1_inline.js
/**
*
* The Toolbar object is used to maintain information about a group of button widgets
*
* @constructor
*/
function Toolbar( id ) {
this.id = id;
this.buttons = new Array();
this.button_selected = -1;
this.button_focus = -1;
} //end Toolbar
/**
* init is a subclass of Toolbar and is used to initialize the event handlers
*
* @member Toolbar
*
* @return none
*/
Toolbar.prototype.init = function() {
var obj = this;
this.node = document.getElementById(this.id);
// Initialize Buttons
for(var i = 0; i < this.buttons.length; i++ ) {
this.buttons[i].init();
} // end for
// Check to see if any buttons are selected in the toolbar from markup
for(var i = 0; i < this.buttons.length; i++ ) {
if( this.buttons[i].node.getAttribute("aria-pressed") =="true") {
//this.radio_buttons[i].node.className = "";
selectButton( this, i, (0) );
}
} // endfor
// Add event handlers for first and last buttons to emulate IE button behavior for TAB navigation
browser.addEvent(this.buttons[0].node, "focus", function(event) {handleButtonFirstFocus(event, obj);}, false);
browser.addEvent(this.buttons[0].node, "blur", function(event) {handleButtonFirstBlur(event, obj);}, false);
browser.addEvent(this.buttons[this.buttons.length-1].node, "focus", function(event) {handleButtonLastFocus(event, obj);}, false);
browser.addEvent(this.buttons[this.buttons.length-1].node, "blur", function(event) {handleButtonLastBlur(event, obj);}, false);
// Add event handlers for selecting a button
browser.addEvent(this.node, "keydown", function(event) {handleToolbarKeyDownEvent(event, obj);}, false);
} // end Toolbar.prototype.init
/**
* add is a subclass of Toolbar and adds a Button object to the Toolbar list
*
* @member Toolbar
*
* @param ( Button object ) obj button to be added to button list
*
* @return none
*/
Toolbar.prototype.add = function( obj ) {
this.buttons[this.buttons.length] = obj;
} // end Toolbar.prototype.add
/**
* selectButton is called by event handlers to select one of the buttons in a toolbar
*
* @param ( Toolbar object ) toolbar Toolbar to change selected button
* @param ( integer ) index Index of button to be selected
* @param ( integer ) focus_flag If value is set to 1 then keyboard focus will be moved to the selected button
*
* @return none
*/
function selectButton( toolbar, index, focus_flag ) {
// Check to see if index is larger than the number of buttons, if so wrap to first button
if( index >= toolbar.buttons.length )
index = 0;
// Check to see if index is less than zero, if so wrap to last button
if( index < 0)
index = toolbar.buttons.length - 1;
// Check to make sure the index value is valid before changin states
if( (index >= 0 ) && (index < toolbar.buttons.length) ) {
// Set all buttons to not selected
// CSS selectors based on the "pressed" attribute value change the visual rendering
// The pressed attribute is used communicate button state information to assitive technologies
// Tabindex is set to -1 so the control can still receive focus, but is removed from tab order
for(var i = 0; i < toolbar.buttons.length; i++ ) {
// Kick IE 7 to update styling based on ARIA attribute
toolbar.buttons[i].node.className = "";
toolbar.buttons[i].node.tabIndex = -1;
} // endfor
// Set radio button based on the index value
// CSS selectors based on the "pressed" attribute change the visual rendering
// The pressed attribute is used communicate radio button state information to assitive technologies
// Tabindex is set to 0 so the control is added to tab order
// Kick IE 7 to update styling based on ARIA attribute
toolbar.buttons[index].node.className += "";
toolbar.buttons[index].node.tabIndex = 0;
// Check focus flag to see if keyboard focus should be moved to selected control
if( focus_flag ) {
toolbar.buttons[index].node.focus();
} // endif
toolbar.button_focus = index;
// Keep track of the last button selected
toolbar.button_selected = index;
} // endif
} // end selectButton
/**
* Button Object
*
* @param ( id ) id of text to style
*
* @return none
*/
function Button( id ) {
this.id = id;
} // end Button
/**
* Button Object
*
* @param ( id ) id of text to style
*
* @return none
*/
Button.prototype.init = function() {
this.node = document.getElementById(this.id);
var obj = this;
// Add event handlers for a button getting and losing focus
browser.addEvent(this.node, "focus", function(event) {handleButtonFocusEvent(event, obj);}, false);
browser.addEvent(this.node, "blur", function(event) {handleButtonBlurEvent(event, obj); }, false);
// Add event handlers for pressing a button
browser.addEvent(this.node, "keydown", function(event) {handleButtonKeyDownEvent(event, obj);}, false);
browser.addEvent(this.node, "keyup", function(event) {handleButtonKeyUpEvent(event, obj); }, false);
browser.addEvent(this.node, "mousedown", function(event) {handleButtonMouseDownEvent(event, obj);}, false);
browser.addEvent(this.node, "mouseup", function(event) {handleButtonMouseUpEvent(event, obj); }, false);
} //end Button.prototype.init
/**
* handleButtonFocusEvent processes focus associated with a Button
*
* @param ( event ) event is the event handler for the event
*
* @return false if keyboard event was used by button, else true
*/
handleButtonFocusEvent = function(event) {
var e = event || window.event;
// Kick IE 7 to update styling based on ARIA attribute
browser.target(e).className += "";
return true;
} // end handleButtonFocusEvent
/**
* handleButtonBlurEvent processes blur associated with a button
*
* @param ( event ) event is the event handler for the event
*
* @return false if keyboard event was used by button, else true
*/
handleButtonBlurEvent = function(event) {
var e = event || window.event;
// Kick IE 7 to update styling based on ARIA attribute
browser.target(e).className += "";
return true;
} // end handleButtonBlurEvent
/**
* handleButtonFirstFocus processes onFocus event when TAB has been pressed
*
* @param ( event ) event is the event handler for the event
* @param ( Toolbar object ) toolbar is the Toolbar object that is the target of the keyboard event
*
* @return false if keyboard event was used by toolbar, else true
*/
function handleButtonFirstFocus( event, toolbar ) {
// check to see if any buttons are selected
if( toolbar.button_selected < 0 ) {
// if a button is not selected, remove the last button to tab order
toolbar.buttons[toolbar.buttons.length-1].node.tabIndex = -1;
// keep track of the last button with focus
toolbar.button_focus = 0;
} // end if
return true;
} // end handleButtonFirstFocus
/**
* handleButtonFirstBlur processes onBlur event when TAB has been pressed
*
* @param ( event ) event is the event handler for the event
* @param ( Toolbar object ) toolbar is the Toolbar object that is the target of the keyboard event
*
* @return false if keyboard event was used by toolbar, else true
*/
function handleButtonFirstBlur( event, toolbar ) {
// check to see if any buttons are selected
if( toolbar.button_selected < 0 ) {
// if a button is not selected, add the last button to tab order
toolbar.buttons[toolbar.buttons.length-1].node.tabIndex = 0;
} // end if
return true;
} // end handleButtonFirstBlur
/**
* handleButtonLastFocus processes onFocus event when SHIFT+TAB has been pressed
*
* @param ( event ) event is the event handler for the event
* @param ( Toolbar object ) toolbar is the Toolbar object that is the target of the keyboard event
*
* @return false if keyboard event was used by toolbar, else true
*/
function handleButtonLastFocus( event, toolbar ) {
// check to see if any buttons are selected
if( toolbar.button_selected < 0 ) {
// if a button is not selected, remove the first button to tab order
toolbar.buttons[0].node.tabIndex = -1;
// keep track of the last button with focus
toolbar.button_focus = toolbar.buttons.length-1;
} // end if
return true;
} // end handleButtonLastFocus
/**
* handleButtonLastBlur processes onBlur event when SHIFT+TAB has been pressed
*
* @param ( event ) event is the event handler for the event
* @param ( Toolbar object ) toolbar is the Toolbar object that is the target of the keyboard event
*
* @return false if keyboard event was used by toolbar, else true
*/
function handleButtonLastBlur( event, toolbar ) {
// check to see if any buttons are selected
if( toolbar.button_selected < 0 ) {
// if a button is not selected, then add the first button to tab order
toolbar.buttons[0].node.tabIndex = 0;
} // end if
return true;
} // end handleButtonLastBlur
/**
* handleToolbarKeyDownEvent processes keys associated with a toolbar
*
* @param ( event ) event is the event handler for the event
* @param ( Toolbar object ) toolbar is the Toolbar object that is the target of the keyboard event
*
* @return false if keyboard event was used by toolbar, else true
*/
function handleToolbarKeyDownEvent( event, toolbar ) {
// If IE get the IE event object
var e = event || window.event;
// If any modifier keys are pressed do not process this event
if( e.altKey || e.ctrlKey || e.shiftKey )
return true;
switch( e.keyCode ) {
case KEY_RIGHT:
// Hitting right will switch the focus and selected to the next item in the toolbar
if( (toolbar.button_selected < 0 ) && (toolbar.button_focus >= 0 ) ){
selectButton( toolbar, (toolbar.button_focus + 1), 1);
toolbar.buttons[toolbar.button_focus ].node.className += "";
}
else {
selectButton( toolbar, (toolbar.button_selected + 1), 1);
toolbar.buttons[toolbar.button_selected ].node.className += "";
}
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation( e );
break;
case KEY_LEFT:
// Hitting left will switch the focus and selected to the previous item in the toolbar
if( (toolbar.button_selected < 0 ) && (toolbar.button_focus >= 0 ) )
selectButton( toolbar, (toolbar.button_focus - 1), 1);
else
selectButton( toolbar, (toolbar.button_selected - 1), 1);
if(toolbar.buttons[toolbar.button_focus].node.getAttribute("aria-pressed") == "true"){
toolbar.buttons[toolbar.button_focus].node.setAttribute("aria-pressed", "true")
}
else
{
toolbar.buttons[toolbar.button_focus].node.setAttribute("aria-pressed", "false")
}
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation( e );
break;
case KEY_SPACE:
// Hitting space will select the current item in the toolbar
if( (toolbar.button_selected < 0 ) && (toolbar.button_focus >= 0 ) ){
selectButton( toolbar, toolbar.button_focus, 1);
}
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation( e );
break;
} // end switch
} //end handleToolbarKeyDownEvent
/**
* handleButtonKeyDownEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the Button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/
handleButtonKeyDownEvent = function(event, button) {
// If IE get the IE event object
var e = event || window.event;
switch( browser.keyCode(e) ) {
case KEY_SPACE:
// Tell assistive technologies that the button is currently pressed
button.node.setAttribute("aria-pressed", "true");
// Kick IE 7 to update styling based on ARIA attribute
button.node.className += "";
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation(e);
break;
} // end switch
return true;
} // end handleButtonKeyDownEvent
/**
* handleButtonKeyUpEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/
handleButtonKeyUpEvent = function(event, button) {
// If IE get the IE event object
var e = event || window.event;
switch( browser.keyCode(e) ) {
case KEY_SPACE:
// Tell assistive technologies that the button is not currently pressed
button.node.setAttribute("aria-pressed", "false");
// Kick IE 7 to update styling based on ARIA attribute
button.node.className += "";
browser.simulateOnClickEvent( button.node );
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation(e);
break;
} // end switch
return true;
} // end handleButtonKeyUpEvent
/**
* handleButtonMouseDownEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the Button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/
handleButtonMouseDownEvent = function(event, button) {
// If IE get the IE event object
var e = event || window.event;
if( browser.target(e) == button.node ) {
//set focus
button.node.focus();
// Tell assistive technologies that the button is currently pressed
button.node.setAttribute("aria-pressed", "true");
// Kick IE 7 to update styling based on ARIA attribute
button.node.className += "";
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation(e);
} // end if
return true;
} // end handleButtonMouseDownEvent
/**
* handleButtonMouseUpEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/
handleButtonMouseUpEvent = function(event, button) {
// If IE get the IE event object
var e = event || window.event;
// Tell assistive technologies that the button is not currently pressed
button.node.setAttribute("aria-pressed", "false");
// Kick IE 7 to update styling based on ARIA attribute
button.node.className += "";
if( browser.target(e) == button.node ) {
browser.simulateOnClickEvent( button.node );
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation(e);
} // end if
return true;
} // end handleButtonMouseUpEvent
/**
* ButtonToggle Object
*
* @param ( id ) id of text to style
*
* @return none
*/
function ButtonToggle( id ) {
this.id = id;
} // end ButtonToggle
/**
* ButtonToggle Object
*
* @param ( id ) id of text to style
*
* @return none
*/
ButtonToggle.prototype.init = function() {
this.node = document.getElementById(this.id);
var obj = this;
// Add event handlers for toggling a button
browser.addEvent(this.node, "keydown", function(event) {handleButtonToggleKeyDownEvent(event, obj); }, false);
browser.addEvent(this.node, "mousedown", function(event) {handleButtonToggleMouseDownEvent(event, obj); }, false);
} // end ButtonToggle.prototype.init
/**
* toggleButton is called by event handlers to toggle the state of the button
*
* @param ( Button object ) button Button to toggle state
*
* @return none
*/
toggleButton = function( button ) {
if (button.node.getAttribute("aria-pressed") == "true") {
// If the button is currently pressed set the state to not pressed
button.node.setAttribute("aria-pressed", "false");
// Kick IE 7 to update styling based on ARIA attribute
button.node.className += "";
} else {
// If the button is not currently pressed set the state to pressed
button.node.setAttribute("aria-pressed", "true");
// Kick IE 7 to update styling based on ARIA attribute
button.node.className += "";
} // endif
} // end toggleButton
/**
* handleButtonToggleKeyDownEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the Button object that is the target of the keyboard event
*
* @return false if keyboard event was used by radio group, else true
*/
handleButtonToggleKeyDownEvent = function(event, button) {
// If IE get the IE event object
var e = event || window.event;
switch( browser.keyCode(e) ) {
case KEY_SPACE:
// Toggle the button
toggleButton( button );
browser.simulateOnClickEvent( button.node );
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation(e);
break;
} // end switch
return true;
} // end handleButtonToggleKeyDownEvent
/**
* handleButtonToggleMouseDownEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/
handleButtonToggleMouseDownEvent = function(event, button) {
// If IE get the IE event object
var e = event || window.event;
if( browser.target(e) == button.node ) {
// Toggle button
toggleButton( button );
//set focus on mouse press
button.node.focus();
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation(e);
} // end if
return true;
} // end handleButtonToggleMouseDownEvent
/**
* StateButton Object
*
* @param ( id ) id of text to style
*
* @return none
*/
function ButtonState( id ) {
this.id = id;
} // end ButtonState
/**
* ButtonState Object
*
* @param ( id ) id of text to style
*
* @return none
*/
ButtonState.prototype.init = function() {
this.node = document.getElementById(this.id);
var obj = this;
// Add event handlers for toggling a button
browser.addEvent(this.node, "keydown", function(event) {handleButtonStateKeyDownEvent(event, obj); }, false);
browser.addEvent(this.node, "mousedown", function(event) {handleButtonStateMouseDownEvent(event, obj); }, false);
} // end ButtonState.prototype.init
/**
* handleButtonStateKeyDownEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the Button object that is the target of the keyboard event
*
* @return false if keyboard event was used by radio group, else true
*/
handleButtonStateKeyDownEvent = function(event, button) {
// If IE get the IE event object
var e = event || window.event;
switch( browser.keyCode(e) ) {
case KEY_SPACE:
// press the button
button.node.setAttribute("aria-pressed","true");
browser.simulateOnClickEvent( button.node );
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation(e);
break;
} // end switch
return true;
} // end handleButtonStateKeyDownEvent
/**
* handleButtonStateMouseDownEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/
handleButtonStateMouseDownEvent = function(event, button) {
// If IE get the IE event object
var e = event || window.event;
if( browser.target(e) == button.node ) {
//press the button
button.node.setAttribute("aria-pressed","true");
//set focus on mouse press
button.node.focus();
// Tell browser we handled this event and not to process any other actions
return browser.stopPropagation(e);
} // end if
return true;
} // end handleButtonStateMouseDownEvent
/**
* StyledText Object
*
* @param ( id ) id of text to style
*
* @return none
*/
function StyledText( id ) {
this.id = id;
this.fontSize = 3;
this.fontSizes = ['85%', '90%', '95%', '100%', '105%', '110%', '120%', '140%', '180%'];
} // end StyledText
/**
* init is a subclass of StyledText
* tabs in a menu bar.
*
* @member StyleText
*
* @return none
*/
StyledText.prototype.init = function() {
this.node = document.getElementById(this.id);
} // end StyledText.prototype.init
/**
* handleStyledTextFontSize
*
* @param ( StyledText object) styled text to have its font changed
* @param ( integer ) size index of font desired size
*
* @return none
*/
function handleStyledTextFontSize( stext, size ) {
// Make sure that size is no less than 0
if( size < 0 )
size = 0;
// Make sure we access a valid element
if( size >= stext.fontSizes.length )
size = stext.fontSizes.length -1;
// Set our fontSize to size
stext.fontSize = size;
// Use the corresponding fontSize among the fontSizes
stext.node.style.fontSize = stext.fontSizes[stext.fontSize];
} // end handleStyledTextFontSize
/**
* handleStyledTextFontSizeLarger
* handlers changing
*
* @param ( StyledText object) styled text to have its font changed
*
* @return none
*/
function handleStyledTextFontSizeLarger( stext ) {
// Increment fontSize
stext.fontSize++;
// Make sure we access valid elements
if( stext.fontSize >= stext.fontSizes.length )
stext.fontSize = stext.fontSizes.length - 1;
// Use the corresponding fontSize among the fontSizes
stext.node.style.fontSize = stext.fontSizes[stext.fontSize];
} // end handleStyledTextFontSizeLarger
/**
* handleStyledTextFontSizeSmaller
*
* @param ( StyledText object) styled text to have its font changed
*
* @return none
*/
function handleStyledTextFontSizeSmaller( stext ) {
// Decrement fontSize
stext.fontSize--;
// Make sure that it doesn't go below 0
if( stext.fontSize < 0 )
stext.fontSize = 0;
// Use the corresponding fontSize among the fontSizes
stext.node.style.fontSize = stext.fontSizes[stext.fontSize];
} // end handleStyledTextFontSizeSmaller
function handleTextAlignLeft(stext, toolbar, button){
stext.node.style.textAlign = "left";
//unpress all of the other state buttons
for(var i = 0; i < toolbar.buttons.length; i++ ) {
toolbar.buttons[i].node.setAttribute("aria-pressed", "false");
// Kick IE 7 to update styling based on ARIA attribute
toolbar.buttons[i].node.className = "";
}
//press the button
button.node.setAttribute("aria-pressed","true");
//kick IE7
button.node.className = "";
}
function handleTextAlignCenter(stext, toolbar, button){
stext.node.style.textAlign = "center";
//unpress all of the other state buttons
for(var i = 0; i < toolbar.buttons.length; i++ ) {
toolbar.buttons[i].node.setAttribute("aria-pressed", "false");
// Kick IE 7 to update styling based on ARIA attribute
toolbar.buttons[i].node.className = "";
}
//press the button
button.node.setAttribute("aria-pressed","true");
//kick IE7
button.node.className = "";
}
function handleTextAlignRight(stext, toolbar, button){
stext.node.style.textAlign = "right";
//unpress all of the other state buttons
for(var i = 0; i < toolbar.buttons.length; i++ ) {
toolbar.buttons[i].node.setAttribute("aria-pressed", "false");
// Kick IE 7 to update styling based on ARIA attribute
toolbar.buttons[i].node.className = "";
}
//press the button
button.node.setAttribute("aria-pressed","true");
//kick IE7
button.node.className = "";
}
function handleTextAlignJustify(stext, toolbar, button){
stext.node.style.textAlign = "justify";
//unpress all of the other state buttons
for(var i = 0; i < toolbar.buttons.length; i++ ) {
toolbar.buttons[i].node.setAttribute("aria-pressed", "false");
// Kick IE 7 to update styling based on ARIA attribute
toolbar.buttons[i].node.className = "";
}
//press the button
button.node.setAttribute("aria-pressed","true");
//kick IE7
button.node.className = "";
}
/**
* handleStyledTextToggleBold
* handlers changing
*
* @param ( MenuBar object) styled text to have its font changed
* @param ( StyledText object) styled text to have its font changed
*
* @return none
*/
function handleStyledTextToggleBold( button, stext ) {
if( button.node.getAttribute("aria-pressed") == "true" ) {
// If button is pressed set text to bold
stext.node.style.fontWeight = "bold";
} else {
// If button is not pressed set text to normal
stext.node.style.fontWeight = "normal";
} // endif
} // end handleStyledTextToggleBold
/**
* handleStyledTextToggleItalic
* handlers changing
*
* @param ( MenuBar object) styled text to hav its font changed
* @param ( StyledText object) styled text to have its font changed
*
* @return none
*/
function handleStyledTextToggleItalic( button, stext ) {
if( button.node.getAttribute("aria-pressed") == "true" ) {
// If button is pressed set text to italic
stext.node.style.fontStyle = "italic";
} else {
// If button is not pressed set text to normal
stext.node.style.fontStyle = "normal";
} // endif
} // end handleStyledTextToggleItalic
</script>
</head>
<body onload="widgets.init()">
<div role="application">
<script type="text/javascript">
var toolbar1 = new Toolbar("toolbar1");
widgets.add(toolbar1);
var larger1 = new Button("larger1");
toolbar1.add(larger1);
var smaller1 = new Button("smaller1");
toolbar1.add(smaller1);
var italic1 = new ButtonToggle("italic1");
toolbar1.add(italic1);
var bold1 = new ButtonToggle("bold1");
toolbar1.add(bold1);
var stext1 = new StyledText("text1");
widgets.add(stext1);
var toolbar2 = new Toolbar("toolbar2");
widgets.add(toolbar2);
var larger2 = new Button("larger2");
toolbar2.add(larger2);
var smaller2 = new Button("smaller2");
toolbar2.add(smaller2);
var italic2 = new ButtonToggle("italic2");
toolbar2.add(italic2);
var bold2 = new ButtonToggle("bold2");
toolbar2.add(bold2);
var stext2 = new StyledText("text2");
widgets.add(stext2);
var toolbar3 = new Toolbar("toolbar3");
widgets.add(toolbar3);
var left1 = new ButtonState("left1");
toolbar3.add(left1);
var center1 = new ButtonState("center1");
toolbar3.add(center1);
var right1 = new ButtonState("right1");
toolbar3.add(right1);
var justify1 = new ButtonState("justify1");
toolbar3.add(justify1);
var toolbar4 = new Toolbar("toolbar4");
widgets.add(toolbar4);
var left2 = new ButtonState("left2");
toolbar4.add(left2);
var center2 = new ButtonState("center2");
toolbar4.add(center2);
var right2 = new ButtonState("right2");
toolbar4.add(right2);
var justify2 = new ButtonState("justify2");
toolbar4.add(justify2);
</script>
<h3>Text Sample 1</h3>
<ul class="toolbar" title="Text Formating Controls 1" role="toolbar" id="toolbar1">
<li id="larger1"
role="button"
tabindex="0"
aria-pressed="false"
aria-labelledby="larger_label"
onclick="handleStyledTextFontSizeLarger(stext1)"
><span>+</span></li>
<li id="smaller1"
role="button"
tabindex="-1"
aria-pressed="false"
aria-labelledby="smaller_label"
onclick="handleStyledTextFontSizeSmaller(stext1)"
><span>-</span></li>
<li id="italic1"
class="italic"
role="button"
tabindex="-1"
aria-pressed="false"
aria-labelledby="italic_label"
onclick="handleStyledTextToggleItalic(italic1, stext1 )"
><div class="italic">i</div></li>
<li id="bold1"
role="button"
tabindex="0"
aria-pressed="false"
aria-labelledby="bold_label"
onclick="handleStyledTextToggleBold(bold1, stext1)"
><span>B</span></li>
</ul>
<ul class="toolbar" title="Paragraph Formating Controls 1" role="toolbar" id="toolbar3">
<li id="left1"
class="left"
role="button"
tabindex="0"
aria-pressed="true"
aria-labelledby="left_label"
onclick="handleTextAlignLeft(stext1, toolbar3, left1)"
>L</li>
<li id="center1"
class="center"
role="button"
tabindex="-1"
aria-pressed="false"
aria-labelledby="center_label"
onclick="handleTextAlignCenter(stext1, toolbar3, center1)"
>C</li>
<li id="right1"
class="right"
role="button"
tabindex="-1"
aria-pressed="false"
aria-labelledby="right_label"
onclick="handleTextAlignRight(stext1, toolbar3, right1)"
>R</li>
<li id="justify1"
class="justify"
role="button"
tabindex="0"
aria-pressed="false"
aria-labelledby="justify_label"
onclick="handleTextAlignJustify(stext1, toolbar3, justify1)"
>J</li>
</ul>
<p style="clear: both; height: 1px"> </p>
<textarea id="text1" name="text1" class="example1">
Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
Now we are engaged in a great civil war, testing whether that nation, or any nation, so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.
</textarea>
<p> </p>
<h3>Text Sample 2</h3>
<ul class="toolbar" title="Text Formating Controls 2" role="toolbar" id="toolbar2">
<li id="larger2"
role="button"
tabindex="0"
aria-pressed="false"
aria-labelledby="larger_label"
onclick="handleStyledTextFontSizeLarger(stext2)"
><span>+</span></li>
<li id="smaller2"
role="button"
tabindex="-1"
aria-pressed="false"
aria-labelledby="smaller_label"
onclick="handleStyledTextFontSizeSmaller(stext2)"
><span>-</span></li>
<li id="italic2"
class="italic"
role="button"
tabindex="-1"
aria-pressed="true"
aria-labelledby="italic_label"
onclick="handleStyledTextToggleItalic(italic2, stext2 )"
><div class="italic">i</div></li>
<li id="bold2"
role="button"
tabindex="0"
aria-pressed="false"
aria-labelledby="bold_label"
onclick="handleStyledTextToggleBold(bold2, stext2)"
><span>B</span></li>
</ul>
<ul class="toolbar" title="Paragraph Formating Controls 2" role="toolbar" id="toolbar4">
<li id="left2"
class="left"
role="button"
tabindex="0"
aria-pressed="true"
aria-labelledby="left_label"
onclick="handleTextAlignLeft(stext2, toolbar4, left2)"
>L</li>
<li id="center2"
class="center"
role="button"
tabindex="-1"
aria-pressed="false"
aria-labelledby="center_label"
onclick="handleTextAlignCenter(stext2, toolbar4, center2)"
>C</li>
<li id="right2"
class="right"
role="button"
tabindex="-1"
aria-pressed="false"
aria-labelledby="right_label"
onclick="handleTextAlignRight(stext2, toolbar4, right2)"
>R</li>
<li id="justify2"
class="justify"
role="button"
tabindex="0"
aria-pressed="false"
aria-labelledby="justify_label"
onclick="handleTextAlignJustify(stext2, toolbar4, justify2)"
>J</li>
</ul>
<p style="clear: both; height: 1px"> </p>
<textarea id="text2" name="text2" class="example2">
But, in a larger sense, we can not dedicate - we can not consecrate - we can not hallow - this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us - that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion - that we here highly resolve that these dead shall not have died in vain - that this nation, under God, shall have a new birth of freedom - and that government of the people, by the people, for the people, shall not perish from the earth.
</textarea>
<p class="hide" id="bold_label">Bold</p>
<p class="hide" id="italic_label">Italic</p>
<p class="hide" id="larger_label">Font Larger</p>
<p class="hide" id="smaller_label">Font Smaller</p>
</div></body>
</html>