assets/js/filters.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

/**
 * filters.js
 * Article filtering by type on the articles page
 */

(function() {
  'use strict';

  const filterBtns = document.querySelectorAll('.filter-btn');
  const timelineItems = document.querySelectorAll('.timeline-item');

  filterBtns.forEach((btn) => {
    btn.addEventListener('click', () => {
      const filter = btn.getAttribute('data-filter');

      // Update active button
      filterBtns.forEach((b) => b.classList.remove('active'));
      btn.classList.add('active');

      // Filter articles
      timelineItems.forEach((item) => {
        const type = item.getAttribute('data-type');

        if (filter === 'all' || type === filter) {
          item.classList.add('visible');
        } else {
          item.classList.remove('visible');
        }
      });
    });
  });

  // Show all on load
  timelineItems.forEach((item) => {
    item.classList.add('visible');
  });
})();