42 lines
1.2 KiB
JavaScript
42 lines
1.2 KiB
JavaScript
|
/**
|
||
|
|
* @file
|
||
|
|
* Overrides vertical tabs theming to enable Claro designs.
|
||
|
|
*/
|
||
|
|
|
||
|
|
(($, Drupal) => {
|
||
|
|
/**
|
||
|
|
* Theme function for a vertical tab.
|
||
|
|
*
|
||
|
|
* @param {object} settings
|
||
|
|
* An object with the following keys:
|
||
|
|
* @param {string} settings.title
|
||
|
|
* The name of the tab.
|
||
|
|
*
|
||
|
|
* @return {object}
|
||
|
|
* This function has to return an object with at least these keys:
|
||
|
|
* - item: The root tab jQuery element
|
||
|
|
* - link: The anchor tag that acts as the clickable area of the tab
|
||
|
|
* (jQuery version)
|
||
|
|
* - summary: The jQuery element that contains the tab summary
|
||
|
|
*/
|
||
|
|
Drupal.theme.verticalTab = (settings) => {
|
||
|
|
const tab = {};
|
||
|
|
tab.title = $('<strong class="vertical-tabs__menu-item-title"></strong>');
|
||
|
|
tab.title[0].textContent = settings.title;
|
||
|
|
tab.item = $(
|
||
|
|
'<li class="vertical-tabs__menu-item" tabindex="-1"></li>',
|
||
|
|
).append(
|
||
|
|
(tab.link = $('<a href="#" class="vertical-tabs__menu-link"></a>').append(
|
||
|
|
$('<span class="vertical-tabs__menu-link-content"></span>')
|
||
|
|
.append(tab.title)
|
||
|
|
.append(
|
||
|
|
(tab.summary = $(
|
||
|
|
'<span class="vertical-tabs__menu-link-summary"></span>',
|
||
|
|
)),
|
||
|
|
),
|
||
|
|
)),
|
||
|
|
);
|
||
|
|
return tab;
|
||
|
|
};
|
||
|
|
})(jQuery, Drupal);
|