Chris@0: /** Chris@0: * @file Chris@0: * Provides responsive behaviors to HTML details elements. Chris@0: */ Chris@0: Chris@17: (function($, Drupal) { Chris@0: /** Chris@0: * Initializes the responsive behaviors for details elements. Chris@0: * Chris@0: * @type {Drupal~behavior} Chris@0: * Chris@0: * @prop {Drupal~behaviorAttach} attach Chris@0: * Attaches the responsive behavior to status report specific details elements. Chris@0: */ Chris@0: Drupal.behaviors.responsiveDetails = { Chris@0: attach(context) { Chris@17: const $details = $(context) Chris@17: .find('details') Chris@17: .once('responsive-details'); Chris@0: Chris@0: if (!$details.length) { Chris@0: return; Chris@0: } Chris@0: Chris@17: const $summaries = $details.find('> summary'); Chris@17: Chris@0: function detailsToggle(matches) { Chris@0: if (matches) { Chris@0: $details.attr('open', true); Chris@0: $summaries.attr('aria-expanded', true); Chris@0: $summaries.on('click.details-open', false); Chris@17: } else { Chris@0: // If user explicitly opened one, leave it alone. Chris@0: const $notPressed = $details Chris@0: .find('> summary[aria-pressed!=true]') Chris@0: .attr('aria-expanded', false); Chris@17: $notPressed.parent('details').attr('open', false); Chris@0: // After resize, allow user to close previously opened details. Chris@0: $summaries.off('.details-open'); Chris@0: } Chris@0: } Chris@0: Chris@0: function handleDetailsMQ(event) { Chris@0: detailsToggle(event.matches); Chris@0: } Chris@0: Chris@0: const mql = window.matchMedia('(min-width:48em)'); Chris@0: mql.addListener(handleDetailsMQ); Chris@0: detailsToggle(mql.matches); Chris@0: }, Chris@0: }; Chris@17: })(jQuery, Drupal);