Difference between revisions of "Template:Vilnius-Lithuania/JS/Integrated"

(Created page with "window.addEventListener('load', function() { let buttons = document.querySelectorAll('button'); let counter = 0; buttons.forEach((button) => { button.id =...")
 
Line 6: Line 6:
 
         counter++;
 
         counter++;
 
         button.addEventListener('click', function() {
 
         button.addEventListener('click', function() {
             document.getElementById('click-info').style.opacity = 0;
+
             document.querySelectorAll('button svg').forEach((el) => {
 +
                el.style.opacity = 0;
 +
            })
 
             document.getElementById('curt').style.display = 'flex';
 
             document.getElementById('curt').style.display = 'flex';
 
             document.getElementById('title').innerHTML = button.querySelector('p').innerHTML;
 
             document.getElementById('title').innerHTML = button.querySelector('p').innerHTML;
Line 15: Line 17:
 
     })
 
     })
 
     let sections = document.querySelectorAll('.section');
 
     let sections = document.querySelectorAll('.section');
    let academiaSections = document.querySelectorAll('.indicator.academia');
 
    let companiesSections = document.querySelectorAll('.indicator.companies');
 
    let societySections = document.querySelectorAll('.indicator.society');
 
 
     sections.forEach((s) => {
 
     sections.forEach((s) => {
 
         s.addEventListener('click', function() {
 
         s.addEventListener('click', function() {
 
             let timeout = 600;
 
             let timeout = 600;
             if (s.id != 'society') document.getElementById('click-info').style.opacity = 0;
+
             if (s.id != 'society') {
 +
                document.querySelectorAll('button svg').forEach((el) => {
 +
                    el.style.opacity = 0;
 +
                })
 +
            }
 
             if (s.id != 'all') {
 
             if (s.id != 'all') {
 
                 let notEvents = document.querySelectorAll('.indicator:not(.' + s.id + ')');
 
                 let notEvents = document.querySelectorAll('.indicator:not(.' + s.id + ')');
Line 40: Line 43:
 
         })
 
         })
 
     })
 
     })
 +
})
 +
 +
let months = { jan: 'january', feb: 'february', mar: 'march', apr: 'april', may: 'may', jun: 'june', jul: 'july', aug: 'august', sep: 'september' }
 +
let monthsDOM = document.querySelectorAll('.month .left h1');
 +
let mobile = false;
 +
 +
function toggleMonths() {
 +
    monthsDOM.forEach((month) => {
 +
        if (mobile) {
 +
            month.innerHTML = month.innerHTML.substring(0, 3)
 +
        } else {
 +
            let fullName = month.innerHTML;
 +
            month.innerHTML = months[fullName];
 +
        }
 +
    })
 +
}
 +
window.addEventListener('resize', function() {
 +
    if (window.innerWidth < 767 && !mobile) {
 +
        mobile = true;
 +
        toggleMonths()
 +
        document.querySelector('#click-info-desktop').classList.remove('visible');
 +
        document.querySelector('#click-info-mobile').classList.add('visible');
 +
    } else if (window.innerWidth >= 767 && mobile) {
 +
        mobile = false;
 +
        toggleMonths()
 +
        document.querySelector('#click-info-desktop').classList.add('visible');
 +
        document.querySelector('#click-info-mobile').classList.remove('visible');
 +
    }
 +
})
 +
window.addEventListener('load', function() {
 +
    if (window.innerWidth < 767 && !mobile) {
 +
        mobile = true;
 +
        toggleMonths()
 +
        document.querySelector('#click-info-desktop').classList.remove('visible');
 +
        document.querySelector('#click-info-mobile').classList.add('visible');
 +
    } else if (window.innerWidth >= 767 && mobile) {
 +
        mobile = false;
 +
        toggleMonths()
 +
        document.querySelector('#click-info-desktop').classList.add('visible');
 +
        document.querySelector('#click-info-mobile').classList.remove('visible');
 +
    }
 
})
 
})

Revision as of 22:07, 16 October 2020

window.addEventListener('load', function() {

   let buttons = document.querySelectorAll('button');
   let counter = 0;
   buttons.forEach((button) => {
       button.id = 'button' + counter;
       counter++;
       button.addEventListener('click', function() {
           document.querySelectorAll('button svg').forEach((el) => {
               el.style.opacity = 0;
           })
           document.getElementById('curt').style.display = 'flex';
           document.getElementById('title').innerHTML = button.querySelector('p').innerHTML;
       })
   })
   document.getElementById('close').addEventListener('click', function() {
       document.getElementById('curt').style.display = 'none';
   })
   let sections = document.querySelectorAll('.section');
   sections.forEach((s) => {
       s.addEventListener('click', function() {
           let timeout = 600;
           if (s.id != 'society') {
               document.querySelectorAll('button svg').forEach((el) => {
                   el.style.opacity = 0;
               })
           }
           if (s.id != 'all') {
               let notEvents = document.querySelectorAll('.indicator:not(.' + s.id + ')');
               notEvents.forEach((nE) => {
                   nE.parentElement.classList.add('hidden');
               })
           } else timeout = 0
           setTimeout(function() {
               let events = document.querySelectorAll('.indicator.' + s.id);
               if (s.id == 'all') events = document.querySelectorAll('.indicator');
               events.forEach((e) => {
                   // e.parentElement.style.maxHeight = e.parentElement.scrollHeight + "px";
                   e.parentElement.classList.remove('hidden');
               })
           }, timeout)
       })
   })

})

let months = { jan: 'january', feb: 'february', mar: 'march', apr: 'april', may: 'may', jun: 'june', jul: 'july', aug: 'august', sep: 'september' } let monthsDOM = document.querySelectorAll('.month .left h1'); let mobile = false;

function toggleMonths() {

   monthsDOM.forEach((month) => {
       if (mobile) {
           month.innerHTML = month.innerHTML.substring(0, 3)
       } else {
           let fullName = month.innerHTML;
           month.innerHTML = months[fullName];
       }
   })

} window.addEventListener('resize', function() {

   if (window.innerWidth < 767 && !mobile) {
       mobile = true;
       toggleMonths()
       document.querySelector('#click-info-desktop').classList.remove('visible');
       document.querySelector('#click-info-mobile').classList.add('visible');
   } else if (window.innerWidth >= 767 && mobile) {
       mobile = false;
       toggleMonths()
       document.querySelector('#click-info-desktop').classList.add('visible');
       document.querySelector('#click-info-mobile').classList.remove('visible');
   }

}) window.addEventListener('load', function() {

   if (window.innerWidth < 767 && !mobile) {
       mobile = true;
       toggleMonths()
       document.querySelector('#click-info-desktop').classList.remove('visible');
       document.querySelector('#click-info-mobile').classList.add('visible');
   } else if (window.innerWidth >= 767 && mobile) {
       mobile = false;
       toggleMonths()
       document.querySelector('#click-info-desktop').classList.add('visible');
       document.querySelector('#click-info-mobile').classList.remove('visible');
   }

})