yaffs.net Git - yaffs-website/blob - web/core/themes/seven/js/responsive-details.es6.js

   1 /**
   2  * @file
   3  * Provides responsive behaviors to HTML details elements.
   4  */
   5
   6 (function($, Drupal) {
   7   /**
   8    * Initializes the responsive behaviors for details elements.
   9    *
  10    * @type {Drupal~behavior}
  11    *
  12    * @prop {Drupal~behaviorAttach} attach
  13    *   Attaches the responsive behavior to status report specific details elements.
  14    */
  15   Drupal.behaviors.responsiveDetails = {
  16     attach(context) {
  17       const $details = $(context)
  18         .find('details')
  19         .once('responsive-details');
  20
  21       if (!$details.length) {
  22         return;
  23       }
  24
  25       const $summaries = $details.find('> summary');
  26
  27       function detailsToggle(matches) {
  28         if (matches) {
  29           $details.attr('open', true);
  30           $summaries.attr('aria-expanded', true);
  31           $summaries.on('click.details-open', false);
  32         } else {
  33           // If user explicitly opened one, leave it alone.
  34           const $notPressed = $details
  35             .find('> summary[aria-pressed!=true]')
  36             .attr('aria-expanded', false);
  37           $notPressed.parent('details').attr('open', false);
  38           // After resize, allow user to close previously opened details.
  39           $summaries.off('.details-open');
  40         }
  41       }
  42
  43       function handleDetailsMQ(event) {
  44         detailsToggle(event.matches);
  45       }
  46
  47       const mql = window.matchMedia('(min-width:48em)');
  48       mql.addListener(handleDetailsMQ);
  49       detailsToggle(mql.matches);
  50     },
  51   };
  52 })(jQuery, Drupal);