From f43964d6b89c9c459072bc7be96b8d0a2aea1a24 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 28 Aug 2025 11:38:10 +0300 Subject: [PATCH 1/5] Made the list opened if tag is selected --- .../asset/ui/src/clientSideFiltering.js | 110 ++++++++++++++++++ .../case-studies-page/views/index.html | 6 +- 2 files changed, 114 insertions(+), 2 deletions(-) diff --git a/website/modules/asset/ui/src/clientSideFiltering.js b/website/modules/asset/ui/src/clientSideFiltering.js index 51a2738b..700bc122 100644 --- a/website/modules/asset/ui/src/clientSideFiltering.js +++ b/website/modules/asset/ui/src/clientSideFiltering.js @@ -1,5 +1,98 @@ // Client-side filtering for case studies with page reload +const EXPANDED_CATEGORIES_KEY = 'caseStudiesExpandedCategories'; + +const saveExpandedCategories = function () { + const expandedCategories = []; + const checkboxes = document.querySelectorAll('.filter-category__toggle'); + + checkboxes.forEach(function (checkbox) { + if (checkbox.checked) { + // Extract filter type from checkbox id (e.g., 'filter-toggle-industry' -> 'industry') + const filterType = checkbox.id.replace('filter-toggle-', ''); + expandedCategories.push(filterType); + } + }); + + sessionStorage.setItem(EXPANDED_CATEGORIES_KEY, JSON.stringify(expandedCategories)); +}; + +const hasSelectedTagsInCategory = function (filterType) { + // Check if any tags are selected in this category + const selectedTags = document.querySelectorAll( + `#filter-content-${filterType} .tag-item.active`, + ); + return selectedTags.length > 0; +}; + +const isDesktop = function () { + // Check if current viewport is desktop (typically > 1024px) + return window.innerWidth > 1024; +}; + +const updateCategoriesVisibility = function () { + // Update categories visibility based on selected tags + const checkboxes = document.querySelectorAll('.filter-category__toggle'); + + checkboxes.forEach(function (checkbox) { + const filterType = checkbox.id.replace('filter-toggle-', ''); + const hasSelectedTags = hasSelectedTagsInCategory(filterType); + const isIndustryCategory = filterType === 'industry'; + + // Industry category should always be open on desktop + const shouldBeOpen = hasSelectedTags || (isIndustryCategory && isDesktop()); + + if (shouldBeOpen && !checkbox.checked) { + checkbox.checked = true; + // Update aria-expanded attribute + const button = document.querySelector(`label[for="${checkbox.id}"]`); + if (button) { + button.setAttribute('aria-expanded', 'true'); + } + } else if (!shouldBeOpen && checkbox.checked) { + checkbox.checked = false; + // Update aria-expanded attribute + const button = document.querySelector(`label[for="${checkbox.id}"]`); + if (button) { + button.setAttribute('aria-expanded', 'false'); + } + } + }); +}; + +const restoreExpandedCategories = function () { + try { + const saved = sessionStorage.getItem(EXPANDED_CATEGORIES_KEY); + if (!saved) { + // If no saved state, update categories based on selected tags + updateCategoriesVisibility(); + return; + } + + const expandedCategories = JSON.parse(saved); + expandedCategories.forEach(function (filterType) { + const checkbox = document.getElementById(`filter-toggle-${filterType}`); + if (checkbox && !checkbox.checked) { + // Only expand if category has selected tags or was manually expanded + if (hasSelectedTagsInCategory(filterType)) { + checkbox.checked = true; + // Update aria-expanded attribute + const button = document.querySelector(`label[for="filter-toggle-${filterType}"]`); + if (button) { + button.setAttribute('aria-expanded', 'true'); + } + } + } + }); + + // After restoring, update categories visibility based on selected tags + updateCategoriesVisibility(); + } catch (error) { + // Ignore parsing errors and update categories visibility + updateCategoriesVisibility(); + } +}; + const shouldInterceptClick = function (link) { const href = link.getAttribute('href'); return ( @@ -24,6 +117,14 @@ const handleFilterClick = function (event) { event.preventDefault(); + // Clear saved state if this is a "clear all" action + if (filterLink.classList.contains('clear-all-link')) { + sessionStorage.removeItem(EXPANDED_CATEGORIES_KEY); + } else { + // Save current state of expanded categories before reload + saveExpandedCategories(); + } + const href = filterLink.getAttribute('href'); try { const url = new URL(href, window.location.origin); @@ -43,11 +144,20 @@ const handlePopState = function (event) { } }; +const handleResize = function () { + // Update categories visibility when viewport changes + updateCategoriesVisibility(); +}; + export const initClientSideFiltering = function () { if (!document.querySelector('.cs_list')) { return; } + // Restore expanded categories after page load + restoreExpandedCategories(); + window.addEventListener('popstate', handlePopState); + window.addEventListener('resize', handleResize); document.addEventListener('click', handleFilterClick); }; diff --git a/website/modules/case-studies-page/views/index.html b/website/modules/case-studies-page/views/index.html index 80e6780b..ef6ab143 100644 --- a/website/modules/case-studies-page/views/index.html +++ b/website/modules/case-studies-page/views/index.html @@ -95,11 +95,13 @@ tags and tags.length %}
+ {% set hasActiveFilter = data.query[filterType] %} + {% set shouldBeOpen = loop.first or hasActiveFilter %}
@@ -109,7 +111,7 @@ class="filter-category__expand-button" role="button" tabindex="0" - aria-expanded="{% if loop.first %}true{% else %}false{% endif %}" + aria-expanded="{% if shouldBeOpen %}true{% else %}false{% endif %}" aria-controls="filter-content-{{ filterType }}" aria-label="Toggle {{ filterLabel }} filter section" onkeydown="return true;" From a5d64545777452947608553825d7369f58758986 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 28 Aug 2025 12:09:56 +0300 Subject: [PATCH 2/5] fixed lint errors --- .../asset/ui/src/clientSideFiltering.js | 35 ++++++------------- 1 file changed, 11 insertions(+), 24 deletions(-) diff --git a/website/modules/asset/ui/src/clientSideFiltering.js b/website/modules/asset/ui/src/clientSideFiltering.js index 700bc122..3afc71db 100644 --- a/website/modules/asset/ui/src/clientSideFiltering.js +++ b/website/modules/asset/ui/src/clientSideFiltering.js @@ -5,20 +5,20 @@ const EXPANDED_CATEGORIES_KEY = 'caseStudiesExpandedCategories'; const saveExpandedCategories = function () { const expandedCategories = []; const checkboxes = document.querySelectorAll('.filter-category__toggle'); - checkboxes.forEach(function (checkbox) { if (checkbox.checked) { - // Extract filter type from checkbox id (e.g., 'filter-toggle-industry' -> 'industry') const filterType = checkbox.id.replace('filter-toggle-', ''); expandedCategories.push(filterType); } }); - - sessionStorage.setItem(EXPANDED_CATEGORIES_KEY, JSON.stringify(expandedCategories)); + + sessionStorage.setItem( + EXPANDED_CATEGORIES_KEY, + JSON.stringify(expandedCategories), + ); }; const hasSelectedTagsInCategory = function (filterType) { - // Check if any tags are selected in this category const selectedTags = document.querySelectorAll( `#filter-content-${filterType} .tag-item.active`, ); @@ -26,32 +26,25 @@ const hasSelectedTagsInCategory = function (filterType) { }; const isDesktop = function () { - // Check if current viewport is desktop (typically > 1024px) return window.innerWidth > 1024; }; const updateCategoriesVisibility = function () { - // Update categories visibility based on selected tags const checkboxes = document.querySelectorAll('.filter-category__toggle'); - checkboxes.forEach(function (checkbox) { const filterType = checkbox.id.replace('filter-toggle-', ''); const hasSelectedTags = hasSelectedTagsInCategory(filterType); const isIndustryCategory = filterType === 'industry'; - - // Industry category should always be open on desktop + const shouldBeOpen = hasSelectedTags || (isIndustryCategory && isDesktop()); - if (shouldBeOpen && !checkbox.checked) { checkbox.checked = true; - // Update aria-expanded attribute const button = document.querySelector(`label[for="${checkbox.id}"]`); if (button) { button.setAttribute('aria-expanded', 'true'); } } else if (!shouldBeOpen && checkbox.checked) { checkbox.checked = false; - // Update aria-expanded attribute const button = document.querySelector(`label[for="${checkbox.id}"]`); if (button) { button.setAttribute('aria-expanded', 'false'); @@ -64,7 +57,6 @@ const restoreExpandedCategories = function () { try { const saved = sessionStorage.getItem(EXPANDED_CATEGORIES_KEY); if (!saved) { - // If no saved state, update categories based on selected tags updateCategoriesVisibility(); return; } @@ -73,11 +65,11 @@ const restoreExpandedCategories = function () { expandedCategories.forEach(function (filterType) { const checkbox = document.getElementById(`filter-toggle-${filterType}`); if (checkbox && !checkbox.checked) { - // Only expand if category has selected tags or was manually expanded if (hasSelectedTagsInCategory(filterType)) { checkbox.checked = true; - // Update aria-expanded attribute - const button = document.querySelector(`label[for="filter-toggle-${filterType}"]`); + const button = document.querySelector( + `label[for="filter-toggle-${filterType}"]`, + ); if (button) { button.setAttribute('aria-expanded', 'true'); } @@ -85,10 +77,10 @@ const restoreExpandedCategories = function () { } }); - // After restoring, update categories visibility based on selected tags updateCategoriesVisibility(); } catch (error) { - // Ignore parsing errors and update categories visibility + // Fallback to default visibility logic if parsing fails + console.warn('Failed to restore expanded categories:', error); updateCategoriesVisibility(); } }; @@ -117,11 +109,9 @@ const handleFilterClick = function (event) { event.preventDefault(); - // Clear saved state if this is a "clear all" action if (filterLink.classList.contains('clear-all-link')) { sessionStorage.removeItem(EXPANDED_CATEGORIES_KEY); } else { - // Save current state of expanded categories before reload saveExpandedCategories(); } @@ -133,7 +123,6 @@ const handleFilterClick = function (event) { history.pushState({ clientSideFilter: true, url: newUrl }, '', newUrl); window.location.reload(); } catch { - // Fallback to default navigation if URL construction fails window.location.href = href; } }; @@ -145,7 +134,6 @@ const handlePopState = function (event) { }; const handleResize = function () { - // Update categories visibility when viewport changes updateCategoriesVisibility(); }; @@ -154,7 +142,6 @@ export const initClientSideFiltering = function () { return; } - // Restore expanded categories after page load restoreExpandedCategories(); window.addEventListener('popstate', handlePopState); From 9f58801bca9da3de81e64b5a26afe36bb3bcb837 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 28 Aug 2025 12:23:14 +0300 Subject: [PATCH 3/5] fixed coderabbit suggestions --- .../asset/ui/src/clientSideFiltering.js | 70 +++++-------------- 1 file changed, 16 insertions(+), 54 deletions(-) diff --git a/website/modules/asset/ui/src/clientSideFiltering.js b/website/modules/asset/ui/src/clientSideFiltering.js index 3afc71db..147b4dfe 100644 --- a/website/modules/asset/ui/src/clientSideFiltering.js +++ b/website/modules/asset/ui/src/clientSideFiltering.js @@ -1,22 +1,6 @@ // Client-side filtering for case studies with page reload -const EXPANDED_CATEGORIES_KEY = 'caseStudiesExpandedCategories'; - -const saveExpandedCategories = function () { - const expandedCategories = []; - const checkboxes = document.querySelectorAll('.filter-category__toggle'); - checkboxes.forEach(function (checkbox) { - if (checkbox.checked) { - const filterType = checkbox.id.replace('filter-toggle-', ''); - expandedCategories.push(filterType); - } - }); - - sessionStorage.setItem( - EXPANDED_CATEGORIES_KEY, - JSON.stringify(expandedCategories), - ); -}; +// No persistence needed for current requirement ("open if tag is selected"). const hasSelectedTagsInCategory = function (filterType) { const selectedTags = document.querySelectorAll( @@ -53,36 +37,8 @@ const updateCategoriesVisibility = function () { }); }; -const restoreExpandedCategories = function () { - try { - const saved = sessionStorage.getItem(EXPANDED_CATEGORIES_KEY); - if (!saved) { - updateCategoriesVisibility(); - return; - } - - const expandedCategories = JSON.parse(saved); - expandedCategories.forEach(function (filterType) { - const checkbox = document.getElementById(`filter-toggle-${filterType}`); - if (checkbox && !checkbox.checked) { - if (hasSelectedTagsInCategory(filterType)) { - checkbox.checked = true; - const button = document.querySelector( - `label[for="filter-toggle-${filterType}"]`, - ); - if (button) { - button.setAttribute('aria-expanded', 'true'); - } - } - } - }); - - updateCategoriesVisibility(); - } catch (error) { - // Fallback to default visibility logic if parsing fails - console.warn('Failed to restore expanded categories:', error); - updateCategoriesVisibility(); - } +const initializeCategoriesVisibility = function () { + updateCategoriesVisibility(); }; const shouldInterceptClick = function (link) { @@ -109,12 +65,6 @@ const handleFilterClick = function (event) { event.preventDefault(); - if (filterLink.classList.contains('clear-all-link')) { - sessionStorage.removeItem(EXPANDED_CATEGORIES_KEY); - } else { - saveExpandedCategories(); - } - const href = filterLink.getAttribute('href'); try { const url = new URL(href, window.location.origin); @@ -142,9 +92,21 @@ export const initClientSideFiltering = function () { return; } - restoreExpandedCategories(); + initializeCategoriesVisibility(); window.addEventListener('popstate', handlePopState); window.addEventListener('resize', handleResize); document.addEventListener('click', handleFilterClick); + + // Keep aria-expanded in sync with checkbox state + document.addEventListener('change', function (event) { + const checkbox = event.target.closest('.filter-category__toggle'); + if (!checkbox) { + return; + } + const button = document.querySelector(`label[for="${checkbox.id}"]`); + if (button) { + button.setAttribute('aria-expanded', checkbox.checked ? 'true' : 'false'); + } + }); }; From 5041bd8f1859a1524e9ced6fe29304b8d6a1810c Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 28 Aug 2025 12:31:44 +0300 Subject: [PATCH 4/5] fixed lint errors --- website/modules/asset/ui/src/clientSideFiltering.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/website/modules/asset/ui/src/clientSideFiltering.js b/website/modules/asset/ui/src/clientSideFiltering.js index 147b4dfe..98fa2307 100644 --- a/website/modules/asset/ui/src/clientSideFiltering.js +++ b/website/modules/asset/ui/src/clientSideFiltering.js @@ -97,7 +97,7 @@ export const initClientSideFiltering = function () { window.addEventListener('popstate', handlePopState); window.addEventListener('resize', handleResize); document.addEventListener('click', handleFilterClick); - + // Keep aria-expanded in sync with checkbox state document.addEventListener('change', function (event) { const checkbox = event.target.closest('.filter-category__toggle'); @@ -106,7 +106,11 @@ export const initClientSideFiltering = function () { } const button = document.querySelector(`label[for="${checkbox.id}"]`); if (button) { - button.setAttribute('aria-expanded', checkbox.checked ? 'true' : 'false'); + if (checkbox.checked) { + button.setAttribute('aria-expanded', 'true'); + } else { + button.setAttribute('aria-expanded', 'false'); + } } }); }; From f5eca5a49e03615be2871c5ddbed3717377a756d Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 29 Aug 2025 12:22:24 +0300 Subject: [PATCH 5/5] fixed modal display for mobile --- website/modules/asset/ui/src/scss/_cases.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/website/modules/asset/ui/src/scss/_cases.scss b/website/modules/asset/ui/src/scss/_cases.scss index 87bba548..98b53b69 100644 --- a/website/modules/asset/ui/src/scss/_cases.scss +++ b/website/modules/asset/ui/src/scss/_cases.scss @@ -1286,14 +1286,14 @@ } &__content { - position: absolute; - left: 50%; - top: 50%; + position: sticky; + left: 20px; + right: 20px; + top: 90px; width: 90vw; max-width: 400px; - min-width: 320px; + min-width: 300px; background: #fff; - transform: translate(-50%, -50%); z-index: 2; padding: 0 16px 24px; max-height: 90vh;