View Product" buttons ---- const formItems = galleryElement.querySelectorAll(".hotspot-item-products-list .hotspot-item-product"); formItems.forEach((item) => { const form = item.querySelector(".hotspot-item-form"); var a = document.createElement('a'); a.setAttribute('href', item.querySelector('a').href); a.classList.add("kt-button", "button--secondary"); a.innerHTML = "View Product"; form.appendChild(a); }); const appWapper = galleryElement.closest(".section-apps"); if (appWapper) { appWapper.classList.add("lf-overflow"); } // ---- Hide duplicate product cards (same data-id, keep first occurrence) ---- const seenIds = new Set(); galleryElement.querySelectorAll('.hotspot-item-products-list .hotspot-item-product').forEach(function(card) { const id = card.dataset.id; if (seenIds.has(id)) { card.style.display = 'none'; } else { seenIds.add(id); } }); // ---- Helper: Get the product list scoped to this specific gallery's panel ---- function getProductList() { const panel = galleryElement.closest('.vgt-panel'); if (panel) { return panel.querySelector('.hotspot-item-products-list'); } return galleryElement.querySelector('.hotspot-item-products-list') || document.querySelector('.hotspot-item-products-list'); } // ---- Mobile preview card: replaces the native tooltip on mobile ---- function buildMobilePreview() { const imageColumn = galleryElement.querySelector('.kt-image-column'); if (!imageColumn) return null; if (imageColumn.querySelector('.rb-hotspot-preview')) { return imageColumn.querySelector('.rb-hotspot-preview'); } const preview = document.createElement('div'); preview.className = 'rb-hotspot-preview'; preview.innerHTML = '' + '

' + '' + '

' + '

' + 'View Product'; imageColumn.appendChild(preview); preview.querySelector('.rb-hotspot-preview-close').addEventListener('click', function() { preview.classList.remove('is-visible'); }); return preview; } const mobilePreview = buildMobilePreview(); function showMobilePreview(productCard) { if (!mobilePreview || window.matchMedia('(min-width: 769px)').matches) return; const img = productCard.querySelector('.hotspot-item-image img'); const titleLink = productCard.querySelector('.hotspot-item-title a'); if (!img || !titleLink) return; const imgEl = mobilePreview.querySelector('img'); imgEl.src = img.src; imgEl.alt = img.alt || ''; const titleEl = mobilePreview.querySelector('.rb-hotspot-preview-title'); titleEl.textContent = titleLink.textContent.trim(); titleEl.href = titleLink.href; const viewBtn = mobilePreview.querySelector('.rb-hotspot-preview-button'); viewBtn.href = titleLink.href; mobilePreview.classList.add('is-visible'); mobilePreview.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } // ---- Shared activate function: works on desktop + mobile ---- function activateProduct(hotspotId) { const cleanId = hotspotId.substring(hotspotId.indexOf('hotspot-item-')); const productList = getProductList(); if (!productList) return; const cards = productList.querySelectorAll('.hotspot-item-product'); const productCard = Array.from(cards).find(function(card) { const cardHotspot = card.dataset.hotspot || ''; const cleanCardHotspot = cardHotspot.substring(cardHotspot.indexOf('hotspot-item-')); return cleanCardHotspot === cleanId; }); if (!productCard) return; const productId = productCard.dataset.id; cards.forEach(function(card) { if (card !== productCard && card.dataset.id === productId) { card.style.display = 'none'; card.classList.add('lfHidden'); } }); productCard.style.display = ''; productCard.classList.remove('lfHidden'); // Desktop: highlight the matched card and scroll it to the top of the // list's own scroll box. We scroll the container directly (not // scrollIntoView) so only the inner list moves, never the page itself, // which would otherwise risk knocking the diagram out of its sticky spot. if (window.matchMedia('(min-width: 769px)').matches) { productList.querySelectorAll('.hotspot-item-product').forEach(function(card) { card.classList.toggle('is-selected', card === productCard); }); const scrollContainer = productList.closest('.kt-products-column') || productList; const containerRect = scrollContainer.getBoundingClientRect(); const cardRect = productCard.getBoundingClientRect(); scrollContainer.scrollBy({ top: cardRect.top - containerRect.top, behavior: 'smooth' }); } showMobilePreview(productCard); } // ---- Desktop: Hover ---- galleryElement.addEventListener('mouseenter', function(e) { const hotspot = e.target.closest('.kt-hotspot-item.hotspot-plus'); if (!hotspot) return; activateProduct(hotspot.dataset.id); }, true); // ---- Desktop: Click ---- galleryElement.addEventListener('click', function(e) { const hotspot = e.target.closest('.kt-hotspot-item.hotspot-plus'); if (!hotspot) return; activateProduct(hotspot.dataset.id); }); // ---- Mobile: Touchstart ---- document.addEventListener('touchstart', function(e) { const hotspot = e.target.closest('.kt-hotspot-item.hotspot-plus'); if (!hotspot) return; activateProduct(hotspot.dataset.id); }, { passive: true }); });