analytics/webcontent/bi/samples/js/Cascade/Cascade.js

define( ["./DataStoreUtils.js"], function( DataStoreUtils ) {
"use strict";

function Control()
{
};

Control.prototype.initialize = function( oControlHost, fnDoneInitializing )
{
	this.m_oControlHost = oControlHost;
	this.m_oConfiguration = this.m_oControlHost.configuration || {};
	fnDoneInitializing();
};

Control.prototype.setData = function( oControlHost, oDataStore )
{
	this.m_oDataStore = oDataStore;
	this.m_oJson = DataStoreUtils.extractData( oDataStore );

	this.m_aCascadingColumnsThatSetAParameter = [];
	this.m_aCascadingColumns = this.m_oConfiguration["cascading columns"] || this.m_oJson.columns.map( function( oColumn ) { return { "use": oColumn.name, "display": oColumn.name, "parameter": oColumn.name } } );
	this.m_aCascadingColumns.forEach( function( oColumn, iIndex )
	{
		oColumn.iIndex = iIndex;
		oColumn.use = oColumn.use || this.m_oDataStore.columnNames[iIndex];
		oColumn.iUseColumnIndex = this.m_oDataStore.getColumnIndex( oColumn.use );
		oColumn.display = oColumn.display || oColumn.use;
		oColumn.iDisplayColumnIndex = this.m_oDataStore.getColumnIndex( oColumn.display );
		oColumn.oSelectedValueIndexes = new Set();
		if ( oColumn.parameter )
		{
			this.m_aCascadingColumnsThatSetAParameter.push( oColumn );
			var oParameter = this.m_oControlHost.getParameter( oColumn.parameter );
			if ( oParameter )
			{
				oParameter.values.forEach( function( oValue ) { oColumn.oSelectedValueIndexes.add( this.m_oJson.columns[oColumn.iUseColumnIndex].values.indexOf( oValue.use ) ); }, this );
			}
		}
	}, this );
	this.m_aCascadingColumns[0].oCascadeJson = this.m_oJson;
};

Control.prototype.draw = function( oControlHost )
{
	var bVertical = !!this.m_oConfiguration.vertical;
	var sId = '#' + oControlHost.container.id + ' ';
	var sHtml =
		'<style>' +
		sId + 'select:required:invalid { color: gray; }' +
		sId + 'select { box-sizing: border-box; font-family: inherit; font-size: 100%; }' +
		sId + 'option[value=""][disabled] { display: none; }' +
		sId + 'option { color: black; }' +
		sId + '> div { display:flex; flex-direction:' + ( bVertical ? 'column' : 'row' )  + '; }' +
		sId + 'div > div:not(:first-of-type) { margin-' + ( bVertical ? 'top' : 'left' ) + ':' + ( this.m_oConfiguration.spacing || '8px' ) + '; }' +
		sId + '> div > div { font-weight: bold; }' +
		'</style>';
	sHtml += '<div>';
	var sDefaultMinWidth = this.m_oConfiguration.minWidth || '150px';
	for ( var i = 0; i < this.m_aCascadingColumns.length; i++ )
	{
		var oCascadingColumn = this.m_aCascadingColumns[i];
		sHtml += '<div>';
		sHtml += '<div>' + this.HTMLEncode( oCascadingColumn.label || oCascadingColumn.display ) + ':</div>';
		sHtml += '<select disabled="true" style="min-width:' + ( oCascadingColumn.minWidth || sDefaultMinWidth ) + ';';
		if ( oCascadingColumn.multiple )
		{
			sHtml += 'overflow:auto;';
		}
		if ( oCascadingColumn.height || this.m_oConfiguration.height )
		{
			sHtml += 'height:' + ( oCascadingColumn.height || this.m_oConfiguration.height ) + ';';
		}
		if ( oCascadingColumn.fontSize || this.m_oConfiguration.fontSize )
		{
			sHtml += 'font-size:' + ( oCascadingColumn.fontSize || this.m_oConfiguration.fontSize ) + ';';
		}
		if ( oCascadingColumn.textAlign || this.m_oConfiguration.textAlign )
		{
			sHtml += 'text-align:' + ( oCascadingColumn.textAlign || this.m_oConfiguration.textAlign ) + ';';
		}
		sHtml += '"';
		if ( oCascadingColumn.required )
		{
			sHtml += ' required="true"';
		}
		if ( oCascadingColumn.multiple || ( this.m_oConfiguration.multiple && ( oCascadingColumn.multiple !== false ) ) )
		{
			sHtml += ' multiple="true"';
		}
		if ( oCascadingColumn.size || this.m_oConfiguration.size )
		{
			sHtml += ' size="' + ( oCascadingColumn.size || this.m_oConfiguration.size ) + '"';
		}
		sHtml += '></select>';
		sHtml += '</div>';
	}
	sHtml += "</div>";
	oControlHost.container.innerHTML = sHtml;
	this.m_nlSelects = oControlHost.container.getElementsByTagName( "SELECT" );
	for ( var i = 0; i < this.m_nlSelects.length; i++ )
	{
		this.populateCascadingColumn( i );
		this.m_nlSelects.item( i ).onchange = this.onSelectChange.bind( this, i );
	}
};

Control.prototype.onSelectChange = function( iIndex )
{
	var oColumn = this.m_aCascadingColumns[iIndex];
	oColumn.oSelectedValueIndexes.clear();
	var sel = this.m_nlSelects.item( iIndex );
	for ( var i = 0; i < sel.options.length; i++ )
	{
		var elOption = sel.options[i];
		if ( elOption.selected )
		{
			oColumn.oSelectedValueIndexes.add( elOption.iUseValueIndex )
		}
	}

	for ( var i = iIndex + 1; i < this.m_aCascadingColumns.length; i++ )
	{
		var oCascadeColumn = this.m_aCascadingColumns[i];
		oCascadeColumn.oCascadeJson = null;
		oCascadeColumn.oSelectedValueIndexes.clear();
		var sel = this.m_nlSelects.item( i );
		this.removeAllHtmlSelectOptions( sel );
		sel.disabled = true;
	}
	this.populateCascadingColumn( iIndex + 1 );

	this.m_oControlHost.valueChanged();
};

Control.prototype.populateCascadingColumn = function( iIndex )
{
	if ( iIndex < this.m_aCascadingColumns.length )
	{
		var oCascadingColumn = this.m_aCascadingColumns[iIndex];
		var oPreviousCascadeColumn = ( iIndex > 0 ) ? this.m_aCascadingColumns[iIndex - 1] : null;
		oCascadingColumn.oCascadeJson = oPreviousCascadeColumn ? DataStoreUtils.filterByColumnValueIndexes( oPreviousCascadeColumn.oCascadeJson, oPreviousCascadeColumn.iUseColumnIndex, oPreviousCascadeColumn.oSelectedValueIndexes ) : this.m_oJson;
		var oJson = DataStoreUtils.filterToUniqueRows( oCascadingColumn.oCascadeJson, oCascadingColumn.iUseColumnIndex );
		this.populateHtmlSelectFromColumn( this.m_nlSelects.item( iIndex ), oJson, oCascadingColumn );
	}
};

Control.prototype.populateHtmlSelectFromColumn = function( sel, oJson, oCascadingColumn )
{
	sel.disabled = ( oCascadingColumn.iIndex > 0 ) && !this.m_aCascadingColumns[oCascadingColumn.iIndex - 1].oSelectedValueIndexes.size;
	this.removeAllHtmlSelectOptions( sel );
	var iUseColumnIndex = oCascadingColumn.iUseColumnIndex;
	var iDisplayColumnIndex = oCascadingColumn.iDisplayColumnIndex;
	var oUseColumn = oJson.columns[iUseColumnIndex];
	var oDisplayColumn = oJson.columns[iDisplayColumnIndex];
	var d = document;
	if ( !( oCascadingColumn.multiple || this.m_oConfiguration.multiple ) && !oCascadingColumn.oSelectedValueIndexes.size && !sel.disabled )
	{
		var elOption = d.createElement( "OPTION" );
		elOption.value = "";
		elOption.textContent = this.m_oConfiguration["choose label"] || "<Choose>";
		elOption.selected = oCascadingColumn.oSelectedValueIndexes.size == 0;
		elOption.disabled = true;
		sel.add( elOption );
	}
	oJson.rows.forEach( function( aRow )
	{
		var elOption = d.createElement( "OPTION" );
		var iUseValueIndex = aRow[iUseColumnIndex];
		elOption.iUseValueIndex = iUseValueIndex;
		elOption.iDisplayValueIndex = aRow[iDisplayColumnIndex];
		elOption.value = oUseColumn.values[aRow[iUseColumnIndex]];
		elOption.textContent = oDisplayColumn.values[aRow[iDisplayColumnIndex]];
		elOption.selected = oCascadingColumn.oSelectedValueIndexes.has( iUseValueIndex );
		sel.add( elOption );
	} );
};

Control.prototype.removeAllHtmlSelectOptions = function( sel )
{
	while ( sel.length )
	{
		sel.remove( 0 );
	}
};

Control.prototype.getParameters = function()
{
	return this.m_aCascadingColumnsThatSetAParameter.map( function( oColumn, i ) {
		return {
			"parameter": oColumn.parameter,
			"values": this.setToArray( oColumn.oSelectedValueIndexes ).map( function( iValueIndex )
				{
					return {
						"use" : oColumn.oCascadeJson.columns[oColumn.iUseColumnIndex].values[iValueIndex],
						"display" : oColumn.oCascadeJson.columns[oColumn.iDisplayColumnIndex].values[DataStoreUtils.filterByColumnValueIndex( oColumn.oCascadeJson, oColumn.iUseColumnIndex, iValueIndex ).rows[0][oColumn.iDisplayColumnIndex]]
					};
				} )
		};
	}.bind( this ) );
};

Control.prototype.isInValidState = function()
{
	return this.m_aCascadingColumns.every( function( oColumn ) { return !oColumn.required || ( oColumn.oSelectedValueIndexes.size > 0 ); }, this );
};

Control.prototype.setToArray = function( oSet )
{
	if ( Array.from )
	{
		return Array.from( oSet );
	}
	var a = [];
	oSet.forEach( function( v ) { this.push( v ); }, a );
	return a;
};

Control.prototype.HTMLEncode = function( s )
{
	return String( s ).replace( /&/g, "&amp;" ).replace( /</g, "&lt;" ).replace( />/g, "&gt;" );
};

return Control;
});