Utah News

`;
}

function refreshWeatherIframe(containerId) {
var iframeId = ‘weather-iframe-‘ + containerId;
var iframe = document.getElementById(iframeId);
if (iframe && iframe.src) {
var originalSrc = iframe.src;
iframe.src = originalSrc + (originalSrc.indexOf(‘?’) > -1 ? ‘&’ : ‘?’) + ‘t=’ + Date.now();
}
}

function initializeWeatherBox(container) {
var containerId = container.getAttribute(‘data-container-id’);
var isWeatherBoxV2 = containerId === ‘home-weather-v2’;

function switchWeatherTab(tabName, clickedElement) {
container.querySelectorAll(‘[data-tab-id]’).forEach(function(tab) {
tab.classList.remove(‘open’);
tab.setAttribute(‘aria-selected’, ‘false’);
});

clickedElement.classList.add(‘open’);
clickedElement.setAttribute(‘aria-selected’, ‘true’);

container.querySelectorAll(‘[data-content-id]’).forEach(function(content) {
content.style.display = ‘none’;
content.setAttribute(‘hidden’, ‘true’);
});

var targetContent = container.querySelector(‘[data-content-id=”‘ + tabName + ‘”]’);
if (targetContent) {
targetContent.style.display = ‘block’;
targetContent.removeAttribute(‘hidden’);
}
}

function loadWeatherData() {
// If weather data is already being loaded, wait for it
if (window.weatherDataPromise) {
window.weatherDataPromise.then(function(data) {
if (data && data.data) {
var weatherContainer = container.closest(‘.weather-box-container’);
if (weatherContainer) {
weatherContainer.style.display = ‘flex’;
updateCurrentWeather(data.data);
updateForecastTabs(data.data);
updateWeatherAlertsBar(data.data);
}
}
});
return;
}

var location = { zip: window.DEFAULT_ZIPCODE };

try {
var storedLocations = localStorage.getItem(‘hrst.zip.history’);
if (storedLocations) {
var locations = JSON.parse(storedLocations);
if (locations && locations.length > 0) {
location = locations[0];
}
}
} catch (e) {}

var apiUrl = (window.DEWY_HOSTNAME || ”) + ‘/api/v1/weather/full/’ + location.zip;

if (window.fetch) {
window.weatherDataPromise = fetch(apiUrl)
.then(function(response) { return response.json(); })
.then(function(data) {
if (data && data.data) {
var article = container.closest(‘.article–wrapper’);
var weatherContainer = container.closest(‘.weather-box-container’);
if (weatherContainer) {
weatherContainer.style.display = ‘flex’;
updateCurrentWeather(data.data);
updateForecastTabs(data.data);
updateWeatherAlertsBar(data.data);
}
return data;
}
})
.catch(function(error) {
console.error(‘Error loading weather:’, error);
// Reset to unknown background on error
updateWeatherBackground(‘unknown’);
});
}
}

function updateWeatherAlertsBar(weatherData) {
var weatherWatchHeader = container.querySelector(‘.weather-watch-header’);
if (!weatherWatchHeader) return;

var weatherWatchText = weatherWatchHeader.querySelector(‘.weather-watch-text’);
var weatherWatchLink = weatherWatchHeader.querySelector(‘.weather-watch-link’);

if (weatherData.alerts_count > 0) {
weatherWatchHeader.className = ‘weather-watch-header has-alerts’;
if (weatherWatchText) {
weatherWatchText.textContent = `Weather Alerts (${weatherData.alerts_count})`;
}
if (weatherWatchLink) {
if (!weatherWatchLink.getAttribute(‘data-initial-href’)) {
weatherWatchLink.setAttribute(‘data-initial-href’, weatherWatchLink.getAttribute(‘href’));
weatherWatchLink.setAttribute(‘data-initial-onclick’, weatherWatchLink.getAttribute(‘onclick’) || ”);
}
weatherWatchLink.setAttribute(‘href’, ‘/alerts’);
weatherWatchLink.setAttribute(‘onclick’, “return handleWeatherLinkClick(event, ‘click_alerts’, ‘click’, ‘sidelist-weather’, ‘/alerts’);”);
}
} else {
weatherWatchHeader.className = ‘weather-watch-header’;
if (weatherWatchText) {
weatherWatchText.textContent = containerId === ‘home-weather-v2’ ? ‘Watch Latest Forecast’ : ‘Latest Forecast’;
}
if (weatherWatchLink) {
var initialHref = weatherWatchLink.getAttribute(‘data-initial-href’);
var initialOnclick = weatherWatchLink.getAttribute(‘data-initial-onclick’);
if (initialHref) {
weatherWatchLink.setAttribute(‘href’, initialHref);
}
if (initialOnclick) {
weatherWatchLink.setAttribute(‘onclick’, initialOnclick);
}
}
}
}

function updateCurrentWeather(weatherData) {
if (weatherData.current) {
var tempValue = weatherData.current.temp_f || ”;
var skyValue = weatherData.current.sky || ”;
var feelsLikeValue = weatherData.current.feels_like_f || weatherData.current.temp_f || ”;

var tempEl = container.querySelector(‘.weather-grid–current-temp-value’);
if (tempEl) {
tempEl.textContent = tempValue;
tempEl.setAttribute(‘aria-label’, tempValue + ‘ degrees Fahrenheit’);
}

var iconEl = container.querySelector(‘.weather-grid–current-icon’);
if (iconEl && weatherData.current.icon_name) {
iconEl.className = ‘weather-grid–current-icon weather-current-icon icon icon-weather-‘ + weatherData.current.icon_name;
}

var skyEl = container.querySelector(‘.weather-grid–sky’);
if (skyEl) {
skyEl.textContent = skyValue;
skyEl.setAttribute(‘aria-label’, ‘Current condition: ‘ + skyValue);
}

var feelsEl = container.querySelector(‘.weather-grid–feels’);
if (feelsEl) {
feelsEl.textContent = feelsLikeValue + ‘°F’;
feelsEl.setAttribute(‘aria-label’, feelsLikeValue + ‘ degrees Fahrenheit’);
}

var weatherContainer = container.querySelector(‘.weather-temp-container’);
if (weatherContainer) {
var summary = ‘Current temperature ‘ + tempValue + ‘ degrees Fahrenheit, ‘ +
skyValue + ‘, feels like ‘ + feelsLikeValue + ‘ degrees’;
weatherContainer.setAttribute(‘aria-label’, summary);
}

updateWeatherBackground(weatherData.current.icon_name);
}
}

function updateWeatherBackground(iconName) {
try {
var bgPath = weatherImages.backgrounds[iconName] || weatherImages.backgrounds.unknown;
container.style.backgroundImage = ‘url(‘ + bgPath + ‘)’;
} catch (e) {
console.log(‘Error updating weather background:’, e);
}
}

function updateForecastTabs(weatherData) {
var visibleItems = isWeatherBoxV2 ? 6 : 5;

if (weatherData.hourly) {
var hourlyContainer = container.querySelector(‘.weather-hourly-forecast’);
if (hourlyContainer) {
var html = ”;
var maxHours = Math.min(visibleItems, weatherData.hourly.length);

for (var i = 0; i < maxHours; i++) {
var hour = weatherData.hourly[i];
html += generateForecastItem({
timeLabel: hour.hour_display,
iconName: hour.icon_name,
primaryTemp: hour.temp_f,
secondaryInfo: hour.precip_chance + ‘%’
});
}
hourlyContainer.innerHTML = html;
}
}

if (weatherData.daily) {
var dailyContainer = container.querySelector(‘.weather-daily-forecast’);
if (dailyContainer) {
var html = ”;
var maxDays = Math.min(visibleItems, weatherData.daily.length);

for (var i = 0; i < maxDays; i++) {
var day = weatherData.daily[i];
var dayName = getShortDayName(day.day);

html += generateForecastItem({
timeLabel: dayName,
iconName: day.icon_name,
primaryTemp: day.high_f,
secondaryInfo: day.precip_chance + ‘%’
});
}
dailyContainer.innerHTML = html;
}
}
}

function getShortDayName(dayName) {
switch (dayName) {
case ‘Today’:
return ‘Today’;
case ‘Tomorrow’:
return ‘Tmrw’;
case ‘Sunday’:
return ‘Sun’;
case ‘Monday’:
return ‘Mon’;
case ‘Tuesday’:
return ‘Tue’;
case ‘Wednesday’:
return ‘Wed’;
case ‘Thursday’:
return ‘Thu’;
case ‘Friday’:
return ‘Fri’;
case ‘Saturday’:
return ‘Sat’;
default:
return dayName;
}
}

container.querySelectorAll(‘[data-tab-id]’).forEach(function(tab) {
var isActive = tab.classList.contains(‘open’);
tab.setAttribute(‘tabindex’, ‘0’); // Both tabs focusable for VoiceOver
tab.setAttribute(‘role’, ‘tab’);
tab.setAttribute(‘aria-selected’, isActive);

tab.addEventListener(‘keydown’, function(e) {
var tabs = Array.from(container.querySelectorAll(‘[data-tab-id]’));
var currentIndex = tabs.indexOf(this);

switch(e.key) {
case ‘ArrowLeft’:
e.preventDefault();
var prevIndex = currentIndex > 0 ? currentIndex – 1 : tabs.length – 1;
tabs[prevIndex].focus();
break;
case ‘ArrowRight’:
e.preventDefault();
var nextIndex = currentIndex < tabs.length – 1 ? currentIndex + 1 : 0;
tabs[nextIndex].focus();
break;
case ‘Enter’:
case ‘ ‘:
e.preventDefault();
var tabId = this.getAttribute(‘data-tab-id’);
switchWeatherTab(tabId, this);
if (tabId === ‘hourly’) {
dispatchWeatherGA4Event(‘click_hourly’, ‘click’, containerId);
} else if (tabId === ‘daily’) {
dispatchWeatherGA4Event(‘click_daily’, ‘click’, containerId);
}
break;
}
});

tab.onclick = function() {
var tabId = this.getAttribute(‘data-tab-id’);
switchWeatherTab(tabId, this);
if (tabId === ‘hourly’) {
dispatchWeatherGA4Event(‘click_hourly’, ‘click’, containerId);
} else if (tabId === ‘daily’) {
dispatchWeatherGA4Event(‘click_daily’, ‘click’, containerId);
}
return false;
};
});

loadWeatherData();

window.addEventListener(‘pageshow’, function(event) {
if (event.persisted) {
// Fix for weather radar iframe appearing gray after browser back/forward navigation
// When user navigates back, the page loads from browser cache but the iframe
// content doesn’t restore properly, showing a gray screen instead of the radar map
// This forces a fresh reload of the iframe by adding a timestamp parameter
setTimeout(function() {
refreshWeatherIframe(containerId);
}, 300);
}
});
}

document.querySelectorAll(‘.weather-sidebar’).forEach(function(weatherBox) {
initializeWeatherBox(weatherBox);
});

});