`; container.append(div); activeImages.push(active); x--; } activeImages.reverse(); } /** * Initialize slider */ const initSlider = () => { const range = document.getElementById('carouselSatelliteRange'); range.onchange = () => { newValue = parseInt(range.value); const activeItem = document.querySelector(`#carouselSatelliteContent [data-index="${activeImage}"]`); const newItem = document.querySelector(`#carouselSatelliteContent [data-index="${newValue}"]`); // hide active item document.querySelectorAll('#carouselSatelliteContent > div').forEach(function (el) { el?.classList?.add('d-none') }); // show new item if (newItem) { newItem.classList.toggle('d-none'); } else { stopSliderInterval(); } } initSliderInterval() }; /** * Initialize slider interval. */ const initSliderInterval = () => { const range = document.getElementById('carouselSatelliteRange'); sliderInterval = setInterval(() => { const current = range.value == range.max ? -1 : parseInt(range.value); activeImage = range.value = current + 1; range.dispatchEvent(new Event('change')); }, 1000); }; /** * Stop slider interval. */ const stopSliderInterval = () => { clearInterval(sliderInterval); }; const bottonPlay = () => { document.getElementById('play_btn').classList.add('d-none'); document.getElementById('stop_btn').classList.remove('d-none'); initSliderInterval(); } const bottonStop = () => { document.getElementById('play_btn').classList.remove('d-none'); document.getElementById('stop_btn').classList.add('d-none'); stopSliderInterval(); } /** * Function to show and hide * play and stop buttons */ const showBtn = () => { /** * Show stop button */ const play = document.getElementById('play_btn'); const stop = document.getElementById('stop_btn'); play.onclick = function () { initSliderInterval(); play.classList.add('d-none'); stop.classList.remove('d-none'); } /* * Show play button */ stop.onclick = function () { stopSliderInterval(); play.classList.remove('d-none'); stop.classList.add('d-none'); } } /** * Change carousel onclick on preview images */ const preview = () => { const infrarosso_europa = document.getElementById('infrarosso_europa'); const visibile_europa = document.getElementById('visibile_europa'); const vapore_acqueo_europa = document.getElementById('vapore_acqueo_europa'); const infrarosso_italia_nord = document.getElementById('infrarosso_italia_nord'); const visibile_italia_nord = document.getElementById('visibile_italia_nord'); const vapore_acqueo_italia_nord = document.getElementById('vapore_acqueo_italia_nord'); const range = document.getElementById('carouselSatelliteRange'); const satellite_title = document.getElementById('satellite_title'); const allSatelliti = [infrarosso_europa, visibile_europa, vapore_acqueo_europa, infrarosso_italia_nord, visibile_italia_nord, vapore_acqueo_italia_nord]; // infrarosso_europa infrarosso_europa.onclick = function () { allSatelliti.forEach(s => { s.style.opacity = "50%"; s.style.cursor = "pointer"; }) infrarosso_europa.style.opacity = "100%"; infrarosso_europa.style.cursor = "default"; satellite = `-IR-EUR-MR-M.jpg`; satellite_title.innerHTML = "INFRAROSSO EUROPA"; range.value = 0; populateActiveImages('-IR-EUR-MR-M.jpg'); activeImages.reverse(); } // visibile_europa visibile_europa.onclick = function () { allSatelliti.forEach(s => { s.style.opacity = "50%"; s.style.cursor = "pointer"; }) visibile_europa.style.opacity = "100%"; visibile_europa.style.cursor = "default"; satellite = `-VIS-EUR-HR-M.jpg`; satellite_title.innerHTML = "VISIBILE ALTA RISOLUZIONE EUROPA"; range.value = 0; populateActiveImages('-VIS-EUR-HR-M.jpg'); activeImages.reverse(); } // vapore_acqueo_europa vapore_acqueo_europa.onclick = function () { allSatelliti.forEach(s => { s.style.opacity = "50%"; s.style.cursor = "pointer"; }) vapore_acqueo_europa.style.opacity = "100%"; vapore_acqueo_europa.style.cursor = "default"; satellite = `-WV-EUR-MR-M.jpg`; satellite_title.innerHTML = "VAPORE ACQUEO EUROPA"; range.value = 0; populateActiveImages('-WV-EUR-MR-M.jpg'); activeImages.reverse(); } // infrarosso_italia_nord infrarosso_italia_nord.onclick = function () { allSatelliti.forEach(s => { s.style.opacity = "50%"; s.style.cursor = "pointer"; }) infrarosso_italia_nord.style.opacity = "100%"; infrarosso_italia_nord.style.cursor = "default"; satellite = `-IR-ITN-MR-M.jpg`; satellite_title.innerHTML = "INFRAROSSO NORD ITALIA"; range.value = 0; populateActiveImages('-IR-ITN-MR-M.jpg'); activeImages.reverse(); } // visibile_italia_nord visibile_italia_nord.onclick = function () { allSatelliti.forEach(s => { s.style.opacity = "50%"; s.style.cursor = "pointer"; }) visibile_italia_nord.style.opacity = "100%"; visibile_italia_nord.style.cursor = "default"; satellite = `-VIS-ITN-HR-M.jpg`; satellite_title.innerHTML = "VISIBILE ALTA RISOLUZIONE NORD ITALIA"; range.value = 0; populateActiveImages('-VIS-ITN-HR-M.jpg'); activeImages.reverse(); } // vapore_acqueo_italia_nord vapore_acqueo_italia_nord.onclick = function () { allSatelliti.forEach(s => { s.style.opacity = "50%"; s.style.cursor = "pointer"; }) vapore_acqueo_italia_nord.style.opacity = "100%"; vapore_acqueo_italia_nord.style.cursor = "default"; satellite = `-WV-ITN-MR-M.jpg`; satellite_title.innerHTML = "VAPORE ACQUEO NORD ITALIA"; range.value = 0; populateActiveImages('-WV-ITN-MR-M.jpg'); activeImages.reverse(); } } /** * Generate base HTML */ const generateHTML = async () => { block.innerHTML = `

INFRAROSSO EUROPA

infrarosso europa

infrarosso nord italia

visibile alta risoluzione europa

visibile alta risoluzione nord italia

vapore acqueo europa

vapore aqueo nord

`; initSlider(); showBtn(); preview(); populateActiveImages("-IR-EUR-MR-M.jpg"); }; /** * control on the last image */ fetch(`${URLbase}${directory}/${localDate}-IR-EUR-MR-M.jpg`).then(() => { generateHTML(); }).catch(() => { lastDate = new Date(lastDate - 30 * 60000); const fLastDate2 = formatDate(lastDate); directory = fLastDate2.date; localDate = fLastDate2.datetime; generateHTML(); });

Satelliti

Questa pagina ti è stata utile?