changes for the full image on hover

content_quality_tool_public/static/css/attr-extraction.css

@@ -831,4 +831,68 @@ td{
 .mismatch-card .match-status-indicator {
     background-color: #dc3545; /* Dark Red */
     color: white;
+}
+
+/* Container for the thumbnail and the full image */
+.mini-thumb-container {
+    position: relative; /* Essential for positioning the full-image-hover absolutely within it */
+    display: inline-block; /* Helps in keeping the container size tight to the thumbnail */
+}
+
+/* The small, visible thumbnail */
+.mini-thumb {
+    /* Style your thumbnail here, e.g., width, height, border, etc. */
+    width: 50px; /* Example size */
+    height: 50px; /* Example size */
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.mini-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.full-image-hover {
+    position: absolute;
+    top: 0;
+    left: 100%;
+    display: none;
+    z-index: 9999; 
+    border: 1px solid #ccc;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    background-color: white;
+    padding: 10px;
+}
+
+.full-image-hover img {
+    max-width: 400px;
+    height: auto;
+    display: block;
+}
+
+
+/* .full-image-hover {
+    position: fixed; 
+    display: none;
+    z-index: 9999;
+    border: 1px solid #ccc;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    background-color: white;
+    padding: 10px;
+}
+
+.full-image-hover img {
+    max-width: 400px;
+    height: auto;
+    max-height: 400px;
+    display: block;
+} */
+
+
+/* THE MAGIC: Show the full-image-hover when the parent container is hovered */
+.mini-thumb-container:hover .full-image-hover {
+    display: block;
 }

content_quality_tool_public/static/js/attr-extraction.js

@@ -164,14 +164,54 @@ function createProductCard(p) {
     if (isProductSelected(p.item_id)) row.classList.add('selected');
     // if (selectedIds.has(p.item_id)) row.classList.add('selected');
 
-    const left = el('div', 'thumb');
-    const img = new Image(); img.src = p.image_path || p.image || '';
-    // console.log("image path",p.image_path);
-     img.alt = `${p.product_name} image`;
-    // console.log("img",img);
-    // img.onerror = () => { img.remove(); const fb = el('div', 'fallback'); fb.textContent = (p.product_name || 'Product').split(' ').map(w => w[0]).slice(0,2).join('').toUpperCase(); left.appendChild(fb); };
-    img.onerror = () => { img.src = mediaUrl+"media/images/no-product.png" };
+    // const left = el('div', 'thumb');
+    // const img = new Image(); img.src = p.image_path || p.image || '';
+    // // console.log("image path",p.image_path);
+    //  img.alt = `${p.product_name} image`;
+    // // console.log("img",img);
+    // // img.onerror = () => { img.remove(); const fb = el('div', 'fallback'); fb.textContent = (p.product_name || 'Product').split(' ').map(w => w[0]).slice(0,2).join('').toUpperCase(); left.appendChild(fb); };
+    // img.onerror = () => { img.src = mediaUrl+"media/images/no-product.png" };
+    // left.appendChild(img);
+
+    // Assume 'el' is a function that creates an element (e.g., document.createElement)
+// Assume 'p' (product data) and 'mediaUrl' are available in scope.
+
+    // 1. Create the main container for the hover effect
+    const container = el('div', 'mini-thumb-container'); 
+
+    // 2. Create the visible thumbnail wrapper (your original 'left' element)
+    // This will serve as the base for the small image
+    const left = el('div', 'thumb'); 
+
+    // Get the image source (same as before)
+    const imageSrc = p.image_path || p.image || '';
+
+    // 3. Create the thumbnail image element (same as before)
+    const thumbImg = new Image(); 
+    thumbImg.src = imageSrc; 
+    thumbImg.alt = `${p.product_name} image`;
+    thumbImg.onerror = () => { thumbImg.src = mediaUrl+"media/images/no-product.png" };
+    // Use thumbImg instead of img to avoid naming conflict with other code if possible
+    // We will call it 'img' here to match your original code:
+    const img = thumbImg; 
+
     left.appendChild(img);
+    container.appendChild(left); // Add the visible thumbnail to the main container
+
+    // 4. Create the full-size image element for hover (new part)
+    const fullImgWrapper = el('div', 'full-image-hover'); // Class for CSS control
+
+    const fullImg = new Image();
+    fullImg.src = imageSrc; // Use the same source, or p.full_image_path if available
+    fullImg.alt = `${p.product_name} full view`;
+    fullImg.onerror = () => { fullImg.src = mediaUrl + "media/images/no-product.png" }; // Same fallback
+
+    fullImgWrapper.appendChild(fullImg);
+    container.appendChild(fullImgWrapper); // Add full image wrapper to the main container
+
+    // The variable to use when appending this element to the DOM is 'container'.
+    // return container; // If this block is inside a function
+
 
     const mid = el('div', 'meta');
     const name = el('div', 'name'); name.textContent = p.product_name || '—';
@@ -305,7 +345,7 @@ if(p.product_type_details.length > 0){
     const inline = el('div', 'attr-inline');
     inline.dataset.pid = p.item_id; // use item_id for mapping
     
-    row.appendChild(left); row.appendChild(mid);
+    row.appendChild(container); row.appendChild(mid);
     if(p.product_type_details.length > 0){
         console.log("IN ");
         row.appendChild(attrContainer); // Append the new attribute selectors container
@@ -337,18 +377,160 @@ function renderProductsCards(items = getCurrentSlice()) {
 
 
 // --- Table layout ---
+// function createMiniThumb(p) {
+//     const mt = el('div', 'mini-thumb');
+//     const img = new Image(); img.src = p.image_path || p.image || ''; img.alt = `${p.product_name} image`;
+//     // console.log("image path",p.image_path);
+//     // console.log("img",img);
+//     img.onerror = () => { img.src = mediaUrl+"media/images/no-product.png" };
+//     // img.onerror = () => { img.remove(); const fb = el('div', 'fallback'); fb.textContent = (p.product_name || 'Product').split(' ').map(w => w[0]).slice(0,2).join('').toUpperCase(); mt.appendChild(fb); };
+//     mt.appendChild(img);
+//     return mt;
+// }
+
 function createMiniThumb(p) {
-    const mt = el('div', 'mini-thumb');
-    const img = new Image(); img.src = p.image_path || p.image || ''; img.alt = `${p.product_name} image`;
-    // console.log("image path",p.image_path);
-    // console.log("img",img);
-    img.onerror = () => { img.src = mediaUrl+"media/images/no-product.png" };
-    // img.onerror = () => { img.remove(); const fb = el('div', 'fallback'); fb.textContent = (p.product_name || 'Product').split(' ').map(w => w[0]).slice(0,2).join('').toUpperCase(); mt.appendChild(fb); };
-    mt.appendChild(img);
-    return mt;
+    // 1. Create a container for the hover effect
+    const container = document.createElement('div');
+    container.className = 'mini-thumb-container';
+
+    // 2. Create the visible thumbnail (Mini Thumb)
+    const mt = document.createElement('div');
+    mt.className = 'mini-thumb';
+
+    // Get the image source
+    const imageSrc = p.image_path || p.image || '';
+
+    // 3. Create the thumbnail image element
+    const thumbImg = new Image(); 
+    thumbImg.src = imageSrc; 
+    thumbImg.alt = `${p.product_name} thumbnail`;
+    thumbImg.onerror = () => { thumbImg.src = mediaUrl + "media/images/no-product.png" };
+    
+    mt.appendChild(thumbImg);
+    container.appendChild(mt); // Add thumbnail to container
+
+    // 4. Create the full-size image element for hover
+    const fullImgWrapper = document.createElement('div');
+    fullImgWrapper.className = 'full-image-hover'; // Class for CSS control
+    
+    const fullImg = new Image();
+    // Assuming the same source is used for the full image, but you can change this 
+    // to p.full_image_path if your product object has a separate full-size URL.
+    fullImg.src = imageSrc; 
+    fullImg.alt = `${p.product_name} full view`;
+    fullImg.onerror = () => { fullImg.src = mediaUrl + "media/images/no-product.png" }; // Same fallback
+    
+    fullImgWrapper.appendChild(fullImg);
+    container.appendChild(fullImgWrapper); // Add full image wrapper to container
+
+    // Return the main container instead of just the mini-thumb
+    return container; 
 }
 
 
+
+// function createMiniThumb(p) {
+//     const container = document.createElement('div');
+//     container.className = 'mini-thumb-container';
+
+//     const mt = document.createElement('div');
+//     mt.className = 'mini-thumb';
+
+//     const imageSrc = p.image_path || p.image || '';
+//     const thumbImg = new Image();
+//     thumbImg.src = imageSrc;
+//     thumbImg.alt = `${p.product_name} thumbnail`;
+//     thumbImg.onerror = () => { thumbImg.src = mediaUrl + "media/images/no-product.png" };
+
+//     mt.appendChild(thumbImg);
+//     container.appendChild(mt);
+
+//     const fullImgWrapper = document.createElement('div');
+//     fullImgWrapper.className = 'full-image-hover';
+
+//     const fullImg = new Image();
+//     fullImg.src = imageSrc;
+//     fullImg.alt = `${p.product_name} full view`;
+//     fullImg.onerror = () => { fullImg.src = mediaUrl + "media/images/no-product.png" };
+
+//     fullImgWrapper.appendChild(fullImg);
+//     document.body.appendChild(fullImgWrapper); // Append to body, not container
+
+//     // Hover logic
+//     mt.addEventListener('mouseenter', () => {
+//         fullImgWrapper.style.display = 'block';
+//     });
+
+//     mt.addEventListener('mousemove', (e) => {
+//         fullImgWrapper.style.top = (e.clientY + 20) + 'px'; // 20px offset
+//         fullImgWrapper.style.left = (e.clientX + 20) + 'px';
+//     });
+
+//     mt.addEventListener('mouseleave', () => {
+//         fullImgWrapper.style.display = 'none';
+//     });
+
+//     return container;
+// }
+
+
+// Create one global hover container
+// const hoverContainer = document.createElement('div');
+// hoverContainer.className = 'full-image-hover';
+// const hoverImg = new Image();
+// hoverContainer.appendChild(hoverImg);
+// document.body.appendChild(hoverContainer);
+
+// let hoverActive = false;
+
+// function createMiniThumb(p) {
+//     const container = document.createElement('div');
+//     container.className = 'mini-thumb-container';
+
+//     const mt = document.createElement('div');
+//     mt.className = 'mini-thumb';
+
+//     const imageSrc = p.image_path || p.image || '';
+//     const thumbImg = new Image();
+//     thumbImg.src = imageSrc;
+//     thumbImg.alt = `${p.product_name} thumbnail`;
+//     thumbImg.onerror = () => { thumbImg.src = mediaUrl + "media/images/no-product.png" };
+
+//     mt.appendChild(thumbImg);
+//     container.appendChild(mt);
+
+//     // Hover logic
+//     mt.addEventListener('mouseenter', () => {
+//         hoverImg.src = imageSrc;
+//         hoverImg.alt = `${p.product_name} full view`;
+//         hoverContainer.style.display = 'block';
+//     });
+
+//     mt.addEventListener('mousemove', (e) => {
+//         hoverContainer.style.top = (e.clientY + 20) + 'px';
+//         hoverContainer.style.left = (e.clientX + 20) + 'px';
+//     });
+
+//     mt.addEventListener('mouseleave', () => {
+//         setTimeout(() => {
+//             if (!hoverActive) hoverContainer.style.display = 'none';
+//         }, 100);
+//     });
+
+//     hoverContainer.addEventListener('mouseenter', () => {
+//         hoverActive = true;
+//     });
+
+//     hoverContainer.addEventListener('mouseleave', () => {
+//         hoverActive = false;
+//         hoverContainer.style.display = 'none';
+//     });
+
+//     return container;
+// }
+
+
+
 // Table layout
 // function renderProductsTable(items = getCurrentSlice()) {
 //   const wrap = document.getElementById('tableContainer');
@@ -1654,6 +1836,7 @@ function startUpload() {
   xhr.send(form);
   setTimeout(()=>{
       jQuery('#uploadModal').modal('hide');
+      window.location.reload();
   },3000)
   jQuery('#full-page-loader').hide();
 

content_quality_tool_public/templates/product-attributes.html

@@ -367,6 +367,9 @@ $(document).ready(function () {
                     fileInput.value = ''; // Clear file input
                     submitBtn.disabled = true; // Keep disabled until new file selected
                     $('#full-page-loader').hide();
+                    setTimeout(()=>{
+                        window.location.reload();
+                    },3000)
                 // } else {
                 //     responseDiv.innerHTML = `<div class="alert alert-danger">❌ ${data.error}</div>`;
                 //     submitBtn.disabled = false;