(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. | + | 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'); | ||
− | |||
− | |||
− | |||
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. | + | 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'); }
})