analytics/templates/ps/cogadmin/transforms/presentation/dialog.xsl

<?xml version="1.0" encoding="UTF-8"?>
<!--
    Licensed Materials - Property of IBM

    IBM Cognos Products: cogadmin

    (C) Copyright IBM Corp. 2005, 2014

    US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
-->

<!--
   Copyright (C) 2008 Cognos ULC, an IBM Company. All rights reserved.
   Cognos (R) is a trademark of Cognos ULC, (formerly Cognos Incorporated).
-->
<xsl:stylesheet version="1.0" 
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:uic="http://developer.cognos.com/schemas/uic/presentation/markup/"
	xmlns:xtsext="xalan://com.cognos.xts.ext.XTSExt" 
	exclude-result-prefixes="xsl uic xtsext">
	
	<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>


	<!-- 
		header 
		uic:title - title to be shown in the header
		uic:help - should the help link be shown
		uic:close - Should we show the 'X' in the header
			@onclick - javascript for the 'X'
		uic:description - text to be shown for the description
	-->
	<xsl:template match="uic:header">
		<div>
			<table cellpadding="1" cellspacing="0" border="0" width="100%" role="presentation">
				<xsl:choose>
					<xsl:when test="@modal">
						<script>
							<xsl:variable name="height">
								<xsl:choose>
									<xsl:when test="uic:height">
										<xsl:value-of select="uic:height"/>
									</xsl:when>
									<xsl:otherwise>
										null
									</xsl:otherwise>
								</xsl:choose>
							</xsl:variable>
							
							<xsl:variable name="width">
								<xsl:choose>
									<xsl:when test="uic:width">
										<xsl:value-of select="uic:width"/>
									</xsl:when>
									<xsl:otherwise>
										null
									</xsl:otherwise>
								</xsl:choose>
							</xsl:variable>
							
							_THIS_.afterRetrieve = function(evt) {
								_THIS_.uiDialog = showModalDialog(ui_dialog.style.BTN_OKCANCEL,_THIS_.div, '<xsl:value-of select="uic:title"/>',<xsl:value-of select="$height"/>,<xsl:value-of select="$width"/>,_THIS_);
								_THIS_.addEventListener("cognos.ui.dialog.cancel", "_THIS_.onDialogClose");
							}
							
							_THIS_.addEventListener("fragment.retrieve.after", "_THIS_.afterRetrieve");
							
							_THIS_.onDialogClose = function(evt) {
								_THIS_.removeEventListener("cognos.ui.dialog.cancel", "_THIS_.onDialogClose");
								if (evt.name == "cognos.ui.dialog.cancel") {
									raiseReloadEvent(_THIS_);
									_THIS_.uiDialog.destroy();
									return true;
								}
								_THIS_.uiDialog.destroy();
								return true;
							}
						</script>
					</xsl:when>
					<xsl:otherwise>
						<tr class="dialogHeader"> 
							<td width="100%" class="dialogHeaderTitle"><xsl:apply-templates select="uic:title"/></td>
							<xsl:if test="uic:help">
								<xsl:apply-templates select="uic:help"/>
								<td valign="middle" nowrap="" class="dialogHeaderLink">
									<a onmouseout="window.status='';return true;" onmouseover="window.status='';return true;" class="dialogHeaderLinkColor" href="javascript:help()"><xsl:value-of select="$helpLabel"/></a>
								</td>
							</xsl:if>
							<xsl:if test="uic:close">
								<td valign="middle" align="right" style="padding-right: 3px;">
									<a onmouseout="window.status='';return true;" onmouseover="window.status='';return true;" id="IDS_CLOSE" role="button">
										<xsl:if test="uic:close/@onclick != ''">
											<xsl:attribute name="onclick"><xsl:value-of select="uic:close/@onclick"/></xsl:attribute>
										</xsl:if>
										<img width="16" vspace="2" height="16" border="0" onmouseout="this.className = 'dialogClose'" onmouseover="this.className = 'dialogCloseOver'" class="dialogClose">
											<xsl:attribute name="src"><xsl:value-of select="concat($skinWebcontentPath, 'close.gif')"/></xsl:attribute>
											<xsl:attribute name="title"><xsl:value-of select="$dialogClose"/></xsl:attribute>
											<xsl:attribute name="alt"><xsl:value-of select="$dialogClose"/></xsl:attribute>
										</img>
									</a>
								</td> 
							</xsl:if>
						</tr>
					</xsl:otherwise>
				</xsl:choose>
				<xsl:if test="uic:description">
					<tr>
						<td width="100%" style="padding-left: 5px;" class="dialogHeaderText" colspan="{1 + number(uic:help) + number(uic:close)}" wrap="wrap">
							<xsl:apply-templates select="uic:description"/>
						</td>
					</tr>
				</xsl:if>
			</table>
		</div>
	</xsl:template>
	
	<!-- dialog body -->
	<xsl:template match="uic:dialogbody">
		<div class="cogstyle-dialog-body">
			<div class="cogstyle-dialog-content">
				<div><xsl:apply-templates select="uic:description"/></div>
				<xsl:apply-templates select="uic:bodycontent"/>
			</div>
			<xsl:if test="uic:commandbar">
				<div class="cogstyle-dialog-commandbar">
					<table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation">
						<tr>
							<td>
								<xsl:for-each select="uic:commandbar/uic:button">
									<input type="button" class="cogstyle-dialog-button" value="{uic:text}" onclick="{uic:onclick}"/>
								</xsl:for-each>
							</td>
						</tr>
					</table>
				</div>
			</xsl:if>
		</div>
	</xsl:template>
	
	<!-- body: deperacated, use uic:dialogbody instead-->
	<xsl:template match="uic:body">
		<div style="padding:5px;">
			<xsl:apply-templates/>
		</div>
	</xsl:template>
	
	<!-- footer: deperacated, you don't need this if you use uic:dialogbody-->
	<xsl:template match="uic:footer">
		<div class="cogstyle-dialog-commandbar">
			<table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation">
				<xsl:choose>
					<xsl:when test="@align">
						<xsl:attribute name="align"><xsl:value-of select="@align"/></xsl:attribute>
					</xsl:when>
					<xsl:otherwise>
						<xsl:attribute name="style">padding-left:10px;</xsl:attribute>				
					</xsl:otherwise>
				</xsl:choose>
				<tr>
					<xsl:for-each select="child::*">
						<td>
							<xsl:if test="position() = last()">
								<xsl:attribute name="width">100%</xsl:attribute>
							</xsl:if>
							<xsl:if test="position() &gt; 1">
								<xsl:attribute name="style">padding-left: 10px;</xsl:attribute>
							</xsl:if>
							<xsl:if test="../@align">
								<xsl:attribute name="align"><xsl:value-of select="../@align"/></xsl:attribute>
							</xsl:if>				
							<xsl:apply-templates select="."/>
						</td>
					</xsl:for-each>
				</tr>
			</table>
		</div>
	</xsl:template>	

	<!--
		uic:sideBySide - used if you want to put multiple controls on the same line
	-->
	<xsl:template match="uic:sideBySide">
		<table cellpadding="0" cellspacing="0" width="100%" role="presentation">
			<tr>
				<xsl:for-each select="child::*">
					<td>
						<xsl:if test="@width">
							<xsl:attribute name="width"><xsl:value-of select="@width"/></xsl:attribute>
						</xsl:if>
						<xsl:apply-templates select="."/>
					</td>
				</xsl:for-each>
			</tr>
		</table>
	</xsl:template>

	<!-- 
		uic:button
			generates the standard dialog button

			uic:text - text to be shown on the button
			uic:onclick - action to take when button is clicked
	-->
	<xsl:template match="uic:button">
		<!-- this comes from the HTML generated by dp:button. -->
		<table cellspacing="0" cellpadding="0" style="width: 55px; padding: 2px 10px 3px;" class="commandButton" onmousedown="this.className = 'commandButtonDown'" onmouseout="this.className = 'commandButton'" onmouseover="this.className = 'commandButtonOver'">
			<tbody>
				<tr>
					<td valign="middle" nowrap="nowrap" align="center" class="formText" onclick="{uic:onclick}" width="55">
						<!-- TODO: temp workaround since CPS puts a font-size of 80% on all tables. Need to up the font-size for the buttons -->
						<span style="font-size:120%;white-space: nowrap;"><xsl:value-of select="uic:text"/></span>
					</td>
				</tr>
			</tbody>
		</table>	
	</xsl:template>

	<!-- 
		uic:input
			 will display a label and an input under it
		
		@addSpace - if false, no spacing will be added
	-->
	<!-- todo: make this alot more generic and use table or divs for the spacing -->
	<xsl:template match="uic:input">
		<table cellspacing="0" cellpadding="1" border="0" role="presentation">
			<xsl:if test="uic:label">
				<tr>
					<td>
                        <xsl:apply-templates select="uic:label"/>
					</td>
				</tr>
			</xsl:if>
			<xsl:if test="uic:control">
				<tr>
					<td>
						<xsl:apply-templates select="uic:control"/>
					</td>	
				</tr>
			</xsl:if>
			<xsl:if test="not(@addSpace = 'false')">
				<tr>
					<td height="10px"/>
				</tr>
			</xsl:if>
		</table>
	</xsl:template>

	<!-- 
		uic:choice
			 will display a label and an input & text under it

		uic:label - label to be shown
		uic:control - the html field (usually a radiobutton)
		uic:controlContext - text of another control that will be beside the radiobutton

		@addSpace - if false, no spacing will be added
	-->
	<xsl:template match="uic:choice">
		<table cellspacing="0" cellpadding="1" border="0">
            <xsl:copy-of select="@*"/>
            <xsl:if test="not(@role) or @role = ''">
                <xsl:attribute name="role">presentation</xsl:attribute>
            </xsl:if>
			<xsl:if test="uic:label">
				<tr>
					<td colspan="2">
						<xsl:apply-templates select="uic:label"/>
					</td>
				</tr>
			</xsl:if>
			<!-- can have one label for multiple controls (i.e. radio buttons) -->
			<xsl:for-each select="uic:control">
				<tr>
					<td>
						<xsl:apply-templates/>
					</td>
					<td>
                        <xsl:choose>
                            <xsl:when test="following-sibling::*[1]/@for != ''">
                                <label for="{following-sibling::*[1]/@for}">
                                    <xsl:apply-templates select="following-sibling::*[1]"/>
	                            </label>
                            </xsl:when>
                            <xsl:otherwise>
                                <xsl:apply-templates select="following-sibling::*[1]"/>
                            </xsl:otherwise>
                        </xsl:choose>
					</td>					
				</tr>
			</xsl:for-each>
			<xsl:if test="not(@addSpace = 'false')">
				<tr>
					<td height="10px"/>
				</tr>
			</xsl:if>
		</table>
	</xsl:template>
	
	<!--
		uic:popupDiv - temp template to create a popup div. CPS should provide a 'real' modal dialog
			uic:content - contents of the div

		note: call showModalDialog(id, height, width) to show and center the div
	-->
	<xsl:template match="uic:popupDiv">
		<div id="{@id}" style="z-index:100; display: none;" class="cogstyle-dialog">
			<xsl:apply-templates select="uic:content"/>
		</div>
	</xsl:template>
	
	<!--
		uic:dynamicSection
			dynamic div that will collapse/expand when the user hits a link

			@name - name of the div

		child elemens:
			uic:title - Text to be show as the link
			uic:content - what will be placed in the div
	-->
	<xsl:template match="uic:dynamicSection">
		<!-- used to expand/collapse the uic:dynamicSection -->
		<xsl:variable name="dynamicSectionExpandGif" select="concat($skinWebcontentPath, 'prompt_option_expand.gif')"/>
		<xsl:variable name="dynamicSectionCollapseGif" select="concat($skinWebcontentPath, 'prompt_option_collapse.gif')"/>
	
		<script language="javascript">		
			<!-- TODO: Move this javascript into a js file -->
			function toggleDynamicSection(name)
			{ 
				if(document.getElementById(name).style.display == 'none')
				{
					showDynamicSection(name);
				} 
				else
				{
					hideDynamicSection(name);
				} 
				<xsl:if test="string(@callback-func) != ''">
					<xsl:value-of select="@callback-func"/>
				</xsl:if>
			} 	
			
			function showDynamicSection(name)
			{

				document.getElementById(name).style.display='';							
				var imgName = document.getElementById('img' + name);					
                document.getElementById(name).setAttribute('aria-expanded', 'true');
				imgName.src = '<xsl:value-of select="xtsext:javascriptencode(string($dynamicSectionCollapseGif))"/>';
				imgName.setAttribute('alt','<xsl:value-of select="xtsext:javascriptencode(string($collapseTooltip))"/>');
				imgName.setAttribute('title','<xsl:value-of select="xtsext:javascriptencode(string($collapseTooltip))"/>');
			}
			
			function hideDynamicSection(name)
			{
				document.getElementById(name).style.display='none';		
                document.getElementById(name).setAttribute('aria-expanded', 'false');
				var imgName = document.getElementById('img' + name);					
				imgName.src = '<xsl:value-of select="xtsext:javascriptencode(string($dynamicSectionExpandGif))"/>';
				imgName.setAttribute('alt','<xsl:value-of select="xtsext:javascriptencode(string($expandTooltip))"/>');
				imgName.setAttribute('title','<xsl:value-of select="xtsext:javascriptencode(string($expandTooltip))"/>');
			}				
		</script>	
	
		<!-- the link to expand/collapse the section -->
        <a href="#" id="anchor{@name}" onclick="toggleDynamicSection('{@name}');{@onclick}" role="button" aria-controls="{@name}" class="cogstyle-form-link" nowrap="nowrap" style="padding-bottom:5px; padding-top:5px; padding-left:0px;white-space:nowrap;">				
			<xsl:if test="uic:title">
				<xsl:if test="not(@indent) or (@indent='yes')">
					<xsl:attribute name="style">padding-left:12px;</xsl:attribute>
				</xsl:if>	
				<xsl:value-of select="uic:title"/>
			</xsl:if>
            <img name="img{@name}" id="img{@name}" border="0" style="vertical-align: middle">
                <xsl:choose>
                    <xsl:when test="@visible = 'true'">
                        <xsl:attribute name="src"><xsl:value-of select="$dynamicSectionCollapseGif"/></xsl:attribute>
                        <xsl:attribute name="title"><xsl:value-of select="$collapseTooltip"/></xsl:attribute>
                        <xsl:attribute name="alt"><xsl:value-of select="$collapseTooltip"/></xsl:attribute>
                    </xsl:when>
                    <xsl:otherwise>
                        <xsl:attribute name="src"><xsl:value-of select="$dynamicSectionExpandGif"/></xsl:attribute>     
                        <xsl:attribute name="title"><xsl:value-of select="$expandTooltip"/></xsl:attribute>
                        <xsl:attribute name="alt"><xsl:value-of select="$expandTooltip"/></xsl:attribute>
                    </xsl:otherwise>
                </xsl:choose>
            </img>                      
        </a>

		<div id="{@name}" role="group">
            <xsl:if test="uic:title"><xsl:attribute name="aria-label"><xsl:value-of select="uic:title"/></xsl:attribute></xsl:if>
			<xsl:attribute name="style">
				<xsl:choose>
					<xsl:when test="@visible='true'">display:</xsl:when>
					<xsl:otherwise>display:none</xsl:otherwise>
				</xsl:choose>
			</xsl:attribute>
            <xsl:attribute name="aria-expanded"><xsl:value-of select="@visible='true'"/></xsl:attribute>
			<xsl:apply-templates select="uic:content"/>		
		</div>
	</xsl:template>
</xsl:stylesheet>