// JavaScript Document
//
// function to manage mouse events (mouseover/mouseout/mousedown) from page Elements - buttons/images
// all buttons/images except those:
// associated with a shopping list -
// see shoppinglistMouseEventManager(event) in ShoppingList.js
// in a table -
// see TableMouseEventManager (mousedown event) & ColorTableElements (mouseover/mouseout events) for table events
//
function MouseEventManager(event)
{
// retrive the source object that created the event for the different browsers
// srcElement - used by IE
// target - used by other browsers
if (event.srcElement)
{
var mySourceElement = event.srcElement;
}
else if (event.target)
{
var mySourceElement = event.target;
}
else
{
alert("Unable to detect mouse event source - probably an unsupported browser");
return;
}
//
// mouse events that invoke response --
// case statement for each mouse event
// case statements for element types that respond to the event
// uses element id(buttonType) & name propetries to determine the element information
// headerimagebutton - buttons from HeaderFrame.php; sweets button in CatagoryFrame.php
// catagoriesimagebutton - new products button from CatagoryFrame.php
//
var buttonType = mySourceElement.id;
switch (event.type)
{
case "mouseover":
{
switch (buttonType)
{
case "headerimagebutton":
{
mySourceElement.style.cursor = "pointer";
mySourceElement.src = "Images/Buttons/"
+ mySourceElement.name + "Over.jpg";
break;
} // case "headerimagebutton" :
case "catagoriesimagebutton":
{
mySourceElement.style.cursor = "pointer";
mySourceElement.src = "Images/Buttons/"
+ mySourceElement.name + "Over.gif";
break;
} // case "catagoriesimagebutton" :
//
// add case statements for new element buttonTypes that respond to the mouseover event here
//
} // switch (buttonType)
return true;
break;
} // case "mouseover" :
case "mouseout":
{
switch (buttonType)
{
case "headerimagebutton":
{
mySourceElement.style.cursor = "default";
mySourceElement.src = "Images/Buttons/"
+ mySourceElement.name + ".jpg";
break;
} // case "headerimagebutton" :
case "catagoriesimagebutton":
{
mySourceElement.style.cursor = "default";
mySourceElement.src = "Images/Buttons/"
+ mySourceElement.name + ".gif";
break;
}
//
// add case statements for new element buttonTypes that respond to the mouseout event here
//
} // switch (buttonType)
return true;
break;
} // case "mouseout" :
case "mousedown":
{
switch (buttonType)
{
case "headerimagebutton":
{
parent.frames['ProductFrame'].location = 'ProductFrame.php?ProdCat='
+ mySourceElement.name
+ '&ProdId='
+ "XXX"
+ '&BType=' + buttonType;
break;
} // case "headerimagebutton" :
case "catagoriesimagebutton":
{
parent.frames['ProductFrame'].location = 'ProductFrame.php?ProdCat='
+ mySourceElement.name
+ '&ProdId='
+ "XXX"
+ '&BType='
+ mySourceElement.id;
break;
} // case "catagoriesimagebutton" :
//
// add case statements for new element buttonTypes that respond to the mousedown event here
//
} // switch (buttonType)
return true;
break;
} // case "mousedown" :
//
// add case statements for new mouse events
//
} // switch (event.type)
} // function MouseEventManager(event)
//
// functions finds the element specified by tagNode if it is a parent of the
// startNode
// looks all the way to tag
//
function GetParentElement(startnode, tagnode)
{
var currentelement = startnode;
while (currentelement.nodeName != "BODY")
{
if (currentelement.nodeName != tagnode)
{
currentelement = currentelement.parentNode;
} else
{
return currentelement;
}
}
return null;
}
//
// function displays all siblings of currentNode
// used for degugging event problems
//
function ShowNodeSiblings(currentNode)
{
var str = "Node " + currentNode.nodeName + " has "
+ currentNode.childNodes.length + " siblings: ";
for (i = 0; i <= currentNode.childNodes.length - 1; i++)
{
str = str + " - " + currentNode.childNodes[i].nodeName;
}
alert(str);
}
//
// function colours the specified elements in a table cell and changes the cursor
// myEvent - event source object associated with the event
//
// StyleString - list of style values to change
// - string format == element name:value,element name:value,.......
// - element name - style element to change value must be a valid style value associated with the element name
// - null will leave all style elements unchanged
// - special case for ![]() tag -- allows to change image for mouse events
// - format == IMG_imagename_element name:value
// - if element name = scr then the value must be a valid url
//
// - cursorStyle - allowed cursor value
// - null will leave cursor unchanged from current state
//
function ColorTableElements(myEvent, styleString, cursorStyle)
{
//
// retrive the source object that created the event for the different browsers
// srcElement - used by IE
// target - used by other browsers
//
if (myEvent.srcElement)
{
var mySourceElement = myEvent.srcElement;
}
else if (myEvent.target)
{
var mySourceElement = myEvent.target;
}
else
{
alert("Unable to detect mouse event source - probably an unsupported browser");
return;
}
// ignore if the event was on the table -- cannot tell which cell it is in
if (mySourceElement.nodeName != "TABLE")
{
// move to | tag associated with the cell --- will be higher in the
// DOM tree
mySourceElement = GetParentElement(mySourceElement, "TD");
if (mySourceElement != null) // continue if | tag has been found
{
// change cursor style - if specified
if (cursorStyle != "")
{
mySourceElement.style.cursor = cursorStyle;
} //if (cursorStyle != "")
// change style elements - if specified
if (styleString != "")
{
// retrieve individual elements and values from the concatenated
// commer separated string
var elementArray = styleString.split(",");
// for each style element - value pair
for (counter in elementArray)
{
// deal with ![]() style element
if (elementArray[counter].substr(0, 4) == "IMG_")
{
var imageName = "";
var imagestyleElement = "";
var imagestyleValue = "";
// retrieve individual elements and values from the
// concatenated _ separated string
var currentElement = elementArray[counter].split("_");
// ignore the first member of the array as it contains
// "IMG"
imageName = currentElement[1];
imagestyleElement = currentElement[2];
// retrieve individual elements and values from the
// concatenated : separated string
currentElement = imagestyleElement.split(":");
imagestyleElement = currentElement[0];
imagestyleValue = currentElement[1];
// retrieve all ![]() tags within the current | tag
var imageTags = mySourceElement.getElementsByTagName('IMG');
// for each ![]() found set elements
for (counter2 in imageTags)
{
if (counter2 != "length")
{
// ensure we are working on the correct ![]()
// tag -- could be more than 1 in a cell
if (imageTags[counter2].name == imageName)
{
// change to a new image
if (imagestyleElement == "src")
{
imageTags[counter2].src = imagestyleValue;
} else
{
// change other image style values
imageTags[counter2].style[imagestyleElement] = imagestyleValue;
}
}
}
}
} //if (elementArray[counter].substr(0,4) == "IMG_")
else
{
// deal with other style elements
var currentElement = elementArray[counter].split(":");
mySourceElement.style[currentElement[0]] = currentElement[1];
} //if (elementArray[counter].substr(0,4) == "IMG_")
} //for (counter in elementArray)
} //if (styleString != "")
} //if mySourceElement != null)
} //(mySourceElement.nodeName != "TABLE")
} //function ColorTableElements(myEvent, styleString, cursorStyle)
//
// function to manage mouse events from table Elements (mousedown only - mouseover/mouseout managed from ColorTableElements)
//
function TableMouseEventManager(event)
{
var Id = "";
var buttonType = "";
var productCatagory = "";
var productItem = "";
//
// retrive the source object that created the event for the different browsers
// srcElement - used by IE
// target - used by other browsers
//
if (event.srcElement)
{
var mySourceElement = event.srcElement;
}
else if (event.target)
{
var mySourceElement = event.target;
}
else
{
alert("Unable to detect mouse event source - probably an unsupported browser");
return;
}
// mouse events that invoke response -- case for each event type
// for each mouse event type
// element ID's you want a response to occur on (buttonType) -- case for each buttonType
// catagoryitem - product catagory table entries from CatagoryFrame.php
// productcatagoryitem - product catagory items from ProductFrame.php
// Sweetsimagebutton - sweets catagories from Sweets.php
// sweetproductcatagoryitem - swwwts catagory items from SweetsFrame.php
// Note: as TableMouseEventManager is only currently called from a mousedown event on the forms
// the case statement isnt necessary
// added to furure prooof
//
switch (event.type)
{
case "mousedown":
{
//
// breakup mySourceElement.id
// buttonType:productCatagory:productItem
//
Id = mySourceElement.id;
var elementArray = Id.split(":");
for (counter in elementArray)
{
if (counter == 0)
{
buttonType = elementArray[counter];
}
if (counter == 1)
{
productCatagory = elementArray[counter];
}
if (counter == 2)
{
productItem = elementArray[counter];
}
} // for (counter in elementArray)
switch (buttonType)
{
case "catagoryitem":
{
parent.frames['ProductFrame'].location = 'ProductFrame.php?ProdCat='
+ productCatagory
+ '&ProdId='
+ productItem
+ '&BType='
+ buttonType;
break;
}
case "productcatagoryitem":
{
parent.frames['ProductFrame'].location = 'ProductItem.php?ProdCat='
+ productCatagory + '&ProdId=' + productItem + '&BType='
+ buttonType;
break;
}
case "Sweetsimagebutton":
{
parent.frames['ProductFrame'].location = 'SweetsFrame.php?ProdCat='
+ productCatagory + '&ProdId=' + productItem + '&BType='
+ buttonType;
break;
}
case "sweetproductcatagoryitem":
{
parent.frames['ProductFrame'].location = 'SweetProductItem.php?ProdCat='
+ productCatagory + '&ProdId=' + productItem + '&BType='
+ buttonType;
break;
}
//
// add case statements for new element ID that resopnd
// to the mousedown event here
//
} //switch (buttonType)
return true;
break;
} //case "mousedown":
//
// add case statements for new mouse events here
//
} //switch (event.type)
} //function TableMouseEventManager(event)
|