|
210 | 210 |
|
211 | 211 | let activeCategory = null; |
212 | 212 | let activeJdk = null; |
| 213 | + let hasSelection = false; |
| 214 | + let showingAll = false; |
213 | 215 |
|
214 | 216 | // LTS cycle ranges: each entry covers all versions introduced since the previous LTS |
215 | 217 | const LTS_RANGES = { |
|
220 | 222 | }; |
221 | 223 |
|
222 | 224 | const noResultsMsg = document.getElementById('noResultsMessage'); |
| 225 | + const startMessage = document.getElementById('patternStartMessage'); |
| 226 | + const showAllButton = document.getElementById('showAllButton'); |
| 227 | + const isDiscoveryHome = !!showAllButton; |
| 228 | + hasSelection = !isDiscoveryHome; |
| 229 | + |
| 230 | + const updateShowAllButton = () => { |
| 231 | + if (!showAllButton) return; |
| 232 | + showAllButton.textContent = showingAll |
| 233 | + ? showAllButton.dataset.hideLabel |
| 234 | + : showAllButton.dataset.showLabel; |
| 235 | + }; |
223 | 236 |
|
224 | 237 | const applyFilters = () => { |
225 | 238 | let visibleCount = 0; |
|
231 | 244 | const range = LTS_RANGES[activeJdk]; |
232 | 245 | matchesJdk = range && version >= range[0] && version <= range[1]; |
233 | 246 | } |
234 | | - const visible = matchesCategory && matchesJdk; |
| 247 | + const visible = hasSelection && matchesCategory && matchesJdk; |
235 | 248 | card.classList.toggle('filter-hidden', !visible); |
236 | 249 | if (visible) visibleCount++; |
237 | 250 | }); |
238 | 251 |
|
| 252 | + if (startMessage) { |
| 253 | + startMessage.hidden = hasSelection; |
| 254 | + } |
| 255 | + |
239 | 256 | if (noResultsMsg) { |
240 | | - noResultsMsg.style.display = visibleCount === 0 ? '' : 'none'; |
| 257 | + noResultsMsg.style.display = hasSelection && visibleCount === 0 ? '' : 'none'; |
241 | 258 | } |
242 | 259 |
|
243 | 260 | if (window.updateViewToggleState) { |
|
246 | 263 | }; |
247 | 264 |
|
248 | 265 | // Generic helper to wire up a dropdown |
249 | | - const initDropdown = (dropdownEl, onSelect) => { |
| 266 | + const initDropdown = (dropdownEl, dataAttribute, onSelect) => { |
250 | 267 | if (!dropdownEl) return; |
251 | 268 | const toggleBtn = dropdownEl.querySelector('.jdk-dropdown-toggle'); |
252 | 269 | const labelEl = dropdownEl.querySelector('.jdk-label'); |
|
298 | 315 | }); |
299 | 316 |
|
300 | 317 | return { closeDropdown, setActive: (value) => { |
301 | | - const target = list.querySelector(`li[data-filter="${value}"]`); |
| 318 | + const target = list.querySelector(`li[data-${dataAttribute}="${value}"]`); |
302 | 319 | if (target) { |
303 | 320 | selectItem(target); |
304 | 321 | toggleBtn.classList.toggle('has-filter', value !== 'all'); |
|
310 | 327 |
|
311 | 328 | // Category dropdown |
312 | 329 | const categoryDropdown = document.getElementById('categoryDropdown'); |
313 | | - const catDropdownCtrl = initDropdown(categoryDropdown, (li, toggleBtn) => { |
| 330 | + const catDropdownCtrl = initDropdown(categoryDropdown, 'filter', (li, toggleBtn) => { |
314 | 331 | const category = li.dataset.filter; |
| 332 | + hasSelection = true; |
315 | 333 | activeCategory = category !== 'all' ? category : null; |
| 334 | + showingAll = !activeCategory && !activeJdk; |
| 335 | + updateShowAllButton(); |
316 | 336 | toggleBtn.classList.toggle('has-filter', !!activeCategory); |
317 | 337 | if (activeCategory) { |
318 | 338 | history.replaceState(null, '', '#' + activeCategory); |
|
324 | 344 |
|
325 | 345 | // JDK dropdown |
326 | 346 | const jdkDropdown = document.getElementById('jdkDropdown'); |
327 | | - initDropdown(jdkDropdown, (li, toggleBtn) => { |
| 347 | + const jdkDropdownCtrl = initDropdown(jdkDropdown, 'jdk-filter', (li, toggleBtn) => { |
328 | 348 | const version = li.dataset.jdkFilter; |
| 349 | + hasSelection = true; |
329 | 350 | activeJdk = version !== 'all' ? version : null; |
| 351 | + showingAll = !activeCategory && !activeJdk; |
| 352 | + updateShowAllButton(); |
330 | 353 | toggleBtn.classList.toggle('has-filter', !!activeJdk); |
331 | 354 | applyFilters(); |
332 | 355 | }); |
333 | 356 |
|
| 357 | + if (showAllButton) { |
| 358 | + showAllButton.addEventListener('click', () => { |
| 359 | + activeCategory = null; |
| 360 | + activeJdk = null; |
| 361 | + if (catDropdownCtrl) catDropdownCtrl.setActive('all'); |
| 362 | + if (jdkDropdownCtrl) jdkDropdownCtrl.setActive('all'); |
| 363 | + history.replaceState(null, '', window.location.pathname + window.location.search); |
| 364 | + showingAll = !showingAll; |
| 365 | + hasSelection = showingAll; |
| 366 | + updateShowAllButton(); |
| 367 | + applyFilters(); |
| 368 | + }); |
| 369 | + } |
| 370 | + |
334 | 371 | // Apply filter from a given category string (or "all" / empty for no filter) |
335 | 372 | const applyHashFilter = (category) => { |
336 | 373 | if (category && catDropdownCtrl && catDropdownCtrl.setActive(category)) { |
| 374 | + hasSelection = true; |
337 | 375 | activeCategory = category; |
| 376 | + showingAll = false; |
| 377 | + updateShowAllButton(); |
338 | 378 | applyFilters(); |
339 | 379 | const section = document.getElementById('all-comparisons'); |
340 | 380 | if (section) section.scrollIntoView({ behavior: 'smooth' }); |
341 | 381 | } else if (catDropdownCtrl) { |
342 | 382 | catDropdownCtrl.setActive('all'); |
343 | 383 | activeCategory = null; |
| 384 | + hasSelection = !isDiscoveryHome; |
| 385 | + showingAll = false; |
| 386 | + updateShowAllButton(); |
344 | 387 | applyFilters(); |
345 | 388 | } else { |
346 | 389 | // No filter dropdowns (e.g. topic pages) — show all cards |
347 | 390 | applyFilters(); |
348 | 391 | } |
349 | 392 | }; |
350 | 393 |
|
351 | | - // On load, apply filter from URL hash or default to "All" |
| 394 | + // On load, a category hash reveals its matches; otherwise keep the discovery state. |
352 | 395 | applyHashFilter(window.location.hash.slice(1)); |
353 | 396 |
|
354 | 397 | // Also react to browser back/forward hash changes |
|
0 commit comments