Difference between revisions of "Widget:Compass"
From LINKS Community Center
| Line 704: | Line 704: | ||
</div> | </div> | ||
<script> | <script> | ||
| + | function switchUp(toEnable, className) { | ||
| + | if (toEnable instanceof NodeList) { | ||
| + | const enArr = Array.from(toEnable); | ||
| + | document.querySelectorAll(className).forEach(el => { | ||
| + | if (enArr.includes(el)) { el.classList.add('opened'); } | ||
| + | else { el.classList.remove('opened'); } | ||
| + | }); | ||
| + | } else { | ||
| + | document.querySelectorAll(className).forEach(el => { | ||
| + | if (toEnable === el) { el.classList.add('opened'); } | ||
| + | else { el.classList.remove('opened'); } | ||
| + | }); | ||
| + | } | ||
| + | } | ||
| + | |||
// Attach plus icon to the title of expandable blocks. | // Attach plus icon to the title of expandable blocks. | ||
document.querySelectorAll('.theme > h2, .subtheme > h3, .question > h4').forEach(el => { | document.querySelectorAll('.theme > h2, .subtheme > h3, .question > h4').forEach(el => { | ||
| Line 714: | Line 729: | ||
document.getElementById('cmp-container').addEventListener('click', event => { | document.getElementById('cmp-container').addEventListener('click', event => { | ||
if (event.target.tagName === 'H2') { | if (event.target.tagName === 'H2') { | ||
| − | const subthemes = Array.from(event.target.closest('.theme').querySelectorAll('.subtheme')); | + | const theme = event.target.closest('.theme'); |
| + | switchUp(theme, 'theme'); | ||
| + | switchUp(theme.querySelectorAll('.subtheme'), 'subtheme'); | ||
| + | // const subthemes = Array.from(event.target.closest('.theme').querySelectorAll('.subtheme')); | ||
| − | event.target.classList.toggle('opened'); | + | // event.target.classList.toggle('opened'); |
| − | document.querySelectorAll('.subtheme').forEach(el => { | + | // document.querySelectorAll('.subtheme').forEach(el => { |
| − | + | // if (subthemes.includes(el)) { | |
| − | + | // el.classList.toggle('opened'); | |
| − | + | // } else { | |
| − | + | // el.classList.remove('opened') | |
| − | + | // } | |
| − | }); | + | // }); |
// event.target.closest('.theme').querySelectorAll('.subtheme').forEach(el => el.classList.toggle('opened')); | // event.target.closest('.theme').querySelectorAll('.subtheme').forEach(el => el.classList.toggle('opened')); | ||
} | } | ||
Revision as of 12:11, 7 December 2022
Development version of the Compass.
Not ready for production!