analytics/webcontent/bi/samples/js/Bootstrap/bs-tabs.js

define(['jquery', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js'], function (jQuery) {
	'use strict';

	function Control() {}

	Control.prototype.draw = function (oControlHost) {
		var o = oControlHost.configuration;
		this.m_sCardNames = [];
		var aTabs = o.Tabs || this.generateTabsFromDataStore(oControlHost);

		var aHtml = [];
		aHtml.push('<ul class="nav nav-tabs" role="tablist">');
		for (var i = 0; i < aTabs.length; i++) {
			var oTab = aTabs[i];
			this.m_sCardNames[i] = oTab.card;
			aHtml.push(
				'<li class="nav-item" role="presentation"><a class="nav-link" cardIndex="' +
					i +
					'" aria-controls="" role="tab" data-toggle="tab">' +
					oTab.label +
					'</a></li>'
			);
		}
		aHtml.push('</ul>');
		oControlHost.container.innerHTML = aHtml.join('');

		var sID = oControlHost.container.id;
		var aAnchors = oControlHost.container.querySelectorAll('LI > A');
		for (var i = 0; i < aTabs.length; i++) {
			aAnchors[i].onclick = this.onTabClick.bind(
				this,
				aAnchors[i],
				oControlHost.page
			);
		}

		jQuery('#' + sID + ' li:eq(0) a').click();

		//	jQuery( '[data-toggle="modal"]' ).modal('hide');
		jQuery('[data-toggle="tooltip"]').tooltip();
		jQuery('[data-toggle="popover"]').popover();
		//	jQuery( '#' + sID + ' [data-toggle="popover"]' ).popover();
	};

	Control.prototype.onTabClick = function (elAnchor, oPage) {
		jQuery(elAnchor).tab('show');
		var iCardIndex = +elAnchor.getAttribute('cardIndex');

		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++) {
			oPage.getControlByName(this.m_sCardNames[i]).setDisplay(i === iCardIndex);
		}
	};

	Control.prototype.generateTabsFromDataStore = function (oControlHost) {
		var oDataStore = this.m_oDataStore;
		if (!oDataStore) {
			return null;
		}
		var iLabelColumn = oDataStore.getColumnIndex('Label') || 0;
		this.m_sCards = oControlHost.configuration.Cards;
		var aTabs = [];
		var iRowCount = oDataStore.rowCount;
		for (var iRow = 0; iRow < iRowCount; iRow++) {
			aTabs.push({
				label: oDataStore.getFormattedCellValue(iRow, iLabelColumn),
				card: this.m_sCards
			});
		}
		return aTabs;
	};

	Control.prototype.setData = function (oControlHost, oDataStore) {
		this.m_oDataStore = oDataStore;
	};

	return Control;
});