responsive-details.js 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. /**
  2. * @file
  3. * Provides responsive behaviors to HTML details elements.
  4. */
  5. (function ($, Drupal) {
  6. 'use strict';
  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: function (context) {
  17. var $details = $(context).find('details').once('responsive-details');
  18. if (!$details.length) {
  19. return;
  20. }
  21. function detailsToggle(matches) {
  22. if (matches) {
  23. $details.attr('open', true);
  24. $summaries.attr('aria-expanded', true);
  25. $summaries.on('click.details-open', false);
  26. }
  27. else {
  28. // If user explicitly opened one, leave it alone.
  29. var $notPressed = $details
  30. .find('> summary[aria-pressed!=true]')
  31. .attr('aria-expanded', false);
  32. $notPressed
  33. .parent('details')
  34. .attr('open', false);
  35. // After resize, allow user to close previously opened details.
  36. $summaries.off('.details-open');
  37. }
  38. }
  39. function handleDetailsMQ(event) {
  40. detailsToggle(event.matches);
  41. }
  42. var $summaries = $details.find('> summary');
  43. var mql = window.matchMedia('(min-width:48em)');
  44. mql.addListener(handleDetailsMQ);
  45. detailsToggle(mql.matches);
  46. }
  47. };
  48. })(jQuery, Drupal);