Widget: Compass: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
No edit summary
Eschmidt (talk | contribs)
No edit summary
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 729: Line 714:
         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 theme = event.target.closest('.theme');
                 event.target.classList.toggle('opened');
                 event.target.classList.toggle('opened');
                 switchUp(theme, '.theme');
                 event.target.closest('.theme').querySelectorAll('.subtheme').forEach(el => el.classList.toggle('opened'));
                switchUp(theme.querySelectorAll('.subtheme'), '.subtheme');
                // const subthemes = Array.from(event.target.closest('.theme').querySelectorAll('.subtheme'));
 
                // event.target.classList.toggle('opened');
                // 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'));
             }
             }
             if (event.target.tagName === 'H3') {
             if (event.target.tagName === 'H3') {

Revision as of 11:16, 7 December 2022

Development version of the Compass.
Not ready for production!