Add media query to toggle visibility on page load

alphagov · Aug 18, 2023 · 1fd4dda · 1fd4dda
1 parent bee4b9e
commit 1fd4dda
Showing 1 changed file with 23 additions and 20 deletions.
diff --git a/app/assets/javascripts/components/option-select.js b/app/assets/javascripts/components/option-select.js
@@ -15,6 +15,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.hasFilter = this.$optionSelect.getAttribute('data-filter-element') || ''
 
     this.checkedCheckboxes = []
+
+    this.mq = window.matchMedia('(min-width: 641px)')
+    this.isClosedOnLoad = this.$optionSelect.getAttribute('data-closed-on-load')
+    this.isClosedOnLoadMobile = this.$optionSelect.getAttribute('data-closed-on-load-mobile')
   }
 
   OptionSelect.prototype.init = function () {
@@ -57,30 +61,29 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     var button = this.$optionSelect.querySelector('.js-container-button')
     button.addEventListener('click', this.toggleOptionSelect.bind(this))
 
-    var closedOnLoad = this.$optionSelect.getAttribute('data-closed-on-load')
-    var closedOnLoadMobile = this.$optionSelect.getAttribute('data-closed-on-load-mobile')
-
-    // By default the .filter-content container is hidden on mobile
-    // By checking if .filter-content is hidden, we are in mobile view given the current implementation
-    var isFacetsContentHidden = this.isFacetsContainerHidden()
+    var checkedString = this.checkedString()
+    if (checkedString) {
+      this.attachCheckedCounter(checkedString)
+    }
 
-    // Check if the option select should be closed for mobile screen sizes
-    var closedForMobile = closedOnLoadMobile === 'true' && isFacetsContentHidden
+    // Adjust Option visibility on page load
+    // Depending on mobile or desktop and presence of various 'closed' settings
+    this.toggleVisibility()
+  }
 
-    // Always set the contain height to 200px for mobile screen sizes
-    if (closedForMobile) {
+  OptionSelect.prototype.toggleVisibility = function () {
+    if (!this.mq.matches) {
+      // Mobile (min-width: 641px)
       this.setContainerHeight(200)
-    }
-
-    if (closedOnLoad === 'true' || closedForMobile) {
-      this.close()
+      if (this.isClosedOnLoadMobile === 'true') {
+        this.close()
+      }
     } else {
-      this.setupHeight()
-    }
-
-    var checkedString = this.checkedString()
-    if (checkedString) {
-      this.attachCheckedCounter(checkedString)
+      if (this.isClosedOnLoad === 'true') {
+        this.close()
+      } else {
+        this.setupHeight()
+      }
     }
   }