aleph1.co.uk Git - yaffs-website/blob - web/core/themes/seven/js/responsive-details.js

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