Source: portal/tabs.es.js

  1. /**
  2.  * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
  3.  *
  4.  * This library is free software; you can redistribute it and/or modify it under
  5.  * the terms of the GNU Lesser General Public License as published by the Free
  6.  * Software Foundation; either version 2.1 of the License, or (at your option)
  7.  * any later version.
  8.  *
  9.  * This library is distributed in the hope that it will be useful, but WITHOUT
  10.  * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
  11.  * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
  12.  * details.
  13.  */
  15. import toCharCode from '../util/to_char_code.es';
  17. const EVENT_SHOW_TAB = 'showTab';
  19. /**
  20.  * Prepares and fires the an event that will show a tab
  21.  * @param {String} namespace The portlet's namespace
  22.  * @param {Array} names Names of all tabs
  23.  * @param {String} id Tab id.
  24.  * @param {Function} callback The callback function.
  25.  */
  26. export function showTab(namespace, names, id, callback) {
  27. 	const namespacedId = namespace + toCharCode(id);
  29. 	const selectedTab = document.getElementById(namespacedId + 'TabsId');
  30. 	const selectedTabSection = document.getElementById(
  31. 		namespacedId + 'TabsSection'
  32. 	);
  34. 	if (selectedTab && selectedTabSection) {
  35. 		const details = {
  36. 			id,
  37. 			names,
  38. 			namespace,
  39. 			selectedTab,
  40. 			selectedTabSection,
  41. 		};
  43. 		if (callback && typeof callback === 'function') {
  44. 			callback.call(this, namespace, names, id, details);
  45. 		}
  47. 		try {
  48. 			Liferay.on(EVENT_SHOW_TAB, applyTabSelectionDOMChanges);
  50. 			Liferay.fire(EVENT_SHOW_TAB, details);
  51. 		}
  52. 		finally {
  53. 			Liferay.detach(EVENT_SHOW_TAB, applyTabSelectionDOMChanges);
  54. 		}
  55. 	}
  56. }
  58. /**
  59.  * Applies DOM changes that represent tab selection
  60.  * @param {String} namespace The portlet's namespace
  61.  * @param {Array} names Names of all tabs
  62.  * @param {String} id Tab id.
  63.  * @param {HTMLElement} selectedTab Selected tab element
  64.  * @param {HTMLElement} selectedTabSection Selected tab section element
  65.  */
  66. export function applyTabSelectionDOMChanges({
  67. 	id,
  68. 	names,
  69. 	namespace,
  70. 	selectedTab,
  71. 	selectedTabSection,
  72. }) {
  73. 	const selectedTabLink = selectedTab.querySelector('a');
  75. 	if (selectedTab && selectedTabLink) {
  76. 		const activeTab = selectedTab.parentElement.querySelector('.active');
  78. 		if (activeTab) {
  79. 			activeTab.classList.remove('active');
  80. 		}
  82. 		selectedTabLink.classList.add('active');
  83. 	}
  85. 	if (selectedTabSection) {
  86. 		selectedTabSection.classList.remove('hide');
  87. 	}
  89. 	const tabTitle = document.getElementById(namespace + 'dropdownTitle');
  91. 	if (tabTitle && selectedTabLink) {
  92. 		tabTitle.innerHTML = selectedTabLink.textContent;
  93. 	}
  95. 	names.splice(names.indexOf(id), 1);
  97. 	let tabSection;
  99. 	for (var i = 0; i < names.length; i++) {
  100. 		tabSection = document.getElementById(
  101. 			namespace + toCharCode(names[i]) + 'TabsSection'
  102. 		);
  104. 		if (tabSection) {
  105. 			tabSection.classList.add('hide');
  106. 		}
  107. 	}
  108. }