|
180 | 180 | } |
181 | 181 | }); |
182 | 182 |
|
| 183 | + // Update URL hash to reflect active filter |
| 184 | + const activeFilter = pill.classList.contains('active') ? category : null; |
| 185 | + if (activeFilter && activeFilter !== 'all') { |
| 186 | + history.replaceState(null, '', '#' + activeFilter); |
| 187 | + } else { |
| 188 | + history.replaceState(null, '', window.location.pathname + window.location.search); |
| 189 | + } |
| 190 | + |
183 | 191 | // Update view toggle button state |
184 | 192 | if (window.updateViewToggleState) { |
185 | 193 | window.updateViewToggleState(); |
186 | 194 | } |
187 | 195 | }); |
188 | 196 | }); |
189 | 197 |
|
190 | | - // Auto-click "All" button on page load to show all cards |
191 | | - const allButton = document.querySelector('.filter-pill[data-filter="all"]'); |
192 | | - if (allButton) { |
193 | | - allButton.click(); |
194 | | - } |
| 198 | + // Apply filter from a given category string (or "all" / empty for no filter) |
| 199 | + const applyHashFilter = (category) => { |
| 200 | + const target = category |
| 201 | + ? document.querySelector(`.filter-pill[data-filter="${category}"]`) |
| 202 | + : null; |
| 203 | + if (target) { |
| 204 | + target.click(); |
| 205 | + } else { |
| 206 | + const allButton = document.querySelector('.filter-pill[data-filter="all"]'); |
| 207 | + if (allButton) allButton.click(); |
| 208 | + } |
| 209 | + }; |
| 210 | + |
| 211 | + // On load, apply filter from URL hash or default to "All" |
| 212 | + applyHashFilter(window.location.hash.slice(1)); |
| 213 | + |
| 214 | + // Also react to browser back/forward hash changes |
| 215 | + window.addEventListener('hashchange', () => { |
| 216 | + applyHashFilter(window.location.hash.slice(1)); |
| 217 | + }); |
195 | 218 | }; |
196 | 219 |
|
197 | 220 | /* ========================================================== |
|
0 commit comments