feat: vendor tooltips, logos, descriptions, product URLs from mont.ru

static/js/index.js

@@ -26,6 +26,67 @@
 
   let clickAudioCtx = null;
 
+  // ── Vendor tooltip ──
+  const tooltip = document.createElement('div');
+  tooltip.className = 'vendor-tooltip';
+  document.body.appendChild(tooltip);
+
+  let tooltipTimer = null;
+  let vendorMap = {};
+
+  function buildVendorMap() {
+    vendorMap = {};
+    for (const v of state.data.vendors) {
+      vendorMap[v.id] = v;
+    }
+  }
+
+  function positionTooltip(chipEl) {
+    const rect = chipEl.getBoundingClientRect();
+    const tw = 280, th = 260;
+    let left = rect.right + 10;
+    let top = rect.top + rect.height / 2 - th / 2;
+    if (left + tw > window.innerWidth - 8) left = rect.left - tw - 10;
+    if (top < 8) top = 8;
+    if (top + th > window.innerHeight - 8) top = window.innerHeight - 8 - th;
+    tooltip.style.left = left + 'px';
+    tooltip.style.top  = top  + 'px';
+  }
+
+  function showTooltip(chipEl, vendor) {
+    const logo  = vendor.logo || '';
+    const desc  = vendor.description || '';
+    const mont  = vendor.mont_page || '';
+    const site  = vendor.website || '';
+
+    let logoHtml = '';
+    if (logo) {
+      logoHtml = `<div class="vtt-logo"><img src="/static/${logo}" alt="${vendor.name}" onerror="this.parentElement.innerHTML='<span class=vtt-logo-placeholder>${vendor.name.slice(0,2).toUpperCase()}</span>'"/></div>`;
+    } else {
+      logoHtml = `<div class="vtt-logo"><span class="vtt-logo-placeholder">${vendor.name.slice(0,2).toUpperCase()}</span></div>`;
+    }
+
+    let linksHtml = '';
+    if (mont) linksHtml += `<a class="vtt-link mont" href="${mont}" target="_blank" rel="noopener">MONT ↗</a>`;
+    if (site) linksHtml += `<a class="vtt-link site" href="${site}" target="_blank" rel="noopener">Сайт ↗</a>`;
+
+    tooltip.innerHTML = `
+      ${logoHtml}
+      <div class="vtt-body">
+        <div class="vtt-name">${vendor.name}</div>
+        ${desc ? `<div class="vtt-desc">${desc}</div>` : ''}
+        ${linksHtml ? `<div class="vtt-links">${linksHtml}</div>` : ''}
+      </div>`;
+
+    positionTooltip(chipEl);
+    tooltip.classList.add('visible');
+  }
+
+  function hideTooltip() {
+    tooltip.classList.remove('visible');
+  }
+
+
   function playScopeClick() {
     try {
       if (!clickAudioCtx) {
@@ -142,6 +203,14 @@
         if (wasSelected) scrollAfterDeselect();
         else scrollToResultsSmooth();
       });
+      node.addEventListener("mouseenter", () => {
+        clearTimeout(tooltipTimer);
+        tooltipTimer = setTimeout(() => showTooltip(node, vendor), 220);
+      });
+      node.addEventListener("mouseleave", () => {
+        clearTimeout(tooltipTimer);
+        hideTooltip();
+      });
       el.vendorList.appendChild(node);
     }
 
@@ -306,6 +375,7 @@
   async function loadScopeData(scope) {
     const res = await fetch(`/api/data?scope=${encodeURIComponent(scope)}`);
     state.data = await res.json();
+    buildVendorMap();
   }
 
   async function init() {