https://science.org.au/themes/custom/aas/js/interactiveDome/interactiveDome.js?v=1.0.1

1import { removeBorderClass, addRemoveBorderClass } from './modules/addRemoveBorderClass.js';
2import addRemoveLockIcon from './modules/addRemoveLockIcon.js';
3import draw from './modules/draw.js';
4import hideDivsShowList from './modules/hideDivsShowList.js';
5import { hideModalInstructions, hideModalInstructionsKeyDown } from './modules/hideShowModalInstructions.js';
6import hideShowAvailableDedication from './modules/hideShowAvailableDedication.js';
7import hideShowFloatingElements from './modules/hideShowFloatingElements.js';
8import mergeDuplicates from './modules/mergeDuplicates.js';
9import resetDedication from './modules/resetDedication.js';
10import resetSearchBar from './modules/resetSearchBar.js';
11import { restoreDivColor } from './modules/restoreDivColor.js';
12import searchBar from './modules/searchBar.js';
13import selectAvailableTileRandomly from './modules/selectAvailableTileRandomly.js';
14import toggleButton from './modules/toggleButton.js';
15
16import { primaryColorOpacity, secondaryColorOpacity } from './utils/colors.js';
17import scrollToDiv from './utils/scrollToDiv.js';
18import styleSocialMediaIcons from './utils/styleSocialMediaIcons.js';
19import { styleDisplayNone, styleOverflowYAuto } from './utils/styleElement.js';
20
21const popUp = true;
22let currentWidth = window.innerWidth;
23
24// Event listener to toggle button so when clicked hides/displays elements
25const toggleButtonElement = document.querySelector('#toggle-button');
26toggleButtonElement.addEventListener('click', toggleButton);
27
28// Hides or displays toggle button
29const searchBarElement = document.querySelector('#interactive-dome-input');
30searchBarElement.addEventListener('keyup', searchBar);
31
32searchBarElement.addEventListener('keydown', (event) => {
33  if (event.key === 'Enter') {
34    scrollToDiv();
35  }
36});
37const listItems = document.querySelectorAll('.item-list ul li');
38
39listItems.forEach((item) => {
40  item.classList.add('interactive-dome-bar');
41});
42
43// Removes link (button) to top
44if (document.querySelector('.cd-top')) {
45  document.querySelector('.cd-top').remove();
46}
47
48// Set border radius
49if (document.querySelectorAll('.interactive-dome-bar')) {
50  document.querySelectorAll('.interactive-dome-bar')[0].classList.add('border-top-radius-on');
51}
52
53if (document.querySelectorAll('.interactive-dome-bar').length > 1) {
54  const arrLength = document.querySelectorAll('.interactive-dome-bar').length;
55  document.querySelectorAll('.interactive-dome-bar')[arrLength - 1].classList.add('border-bottom-radius-on');
56}
57
58// Hides first time visit pop up window
59window.addEventListener('keydown', (event) => {
60  hideModalInstructionsKeyDown(event);
61  resetSearchBar(event);
62});
63
64const callRestoreDivColor = () => {
65  if (document.querySelector('.clicked-interactive-dome-div') !== null) {
66    restoreDivColor(document.querySelector('.clicked-interactive-dome-div'));
67  }
68};
69
70const dedicationKeydownEvent = (event) => {
71  if (event.key === 'Escape') {
72    resetDedication();
73    callRestoreDivColor();
74    removeBorderClass();
75
76    window.removeEventListener('keydown', dedicationKeydownEvent);
77  }
78};
79
80window.addEventListener('click', (event) => {
81  hideShowAvailableDedication(event);
82  resetSearchBar(event);
83  addRemoveLockIcon(event);
84  hideModalInstructions(event);
85
86  if (!event.target.classList.contains('clicked-interactive-dome-div')) {
87    if (event.target.id !== '') {
88      const existingDedicationDivId = event.target.id;
89
90      const existingDedicationDiv = document.querySelector(`#${existingDedicationDivId}`);
91
92      addRemoveBorderClass(existingDedicationDiv);
93    }
94  }
95
96  if (event.target.classList.contains('interactive-dome-dedication-link')) {
97    if (document.querySelector('.tile-row-number')) {
98      const { newDedicationRow, newDedicationTile } = document.querySelector('.tile-row-number').dataset;
99
100      localStorage.setItem('newDedicationRow', newDedicationRow);
101      localStorage.setItem('newDedicationTile', newDedicationTile);
102    }
103
104    if (document.querySelector('.tile-row-number') === null && document.querySelector('#interactive-dome-wrap').style.display !== 'block') {
105      selectAvailableTileRandomly();
106    }
107  }
108
109  window.addEventListener('keydown', dedicationKeydownEvent);
110});
111
112window.onload = () => {
113  draw(primaryColorOpacity, secondaryColorOpacity, popUp);
114  mergeDuplicates();
115  styleSocialMediaIcons();
116};
117
118// Hide show modal according to height
119window.onscroll = () => {
120  hideShowFloatingElements();
121};
122
123// Reset search bar string
124document.querySelector('#interactive-dome-input').value = '';
125
126window.addEventListener('resize', () => {
127  if (currentWidth !== window.innerWidth) {
128    if (window.innerWidth < 850) {
129      hideDivsShowList();

130      styleDisplayNone('#modal-instructions-toggle-button');
131      styleDisplayNone('#modal-instructions-dedication');
132      styleOverflowYAuto();
133    } else {
134      hideDivsShowList();
135      styleDisplayNone('#modal-mobile-instructions');
136      styleOverflowYAuto();
137      draw(primaryColorOpacity, secondaryColorOpacity, popUp);
138    }
139    mergeDuplicates();
140    searchBar();
141
142    currentWidth = window.innerWidth;
143  }
144});