// copyright ea.com 2007
// This js allows the use of 'progressive enhancement' markup using class attributes rather than inline javascript.
// @see http://domscripting.com/presentations/xtech2006/
// This markup2.js must be included in your HEAD tag, your BODY tag must contain:
//
// available markup:
//
// --- adds javascript to prevent multiple submits of a form.
// link text
// link text
// --- sets the focus to this field on loading.
// NOTE, please update /test/markup2.jsp with your test cases.
// define the list of tags to markup and deligate.
var Markup = {}
Markup.initMarkup = function ()
{
if (Markup.initialized) {
return;
}
// setup variables.
Markup.submitted = false; // for "singleClick"
Markup.win = null;
// iterate the DOM and find our candidates.
if ( document.getElementsByTagName )
{
if ( document.forms != null && document.forms.length > 0 )
{
Markup.markupSubmits( document.getElementsByTagName("img") );
}
Markup.markupCheckbox( document.getElementsByTagName("input") );
Markup.markupFocus( document.getElementsByTagName("input") );
Markup.markupPopups( document.getElementsByTagName("a") );
}
//start mouseovers
Markup.imgOvers();
Markup.initialized = true;
}
// to use this, you need a hidden input in the form with the img name + Hidden, such as 'buttonHidden' in the example.
// NOTE: it is safer to define the name of the form you wish to submit, by appending it after the singleClick class,
// such as singleClick|formName, otherwise the first form in the document will be submitted.
// Example:
//
// OR
//
Markup.markupSubmits = function( inputs )
{
for (var i=0; i < inputs.length; i++)
{
if ( inputs[i].className.substr(0,11) == "singleClick" )
{
// if the className is longer than 11, the form name was defined
if ( inputs[i].className.length > 11 )
{
var formName = inputs[i].className.split("|", 2)[1];
inputs[i].onclick = function()
{
Markup.submitForm(this, formName);
return false;
}
}
// else assume only one form in document.
else
{
inputs[i].onclick = function()
{
// use the default form (document.getForm[0])
Markup.submitForm(this, null);
return false;
};
}
}
}
}
// to use this, you need to set your checkbox input with a name. you need a hidden input in the form with the same
// name suffixed with "_hidden". You also need a block of logic to query the form bean and set the checked status:
// @see Jakarta Struts Cookbook 3.12.
// Example: (NOTE: pay attention to the closing tag, the logic tag is inside the input tag.
// checked>
//
// REMEMBER: check for request.getParameter("remember_password"), not the actionForm.
Markup.markupCheckbox = function( inputs )
{
for (var i=0; i < inputs.length; i++)
{
if (inputs[i].className == "checkboxValue")
{
inputs[i].onclick = function()
{
document.getElementsByName(this.name + '_hidden')[0].value = this.checked;
};
}
}
}
// to use this, add the class 'loadFocus' to an input field. you need to define the id attribute.
// Example 1:
//
// Example 2:
//
//
Markup.markupFocus = function( inputs )
{
for (var i=0; i < inputs.length; i++)
{
if (inputs[i].className == "loadFocus")
{
inputs[i].focus();
}
}
}
// to use this, add the class 'popup' to your anchor tag. It supports arguments to
// Example 1: (define the Name, Width, Height, Scrollbars, Resizable)
// link text
// Example 2: (default popup window)
// link text
Markup.markupPopups = function( inputs )
{
for (var i=0; i < inputs.length; i++)
{
if ( inputs[i].className != null && inputs[i].className.length >= 5 )
{
if ( inputs[i].className.substr(0,5) == "popup" )
{
// if the className is longer than 5, use attributes
if ( inputs[i].className.length > 5 )
{
inputs[i].popupargs = inputs[i].className.split("|", 6);
if (inputs[i].popupargs[5] == null || inputs[i].popupargs[5] == "")
{
inputs[i].popupargs[5] = "no";
}
inputs[i].onclick = function()
{
Markup.openWin(this.href, this.popupargs[1], this.popupargs[2], this.popupargs[3], this.popupargs[4], this.popupargs[5]);
return false;
};
}
// else use basic popup
else
{
inputs[i].onclick = function()
{
Markup.openWin(this.href,'PopUpPage','400','300','yes','no');
return false;
};
}
}
}
}
}
// used by the 'singleClick' markup to submit the form.
Markup.submitForm = function( item, formName )
{
if ( !Markup.submitted )
{
document.getElementsByName(item.name + "Hidden")[0].value = "true";
if ( formName == null )
{
document.forms[0].submit();
}
else
{
var form= document.getElementsByName( formName )[0];
if ( form == null )
{
document.forms[0].submit();
}
else
{
form.submit();
}
}
Markup.submitted = true;
}
}
// used by the 'popup' markup
// popup window.... right in the middle!
Markup.openWin = function(url,name,w,h,scroll,resizable){
var LeftPosition = (screen.width) ? (screen.width - w) / 2 : 0; // this...
var TopPosition = (screen.height) ? (screen.height - h) / 2 : 0; // ...and this is for centering the popup on your screen
var settings = 'height=' + h + ',width=' + w + ',top=' + TopPosition + ',left=' + LeftPosition + ',scrollbars=' + scroll + ',resizable=' + resizable;
Markup.win = window.open(url,name,settings)
}
// to use imgOvers()...
//
// make sure your hover image is named image-over.gif
// jsainz@ea.com 2007-03-02
Markup.imgOvers = function() {
if (!document.getElementById) return
var aPreLoad = new Array();
var sTempSrc;
var aInputs = document.getElementsByTagName("input");
var aImg = document.getElementsByTagName('img');
var aImages = new Array();
for(var i = 0; i < aInputs.length; i++) {
aImages[i] = aInputs.item(i);
}
for(var i = 0; i < aImg.length; i++) {
aImages[i + aInputs.length] = aImg.item(i);
}
for (var i = 0; i < aImages.length; i++) {
if (aImages[i].className == 'imgover') {
var src = aImages[i].getAttribute('src');
var ftype = src.substring(src.lastIndexOf('.'), src.length);
var hsrc = src.replace(ftype, '-over'+ftype);
aImages[i].setAttribute('hsrc', hsrc);
aPreLoad[i] = new Image();
aPreLoad[i].src = hsrc;
aImages[i].onmouseover = function() {
sTempSrc = this.getAttribute('src');
this.setAttribute('src', this.getAttribute('hsrc'));
}
aImages[i].onmouseout = function() {
if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('-over'+ftype, ftype);
this.setAttribute('src', sTempSrc);
}
}
}
}
// make sure your hover image is named image-over.gif
// jsainz@ea.com 2007-03-02
Markup.imgOvers = function() {
if (!document.getElementById) return
var aPreLoad = new Array();
var sTempSrc;
var aInputs = document.getElementsByTagName("input");
var aImg = document.getElementsByTagName('img');
var aImages = new Array();
for(var i = 0; i < aInputs.length; i++) {
aImages[i] = aInputs.item(i);
}
for(var i = 0; i < aImg.length; i++) {
aImages[i + aInputs.length] = aImg.item(i);
}
for (var i = 0; i < aImages.length; i++) {
if (aImages[i].className == 'imgover') {
var src = aImages[i].getAttribute('src');
var ftype = src.substring(src.lastIndexOf('.'), src.length);
var hsrc = src.replace(ftype, '-over'+ftype);
aImages[i].setAttribute('hsrc', hsrc);
aPreLoad[i] = new Image();
aPreLoad[i].src = hsrc;
aImages[i].onmouseover = function() {
sTempSrc = this.getAttribute('src');
this.setAttribute('src', this.getAttribute('hsrc'));
}
aImages[i].onmouseout = function() {
if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('-over'+ftype, ftype);
this.setAttribute('src', sTempSrc);
}
}
}
}