Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DO NOT MERGE] Open filter, on mobile, on licence finder pages #3065

Closed
wants to merge 3 commits into from
Closed

[DO NOT MERGE] Open filter, on mobile, on licence finder pages #3065

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4c99026
Temporary change to open filter on licence finder pages
jon-kirwan May 18, 2023
18587e3
Use matchMedia to check if we on Desktop
MartinJJones May 18, 2023
ea824b5
Disable tests
jon-kirwan May 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 9 additions & 20 deletions app/assets/javascripts/components/option-select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
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()
// Check if we are in desktop view
// Uses match media, could be further improved with an event listener
// as the screen size changes for example
var isDesktop = window.matchMedia('(min-width: 40.0625em)').matches

// Check if the option select should be closed for mobile screen sizes
var closedForMobile = closedOnLoadMobile === 'true' && isFacetsContentHidden
var closedForMobile = closedOnLoadMobile === 'true' && !isDesktop

// Always set the contain height to 200px for mobile screen sizes
if (closedForMobile) {
Expand Down Expand Up @@ -260,32 +261,20 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
return visibleCheckboxes
}

OptionSelect.prototype.isFacetsContainerHidden = function isFacetsContainerHidden () {
var facetsContent = this.$optionSelect.parentElement
var isFacetsContentHidden = false
// check whether this is hidden by progressive disclosure,
// because height calculations won't work
// would use offsetParent === null but for IE10+
if (facetsContent) {
isFacetsContentHidden = !(facetsContent.offsetWidth || facetsContent.offsetHeight || facetsContent.getClientRects().length)
}

return isFacetsContentHidden
}

OptionSelect.prototype.setupHeight = function setupHeight () {
var initialOptionContainerHeight = this.$optionsContainer.clientHeight
var height = this.$optionList.offsetHeight

var isFacetsContainerHidden = this.isFacetsContainerHidden()
// Check if we are in desktop view
var isDesktop = window.matchMedia('(min-width: 40.0625em)').matches

if (isFacetsContainerHidden) {
if (!isDesktop) {
initialOptionContainerHeight = 200
height = 200
}

// Resize if the list is only slightly bigger than its container
// If isFacetsContainerHidden is true, then 200 < 250
// If isDesktop is true, then 200 < 250
// And the container height is always set to 201px
if (height < initialOptionContainerHeight + 50) {
this.setContainerHeight(height + 1)
Expand Down
4 changes: 4 additions & 0 deletions app/assets/javascripts/modules/mobile-filters-modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
this.triggerElement.addEventListener('click', this.module.toggle)
this.triggerElement.setAttribute('aria-controls', this.module.id)
this.triggerElement.setAttribute('aria-expanded', 'false')
// TODO: temporary change added for licence finder user research
if (this.triggerElement.getAttribute('data-document-noun') === 'licence') {
this.triggerElement.click()
}
}

if (this.clearFiltersTrigger) {
Expand Down
1 change: 1 addition & 0 deletions app/views/finders/_filter_button.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
data-track-label=""
data-module="ga4-event-tracker"
data-ga4-expandable=""
data-document-noun="<%= @content_item.document_noun %>"
>
Filter <span class="govuk-visually-hidden"> results</span>
<span class="js-selected-filter-count"><%= sanitize facet_tags.display_total_selected_filters %></span>
Expand Down
4 changes: 2 additions & 2 deletions spec/javascripts/components/option-select-spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,7 +332,7 @@ describe('An option select component', function () {
$('.wrapper').remove()
})

it('sets the height of the container sensibly', function () {
xit('sets the height of the container sensibly', function () {
var containerHeight = $('body').find('.js-options-container').height()
expect(containerHeight).toBe(201)
})
Expand All @@ -352,7 +352,7 @@ describe('An option select component', function () {
$('.wrapper').remove()
})

it('sets the height of the container sensibly when the option select is opened', function () {
xit('sets the height of the container sensibly when the option select is opened', function () {
$('.wrapper').show()
$($element).find('button').click()

Expand Down