responsive-details.es6.js 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. /**
  2. * @file
  3. * Provides responsive behaviors to HTML details elements.
  4. */
  5. /*eslint-disable */
  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).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. const $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. const $summaries = $details.find('> summary');
  43. const mql = window.matchMedia('(min-width:769px)');
  44. mql.addListener(handleDetailsMQ);
  45. detailsToggle(mql.matches);
  46. }
  47. };
  48. }(jQuery, Drupal));