src/static/js/group-contributions-table.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

// TODO: Update to clientSteps style.

const groupContributionsTableInfo =
  Array.from(document.querySelectorAll('#content dl'))
    .filter(dl => dl.querySelector('a.group-contributions-sort-button'))
    .map(dl => ({
      sortingByCountLink: dl.querySelector('dt.group-contributions-sorted-by-count a.group-contributions-sort-button'),
      sortingByDurationLink: dl.querySelector('dt.group-contributions-sorted-by-duration a.group-contributions-sort-button'),
      sortingByCountElements: dl.querySelectorAll('.group-contributions-sorted-by-count'),
      sortingByDurationElements: dl.querySelectorAll('.group-contributions-sorted-by-duration'),
    }));

function sortGroupContributionsTableBy(info, sort) {
  const [showThese, hideThese] =
    (sort === 'count'
      ? [info.sortingByCountElements, info.sortingByDurationElements]
      : [info.sortingByDurationElements, info.sortingByCountElements]);

  for (const element of showThese) element.classList.add('visible');
  for (const element of hideThese) element.classList.remove('visible');
}

for (const info of groupContributionsTableInfo) {
  info.sortingByCountLink.addEventListener('click', evt => {
    evt.preventDefault();
    sortGroupContributionsTableBy(info, 'duration');
  });

  info.sortingByDurationLink.addEventListener('click', evt => {
    evt.preventDefault();
    sortGroupContributionsTableBy(info, 'count');
  });
}