Skip to content

Commit d8ba2b4

Browse files
committed
fix: Redid logic for hiding when clicking outside + clean up
1 parent 711affc commit d8ba2b4

File tree

3 files changed

+39
-12
lines changed

3 files changed

+39
-12
lines changed

assets/css/v2/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -486,7 +486,7 @@ atomic-search-layout atomic-layout-section[section="search"] {
486486
border: none;
487487
font-size: 1.25rem;
488488
width: 100%;
489-
padding: 0.5rem;
489+
padding: 0.5rem 0.5rem 0.5rem 1rem; /* 1rem to vertically align with searchbar text */
490490
cursor: pointer;
491491
}
492492

assets/js/product-selector.js

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,12 @@ document.addEventListener('DOMContentLoaded', () => {
33
const productSelectorButton = document.getElementById(
44
'product-selector-button'
55
);
6+
const productSelectorOpenIcon = document.getElementById(
7+
'product-selector-button-open-icon'
8+
);
9+
const productSelectorCloseIcon = document.getElementById(
10+
'product-selector-button-close-icon'
11+
);
612

713
if (productSelectorButton === null || productSelectorContent == null) {
814
return;
@@ -13,20 +19,31 @@ document.addEventListener('DOMContentLoaded', () => {
1319
if (productSelectorContent.style.display === 'block') {
1420
productSelectorContent.style.display = 'none';
1521
productSelectorButton.classList.remove('remove-bottom-radius');
22+
23+
productSelectorOpenIcon.style.display = 'block';
24+
productSelectorCloseIcon.style.display = 'none';
1625
} else {
1726
productSelectorContent.style.display = 'block';
1827
productSelectorButton.classList.add('remove-bottom-radius');
28+
29+
productSelectorOpenIcon.style.display = 'none';
30+
productSelectorCloseIcon.style.display = 'block';
1931
}
2032
});
2133

2234
window.addEventListener('click', (event) => {
23-
/* Greedy Logic to hide the product selector when something other than the button is clicked. Assumes everything has a classname containing "product-selector" */
35+
/* Logic for hiding the product selector when something other than the button or content is clicked. */
2436
if (
25-
event.target.classList.length === 0 ||
26-
!event.target.classList[0].includes('product-selector')
37+
$(productSelectorContent).has(event.target).length === 0 &&
38+
$(productSelectorButton).has(event.target).length === 0 &&
39+
productSelectorButton.id !== event.target.id &&
40+
productSelectorContent.id !== event.target.id
2741
) {
2842
productSelectorContent.style.display = 'none';
2943
productSelectorButton.classList.remove('remove-bottom-radius');
44+
45+
productSelectorOpenIcon.style.display = 'block';
46+
productSelectorCloseIcon.style.display = 'none';
3047
}
3148
});
3249
});

layouts/partials/sidebar-v2.html

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,21 @@
2222

2323
<button class="product-selector-button" id="product-selector-button">
2424
{{/* product name and selector */}}
25-
<div class="product-selector-name">{{ $productName }}</div>
25+
<div class="product-name">{{ $productName }}</div>
2626
<div class="product-selector-button-icon">
27-
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="product-selector-expand-icon">
28-
<path d="M1 13L7 7L0.999999 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="product-selector-expand-icon"/>
29-
</svg>
27+
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" id="product-selector-button-open-icon">
28+
<path d="M1 13L7 7L0.999999 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
29+
</svg>
30+
<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg" id="product-selector-button-close-icon" style="display: none;">
31+
<g clip-path="url(#clip0_16_31)">
32+
<path d="M7 1L0.999999 7L7 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
33+
</g>
34+
<defs>
35+
<clipPath id="clip0_16_31">
36+
<rect width="8" height="14" fill="white" transform="matrix(-1 0 0 -1 8 14)"/>
37+
</clipPath>
38+
</defs>
39+
</svg>
3040
</div>
3141
</button>
3242
<div class="product-selector" id="product-selector">
@@ -41,11 +51,11 @@
4151
{{ $type := . }}
4252
{{ $products := index $groupedProducts $type }}
4353
<div class="product-selector-content" id="product-selector-content">
44-
<p class="product-selector-content-product-group-name">{{ $type | humanize | title | upper }}</p>
45-
<ul class="product-selector-content-product-container">
54+
<p>{{ $type | humanize | title | upper }}</p>
55+
<ul>
4656
{{ range $products }}
47-
<li class="product-selector-content-product-name">
48-
<a class="product-selector-content-product-link" href="{{ .url }}">{{ .title }}</a>
57+
<li>
58+
<a href="{{ .url }}">{{ .title }}</a>
4959
</li>
5060
{{ end }}
5161
</ul>

0 commit comments

Comments
 (0)