/*******************************************************************************
* reportlistcl.js
*
* HTML Rendering of the ReportList
*
* Copyright: Copyright (c) 2008
* Company: Neolane
*
* $Author$
* $Revision$
******************************************************************************/
/** Constructor
*
* @htmlParent HTML element in the document where to render the list.
* @data Data to display in an XML format.
* @style Cell style definitions. */
function ReportList(htmlParent, data, styles, defaultFontSize)
{
this.data = data
this.htmlTable = htmlParent
this.styles = new Array()
this.rowNum = 0 // used by css generation (even odd classes)
// compile styles
var childNode = styles.documentElement.firstChild
while ( childNode != null )
{
if ( childNode.nodeType == XML.ELEMENT_NODE )
this.compileStyle(childNode, defaultFontSize)
childNode = childNode.nextSibling
}
}
ReportList.prototype.COLORS = new Array("#3B87A2", "#FF8012", "#8CA23B", "#A23B5E", "#004A62",
"#FFCCA0", "#C75400", "#CAD4A5", "#A5C8D4", "#6D0026",
"#D4A5B4", "#4F6400")
ReportList.prototype.IMG_PLUS = "/xtk/img/plus.png"
ReportList.prototype.IMG_MINUS = "/xtk/img/minus.png"
/** Compile a style to create a template of the | .
*
* @style the XML definition of the style. The schema of
* this element is the one defined for the flat report
* format:
*
*
*
* @see https://wiki.neolane.net/wiki/Reporting_5.00#srcSchema_like_xml_structure. */
ReportList.prototype.compileStyle = function(style, defaultFontSize)
{
var td = document.createElement("td")
var compiledStyle = compileStyle(style, td, defaultFontSize)
compiledStyle.td = td
this.styles.push(compiledStyle)
}
/** Render the list as an HTML table. */
ReportList.prototype.render = function()
{
// clear the previous rendering of the table
while ( this.htmlTable.firstChild != null )
this.htmlTable.removeChild(this.htmlTable.firstChild)
var htmlBody = document.createElement("tbody")
this.renderNode(this.data, htmlBody)
this.htmlTable.appendChild(htmlBody)
}
/** Click on a cell */
ReportList.prototype.onCellClick = function(ctx, action, target, transition, option, param, e)
{
PerformClickAction(ctx, action, target, transition, option, param, e)
}
/** Generate a function for a clickable cell
*
* @object the list.
* @ctx an array of value to set in the context before executing the action.
* @action action to perform (url, next, previous, refresh, transition)
* @target window target.
* @transition name of transition if action parameter is 'transition'.
* @href URL field.
* @param URL parameters. */
ReportList.prototype.makeOnClickEvent = function(object, ctx, action, target, transition, href, param)
{
return function(e)
{
return ReportList.prototype.onCellClick.call(object, ctx, action, target, transition, href, param, e)
}
}
/** Render a node the of the list.
*
* @node XML definition of the node.
* @htmlParent HTML element in the document where to render the node. */
ReportList.prototype.renderNode = function(aData, htmlParent)
{
// array for headers whose rows should be collapsed by default
var groupsToCollapse = new Array()
for( var iRowIndex = 0 ; iRowIndex < aData.length ; iRowIndex++ )
{
var row = aData[iRowIndex]
trNode = document.createElement("tr")
trNode.className = row.t //type of the row (header, footer, row) + level
trNode.className += ++this.rowNum % 2 == 0 ? " even" : " odd"
htmlParent.appendChild(trNode)
for( var iCellIndex = 0 ; iCellIndex < row.d.length ; iCellIndex++ )
{
var cell = row.d[iCellIndex]
var value = null
// cell representation in HTML (TD) with its colspan and etc.:
var htmlNode
// TD which contains the cell's elements
var htmlNodeTxt
if ( typeof cell != "undefined" && typeof cell.s != "undefined" )
{
var rawValue = cell.v
var style = this.styles[cell.s]
// Set htmlNode with this cell style
htmlNode = style.td.cloneNode(true)
// htmlNodeTxt is htmlNode by default
htmlNodeTxt = htmlNode
// Add an image for the collapsing of inner rows
var nextRow = aData[iRowIndex+1]
if( trNode.className.indexOf("header") != -1 // only for header rows
&& iCellIndex == 0 // on their first cell
&& this.getLevel(trNode.className) > 0 // if their level is > 0
&& this.canBeCollapsed(nextRow != undefined ? nextRow.t : null,
this.getLevel(trNode.className)) ) // no rows to collapse ?
{
var img = document.createElement("img")
img.src = this.IMG_MINUS
img.onclick = function()
{
ReportList.prototype.toggleCollapsing(this);
}
img.className = "collapse"
// For vertical alignment, we create a new table which will contain
// the image and the text in two separate TDs.
var table = document.createElement("table")
var tbody = document.createElement("tbody")
var tr = document.createElement("tr")
// Avoid considering this tr as the parent TR of our img when
// recursing to find the parent table rows.
tr.tryAgain = true
var tdImg = document.createElement("td")
tdImg.className = "collapse"
// We set htmlNodeTxt to be our new TD so that the text will be put into it
htmlNodeTxt = style.td.cloneNode(true) // inherit the right style
// Redefine inline style for the following cases :
htmlNodeTxt.style.width = "100%"
htmlNodeTxt.className = "collapse"
htmlNodeTxt.style.border = "none"
// construct the table hierarchy
tdImg.appendChild(img)
tr.appendChild(tdImg)
tr.appendChild(htmlNodeTxt)
tbody.appendChild(tr)
table.appendChild(tbody)
htmlNode.appendChild(table)
// Register this image for collapsing if the collapsing is set
// to default for this header (cf row.c).
if( row.c )
groupsToCollapse.push(img)
}
if ( style.hideValue != true )
value = FormatHelper.format[style.format].call(this, rawValue, style)
// Clickable cells
if ( style.onclick == true )
{
var aContext = new Array()
var aParam = new Array()
var bNotClickable = false
if( typeof cell.l != "undefined" )
for( var i = 0 ; i < cell.l.length ; i++ )
{
if( cell.l[i].t == "set" )
aContext.push({"xpath" : cell.l[i].xpath, "value" : cell.l[i].v})
else if( cell.l[i].t == "param" )
aParam.push({"name" : cell.l[i].name, "value" : cell.l[i].v})
else if( cell.l[i].t == "notClickableIf" )
bNotClickable = cell.l[i].v
}
if( bNotClickable == "false" || bNotClickable == false )
htmlNodeTxt.onclick = this.makeOnClickEvent(this, aContext, style.onclickAction,
style.onclickTarget, style.onclickTransition, style.onclickOption, aParam)
else
{
if( htmlNodeTxt.firstChild != null )
// Remove "A" element
htmlNodeTxt.removeChild(htmlNodeTxt.firstChild)
}
}
// showing extra visuals
if ( style.bargraph != undefined )
{
var bargraph = style.bargraph.cloneNode(true)
var bargraphValue = Math.max(parseFloat(rawValue) * 100, 0)
if( isNaN(bargraphValue) )
bargraphValue = 0
bargraph.firstChild.firstChild.style.width = bargraphValue.toString() + "%"
htmlNodeTxt.appendChild(bargraph)
}
else if ( style.rating == true )
{
var fValue = parseFloat(rawValue)
for (var i=1; i <= style.ratingMax; i++)
{
var div = document.createElement("div")
div.className = "rating" + (fValue >= i ? "On" : "Off")
htmlNodeTxt.appendChild(div)
}
}
else if ( style.color == true && rawValue != "" && rawValue != "none" )
{
// Either our raw value is an int, and as such an index into the
// color table, or a CSS color (#A78B34, red, none, ...), in
// which case we set it directly.
var color = rawValue
if( !isNaN(color) )
{
var colorIndex = parseInt(color)
color = this.COLORS[colorIndex % this.COLORS.length]
}
var div = document.createElement("div")
div.className = "color"
// The user could have given us a bad color, in which case we
// use a color cell with a transparent background (for IE).
try
{
div.style.backgroundColor = color
}
catch(e)
{
div.style.backgroundColor = "transparent"
}
htmlNodeTxt.appendChild(div)
}
}
else
// no style defined => empty cell
htmlNode = document.createElement("td")
if ( value != null )
{
var textNode = document.createTextNode(value)
var parentNode = htmlNodeTxt || htmlNode
if ( style.onclick == true )
{
var childNode = parentNode.firstChild
while ( childNode != null && childNode.nodeName != "A" )
childNode = childNode.nextSibling
if( childNode == null )
// "A" element was removed previously, add text element
parentNode.appendChild(textNode)
else
childNode.appendChild(textNode)
}
else
parentNode.appendChild(textNode)
}
if ( typeof cell.cs != "undefined" )
htmlNode.colSpan = cell.cs
trNode.appendChild(htmlNode)
}
}
// Post process rows :
// collapse all the rows below headers registered in groupsToCollapse
for( var iRowIndex = 0 ; iRowIndex < groupsToCollapse.length ; iRowIndex++ )
this.toggleCollapsing(groupsToCollapse[iRowIndex])
}
// Retrieve the level of a row from its class
// example of a tr with a level : |