50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
|
/**
|
||
|
|
* @file
|
||
|
|
* Claro's polyfill enhancements for HTML5 details.
|
||
|
|
*/
|
||
|
|
|
||
|
|
(($, Drupal) => {
|
||
|
|
/**
|
||
|
|
* Workaround for Firefox.
|
||
|
|
*
|
||
|
|
* Firefox applies the focus state only for keyboard navigation.
|
||
|
|
* We have to manually trigger focus to make the behavior consistent across
|
||
|
|
* browsers.
|
||
|
|
*
|
||
|
|
* @type {Drupal~behavior}
|
||
|
|
*/
|
||
|
|
Drupal.behaviors.claroDetails = {
|
||
|
|
attach(context) {
|
||
|
|
// The second argument of once() needs to be an instance of Element, but
|
||
|
|
// document is an instance of Document, replace it with the html Element.
|
||
|
|
$(once('claroDetails', context === document ? 'html' : context)).on(
|
||
|
|
'click',
|
||
|
|
(event) => {
|
||
|
|
if (event.target.nodeName === 'SUMMARY') {
|
||
|
|
$(event.target).trigger('focus');
|
||
|
|
}
|
||
|
|
},
|
||
|
|
);
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Theme override providing a wrapper for summarized details content.
|
||
|
|
*
|
||
|
|
* @return {string}
|
||
|
|
* The markup for the element that will contain the summarized content.
|
||
|
|
*/
|
||
|
|
Drupal.theme.detailsSummarizedContentWrapper = () =>
|
||
|
|
`<span class="claro-details__summary-summary"></span>`;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Theme override of summarized details content text.
|
||
|
|
*
|
||
|
|
* @param {string|null} [text]
|
||
|
|
* (optional) The summarized content displayed in the summary.
|
||
|
|
* @return {string}
|
||
|
|
* The formatted summarized content text.
|
||
|
|
*/
|
||
|
|
Drupal.theme.detailsSummarizedContentText = (text) => text || '';
|
||
|
|
})(jQuery, Drupal);
|