https://www.associationofsciencecommunicators.org/wp-content/plugi…//js/clb-handle-reveal-cards.js?ver=1.0.0

1
2const moveIconCardRevealContents = function() {
3
4     if (window.matchMedia("(min-width: 769px)").matches) {
5
6          const iconRevealCardContents = document.querySelectorAll('.clb-icon-reveal-card-contents');
7          const newContentsArea = document.querySelector('.clb-reveal-contents-area');
8
9          iconRevealCardContents.forEach((cardContent) => {
10            newContentsArea.appendChild(cardContent);
11          });
12
13     }
14
15}
16moveIconCardRevealContents();
17
18
19
20
21const clbShowIconRevealCardContents = function(event) {
22
23     event.preventDefault();
24     const fullLink = event.target.closest("a");
25     const revealID = fullLink.hash.substring(1);
26     console.log( revealID );
27
28     // add "clb-selected-icon-card" class to the card itself
29     const parentCard = document.querySelector( '.' + revealID + '.clb-icon-reveal-card' );
30     console.log(parentCard);
31     parentCard.classList.add("clb-selected-icon-card");
32     parentCard.classList.remove("clb-unselected");
33
34     // show the clicked contents
35     const revealContents = document.querySelector('#' + revealID);
36     revealContents.classList.remove("clb-hide");
37
38     //hide all of the other contents
39     hideAllOthers = document.querySelectorAll('.clb-icon-reveal-card-contents');
40     hideAllOthers.forEach((hiddenCard) => {
41          if( hiddenCard.classList.contains(revealID) ) {
42               hiddenCard.classList.add("clb-fulltext-selected");
43               return;
44          }
45          hiddenCard.classList.add("clb-hide");
46     });
47
48     // remove "clb-selected-icon-card" class from all other cards
49     unSelected = document.querySelectorAll('.clb-icon-reveal-card');
50     unSelected.forEach((unSelectedCard) => {
51          if( unSelectedCard.classList.contains(revealID) ) { return; }
52          unSelectedCard.classList.remove("clb-selected-icon-card");
53          unSelectedCard.classList.add("clb-unselected");
54     });
55
56}
57
58
59
60const activateIconCardReveals = function() {
61
62     console.log('activateIconCardReveals 1048a');
63
64     // loop through page and get all icon reveal cards, add event listener
65     const iconRevealCards = document.querySelectorAll('.clb-icon-reveal-card a.clb-icon-card-link');
66
67     iconRevealCards.forEach((iconRevealCard) => {
68       iconRevealCard.addEventListener('click', clbShowIconRevealCardContents);
69     });
70
71
72}
73activateIconCardReveals();