Source: themes/claro/js/details.es6.js

  1. /**
  2.  * @file
  3.  * Claro's polyfill enhancements for HTML5 details.
  4.  */
  6. (($, Modernizr, Drupal) => {
  7.   /**
  8.    * Workaround for Firefox.
  9.    *
  10.    * Firefox applies the focus state only for keyboard navigation.
  11.    * We have to manually trigger focus to make the behavior consistent across
  12.    * browsers.
  13.    *
  14.    * @type {Drupal~behavior}
  15.    */
  16.   Drupal.behaviors.claroDetails = {
  17.     attach(context) {
  18.       $(context)
  19.         .once('claroDetails')
  20.         .on('click', (event) => {
  21.           if (event.target.nodeName === 'SUMMARY') {
  22.             $(event.target).trigger('focus');
  23.           }
  24.         });
  25.     },
  26.   };
  28.   /**
  29.    * Workaround for non-supporting browsers.
  30.    *
  31.    * This shim extends HTML5 Shiv used by core.
  32.    *
  33.    * HTML5 Shiv toggles focused details for hitting enter. We copy that for
  34.    * space key as well to make the behavior consistent across browsers.
  35.    *
  36.    * @type {Drupal~behavior}
  37.    */
  38.   Drupal.behaviors.claroDetailsToggleShim = {
  39.     attach(context) {
  40.       if (Modernizr.details || !Drupal.CollapsibleDetails.instances.length) {
  41.         return;
  42.       }
  44.       $(context)
  45.         .find('details .details-title')
  46.         .once('claroDetailsToggleShim')
  47.         .on('keypress', (event) => {
  48.           const keyCode = event.keyCode || event.charCode;
  49.           if (keyCode === 32) {
  50.             $(event.target).closest('summary').trigger('click');
  51.             event.preventDefault();
  52.           }
  53.         });
  54.     },
  55.   };
  57.   /**
  58.    * Theme override providing a wrapper for summarized details content.
  59.    *
  60.    * @return {string}
  61.    *   The markup for the element that will contain the summarized content.
  62.    */
  63.   Drupal.theme.detailsSummarizedContentWrapper = () =>
  64.     `<span class="claro-details__summary-summary"></span>`;
  66.   /**
  67.    * Theme override of summarized details content text.
  68.    *
  69.    * @param {string|null} [text]
  70.    *   (optional) The summarized content displayed in the summary.
  71.    * @return {string}
  72.    *   The formatted summarized content text.
  73.    */
  74.   Drupal.theme.detailsSummarizedContentText = (text) => text || '';
  75. })(jQuery, Modernizr, Drupal);