analytics/webcontent/bi/samples/js/Tabs/Tabs.js

define( function( sAppBarCss ) {
"use strict";

function AppBar()
{
};

AppBar.prototype.draw = function( oControlHost )
{
	var el = oControlHost.container;
	var o = oControlHost.configuration;
	if ( !o )
	{
		throw new scriptableReportError( "ChartTabs", "", "Expected configuration." );
	}
	this.m_bHorizontal = !!o && ( o.Orientation == "horizontal" );
	var sOrientation = this.m_bHorizontal ? "horizontal" : "vertical"
	var sAlign = ( this.m_bHorizontal && o ) ? ( o.Align || "" ) : "";
	var sSelector = "CCAppBar";
	var sUniqueSelector = sSelector + "_" + el.id;
	var sUniqueButtonSelector = sUniqueSelector + "Button";
	this.m_sCardNames = [];
	var aButtons = o.Buttons;
	if ( !aButtons )
	{
		aButtons = this.generateButtonFromDataStore( oControlHost );
	}
	var aHtml = [];
	aHtml.push( '<style>' );
	aHtml.push( '\r\n.' + sUniqueSelector + '.' + sOrientation + ' .' + sUniqueButtonSelector + ' { padding-left:' + o["Padding left"] + ';}' );
	aHtml.push( '\r\n.' + sUniqueSelector + '.' + sOrientation + ' .' + sUniqueButtonSelector + ' { padding-right:' + o["Padding right"] + ';}' );
	aHtml.push( '\r\n.' + sUniqueSelector + '.' + sOrientation + ' .' + sUniqueButtonSelector + ' { padding-top:' + o["Padding top"] + ';}' );
	aHtml.push( '\r\n.' + sUniqueSelector + '.' + sOrientation + ' .' + sUniqueButtonSelector + ' { padding-bottom:' + o["Padding bottom"] + ';}' );
	aHtml.push( '\r\n.' + sUniqueSelector + '.' + sOrientation + ' .' + sUniqueButtonSelector + ' { display: inline-block;}' );
	if ( o["Tab width"] )
	{
		aHtml.push( '\r\n.' + 'CCAppBar_v9Button { width:' + o["Tab width"] + ';}' );
	}
	if ( o["Tab background color"] )
	{
		aHtml.push( '\r\n.' + sUniqueSelector + ' { background-color:' + o["Tab background color"] + ';}' );
	}
	if ( o["Tab label color"] )
	{
		aHtml.push( '\r\n.' + sUniqueSelector + ' { fill:' + o["Tab label color"] + '; color:' + o["Tab label color"] + ';}' );
	}
	if ( o["Selected tab label color"] )
	{
		aHtml.push( '\r\n.' + sUniqueSelector + '.' + sOrientation + ' .' + sUniqueButtonSelector + ':hover, .' + sUniqueSelector + '.' + sOrientation + ' .' + sUniqueButtonSelector + '.selected { fill:' + o["Selected tab label color"] + '; color:' + o["Selected tab label color"] + ';}' );
	}
	if ( o["Selected tab background color"] )
	{
		aHtml.push( '\r\n.' + sUniqueSelector + '.' + sOrientation + ' .' + sUniqueButtonSelector + '.selected { background-color:' + o["Selected tab background color"] + ';}' );
	}
	aHtml.push( '</style>' );
	for ( var i = 0; i < aButtons.length; i++ )
	{
		var oButton = aButtons[i];
		this.m_sCardNames[i] = oButton.card;
		aHtml.push( '<div style="align-items:center; white-space:nowrap;" cardIndex="' + i + '" class="' + sUniqueButtonSelector + '">' );
		if ( oButton.icon )
		{
			aHtml.push( oButton.icon.join( "" ) );
		}
		else if ( oButton.iconFile )
		{
			aHtml.push( '<img src="' + oButton.iconFile + '"/>' );
		}
		if ( oButton.label )
		{
			aHtml.push( '<span style="margin-left:8px; margin-right:5px;">' + oButton.label + '</span>' );
		}
		aHtml.push( '</div>' );
		if ( oButton.selected || ( ( i == 0 ) && o["Select first card"] ) )
		{
			this.m_iSelectedCard = i;
		}
	}

	el.innerHTML = aHtml.join( "" );
	el.classList.add( sUniqueSelector );
	el.classList.add( sOrientation );
	if ( sAlign )
	{
		el.style.textAlign = sAlign;
	}
	this.m_nlButtonDivs = el.querySelectorAll( "." + sUniqueButtonSelector );
	this.f_displayCard( this.m_iSelectedCard, oControlHost );
};

AppBar.prototype.generateButtonFromDataStore = function( oControlHost )
{
	var aDataStores = oControlHost.control.dataStores;
	var oDataStore = ( aDataStores.length > 0 ) ? aDataStores[0] : null;
	if ( !oDataStore )
	{
		return null;
	}
	this.m_sCards = oControlHost.configuration.Cards;
	var aButtons = [];
	var iRowCount = oDataStore.rowCount;
	for ( var iRow = 0; iRow < iRowCount; iRow++ )
	{
		var oButton = {};
		oButton.label = oDataStore.getFormattedCellValue( iRow, 0 );
		oButton.card = this.m_sCards;
		aButtons.push( oButton );
	}
	return aButtons;
};

AppBar.prototype.f_displayCard = function( iCardIndex, oControlHost )
{
	for ( var i = 0; i < this.m_nlButtonDivs.length; i++ )
	{
		var div = this.m_nlButtonDivs.item( i );
		div.classList[( i == iCardIndex ) ? "add" : "remove"]( "selected" );
		if ( !this.m_bSetupEventHandlers )
		{
			div.onmousedown = this.f_displayCard.bind( this, i, oControlHost );
		}
	}
	this.m_bSetupEventHandlers = true;

	var oPage = oControlHost.page;
	if ( this.m_sCards )
	{
		var a = oPage.getControlsByName( this.m_sCards );
		for ( var i = 0; i < a.length; i++ )
		{
			a[i].setDisplay( i == iCardIndex );
		}
		return;
	}

	for ( var i = 0; i < this.m_sCardNames.length; i++ )
	{
		var control = oPage.getControlByName( this.m_sCardNames[i] );
        control.setDisplay( true );
        var element = control.element;
        if ( i == iCardIndex )
        {    
            element.style.position = "";
            element.style.top = "";
        }
        else
        {
            element.style.position = "absolute";
            element.style.top = "-25000px";
        }		
	}
};

return AppBar;
});