`; // target the cover menu item const target = document.querySelector('#menu-header-uk-1 .menu-item-2911415'); // position popover to the left if the target is on the right half of the screen if (target.getBoundingClientRect().right > document.documentElement.clientWidth / 2) { popover.classList.add('left'); } target.appendChild(popover); // used to check if the article info let articleTitle = ''; // fetch info once, then show popover on hover target.addEventListener('mouseover', async () => { if (!articleTitle) { const [coverRes, articleRes] = await Promise.all([ fetch('https://www.nme.com/wp-json/wp/v2/posts?categories=268320&per_page=1&_fields[]=thumbnail_url&_fields[]=featured_media'), fetch('https://www.nme.com/wp-json/wp/v2/posts?categories=268101&per_page=1&_fields[]=title&_fields[]=link'), ]); const [cover, article] = await Promise.all([coverRes.json(), articleRes.json()]); articleTitle = article[0].title.rendered; document.querySelector('#the-cover-article-title').textContent = articleTitle; document.querySelector('#the-cover-article-title').href = article[0].link; document.querySelector('#the-cover-image-link').href = article[0].link; document.querySelector('#the-cover-read-now').href = article[0].link; document.querySelectorAll('#the-cover-image').forEach((img) => { // add size modifier to the cover image url img.src = cover[0].thumbnail_url.replace(/(\.[\w\d_-]+)$/i, '-400x500$1'); }); // document.querySelector('#the-cover-image-link').href = article[0].link; } setTimeout(() => popover.classList.add('active'), 0); }); // hide popover on mouse leave target.addEventListener('mouseleave', () => { setTimeout(() => popover.classList.remove('active'), 0); }); });