X-Git-Url: http://www.aleph1.co.uk/gitweb/?p=yaffs-website;a=blobdiff_plain;f=web%2Fcore%2Fthemes%2Fseven%2Fjs%2Fresponsive-details.es6.js;fp=web%2Fcore%2Fthemes%2Fseven%2Fjs%2Fresponsive-details.es6.js;h=d3cf6ccb3ebdd83c78dcffdea4d8150c45bc2949;hp=0000000000000000000000000000000000000000;hb=9917807b03b64faf00f6a1f29dcb6eafc454efa5;hpb=aea91e65e895364e460983b890e295aa5d5540a5

diff --git a/web/core/themes/seven/js/responsive-details.es6.js b/web/core/themes/seven/js/responsive-details.es6.js
new file mode 100644
index 000000000..d3cf6ccb3
--- /dev/null
+++ b/web/core/themes/seven/js/responsive-details.es6.js
@@ -0,0 +1,52 @@
+/**
+ * @file
+ * Provides responsive behaviors to HTML details elements.
+ */
+
+(function ($, Drupal) {
+  /**
+   * Initializes the responsive behaviors for details elements.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches the responsive behavior to status report specific details elements.
+   */
+  Drupal.behaviors.responsiveDetails = {
+    attach(context) {
+      const $details = $(context).find('details').once('responsive-details');
+
+      if (!$details.length) {
+        return;
+      }
+
+      function detailsToggle(matches) {
+        if (matches) {
+          $details.attr('open', true);
+          $summaries.attr('aria-expanded', true);
+          $summaries.on('click.details-open', false);
+        }
+        else {
+          // If user explicitly opened one, leave it alone.
+          const $notPressed = $details
+            .find('> summary[aria-pressed!=true]')
+            .attr('aria-expanded', false);
+          $notPressed
+            .parent('details')
+            .attr('open', false);
+          // After resize, allow user to close previously opened details.
+          $summaries.off('.details-open');
+        }
+      }
+
+      function handleDetailsMQ(event) {
+        detailsToggle(event.matches);
+      }
+
+      var $summaries = $details.find('> summary');
+      const mql = window.matchMedia('(min-width:48em)');
+      mql.addListener(handleDetailsMQ);
+      detailsToggle(mql.matches);
+    },
+  };
+}(jQuery, Drupal));