https://www.oncolink.org/build/oncolink/js/cancertypes.js

1// external js: isotope.pkgd.js, classie.js
2
3// ----- getText helper ----- //
4
5var textProp = document.documentElement.textContent !== undefined ? 'textContent' : 'innerText';
6
7function getText( elem ) {
8  return elem[ textProp ];
9}
10
11// -----  ----- //
12
13docReady( function() {
14  // init Isotope
15  var iso = new Isotope( '.CancerTypes', {
16    itemSelector: '.singleType',
17    layoutMode: 'fitRows'
18  });
19
20  // filter functions
21  var filterFns = {
22    // show if number is greater than 50
23    numberGreaterThan50: function( itemElem ) {
24      var number = getText( itemElem.querySelector('.number') );
25      return parseInt( number, 10 ) > 50;
26    },
27    // show if name ends with -ium
28    ium: function( itemElem ) {
29      var name = getText( itemElem.querySelector('.name') );
30      return name.match( /ium$/ );
31    }
32  };
33
34  // Function to apply filter based on hash
35  var ignoreHashChange = false;
36  function filterFromHash() {
37    // Get the hash from the URL
38    var hash = window.location.hash.replace("#", "");
39    var filterValue = hash ? `.type${hash.toUpperCase()}` : '*';
40    filterValue = filterFns[ filterValue ] || filterValue;
41    iso.arrange({ filter: filterValue });
42  }
43
44  filterFromHash();
45
46  window.addEventListener('hashchange', function () {
47    if (ignoreHashChange) {
48      ignoreHashChange = false;
49      return; // Skip the hashchange logic
50    }
51
52    filterFromHash();
53  });
54
55  // bind filter button click
56  var filtersElem = document.querySelector('.filters-button-group');
57  eventie.bind( filtersElem, 'click', function( event ) {
58    // only work with buttons
59    if ( !matchesSelector( event.target, 'button, a' ) ) {
60      return;
61    }
62    var filterValue = event.target.getAttribute('data-filter');
63    // use matching filter function
64    filterValue = filterFns[ filterValue ] || filterValue;
65    ignoreHashChange = true;
66    iso.arrange({ filter: filterValue });
67  });
68
69  // change is-checked class on buttons
70  var buttonGroups = document.querySelectorAll('.button-group');
71  for ( var i=0, len = buttonGroups.length; i < len; i++ ) {
72    var buttonGroup = buttonGroups[i];
73    radioButtonGroup( buttonGroup );
74  }
75
76});
77
78function radioButtonGroup( buttonGroup ) {
79  eventie.bind( buttonGroup, 'click', function( event ) {
80    // only work with buttons
81    if ( !matchesSelector( event.target, 'btn btn-danger' ) ) {
82      return;
83    }
84    classie.remove( buttonGroup.querySelector('.is-checked'), 'is-checked' );
85    classie.add( event.target, 'is-checked' );
86  });
87}
88