1874 lines
81 KiB
HTML
1874 lines
81 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>ARIA Spreadsheet and Menubar</title>
|
||
|
|
<script type="text/javascript">
|
||
|
|
<!--
|
||
|
|
/* PLEASE NOTE THAT THIS IS PROTOTYPE CODE! It was created as a proof of concept and is not a well designed or robust implementation! It is not meant to be a best practice example - please use accordinging! You have been warned.
|
||
|
|
*/
|
||
|
|
// functions for changing style rules
|
||
|
|
|
||
|
|
function changeStyleRule(oRule, styleName, styleValue) {
|
||
|
|
if (oRule.style && oRule.style.setProperty) {
|
||
|
|
oRule.style.setProperty(styleName, styleValue,"");
|
||
|
|
//alert(oRule.style.getPropertyValue(styleName));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// You must specify a "title" attribute in <style> tag or <link> tag for Mozilla.
|
||
|
|
function pageGetStyleSheet(sID,doc) {
|
||
|
|
if(!doc)doc=document;
|
||
|
|
if(!sID)
|
||
|
|
return doc.styleSheets[0];
|
||
|
|
|
||
|
|
if (doc.all) {
|
||
|
|
return doc.styleSheets[sID];
|
||
|
|
} else {
|
||
|
|
for (var i = 0; i < doc.styleSheets.length; i++) {
|
||
|
|
var oSS = doc.styleSheets[i];
|
||
|
|
if (oSS.title == sID) return oSS;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function cssGetRules(oSS){
|
||
|
|
return (document.all ? oSS.rules : oSS.cssRules);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// SIMPLE function to find a particular rule selector
|
||
|
|
function cssGetRule(rulesList, ruleIdent) {
|
||
|
|
var foundRule = null;
|
||
|
|
for (var i=0; i < rulesList.length; i++ ) {
|
||
|
|
var sText = rulesList[i].selectorText;
|
||
|
|
if (sText != "undefined" && sText != null) {
|
||
|
|
if (sText.indexOf(ruleIdent) > -1 ) {
|
||
|
|
foundRule = rulesList[i];
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return foundRule;
|
||
|
|
}
|
||
|
|
|
||
|
|
var TOP_SUFFIX = "top"; // the top menu item has an id that is menuID + TOP_SUFFIX
|
||
|
|
var DROP_SUFFIX = "Items"; // the drop menu div has an id that is the menuID + DROP_SUFFIX
|
||
|
|
var SUB_SUFFIX = "sub" // items that have sub menus have "sub" in the id
|
||
|
|
var KEY_UP = 38;
|
||
|
|
var KEY_DOWN = 40;
|
||
|
|
var KEY_LEFT = 37;
|
||
|
|
var KEY_RIGHT = 39;
|
||
|
|
var KEY_ESCAPE = 27;
|
||
|
|
var KEY_M=77;
|
||
|
|
var KEY=F10 = 121;
|
||
|
|
var KEY_SPACE = 32;
|
||
|
|
var KEY_TAB = 9;
|
||
|
|
|
||
|
|
|
||
|
|
var TEXT_NODE = 3;
|
||
|
|
|
||
|
|
Menubar = function(menubarId) {
|
||
|
|
this.activeIdx = -1; // index of the active menu
|
||
|
|
this.dropOpen = false; // indicates if menu is open (items are visible)
|
||
|
|
this.itemIdx = -1; // indicates the index of the active item in an open menu
|
||
|
|
this.id = menubarId;
|
||
|
|
this.menus = new Array(); // array of menu Ids
|
||
|
|
this.menuItems = new Array(); // array of menu items - indexed by menu id
|
||
|
|
this.subMenus = new Array(); // array of sub menu items - indexed by parend menu id
|
||
|
|
this.activeSubId = null; // string with id of open sub menu; null if no sub menu open
|
||
|
|
this.activeSubIndex = -1; // index of active item in sub menu; -1 if no sub menu open
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* getters and setters for MenuState object
|
||
|
|
*/
|
||
|
|
|
||
|
|
Menubar.prototype.setActiveMenuIndex = function(index) {
|
||
|
|
this.activeIdx = index;
|
||
|
|
}
|
||
|
|
Menubar.prototype.getActiveMenuIndex = function() {
|
||
|
|
return this.activeIdx;
|
||
|
|
}
|
||
|
|
Menubar.prototype.setActiveOpen = function(isOpen) {
|
||
|
|
this.dropOpen = isOpen;
|
||
|
|
}
|
||
|
|
Menubar.prototype.isActiveOpen= function() {
|
||
|
|
return this.dropOpen;
|
||
|
|
}
|
||
|
|
Menubar.prototype.setActiveItemIndex = function(index) {
|
||
|
|
this.itemIdx = index;
|
||
|
|
}
|
||
|
|
Menubar.prototype.getActiveItemIndex = function() {
|
||
|
|
return this.itemIdx;
|
||
|
|
}
|
||
|
|
Menubar.prototype.updateAllIndex= function(active, drop, item) {
|
||
|
|
this.activeIdx = active;
|
||
|
|
this.dropOpen = drop;
|
||
|
|
this.itemIdx = item;
|
||
|
|
}
|
||
|
|
Menubar.prototype.getId = function() {
|
||
|
|
return this.id;
|
||
|
|
}
|
||
|
|
Menubar.prototype.getMenus = function() {
|
||
|
|
return this.menus; // return array of menu item ids
|
||
|
|
}
|
||
|
|
Menubar.prototype.getMenuItems = function(menuId) {
|
||
|
|
return this.menuItems[menuId];
|
||
|
|
}
|
||
|
|
/* Function to add a menu to the menu bar
|
||
|
|
** Must be called in menu order!!
|
||
|
|
** menuId - id of this menu item
|
||
|
|
** items - array of ids for the menu items in this menu
|
||
|
|
** returns number of menu items (lenght of menu array)
|
||
|
|
*/
|
||
|
|
Menubar.prototype.addMenu = function(menuId,items) {
|
||
|
|
this.menus[this.menus.length] = menuId;
|
||
|
|
this.menuItems[menuId] = items;
|
||
|
|
|
||
|
|
}
|
||
|
|
Menubar.prototype.addSubMenu = function(menuId, items) {
|
||
|
|
this.subMenus[menuId] = items;
|
||
|
|
|
||
|
|
}
|
||
|
|
Menubar.prototype.getSubMenuItems = function(itemId) {
|
||
|
|
|
||
|
|
return this.subMenus[itemId];
|
||
|
|
}
|
||
|
|
Menubar.prototype.setActiveSubOpen = function(menuId) {
|
||
|
|
this.activeSubId = menuId;
|
||
|
|
}
|
||
|
|
Menubar.prototype.getActiveSubOpen = function() {
|
||
|
|
return this.activeSubId;
|
||
|
|
}
|
||
|
|
Menubar.prototype.setActiveSubIndex= function(index) {
|
||
|
|
this.activeSubIndex = index;
|
||
|
|
}
|
||
|
|
Menubar.prototype.getActiveSubIndex = function() {
|
||
|
|
return this.activeSubIndex;
|
||
|
|
}
|
||
|
|
Menubar.prototype.hasSubMenu = function(itemObj) {
|
||
|
|
var bHasSub = false;
|
||
|
|
var itemId = itemObj.getAttribute("id");
|
||
|
|
// see if id contains "sub"
|
||
|
|
if (itemId.indexOf(SUB_SUFFIX) > -1) {
|
||
|
|
bHasSub = true;
|
||
|
|
}
|
||
|
|
return bHasSub;
|
||
|
|
}
|
||
|
|
|
||
|
|
Menubar.prototype.doMenu = function(event) {
|
||
|
|
//alert(event.ctrlKey + " : " + event.shiftKey + " : " + event.keyCode);
|
||
|
|
if (event.ctrlKey && event.altKey && event.keyCode == KEY_M) {
|
||
|
|
gFocusBeforeMenus = event.target;
|
||
|
|
//var theMenu = document.getElementById(this.getId());
|
||
|
|
// set focus to first menu (as long as menus are defined)
|
||
|
|
if (this.menus.length > 0) {
|
||
|
|
|
||
|
|
if (this.isActiveOpen() ) {
|
||
|
|
// close any open active items if press menu start key again
|
||
|
|
var activeIndex = this.getActiveMenuIndex();
|
||
|
|
var menu = document.getElementById((this.getMenus()[activeIndex] + DROP_SUFFIX));
|
||
|
|
menu.style.display="none";
|
||
|
|
this.updateAllIndex(-1,false,-1);
|
||
|
|
|
||
|
|
}
|
||
|
|
// set focus to the first menu
|
||
|
|
this.setActiveMenuIndex(0);
|
||
|
|
gFocusItem = document.getElementById((this.menus[0] + TOP_SUFFIX));
|
||
|
|
setTimeout("doFocus();",0);
|
||
|
|
} // end of if menus > 0
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
Menubar.prototype.doNavigation = function(event) {
|
||
|
|
var bEventContinue = true; // browser can still use event
|
||
|
|
var key = event.keyCode;
|
||
|
|
if ((key >=KEY_LEFT && key <= KEY_DOWN) || key == KEY_ESCAPE) {
|
||
|
|
var idx = this.getActiveMenuIndex();
|
||
|
|
if (idx < 0) {
|
||
|
|
idx = 0;
|
||
|
|
}
|
||
|
|
// if subIndex > -1 a submenu is open - up and down movement will occur in it
|
||
|
|
var subIndex = this.getActiveSubIndex();
|
||
|
|
var subMenuId = this.getActiveSubOpen();
|
||
|
|
var menus = this.getMenus();
|
||
|
|
var menuLen = menus.length;
|
||
|
|
var activeMenuId = menus[idx];
|
||
|
|
//var activeMenu = document.getElementById(activeMenuId);
|
||
|
|
var curDrop = document.getElementById(activeMenuId + DROP_SUFFIX);
|
||
|
|
|
||
|
|
|
||
|
|
if (key == KEY_LEFT || key == KEY_RIGHT) {
|
||
|
|
|
||
|
|
var nextIdx = idx;
|
||
|
|
if (key == KEY_LEFT) { // left
|
||
|
|
nextIdx = (idx + (menuLen-1)) % menuLen;
|
||
|
|
|
||
|
|
}
|
||
|
|
else { // right
|
||
|
|
nextIdx = ((idx + 1) % menuLen);
|
||
|
|
}
|
||
|
|
// if drop menu is displayed, close it and open the next one or move into submenu
|
||
|
|
var bShowNext = this.isActiveOpen();
|
||
|
|
if (bShowNext) {
|
||
|
|
// current drop is open, see if it has submenu
|
||
|
|
if (curDrop) {
|
||
|
|
if (subMenuId != null) {
|
||
|
|
// sub menu is open - close it
|
||
|
|
this.hideSubMenu();
|
||
|
|
if (key == KEY_LEFT) {
|
||
|
|
// find parentItem and set focus to it
|
||
|
|
gFocusItem = document.getElementById(subMenuId);
|
||
|
|
setTimeout("doFocus();",0);
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
// if right just close and move to next top level menu (which happens below)
|
||
|
|
} // end of submenu open
|
||
|
|
if (key == KEY_RIGHT && subMenuId == null) {
|
||
|
|
// if right arrow and sub menu is not open- get current item in the drop down and see if it has a sub menu
|
||
|
|
var itemIdx = this.getActiveItemIndex();
|
||
|
|
var menuItems = this.getMenuItems(activeMenuId);
|
||
|
|
var curItemInDrop= document.getElementById(menuItems[itemIdx]);
|
||
|
|
var bHasSubMenu = this.hasSubMenu(curItemInDrop);
|
||
|
|
//alert(bHasSubMenu + " " + curItemInDrop.getAttribute("id"));
|
||
|
|
if (bHasSubMenu == true) {
|
||
|
|
return this.showSubMenu(event,curItemInDrop.getAttribute("id"));
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// if haven't returned yet - then close the current drop
|
||
|
|
curDrop.style.display = "none"; // only one menudrop child per menu
|
||
|
|
this.setActiveItemIndex(0);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
this.setActiveMenuIndex(nextIdx);
|
||
|
|
var nextMenuId = menus[nextIdx];
|
||
|
|
gFocusItem=document.getElementById(nextMenuId + TOP_SUFFIX);
|
||
|
|
if (bShowNext == true) {
|
||
|
|
var drop = document.getElementById(nextMenuId + DROP_SUFFIX);
|
||
|
|
if (drop) {
|
||
|
|
drop.style.display="block";
|
||
|
|
var menuItems = this.getMenuItems(nextMenuId);
|
||
|
|
gFocusItem=document.getElementById(menuItems[0]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
setTimeout("doFocus();",0);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if (key == KEY_UP || key == KEY_DOWN ) {
|
||
|
|
var itemIdx = this.getActiveItemIndex();
|
||
|
|
var bOpen = this.isActiveOpen();
|
||
|
|
|
||
|
|
if (curDrop) {
|
||
|
|
// first see if sub menu is open
|
||
|
|
if (subMenuId != null) {
|
||
|
|
// submenu is open - move within it
|
||
|
|
var subMenus = this.getSubMenuItems(subMenuId);
|
||
|
|
var subLen = subMenus.length;
|
||
|
|
var nextSubIndex =subIndex;
|
||
|
|
if (key == KEY_DOWN) {
|
||
|
|
nextSubIndex = (subIndex +1) % subLen;
|
||
|
|
}
|
||
|
|
else if (key == KEY_UP) {
|
||
|
|
nextSubIndex = (subIndex + (subLen - 1)) % subLen;
|
||
|
|
}
|
||
|
|
gFocusItem = document.getElementById(subMenus[nextSubIndex]);
|
||
|
|
this.setActiveSubIndex(nextSubIndex);
|
||
|
|
setTimeout("doFocus();",0);
|
||
|
|
return false;
|
||
|
|
|
||
|
|
} // end of if sub menus - back to regular processing
|
||
|
|
|
||
|
|
var menuItems = this.getMenuItems(activeMenuId);
|
||
|
|
var itemLen = menuItems.length;
|
||
|
|
var nextItemIdx;
|
||
|
|
if (!bOpen) { // open and set to the first item
|
||
|
|
this.showMenu(event, activeMenuId, true);
|
||
|
|
itemIdx = -1;
|
||
|
|
}
|
||
|
|
if (itemIdx == -1) {
|
||
|
|
nextItemIdx = 0;
|
||
|
|
}
|
||
|
|
else if (key == KEY_DOWN ){
|
||
|
|
nextItemIdx = (itemIdx +1) % itemLen;
|
||
|
|
}
|
||
|
|
else { //UP
|
||
|
|
nextItemIdx = (itemIdx + (itemLen-1)) % itemLen;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.setActiveItemIndex(nextItemIdx);
|
||
|
|
gFocusItem=document.getElementById(menuItems[nextItemIdx]);
|
||
|
|
setTimeout("doFocus();",0);
|
||
|
|
} // end of id curDrop
|
||
|
|
} // end of id up/down
|
||
|
|
// need to prevent propagation of arrow keys
|
||
|
|
/* try {
|
||
|
|
ev.preventDefault();
|
||
|
|
}
|
||
|
|
catch (err) {
|
||
|
|
try {
|
||
|
|
ev.returnValue=false;
|
||
|
|
}
|
||
|
|
catch (errNext) {
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}*/
|
||
|
|
bEventContinue = false;
|
||
|
|
|
||
|
|
if (key == KEY_ESCAPE ) {
|
||
|
|
this.closeMenu(event);
|
||
|
|
bEventContinue = false;
|
||
|
|
if (gFocusBeforeMenus) {
|
||
|
|
gFocusItem = gFocusBeforeMenus;
|
||
|
|
setTimeout("doFocus();",0);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
document.focus();
|
||
|
|
}
|
||
|
|
} // end of if KEY_ESCAPE
|
||
|
|
} // end of if arrow or escape key
|
||
|
|
return bEventContinue;
|
||
|
|
}
|
||
|
|
Menubar.prototype.closeMenu = function(event) {
|
||
|
|
// hide the menus
|
||
|
|
var isOpen = this.isActiveOpen();
|
||
|
|
var activeIndex = this.getActiveMenuIndex();
|
||
|
|
if (isOpen && activeIndex != -1) {
|
||
|
|
// find the index of the active menu and close
|
||
|
|
this.hideMenu(event);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
var menus = this.getMenus();
|
||
|
|
var activeMenuId = menus[activeIndex];
|
||
|
|
var curDrop = document.getElementById(activeMenuId + DROP_SUFFIX);
|
||
|
|
if (!isOpen && curDrop) {
|
||
|
|
// one of the top level menus is active but drop down is not open
|
||
|
|
gBlurItem = curDrop;
|
||
|
|
setTimeout("doBlur()",0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
this.updateAllIndex(-1,false,-1);
|
||
|
|
}
|
||
|
|
|
||
|
|
Menubar.prototype.showMenu = function(event, menuId, bFocusFirst) {
|
||
|
|
|
||
|
|
// get the drop menu
|
||
|
|
var menu = document.getElementById((menuId + DROP_SUFFIX));
|
||
|
|
var displayState = "block";
|
||
|
|
var curIndex = this.findMenuIndex(menuId);
|
||
|
|
// see if any menu is open
|
||
|
|
var isOpen = this.isActiveOpen();
|
||
|
|
if (isOpen) {
|
||
|
|
// find the index of this menu item and see if it is different than the active one
|
||
|
|
var activeIndex = this.getActiveMenuIndex();
|
||
|
|
|
||
|
|
if (curIndex != activeIndex && activeIndex != -1 ) {
|
||
|
|
// close the currently open drop menu
|
||
|
|
this.hideMenu(event);
|
||
|
|
// show this one
|
||
|
|
displayState = "block";
|
||
|
|
|
||
|
|
}
|
||
|
|
else { // this is the current menu - hide it
|
||
|
|
displayState = "none";
|
||
|
|
}
|
||
|
|
} // end of if menu open
|
||
|
|
// else is not open - default value of displayState is block -so menu will be shown
|
||
|
|
// set the activeOpen value
|
||
|
|
var isOpen = (displayState == "block" ? true : false);
|
||
|
|
this.setActiveOpen(isOpen);
|
||
|
|
this.setActiveMenuIndex(curIndex);
|
||
|
|
// style="display:none" must be set on the drop elements to use the element.style.display syntax
|
||
|
|
// otherwise need to write cross browser routine to read the effective style (see DHTML book pg 878)
|
||
|
|
menu.style.display = displayState;
|
||
|
|
gFocusItem = menu; // may be over written is need to set focus on specific menu item
|
||
|
|
if (isOpen && bFocusFirst) {
|
||
|
|
// set focus to an item in the menu
|
||
|
|
if (this.getActiveItemIndex() == -1) {
|
||
|
|
this.setActiveItemIndex(0); // set to first item
|
||
|
|
}
|
||
|
|
var menuItems = this.getMenuItems(menuId);
|
||
|
|
gFocusItem=document.getElementById(menuItems[this.getActiveItemIndex()]);
|
||
|
|
|
||
|
|
}
|
||
|
|
setTimeout("doFocus();",0);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
Menubar.prototype.showSubMenu = function(event, menuId) {
|
||
|
|
// TODO fix to work with mouse - since only supporting keyboard right now - there will not be another drop menu open
|
||
|
|
|
||
|
|
// close any open submenus
|
||
|
|
this.hideSubMenu();
|
||
|
|
|
||
|
|
// get the drop menu
|
||
|
|
var menu = document.getElementById((menuId + DROP_SUFFIX));
|
||
|
|
var assocItem = document.getElementById(menuId);
|
||
|
|
//var container = assocItem.parentNode; // HACK - I know that containing div is parent of menuitem should search for menuitem in parent chain
|
||
|
|
var displayState = "block";
|
||
|
|
|
||
|
|
this.setActiveSubOpen(menuId);
|
||
|
|
// will set focus to first item
|
||
|
|
this.setActiveSubIndex(0);
|
||
|
|
// position drop menu
|
||
|
|
|
||
|
|
var offTop= assocItem.offsetTop + "px";
|
||
|
|
var offLeft = assocItem.offsetLeft + assocItem.offsetWidth + "px";
|
||
|
|
with (menu.style) {
|
||
|
|
top=offTop;
|
||
|
|
left=offLeft;
|
||
|
|
display = displayState;
|
||
|
|
}
|
||
|
|
|
||
|
|
var subItems =this.getSubMenuItems(menuId);
|
||
|
|
var first = document.getElementById(subItems[0]);
|
||
|
|
gFocusItem = first;
|
||
|
|
|
||
|
|
setTimeout("doFocus();",0);
|
||
|
|
event.stopPropagation();
|
||
|
|
return false; // do not propagate event
|
||
|
|
|
||
|
|
}
|
||
|
|
Menubar.prototype.hideSubMenu = function() {
|
||
|
|
var openId = this.getActiveSubOpen();
|
||
|
|
if (openId != null) {
|
||
|
|
var openSub = document.getElementById(openId + DROP_SUFFIX);
|
||
|
|
openSub.style.display="none";
|
||
|
|
this.setActiveSubOpen(null);
|
||
|
|
this.setActiveSubIndex(-1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Menubar.prototype.hideMenu = function(event) {
|
||
|
|
var isKey = false;
|
||
|
|
if (event.keyCode) {
|
||
|
|
isKey = true;
|
||
|
|
}
|
||
|
|
if ((isKey && event.keyCode == 13) || (isKey && event.keyCode == KEY_ESCAPE ) || !isKey) {
|
||
|
|
var isOpen = this.isActiveOpen();
|
||
|
|
var activeIndex = this.getActiveMenuIndex();
|
||
|
|
if (isOpen) {
|
||
|
|
var menu = document.getElementById((this.getMenus()[activeIndex] + DROP_SUFFIX));
|
||
|
|
// style="display:none" must be set on the drop elements to use the element.style.display syntax
|
||
|
|
// otherwise need to write cross browser routine to read the effective style (see DHTML book pg 878)
|
||
|
|
menu.style.display="none";
|
||
|
|
this.updateAllIndex(-1,false,-1);
|
||
|
|
this.hideSubMenu();
|
||
|
|
//event.cancelBubble = true; // this is not in the DOM but is supported by IE and Mozilla - could use stopPropagation();
|
||
|
|
gBlurItem = menu;
|
||
|
|
setTimeout("doBlur();",0);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
Menubar.prototype.findMenuIndex = function(menuId) {
|
||
|
|
var menus = this.getMenus();
|
||
|
|
var menuLen = menus.length;
|
||
|
|
var idx = -1;
|
||
|
|
for (var i=0; i < menuLen; i++ ) {
|
||
|
|
if (menus[i] == menuId) {
|
||
|
|
idx = i;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return idx;
|
||
|
|
}
|
||
|
|
Menubar.prototype.clearMenu = function() {
|
||
|
|
}
|
||
|
|
|
||
|
|
Menubar.prototype.doAlert = function (event, theElem, alertStr) {
|
||
|
|
// only called when is enter key or mouse click
|
||
|
|
var isKey = false;
|
||
|
|
if (event.keyCode) {
|
||
|
|
isKey = true;
|
||
|
|
}
|
||
|
|
if (theElem.getAttribute("aria-disabled") !="true") {
|
||
|
|
this.hideMenu(event);
|
||
|
|
gAlertString = alertStr;
|
||
|
|
setTimeout("delayedAlert(gAlertString);",0);
|
||
|
|
|
||
|
|
}
|
||
|
|
// always stop propagation of enter key or click
|
||
|
|
if (event.stopPropagation) {
|
||
|
|
event.stopPropagation();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
try {
|
||
|
|
event.cancelBubble=true;
|
||
|
|
} catch (e) {
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
return false; // do not propagate
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
Menubar.prototype.focusItem = function(event,menuIndex, itemIndex) {
|
||
|
|
// called from onmouseover of each menu item
|
||
|
|
// TODO add error handling
|
||
|
|
this.setActiveItemIndex(itemIndex);
|
||
|
|
this.setActiveMenuIndex(menuIndex);
|
||
|
|
//this.setActiveOpen(true);
|
||
|
|
gFocusItem = event.target;
|
||
|
|
setTimeout("doFocus();",0);
|
||
|
|
}
|
||
|
|
|
||
|
|
Menubar.prototype.doActionTotal = function(event,tableId,key) {
|
||
|
|
this.hideMenu(event);
|
||
|
|
doTotals(tableId, key);
|
||
|
|
// always stop propagation of enter key or click
|
||
|
|
if (event.stopPropagation) {
|
||
|
|
event.stopPropagation();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
try {
|
||
|
|
event.cancelBubble=true;
|
||
|
|
} catch (e) {
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return false;
|
||
|
|
|
||
|
|
}
|
||
|
|
Menubar.prototype.doActionColor = function(event,colorScheme) {
|
||
|
|
this.hideMenu(event);
|
||
|
|
doColor(colorScheme);
|
||
|
|
// always stop propagation of enter key or click
|
||
|
|
if (event.stopPropagation) {
|
||
|
|
event.stopPropagation();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
try {
|
||
|
|
event.cancelBubble=true;
|
||
|
|
} catch (e) {
|
||
|
|
;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return false;
|
||
|
|
|
||
|
|
}
|
||
|
|
function doAction(event, theElem) {
|
||
|
|
|
||
|
|
var isKey = false;
|
||
|
|
if (event.keyCode) {
|
||
|
|
isKey = true;
|
||
|
|
}
|
||
|
|
var bDoAction = false;
|
||
|
|
if ((isKey && event.keyCode == 13) || !isKey) {
|
||
|
|
if (theElem.getAttribute("aria-disabled") =="true") {
|
||
|
|
bDoAction = false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
bDoAction = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
return bDoAction;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
var topMenu = new Menubar("menuBar");
|
||
|
|
topMenu.addMenu("edit", new Array("cut","copy", "paste"));
|
||
|
|
topMenu.addMenu("2", new Array("2.1sub", "2.2","2.3","2.4sub"));
|
||
|
|
topMenu.addMenu("3", new Array("3.1", "3.2","3.3sub","3.4"));
|
||
|
|
topMenu.addMenu("four", new Array("4.1", "4.2","4.3","4.4","4.5"));
|
||
|
|
topMenu.addMenu("five", new Array("5.1", "5.2","5.3"));
|
||
|
|
topMenu.addSubMenu("2.1sub", new Array("2.1.1", "2.1.2","2.1.3", "2.1.4", "2.1.5"));
|
||
|
|
topMenu.addSubMenu("2.4sub", new Array("2.4.1", "2.4.2"));
|
||
|
|
topMenu.addSubMenu("3.3sub", new Array("3.3.1", "3.3.2", "3.3.3"));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// global vars for storing selection and focus information; indexed by the id of the parent table element
|
||
|
|
var gCurrentRow = new Array();
|
||
|
|
var gCurrentCol = new Array();
|
||
|
|
var gCurrentSelected = new Array();
|
||
|
|
var gCurrentCell = new Array();
|
||
|
|
var gSelectedCells = new Array();
|
||
|
|
var gSelecting = new Array();
|
||
|
|
var gTabCount = new Array();
|
||
|
|
|
||
|
|
gCurrentRow ["table2"] = -1; // 0 based row number
|
||
|
|
gCurrentCol["table2"] = 0; // 0 based column number
|
||
|
|
gCurrentSelected ["table2"]=null; // currently selected row object
|
||
|
|
gCurrentCell["table2"] =null; // currently selected cell object
|
||
|
|
gSelectedCells["table2"] = new Array(); // array of currently selected cell objects
|
||
|
|
gSelecting["table2"] = false; // boolean indicating if currently in multi-select mode ( quicker than checking for entries in gCurrentSelectedCells
|
||
|
|
gTabCount["table2"] = 0; // need to know if tabbing into or out of control
|
||
|
|
|
||
|
|
|
||
|
|
// global to store the item to be focused
|
||
|
|
gFocusItem =null;
|
||
|
|
// global to pass the item needing focus to doBlur() via a setTimeout()
|
||
|
|
var gBlurItem= null;
|
||
|
|
// global to store the alert string so can call alert() via setTimeout()
|
||
|
|
gAlertString = "";
|
||
|
|
|
||
|
|
function doFocus() {
|
||
|
|
try {
|
||
|
|
if (gFocusItem != null) {
|
||
|
|
gFocusItem.focus();
|
||
|
|
gFocusItem=null;
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
alert("DEBUG: error in doFocus()");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function doBlur() {
|
||
|
|
try {
|
||
|
|
if (gBlurItem != null) {
|
||
|
|
gBlurItem.blur();
|
||
|
|
gBlurItem=null;
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
alert("DEBUG: error in doBlur()");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function delayedAlert() {
|
||
|
|
alert(gAlertString);
|
||
|
|
gAlertString = "";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function setStyle(theObj, styleName, styleValue, priority) {
|
||
|
|
var bSuccess = false;
|
||
|
|
|
||
|
|
try {
|
||
|
|
if (theObj.style && theObj.style.setProperty) {
|
||
|
|
theObj.style.setProperty(styleName, styleValue,priority);
|
||
|
|
bSuccess = true;
|
||
|
|
}
|
||
|
|
} catch (ex) {
|
||
|
|
alert('exception caught setting style: ' + ex.message); // cannot do anything try the next method
|
||
|
|
}
|
||
|
|
if (!bSuccess) {
|
||
|
|
try {
|
||
|
|
theObj.style[styleName] = styleValue;
|
||
|
|
bSuccess = true;
|
||
|
|
} catch (exNext) {
|
||
|
|
alert('exception caught setting direct style: ' + exNext.message); // cannot do anything
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return bSuccess;
|
||
|
|
} // end of setStyle
|
||
|
|
|
||
|
|
function findParentElem(evt, parentName) {
|
||
|
|
var srcElem = null;
|
||
|
|
try {
|
||
|
|
if (evt.srcElement) {
|
||
|
|
srcElem = evt.srcElement;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
srcElem = evt.currentTarget;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (srcElem != null ) {
|
||
|
|
// find the source table for the keyup event
|
||
|
|
var tagName = srcElem.tagName;
|
||
|
|
if (tagName != parentName) {
|
||
|
|
// search parent heirarchy
|
||
|
|
var parNode = srcElem.parentNode;
|
||
|
|
while (parNode != null) {
|
||
|
|
if (parNode.type == document.ELEMENT_TYPE) {
|
||
|
|
if (parNode.tagName.toLowerCase() == parentName) {
|
||
|
|
srcElem = parNode;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
parNode = parNode.parentNode;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
catch (anyError) {
|
||
|
|
; //srcElem = null;
|
||
|
|
}
|
||
|
|
return srcElem;
|
||
|
|
}
|
||
|
|
|
||
|
|
function findParent (srcElem, parentName) {
|
||
|
|
try {
|
||
|
|
if (srcElem != null ) {
|
||
|
|
// find the source table for the keyup event
|
||
|
|
var tagName = srcElem.tagName;
|
||
|
|
if (tagName != parentName) {
|
||
|
|
// search parent heirarchy
|
||
|
|
var parNode = srcElem.parentNode;
|
||
|
|
while (parNode != null) {
|
||
|
|
if (parNode.type == document.ELEMENT_TYPE) {
|
||
|
|
if (parNode.tagName.toLowerCase() == parentName) {
|
||
|
|
srcElem = parNode;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
parNode = parNode.parentNode;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
catch (anyError) {
|
||
|
|
; //srcElem = null;
|
||
|
|
}
|
||
|
|
return srcElem;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function doTableKeys(e) {
|
||
|
|
var evt = (e != null) ? e : ((event) ? event : null); // Mozilla will include e parameter
|
||
|
|
var bDefaultHandler = true;
|
||
|
|
try {
|
||
|
|
var testCell = document.getElementById("testCell"); // could cache this test object for better performance
|
||
|
|
if (!testCell.focus) {
|
||
|
|
// test cell is the id of a table cell element with a tabindex="-1". See if we can set focus to it, if
|
||
|
|
// not, just return, we can not support arrow keys
|
||
|
|
//alert('no arrow key support');
|
||
|
|
return bDefaultHandler;
|
||
|
|
}
|
||
|
|
|
||
|
|
var srcElem = findParentElem(evt,"table");
|
||
|
|
//srcElem=document.getElementById(srcElem.getAttribute("id"));
|
||
|
|
var activeTableId = srcElem.getAttribute("id");
|
||
|
|
var rows = srcElem.rows;
|
||
|
|
var key = evt.keyCode;
|
||
|
|
var bCtrlKey = evt.ctrlKey;
|
||
|
|
var currentRow = gCurrentRow[activeTableId];
|
||
|
|
var currentCol = gCurrentCol[activeTableId];
|
||
|
|
var nextCell = null;
|
||
|
|
|
||
|
|
if ((key >= KEY_LEFT && key <= KEY_DOWN) && !evt.altKey) {
|
||
|
|
var nextRow = null;
|
||
|
|
var nextRowNum = 0;
|
||
|
|
var nextCol = null;
|
||
|
|
var nextColNum = 0;
|
||
|
|
|
||
|
|
|
||
|
|
if (gSelecting[activeTableId] == true && bCtrlKey == false) {
|
||
|
|
clearSelected(activeTableId);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// process arrows
|
||
|
|
if (key == KEY_DOWN ) { // down
|
||
|
|
|
||
|
|
nextRowNum = currentRow + 1;
|
||
|
|
if (rows.length > nextRowNum) {
|
||
|
|
var prevCell = null;
|
||
|
|
if (currentRow != -1) {
|
||
|
|
var prevRow = rows[currentRow];
|
||
|
|
prevCell = prevRow.cells[currentCol];
|
||
|
|
}
|
||
|
|
nextRow = rows[nextRowNum];
|
||
|
|
gCurrentRow[activeTableId]=nextRowNum;
|
||
|
|
nextCell = nextRow.cells[currentCol];
|
||
|
|
gCurrentCell[activeTableId] = nextCell;
|
||
|
|
processMovement(prevCell, nextCell, bCtrlKey, activeTableId);
|
||
|
|
|
||
|
|
gFocusItem = nextCell;
|
||
|
|
setTimeout("doFocus()", 0);
|
||
|
|
|
||
|
|
}
|
||
|
|
} // end of down
|
||
|
|
if (key == KEY_UP) { // up
|
||
|
|
nextRowNum = currentRow -1;
|
||
|
|
if (nextRowNum >=0 ) {
|
||
|
|
var prevCell = null;
|
||
|
|
if (currentRow != -1) {
|
||
|
|
var prevRow = rows[currentRow];
|
||
|
|
prevCell = prevRow.cells[currentCol];
|
||
|
|
}
|
||
|
|
nextRow = rows[nextRowNum];
|
||
|
|
gCurrentRow[activeTableId]=nextRowNum;
|
||
|
|
nextCell = nextRow.cells[currentCol];
|
||
|
|
gCurrentCell[activeTableId] = nextCell;
|
||
|
|
processMovement(prevCell, nextCell, bCtrlKey, activeTableId);
|
||
|
|
gFocusItem = nextCell;
|
||
|
|
setTimeout("doFocus()", 0);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
} // end of up
|
||
|
|
if (key == KEY_LEFT ) { // left
|
||
|
|
nextColNum = currentCol -1;
|
||
|
|
var prevCell = null;
|
||
|
|
if (nextColNum >= 0 && currentRow >= 0) {
|
||
|
|
nextRow = rows[currentRow];
|
||
|
|
if (nextRow != null) {
|
||
|
|
prevCell = nextRow.cells[currentCol];
|
||
|
|
}
|
||
|
|
nextCell = nextRow.cells[nextColNum];
|
||
|
|
gCurrentCol[activeTableId] = nextColNum;
|
||
|
|
gCurerntCell = nextCell;
|
||
|
|
processMovement(prevCell, nextCell, bCtrlKey, activeTableId);
|
||
|
|
|
||
|
|
gFocusItem = nextCell;
|
||
|
|
setTimeout("doFocus()", 0);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
} // end of if left
|
||
|
|
if (key == KEY_RIGHT ) { // right
|
||
|
|
nextColNum = currentCol + 1;
|
||
|
|
var prevCell = null;
|
||
|
|
if (currentRow >=0 ) {
|
||
|
|
nextRow = rows[currentRow];
|
||
|
|
if (nextRow != null && nextColNum < nextRow.cells.length) {
|
||
|
|
prevCell = nextRow.cells[currentCol];
|
||
|
|
nextCell = nextRow.cells[nextColNum];
|
||
|
|
gCurrentCol[activeTableId] = nextColNum;
|
||
|
|
gCurrentCell = nextCell;
|
||
|
|
processMovement(prevCell, nextCell, bCtrlKey, activeTableId);
|
||
|
|
|
||
|
|
gFocusItem = nextCell;
|
||
|
|
setTimeout("doFocus()", 0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
} // end of if right
|
||
|
|
bDefaultHandler = false;
|
||
|
|
|
||
|
|
if (nextCell != null) {
|
||
|
|
gCurrentCell[activeTableId]= nextCell;
|
||
|
|
}
|
||
|
|
} // end of if arrows
|
||
|
|
else if (key == KEY_SPACE && bCtrlKey) {
|
||
|
|
var currentCell = gCurrentCell[activeTableId];
|
||
|
|
|
||
|
|
var bSelected = toggleSelection(activeTableId,currentCell);
|
||
|
|
if (bSelected == "true") {
|
||
|
|
currentCell.className = "cellFocusSelect";
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
currentCell.className = "cellFocus";
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
else if (key == KEY_ESCAPE) {
|
||
|
|
// pressing escape when editing a cell will end editng - this is not really what we want since
|
||
|
|
// it does not allow the escape to clear the input cell field first - I tried that in ignoreArrows() but
|
||
|
|
// could not get focus back to the cell after the escape.
|
||
|
|
if (gCurrentCell[activeTableId] != null) {
|
||
|
|
endEdit(gCurrentCell[activeTableId], false);
|
||
|
|
gFocusItem = gCurrentCell[activeTableId];
|
||
|
|
setTimeout("doFocus()",0);
|
||
|
|
bDefaultHandler = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
else if (key == KEY_TAB && !evt.shiftKey ) {
|
||
|
|
// table is losing focus set the style of the current cell to cellBlur
|
||
|
|
gCurrentCell[activeTableId].className = "cellBlur";
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
} // end of try
|
||
|
|
catch (errorInfo) {
|
||
|
|
//alert(errorInfo);
|
||
|
|
}
|
||
|
|
return bDefaultHandler;
|
||
|
|
}
|
||
|
|
function processMovement(prevCell, nextCell, bCtrlKey, activeTableId) {
|
||
|
|
if (bCtrlKey == true) {
|
||
|
|
// leave prev cell in same state
|
||
|
|
// set style of prevCell to appropriate state
|
||
|
|
// set style of current cell to cellFocus
|
||
|
|
if (prevCell != null) {
|
||
|
|
var prevStyle = "";
|
||
|
|
if (prevCell.getAttribute("aria-selected") == "true" ) {
|
||
|
|
prevStyle = "cellSelect";
|
||
|
|
}
|
||
|
|
prevCell.className = prevStyle;
|
||
|
|
}
|
||
|
|
nextCell.className = "cellFocus";
|
||
|
|
gSelecting[activeTableId] = true;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
//bCtrlKey == false
|
||
|
|
// clear select on previous cell
|
||
|
|
// set style of previous cell to empty
|
||
|
|
// select current cell
|
||
|
|
// set style of current cell to cellFocusSelect
|
||
|
|
if (prevCell != null) {
|
||
|
|
removeSelection(activeTableId, prevCell);
|
||
|
|
prevCell.className = "";
|
||
|
|
}
|
||
|
|
addSelection(activeTableId, nextCell);
|
||
|
|
nextCell.className="cellFocusSelect";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function addSelection(activeTableId, currentCell) {
|
||
|
|
var selectedList = gSelectedCells[activeTableId];
|
||
|
|
var isSelected = currentCell.getAttribute("aria-selected");
|
||
|
|
if (isSelected != "true") {
|
||
|
|
// set selected and add to selection list
|
||
|
|
currentCell.setAttribute("aria-selected", "true");
|
||
|
|
selectedList[selectedList.length] = currentCell;
|
||
|
|
gSelectedCells[activeTableId] = selectedList;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function removeSelection(activeTableId, currentCell) {
|
||
|
|
var selectedList = gSelectedCells[activeTableId];
|
||
|
|
var isSelected = currentCell.getAttribute("aria-selected");
|
||
|
|
if (isSelected == "true" ) {
|
||
|
|
currentCell.removeAttribute("aria-selected");
|
||
|
|
// remove from list of selected cells
|
||
|
|
var idx = -1;
|
||
|
|
for (var j=0; j < selectedList.length; j++) {
|
||
|
|
if (selectedList[j] == currentCell) {
|
||
|
|
idx = j;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (idx <= 0) {
|
||
|
|
// remove the cell from the selected List
|
||
|
|
gSelectedCells[activeTableId] = selectedList.splice(idx,1,"");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function toggleSelection(activeTableId, currentCell) {
|
||
|
|
// toggle selection of the cell
|
||
|
|
var selectedState = "";
|
||
|
|
var selectedList = gSelectedCells[activeTableId];
|
||
|
|
var isSelected = currentCell.getAttribute("aria-selected");
|
||
|
|
if (isSelected == "true" ) {
|
||
|
|
removeSelection(activeTableId, currentCell);
|
||
|
|
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
addSelection(activeTableId,currentCell);
|
||
|
|
selectedState = "true"
|
||
|
|
}
|
||
|
|
return selectedState; // return current selection state of cell
|
||
|
|
} // end of toggleSelection
|
||
|
|
|
||
|
|
function clearSelected(activeTableId) {
|
||
|
|
// clear the selected cells
|
||
|
|
gSelecting[activeTableId] = false;
|
||
|
|
var selectedCells = gSelectedCells[activeTableId];
|
||
|
|
for (var k=0; k < selectedCells.length; k++) {
|
||
|
|
selectedCells[k].className = "";
|
||
|
|
selectedCells[k].setAttribute("aria-selected", "false");
|
||
|
|
}
|
||
|
|
gSelectedCells[activeTableId] = new Array(); // just create new, empty array
|
||
|
|
} // end of clearSelected()
|
||
|
|
|
||
|
|
function doClick(e,rowNum, colNum) {
|
||
|
|
/* put the doClick() in each TD element and pass the row and column number because it was the easiest way to figure out what
|
||
|
|
row and column was clicked in both IE and Mozilla. Mozilla gives the element with the handler as the currentTarget rather than the
|
||
|
|
actual element. For example, with onclick on the TABLE, Mozilla gives the event.currentTarget as the TABLE when click on a cell.
|
||
|
|
IE gives the event.srcElement as the TD that was clicked on.
|
||
|
|
Also, could probably determine row and column programmatically if necessary rather than passing rowNum and colNum. Or, pass the element itself!
|
||
|
|
*/
|
||
|
|
|
||
|
|
var evt = (e != null) ? e : ((event) ? event : null); // Mozilla will include e parameter
|
||
|
|
var srcElem = findParentElem(evt,"table");
|
||
|
|
var activeTableId = srcElem.getAttribute("id");
|
||
|
|
var prevCell = gCurrentCell[activeTableId];
|
||
|
|
var rows = document.getElementById(activeTableId).rows;
|
||
|
|
var thisRow = rows[rowNum];
|
||
|
|
var thisCell = thisRow.cells[colNum];
|
||
|
|
// update the global variables for the clicked on cell
|
||
|
|
gCurrentCell[activeTableId] = thisCell;
|
||
|
|
gCurrentRow[activeTableId] = rowNum;
|
||
|
|
gCurrentCol[activeTableId] = colNum;
|
||
|
|
var bCtrlKey = evt.ctrlKey;
|
||
|
|
var bSameCell = (thisCell == prevCell);
|
||
|
|
|
||
|
|
if (gSelecting[activeTableId] == true && bCtrlKey == false) {
|
||
|
|
clearSelected(activeTableId);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (bCtrlKey == false && !bSameCell) {
|
||
|
|
// remove selection from prev cell
|
||
|
|
// add this cell to selection
|
||
|
|
// set state of prev cell to empty
|
||
|
|
// set state of this cell to focusSelect
|
||
|
|
if (prevCell != null) {
|
||
|
|
removeSelection(activeTableId, prevCell);
|
||
|
|
prevCell.className = "";
|
||
|
|
}
|
||
|
|
addSelection(activeTableId, thisCell);
|
||
|
|
thisCell.className="cellFocusSelect";
|
||
|
|
}
|
||
|
|
else if (bCtrlKey == true && !bSameCell) {
|
||
|
|
// leave prev cell in same selection state
|
||
|
|
// update style of prev cell based on state
|
||
|
|
// add this cell to selection
|
||
|
|
// set this cell style to focusselect
|
||
|
|
if (prevCell != null) {
|
||
|
|
var prevStyle = "";
|
||
|
|
if (prevCell.getAttribute("aria-selected") == "true" ) {
|
||
|
|
prevStyle = "cellSelect";
|
||
|
|
}
|
||
|
|
prevCell.className = prevStyle;
|
||
|
|
}
|
||
|
|
addSelection(activeTableId, thisCell);
|
||
|
|
thisCell.className="cellFocusSelect";
|
||
|
|
gSelecting[activeTableId] = true;
|
||
|
|
}
|
||
|
|
else if (bCtrlKey == true && bSameCell) {
|
||
|
|
var bSelected = toggleSelection(activeTableId,thisCell);
|
||
|
|
if (bSelected == "true") {
|
||
|
|
thisCell.className = "cellFocusSelect";
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
thisCell.className = "cellFocus";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
gFocusItem = thisCell;
|
||
|
|
setTimeout("doFocus();", 0);
|
||
|
|
|
||
|
|
} // end of doClick
|
||
|
|
|
||
|
|
|
||
|
|
function doEvent(evtTarget, evtName, theEvent) {
|
||
|
|
if (evtTarget.fireEvent) {
|
||
|
|
// is IE, need "on" in front of event name
|
||
|
|
evtName = "on" + evtName;
|
||
|
|
evtTarget.fireEvent(evtName, theEvent);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
evtTarget.dispatchEvent(theEvent);
|
||
|
|
}
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function doLink(linkId) {
|
||
|
|
var theLink = document.getElementById(linkId);
|
||
|
|
var bTryAgain = false;
|
||
|
|
try {
|
||
|
|
theLink.click(); // for IE
|
||
|
|
} catch (clickError) {
|
||
|
|
bTryAgain = true;
|
||
|
|
}
|
||
|
|
if (bTryAgain) {
|
||
|
|
try {
|
||
|
|
var mClick = document.createEvent("MouseEvents");
|
||
|
|
mClick.initEvent("click",true, true);
|
||
|
|
theLink.dispatchEvent(mClick);
|
||
|
|
} catch (e) {
|
||
|
|
alert(e.message); //+ "DEBUG: can't fire event to link element");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
function doEdit(event, parentCell, colNumber) {
|
||
|
|
// edit a spreadsheet cell. Find text node of cell and store data. Create an input field and label and add to cell; set text node value into cell; remove text node;
|
||
|
|
if (parentCell.getAttribute("aria-readonly") =="true") {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (parentCell.editMode != "true") {
|
||
|
|
var inputId = "col" + colNumber;
|
||
|
|
var inputField = document.createElement("input");
|
||
|
|
setStyle(inputField, "border", "0", "");
|
||
|
|
inputField.setAttribute("id", inputId);
|
||
|
|
var dataNode = null;
|
||
|
|
var editData = "";
|
||
|
|
if (parentCell.hasChildNodes() ) {
|
||
|
|
// TODO find parentCells text node - for now just assuming it is first child
|
||
|
|
dataNode = parentCell.firstChild;
|
||
|
|
parentCell.removeChild(dataNode);
|
||
|
|
editData = dataNode.data;
|
||
|
|
}
|
||
|
|
parentCell.saveData = editData;
|
||
|
|
parentCell.appendChild(inputField);
|
||
|
|
inputField.setAttribute("value",editData);
|
||
|
|
setStyle(inputField,"width", "100%","");
|
||
|
|
try {
|
||
|
|
inputField.addEventListener("blur",checkEdit, true);
|
||
|
|
inputField.addEventListener("keydown", ignoreArrows,true); // process arrow key input so it does not get up to parent table onkeydown
|
||
|
|
}
|
||
|
|
catch (ex) { // IE
|
||
|
|
inputField.attachEvent('blur',checkEdit, true);
|
||
|
|
inputField.attachEvent('keydown', ignoreArrows, true);
|
||
|
|
}
|
||
|
|
|
||
|
|
// create label for the cell - use the columnheader as the label
|
||
|
|
var parentTable = findParent(parentCell, "table");
|
||
|
|
var colHeader = parentTable.rows[0].cells[colNumber];
|
||
|
|
inputField.setAttribute("aria-labelledby", colHeader.id);
|
||
|
|
|
||
|
|
parentCell.editMode = "true";
|
||
|
|
// set focus to the input field
|
||
|
|
gFocusItem=inputField;
|
||
|
|
setTimeout("doFocus()", 0);
|
||
|
|
} // end of if edit
|
||
|
|
else {
|
||
|
|
endEdit(parentCell,true);
|
||
|
|
|
||
|
|
gFocusItem = parentCell;
|
||
|
|
setTimeout("doFocus()",0);
|
||
|
|
|
||
|
|
} // end of else end edit
|
||
|
|
|
||
|
|
|
||
|
|
} // end of doEdit()
|
||
|
|
|
||
|
|
function endEdit(parentCell, bSave) {
|
||
|
|
// end editing remove input node, remove label node
|
||
|
|
// currently VERY dependent upon the organization of the DOM
|
||
|
|
// cell is in edit mode - store data and leave edit mode
|
||
|
|
// find the input field
|
||
|
|
if (parentCell.hasChildNodes() && parentCell.editMode == "true") {
|
||
|
|
var inputNode = findChildNode(parentCell,"input");
|
||
|
|
/*var inputNode = parentCell.firstChild; // TODO should never be null but wrap in a try/catch
|
||
|
|
var childNodeName = inputNode.nodeName
|
||
|
|
childNodeName.toLowerCase();
|
||
|
|
while (childNodeName != "input" && inputNode != null) {
|
||
|
|
inputNode = inputNode.nextSibling;
|
||
|
|
childNodeName = inputNode.nodeName.toLowerCase();
|
||
|
|
}*/
|
||
|
|
if (inputNode != null) {
|
||
|
|
var storeData = parentCell.saveData;
|
||
|
|
if (bSave == true) {
|
||
|
|
storeData = inputNode.value;
|
||
|
|
}
|
||
|
|
// remove event listenters
|
||
|
|
try {
|
||
|
|
inputNode.removeEventListener("blur",checkEdit,true);
|
||
|
|
inputNode.removeEventListener("keydown", ignoreArrows, true);
|
||
|
|
}
|
||
|
|
catch (ex) {
|
||
|
|
inputField.detachEvent('blur',checkEdit, true);
|
||
|
|
inputField.detachEvent('keydown', ignoreArrows, true);
|
||
|
|
}
|
||
|
|
|
||
|
|
parentCell.removeChild(inputNode);
|
||
|
|
var labelNode = findChildNode(parentCell, "label");
|
||
|
|
if (labelNode != null) {
|
||
|
|
parentCell.removeChild(labelNode);
|
||
|
|
}
|
||
|
|
var newDataNode = document.createTextNode(storeData);
|
||
|
|
parentCell.appendChild(newDataNode);
|
||
|
|
parentCell.editMode="false";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} // end of endEdit
|
||
|
|
|
||
|
|
function findChildNode(startNode, nodeName) {
|
||
|
|
// TODO - currently only searchs siblings of startNode - does not recurse
|
||
|
|
var foundNode = null;
|
||
|
|
try {
|
||
|
|
if (startNode.hasChildNodes() ) {
|
||
|
|
var testNode = startNode.firstChild;
|
||
|
|
while (testNode != null && (testNode.nodeName.toLowerCase() != nodeName)) {
|
||
|
|
testNode = testNode.nextSibling;
|
||
|
|
}
|
||
|
|
foundNode = testNode;
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
alert("DEBUG - error in findChildNode() - " + error.message);
|
||
|
|
foundNode = null;
|
||
|
|
}
|
||
|
|
return foundNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
function checkEdit(event) {
|
||
|
|
try {
|
||
|
|
var srcElem = findParentElem(event,"table");
|
||
|
|
var currentCell = gCurrentCell[srcElem.id];
|
||
|
|
var parentCell = findParentElem(event,"td");
|
||
|
|
if (parentCell == currentCell) {
|
||
|
|
if (parentCell && parentCell.editMode == "true") {
|
||
|
|
endEdit(parentCell,true);
|
||
|
|
}
|
||
|
|
|
||
|
|
gFocusItem = srcElem;
|
||
|
|
setTimeout("doFocus();", 0);
|
||
|
|
}
|
||
|
|
} catch (e) {
|
||
|
|
alert("DEBUG - error in checkEdit: " + e.message);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function ignoreArrows(event) {
|
||
|
|
var eventTarget = event.target;
|
||
|
|
var key = event.keyCode;
|
||
|
|
bEventContinue = true; // let input field handle the key
|
||
|
|
if (key >=KEY_LEFT && key <= KEY_DOWN) {
|
||
|
|
if (event.stopPropagation) {
|
||
|
|
event.stopPropagation();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
event.cancelBubble = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* This does not work - I can not get focus back into the cell after the escape!!!
|
||
|
|
else if (key == KEY_ESCAPE) {
|
||
|
|
// first let escape be used to clear the cell, if cell is empty end editing
|
||
|
|
if (eventTarget.value == "") {
|
||
|
|
if (event.stopPropagation) {
|
||
|
|
event.stopPropagation();
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
event.cancelBubble = true;
|
||
|
|
}
|
||
|
|
var srcElem = findParentElem(event,"table");
|
||
|
|
var currentCell = gCurrentCell[srcElem.id];
|
||
|
|
var parentCell = findParentElem(event,"td");
|
||
|
|
if (parentCell == currentCell) {
|
||
|
|
if (parentCell && parentCell.editMode == "true") {
|
||
|
|
endEdit(parentCell,false);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
// focus the table - that will focus the currentCell
|
||
|
|
gFocusItem = srcElem;
|
||
|
|
setTimeout("doFocus();", 0);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
} */
|
||
|
|
|
||
|
|
|
||
|
|
} // end of ignoreArrows
|
||
|
|
function setCell(tableId) {
|
||
|
|
var currentCell = gCurrentCell[tableId];
|
||
|
|
if (currentCell == null) {
|
||
|
|
// no cell selected, set it to first cell
|
||
|
|
var grid = document.getElementById(tableId);
|
||
|
|
var rows = grid.rows;
|
||
|
|
var firstRow = rows[0];
|
||
|
|
currentCell = firstRow.cells[0];
|
||
|
|
gCurrentRow[tableId] = 0;
|
||
|
|
gCurrentCol[tableId] = 0;
|
||
|
|
gCurrentCell[tableId] = currentCell;
|
||
|
|
|
||
|
|
}
|
||
|
|
currentCell.className="cellFocusSelect";
|
||
|
|
gFocusItem = currentCell;
|
||
|
|
setTimeout("doFocus()", 0);
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
// would like to change the style of the cell when focus leaves the table completely but not sure how to implement since table gets onblur when each cell loses focus
|
||
|
|
function blurCell(event, tableId) {
|
||
|
|
var currentCell = gCurrentCell[tableId];
|
||
|
|
if (currentCell != null) {
|
||
|
|
currentCell.className="cellBlur";
|
||
|
|
}
|
||
|
|
|
||
|
|
// else do nothing
|
||
|
|
}
|
||
|
|
|
||
|
|
// very specific function to change the styles on the page
|
||
|
|
function doColor(colorScheme) {
|
||
|
|
|
||
|
|
// get the styles
|
||
|
|
var oSS = pageGetStyleSheet("basic", null);
|
||
|
|
var ssRules = cssGetRules(oSS);
|
||
|
|
|
||
|
|
var colorArray;
|
||
|
|
if (ssRules != null) {
|
||
|
|
switch(colorScheme) {
|
||
|
|
case "grey":
|
||
|
|
colorArray = new Array("#C0C0C0","#F5F5F5","#999999","#F5F5F5");
|
||
|
|
changeColors(ssRules, colorArray);
|
||
|
|
break;
|
||
|
|
case "blues":
|
||
|
|
colorArray = new Array("#00CED1", "#B0E0E6","#000080","#E0FFFF");
|
||
|
|
changeColors(ssRules, colorArray);
|
||
|
|
break;
|
||
|
|
case "green":
|
||
|
|
colorArray = new Array("#3CB371","#90EE90","#008000","#F0FFF0");
|
||
|
|
changeColors(ssRules, colorArray);
|
||
|
|
break;
|
||
|
|
case "rose":
|
||
|
|
colorArray = new Array("#CD5C5C","#F08080","#800000","#FFE4E1");
|
||
|
|
changeColors(ssRules, colorArray);
|
||
|
|
default:
|
||
|
|
// do nothing
|
||
|
|
break;
|
||
|
|
} // end switch
|
||
|
|
}
|
||
|
|
|
||
|
|
return false; // do not propagate
|
||
|
|
}
|
||
|
|
function changeColors(ssRules, colorArray) {
|
||
|
|
var theRule;
|
||
|
|
// menubar background-color
|
||
|
|
theRule = cssGetRule(ssRules, "menubar");
|
||
|
|
changeStyleRule(theRule, "background-color", colorArray[0]);
|
||
|
|
// menu background-color
|
||
|
|
theRule = cssGetRule(ssRules, "menu");
|
||
|
|
changeStyleRule(theRule, "background-color", colorArray[0]);
|
||
|
|
theRule = cssGetRule(ssRules,"topMenu");
|
||
|
|
changeStyleRule(theRule, "border-color", colorArray[0]);
|
||
|
|
changeStyleRule(theRule, "background-color", colorArray[0]);
|
||
|
|
theRule = cssGetRule(ssRules, "cellFocusSelect");
|
||
|
|
changeStyleRule(theRule, "background-color", colorArray[0]);
|
||
|
|
theRule = cssGetRule(ssRules, "table");
|
||
|
|
changeStyleRule(theRule, "border-color", colorArray[0]);
|
||
|
|
theRule = cssGetRule(ssRules, "menudrop");
|
||
|
|
changeStyleRule(theRule, "background-color", colorArray[1]);
|
||
|
|
changeStyleRule(theRule, "border-color",colorArray[1]);
|
||
|
|
theRule = cssGetRule(ssRules, "cellSelect");
|
||
|
|
changeStyleRule(theRule, "background-color", colorArray[3]);
|
||
|
|
theRule = cssGetRule(ssRules, "topMenu:focus");
|
||
|
|
changeStyleRule(theRule, "border-color", colorArray[2]);
|
||
|
|
changeStyleRule(theRule, "background-color", colorArray[2]);
|
||
|
|
theRule = cssGetRule(ssRules, "topMenu:hover");
|
||
|
|
changeStyleRule(theRule, "border-color", colorArray[2]);
|
||
|
|
changeStyleRule(theRule, "background-color", colorArray[2]);
|
||
|
|
theRule = cssGetRule(ssRules, "menuitem:focus");
|
||
|
|
changeStyleRule(theRule, "border-color", colorArray[2]);
|
||
|
|
changeStyleRule(theRule, "background-color", colorArray[2]);
|
||
|
|
theRule = cssGetRule(ssRules, "menuitem:hover");
|
||
|
|
changeStyleRule(theRule, "border-color", colorArray[2]);
|
||
|
|
changeStyleRule(theRule, "background-color", colorArray[2]);
|
||
|
|
//theRule = cssGetRule(ssRules, "action");
|
||
|
|
//changeStyleRule(theRule, "color", colorArray[2]);
|
||
|
|
theRule = cssGetRule(ssRules, "cellBlur");
|
||
|
|
changeStyleRule(theRule, "backgournd-color", colorArray[3]);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
function doTotals(tableId, key) {
|
||
|
|
// simple function to do some totaling of information in the table
|
||
|
|
// hard coded to the format of this particular table (i.e. for demo purposes only - NOT general purpose)
|
||
|
|
// id of the table containing the data
|
||
|
|
// keyName - item name we are totaling
|
||
|
|
// column numbers are hard coded
|
||
|
|
|
||
|
|
var DATE_COL = 1;
|
||
|
|
var EXPENSE_COL = 2;
|
||
|
|
var display= "no results";
|
||
|
|
var results;
|
||
|
|
bEventContinue = false;
|
||
|
|
try {
|
||
|
|
var activeTable = document.getElementById(tableId);
|
||
|
|
var tableRows = activeTable.rows;
|
||
|
|
|
||
|
|
//var prevRow = rows[currentRow];
|
||
|
|
// prevCell = prevRow.cells[currentCol];
|
||
|
|
var lcKey = key.toLowerCase();
|
||
|
|
if (lcKey == "date") {
|
||
|
|
display = "";
|
||
|
|
var exception = "";
|
||
|
|
var dates = new Array();
|
||
|
|
// find all unique dates then total each
|
||
|
|
for(var i=1; i<tableRows.length; i++) {
|
||
|
|
exception=""; //reset
|
||
|
|
var bFound = false;
|
||
|
|
var dateCell = tableRows[i].cells[DATE_COL];
|
||
|
|
if (dateCell.firstChild && dateCell.firstChild.data) {
|
||
|
|
var cellData =dateCell.firstChild.data;
|
||
|
|
if (i == 1) {
|
||
|
|
// first cell - force adding date to array
|
||
|
|
bFound = false;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// see if date already exists in array
|
||
|
|
for(var j=0; j<dates.length; j++) {
|
||
|
|
if (dates[j] == cellData) {
|
||
|
|
bFound = true;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} // end of else
|
||
|
|
if (bFound == false) {
|
||
|
|
dates[dates.length] = cellData;
|
||
|
|
results = getData(tableRows,cellData,DATE_COL);
|
||
|
|
if (results.length > 0) {
|
||
|
|
var total = calcTotal(results);
|
||
|
|
if (total > 1000) {
|
||
|
|
exception = " !!! EXCEPTION: daily total over $1000 !!!"
|
||
|
|
}
|
||
|
|
display += "Total for " + cellData + " is $" + total + exception + "\n";
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} // end of if celldata
|
||
|
|
} // end of for
|
||
|
|
} // end of if date
|
||
|
|
else {
|
||
|
|
results = getData(tableRows,lcKey,EXPENSE_COL);
|
||
|
|
if (results.length > 0) {
|
||
|
|
var total = calcTotal(results);
|
||
|
|
display = "Total for " + key + " is $" + total;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
gAlertString = display;
|
||
|
|
setTimeout("delayedAlert(gAlertString);",0);
|
||
|
|
|
||
|
|
} catch (error) {
|
||
|
|
alert("DEBUG- error in doTotals() " + error.message);
|
||
|
|
bEventContinue = true;
|
||
|
|
}
|
||
|
|
return bEventContinue;
|
||
|
|
}
|
||
|
|
function getData(tableRows,lcKey, colNum) {
|
||
|
|
// find all rows that contain key and store amount contents in array
|
||
|
|
var AMOUNT_COL = 3;
|
||
|
|
var results = new Array();
|
||
|
|
for (var i=1; i<tableRows.length; i++) {
|
||
|
|
var keyCell = tableRows[i].cells[colNum];
|
||
|
|
if (keyCell.firstChild && keyCell.firstChild.data) {
|
||
|
|
var cellData =keyCell.firstChild.data;
|
||
|
|
cellData = cellData.toLowerCase();
|
||
|
|
if (cellData.indexOf(lcKey) > -1) {
|
||
|
|
var amtCell = tableRows[i].cells[AMOUNT_COL];
|
||
|
|
var data = amtCell.firstChild.data; // lots of assumptions here!!!
|
||
|
|
results[results.length] = data;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return results;
|
||
|
|
}
|
||
|
|
function calcTotal(results) {
|
||
|
|
// results is array of strings to total - may have $
|
||
|
|
var total =0;
|
||
|
|
for (var i=0; i < results.length; i++) {
|
||
|
|
var value = null;
|
||
|
|
var amt = results[i];
|
||
|
|
var idx = amt.indexOf('$');
|
||
|
|
if (idx > -1) {
|
||
|
|
amt = amt.substring(idx+1); // assumes only one $ and it is at the beginning
|
||
|
|
}
|
||
|
|
value = parseFloat(amt, 10);
|
||
|
|
if (value != NaN) {
|
||
|
|
total += value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return total.toFixed(2);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
-->
|
||
|
|
</script>
|
||
|
|
<style type="text/css" id="basic" title="basic">
|
||
|
|
table {
|
||
|
|
empty-cells:show;
|
||
|
|
border-collapse: collapse; // Show empty table cells in IE
|
||
|
|
}
|
||
|
|
|
||
|
|
.menubar {
|
||
|
|
background-color:#C0C0C0;
|
||
|
|
}
|
||
|
|
.menu {
|
||
|
|
float:left;
|
||
|
|
width:5em;
|
||
|
|
padding:1px 3px;
|
||
|
|
background-color:#C0C0C0;
|
||
|
|
color:black;
|
||
|
|
|
||
|
|
}
|
||
|
|
.menudrop {
|
||
|
|
display:none;
|
||
|
|
background-color:#F5F5F5;
|
||
|
|
width:150%;
|
||
|
|
border: solid #999999 1px;
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
.menusub {
|
||
|
|
display:none;
|
||
|
|
background-color:#F5F5F5;
|
||
|
|
border:solid #999999 1px;
|
||
|
|
position:absolute;
|
||
|
|
width:25%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content {
|
||
|
|
margin-top:2em;
|
||
|
|
position:absolute;
|
||
|
|
clear:both;
|
||
|
|
|
||
|
|
}
|
||
|
|
.topMenu {
|
||
|
|
border-style:solid;
|
||
|
|
border-color:#C0C0C0;
|
||
|
|
border-width:1px;
|
||
|
|
background-color:#C0C0C0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.topMenu:focus {
|
||
|
|
background-color:#999999;
|
||
|
|
border-style:dashed;
|
||
|
|
border-color:#999999;
|
||
|
|
border-width:1px;
|
||
|
|
color:white;
|
||
|
|
}
|
||
|
|
.topMenu:hover {
|
||
|
|
background-color:#999999;
|
||
|
|
border-style:dashed;
|
||
|
|
border-color:#999999;
|
||
|
|
border-width:1px;
|
||
|
|
color:white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.menuitem {
|
||
|
|
border-style:solid;
|
||
|
|
border-color:#F5F5F5;
|
||
|
|
border-width:1px; /*color must be the same as background color (which is inherited from .menudrop) */
|
||
|
|
text-align:justify;
|
||
|
|
}
|
||
|
|
.menuitem:focus {
|
||
|
|
color:white;
|
||
|
|
background-color:#999999;
|
||
|
|
border-style:dashed;
|
||
|
|
border-color:#999999;
|
||
|
|
border-width:1px;
|
||
|
|
|
||
|
|
}
|
||
|
|
.menuitem:hover {
|
||
|
|
background-color:#999999;
|
||
|
|
border-style:dashed;
|
||
|
|
border-color:#999999;
|
||
|
|
border-width:1px;
|
||
|
|
color:white;
|
||
|
|
|
||
|
|
}
|
||
|
|
.menuitem[aria-disabled="true"] {
|
||
|
|
color:#666666;
|
||
|
|
}
|
||
|
|
.rowSelected {
|
||
|
|
background-color:#66CCCC;
|
||
|
|
|
||
|
|
}
|
||
|
|
td[aria-readonly="true"] {
|
||
|
|
color:#666666;
|
||
|
|
}
|
||
|
|
.cellFocusSelect {
|
||
|
|
background-color:#CCCCCC;
|
||
|
|
outline: 1px dashed green;
|
||
|
|
|
||
|
|
}
|
||
|
|
.cellFocus {
|
||
|
|
outline: 1px dashed green;
|
||
|
|
}
|
||
|
|
|
||
|
|
.cellSelect {
|
||
|
|
background-color:#DCDCDC;
|
||
|
|
}
|
||
|
|
.cellBlur {
|
||
|
|
border-width:1px ;
|
||
|
|
border-style:dotted;
|
||
|
|
border-color:#999999;
|
||
|
|
background-color:#F5F5F5;
|
||
|
|
}
|
||
|
|
table, th, td {
|
||
|
|
|
||
|
|
border-width:2px;
|
||
|
|
border-style:groove;
|
||
|
|
border-color:#CCCCCC;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.action {
|
||
|
|
color:#0000FF;
|
||
|
|
text-decoration:underline;
|
||
|
|
}
|
||
|
|
a:visited {
|
||
|
|
color:#000066;
|
||
|
|
}
|
||
|
|
|
||
|
|
.leftCellHi {
|
||
|
|
border-left:2px dotted #00FF00;
|
||
|
|
border-top:2px dotted #00FF00;
|
||
|
|
border-bottom:2px dotted #00FF00;
|
||
|
|
}
|
||
|
|
.middleCellHi {
|
||
|
|
border-top:2px dotted #00FF00;
|
||
|
|
border-bottom:2px dotted #00FF00;
|
||
|
|
}
|
||
|
|
|
||
|
|
.rightCellHi {
|
||
|
|
border-right:2px dotted #00FF00;
|
||
|
|
border-top:2px dotted #00FF00;
|
||
|
|
border-bottom:2px dotted #00FF00;
|
||
|
|
}
|
||
|
|
.nosize {
|
||
|
|
position:absolute;
|
||
|
|
width:0px;
|
||
|
|
height:0px;
|
||
|
|
overflow:hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<style type="text/css"></style></head>
|
||
|
|
<body onkeydown="topMenu.doMenu(event);" role="application" onload="gFocusItem = document.getElementById('table2'); setTimeout('doFocus();',0); ">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<h1>Accessible Widgets </h1>
|
||
|
|
|
||
|
|
|
||
|
|
<div style="position:absolute;z-index:2;">
|
||
|
|
<div id="theMenuBar" class="menubar" role="menubar" onkeydown="return topMenu.doNavigation(event);" tabindex="-1">
|
||
|
|
<div class="menu" id="edit" onclick="topMenu.showMenu(event, this.id, false);" onkeydown="if (event.keyCode == 13 ) {topMenu.showMenu(event, this.id, true);}" onmouseover="topMenu.showMenu(event,this.id,false);" onmouseout="topMenu.hideMenu(event);">
|
||
|
|
<div tabindex="-1" role="menuitem" aria-haspopup="true" id="edittop" class="topMenu">Edit</div>
|
||
|
|
<div class="menudrop" role="menu" id="editItems">
|
||
|
|
<div id="cut" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'do Cut');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'do cut');}" onmouseover="topMenu.focusItem(event,0,0);">Cut</div>
|
||
|
|
<div id="copy" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'do Copy');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'do copy');}" onmouseover="topMenu.focusItem(event,0,1);">Copy</div>
|
||
|
|
<div id="paste" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'do Paste');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'do paste');}" onmouseover="topMenu.focusItem(event,0,1);">Paste</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menu" id="2" onclick="topMenu.showMenu(event, this.id,false);" onkeydown="if (event.keyCode == 13 ) {topMenu.showMenu(event, this.id, true);}" onmouseover="topMenu.showMenu(event,this.id,false);" onmouseout="topMenu.hideMenu(event);">
|
||
|
|
<div tabindex="-1" role="menuitem" aria-haspopup="true" id="2top" class="topMenu">View</div>
|
||
|
|
<div class="menudrop" role="menu" id="2Items" style="display:none;">
|
||
|
|
<div tabindex="-1" role="menuitem" aria-haspopup="true" id="2.1sub" class="menuitem" onkeydown="if (event.keyCode == 13 ) {return topMenu.showSubMenu(event,this.id);}">Themes ></div>
|
||
|
|
<div class="menusub" role="menu" id="2.1subItems" style="display:none;">
|
||
|
|
<div id="2.1.1" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doActionColor(event,'grey');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionColor(event,'grey');}">Basic Grey </div>
|
||
|
|
<div id="2.1.2" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doActionColor(event,'blues');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionColor(event,'blues');}">The Blues</div>
|
||
|
|
<div id="2.1.3" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doActionColor(event,'green');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionColor(event,'green');}">Garden</div>
|
||
|
|
<div id="2.1.4" tabindex="-1" role="menuitem" class="menuitem" aria-disabled="true" onclick="return topMenu.doAlert(event,this,'do Item4');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionColor(event,'pink');}">In the Pink</div>
|
||
|
|
<div id="2.1.5" tabindex="-1" role="menuitem" class="menuitem" oonclick="return topMenu.doActionColor(event,'rose');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionColor(event,'rose');}">Rose </div>
|
||
|
|
</div><!-- end themes sub menu items -->
|
||
|
|
<div tabindex="-1" role="menuitem" class="menuitem" id="2.2">Hide</div>
|
||
|
|
<div tabindex="-1" role="menuitem" class="menuitem" id="2.3">Show</div>
|
||
|
|
<div tabindex="-1" role="menuitem" aria-haspopup="true" id="2.4sub" class="menuitem" onclick="return topMenu.showSubMenu(event,this.id);" onkeydown="if (event.keyCode == 13 ) {return topMenu.showSubMenu(event,this.id);}">More ></div>
|
||
|
|
<!--<div tabindex="-1" role="menuitem" class="menuitem" id="2.4sub" onclick="return topMenu.showSubMenu(event,this.id);" onkeydown="if (event.keyCode == 13 ) {return topMenu.showSubMenu(event,this.id);}">More ></div> -->
|
||
|
|
<div class="menusub" role="menu" id="2.4subItems" style="display:none">
|
||
|
|
<div id="2.4.1" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'do Something 1');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'doSomething 1');}">one </div>
|
||
|
|
<div id="2.4.2" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'do Something 2');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'doSomething 2');}">two</div>
|
||
|
|
</div> <!-- end of more sub menu -->
|
||
|
|
</div><!-- end View drop menu -->
|
||
|
|
</div>
|
||
|
|
<div class="menu" id="3" onclick="topMenu.showMenu(event, this.id,false);" onkeydown="if (event.keyCode == 13 ) {topMenu.showMenu(event, this.id, true);}" onmouseover="topMenu.showMenu(event,this.id,false);" onmouseout="topMenu.hideMenu(event);">
|
||
|
|
<div tabindex="-1" role="menuitem" aria-haspopup="true" id="3top" class="topMenu">Tools</div>
|
||
|
|
<div class="menudrop" role="menu" id="3Items" style="display:none;">
|
||
|
|
<div id="3.1" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'do spell check');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'do spell check');}">Spelling...</div>
|
||
|
|
<div id="3.2" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'do error checking');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'do error checking');}">Error Checking...</div>
|
||
|
|
<div id="3.3sub" tabindex="-1" role="menuitem" aria-haspopup="true" class="menuitem" onclick="return topMenu.showSubMenu(event,this.id);;" onkeydown="if (event.keyCode == 13) {return topMenu.showSubMenu(event,this.id);}">Show Rows ></div>
|
||
|
|
<div class="menusub" role="menu" id="3.3subItems" style="display:none">
|
||
|
|
<div id="3.3.1" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'highlight even rows');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'highlight even rows');}">even</div>
|
||
|
|
<div id="3.3.2" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'highlight odd rows');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'hghlight odd rows');}">odd</div>
|
||
|
|
<div id="3.3.3" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'highlight all rows');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'highlight all rows');}">all</div>
|
||
|
|
</div> <!-- end of more sub menu -->
|
||
|
|
<div id="3.4" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'do Options');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'do Options');}">Options... </div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menu" id="four" onclick="topMenu.showMenu(event, this.id,false);" onkeydown="if (event.keyCode == 13 ) {topMenu.showMenu(event, this.id, true);}" onmouseover="topMenu.showMenu(event,this.id,false);" onmouseout="topMenu.hideMenu(event);">
|
||
|
|
<div tabindex="-1" role="menuitem" aria-haspopup="true" id="fourtop" class="topMenu">Totals</div>
|
||
|
|
<div class="menudrop" role="menu" id="fourItems" style="display:none;">
|
||
|
|
<div id="4.1" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doActionTotal(event,'table2','lodging');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionTotal(event,'table2','lodging');}">Lodging </div>
|
||
|
|
<div id="4.2" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doActionTotal(event,'table2','breakfast');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionTotal(event,'table2','breakfast');}">Breakfast </div>
|
||
|
|
<div id="4.3" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doActionTotal(event,'table2','lunch');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionTotal(event,'table2','lunch');}">Lunch </div>
|
||
|
|
<div id="4.4" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doActionTotal(event,'table2','dinner');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionTotal(event,'table2','dinner');}">Dinner </div>
|
||
|
|
<div id="4.5" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doActionTotal(event,'table2','date');" onkeydown="if (event.keyCode == 13) {return topMenu.doActionTotal(event,'table2','date');}">By Date </div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="menu" id="five" onclick="topMenu.showMenu(event, this.id,false);" onkeydown="if (event.keyCode == 13 ) {topMenu.showMenu(event, this.id, true);}" onmouseover="topMenu.showMenu(event,this.id,false);" onmouseout="topMenu.hideMenu(event);">
|
||
|
|
<div tabindex="-1" role="menuitem" aria-haspopup="true" id="fivetop" class="topMenu">Help</div>
|
||
|
|
<div class="menudrop" role="menu" id="fiveItems" style="display:none;">
|
||
|
|
<div id="5.1" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'Show Help Index');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'Show Help index');}">Help Index</div>
|
||
|
|
<div id="5.2" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'Show navigation help');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'Show navigation help');}">Navigation Help</div>
|
||
|
|
<div id="5.3" tabindex="-1" role="menuitem" class="menuitem" onclick="return topMenu.doAlert(event,this,'DHTML roadmap Example, March 2005');" onkeydown="if (event.keyCode == 13) {topMenu.doAlert(event,this,'DHTML Roadmap example, March 2005');}">About</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
<div style="height:20em; overflow:auto;">
|
||
|
|
<table tabindex="0" border="2" cellspacing="0" id="table2" role="grid" onkeydown=" return doTableKeys(event);" onfocus="setCell(this.id);">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th tabindex="-1" role="columnheader" id="colhead1" style="width:6em" onclick="doClick(event,0,0);" onkeydown="if (event.keyCode==13) {return doLink('aEntry');}" class="cellFocusSelect"><span class="action" title="Sort by Entry #" onclick="alert('sort column on click');" tabindex="-1" id="aEntry">Entry #</span></th>
|
||
|
|
<th tabindex="-1" role="columnheader" id="colhead2" onclick="doClick(event,0,1);" onkeydown="if (event.keyCode==13) {return doLink('aDate');}" style="width:10em"><span class="action" title="Sort by Date" onclick="alert('sort column on click');" tabindex="-1" id="aDate">Date</span></th>
|
||
|
|
<th tabindex="-1" role="columnheader" id="colhead3" onclick="doClick(event,0,2);" onkeydown="if (event.keyCode==13) {return doLink('aExpense');}" style="width:20em"><span class="action" title="Sort by Expense Name" onclick="alert('sort column on click');" tabindex="-1" id="aExpense">Expense</span></th>
|
||
|
|
<th tabindex="-1" role="columnheader" id="colhead4" onclick="doClick(event,0,3);" onkeydown="if (event.keyCode==13) {return doLink('aAmount');}" style="width:8em"><span class="action" title="Sort by Amount" onclick="alert('sort column on click');" tabindex="-1" id="aAmount">Amount</span></th>
|
||
|
|
<th tabindex="-1" role="columnheader" id="colhead5" onclick="doClick(event,0,4);" onkeydown="if (event.keyCode==13) {return doLink('aMerchant');}" style="width:15em"><span class="action" title="Sort by Merchant" onclick="alert('sort column on click');" tabindex="-1" id="aMerchant">Merchant</span></th>
|
||
|
|
<th tabindex="-1" role="columnheader" id="colhead6" style="width:8em"><span>Type</span></th>
|
||
|
|
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,1,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">1</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" id="testCell" onclick="doClick(event,1,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}">03/14/05</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,1,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}">Conference Fee</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,1,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}">$449.00</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,1,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}">CSUN Center on Disability</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,1,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}">credit</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,2,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">2</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,2,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}">03/15/05</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,2,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}">lodging</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,2,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}">$119.00</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,2,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}">LAX Hilton</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,2,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}">credit</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,3,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">3</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,3,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}">03/15/05</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,3,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}">dinner</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,3,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}">$24.00</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,3,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}">Chili's</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,3,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}">cash</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,4,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">4</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,4,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}">03/16/05</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,4,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}">lodging</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,4,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}">$119.00</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,4,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}">LAX Hilton</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,4,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}">credit</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,5,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">5</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,5,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}">03/16/05</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,5,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}">breakfast</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,5,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}">$6.50</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,5,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}">Starbucks</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,5,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}">cash</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,6,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">6</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,6,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}">03/16/05</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,6,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}">lunch</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,6,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}">$9.35</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,6,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}">Super Sub Stop</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,6,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}">cash</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,7,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">7</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,7,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}">03/16/05</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,7,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}">dinner</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,7,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}">$40.00</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,7,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}">Davio's</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,7,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}">credit</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,8,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">8</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,8,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,8,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,8,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,8,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,8,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,9,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">9</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,9,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,9,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,9,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,9,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,9,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,10,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">10</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,10,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,10,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,10,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,10,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,10,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,11,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">11</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,11,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,11,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,11,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,11,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,11,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,12,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">12</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,12,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,12,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,12,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,12,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,12,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,13,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">13</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,13,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,13,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,13,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,13,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,13,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,14,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">14</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,14,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,14,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,14,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,14,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,14,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,15,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">15</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,15,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,15,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,15,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,15,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,15,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,16,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">16</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,16,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,16,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,16,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,16,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,16,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,17,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">17</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,17,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,17,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,17,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,17,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,17,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td tabindex="-1" role="rowheader" aria-readonly="true" onclick="doClick(event,18,0);" ondblclick="doEdit(event,this,0);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,0);return false;}">18</td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,18,1);" ondblclick="doEdit(event,this,1);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,1);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,18,2);" ondblclick="doEdit(event,this,2);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,2);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,18,3);" ondblclick="doEdit(event,this,3);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,3);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,18,4);" ondblclick="doEdit(event,this,4);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,4);return false;}"></td>
|
||
|
|
<td tabindex="-1" role="gridcell" aria-selected="false" onclick="doClick(event,18,5);" ondblclick="doEdit(event,this,5);" onkeydown="if (event.keyCode == 13) { doEdit(event,this,5);return false;}"></td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|