* * Barcode Zoom Feature - Makes barcode images clickable for enlarged view */ // Set correct content type if (!defined('NOTOKENRENEWAL')) define('NOTOKENRENEWAL', 1); if (!defined('NOLOGIN')) define('NOLOGIN', 1); if (!defined('NOCSRFCHECK')) define('NOCSRFCHECK', 1); header('Content-Type: application/javascript; charset=UTF-8'); header('Cache-Control: max-age=3600'); ?> (function() { "use strict"; // Only run on product card pages if (window.location.pathname.indexOf('/product/card.php') === -1) { return; } // Add CSS var style = document.createElement('style'); style.textContent = ` /* Barcode Zoom Modal */ .barcode-zoom-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; z-index: 10000; cursor: pointer; } .barcode-zoom-content { background: #fff; padding: 40px 50px; border-radius: 12px; text-align: center; max-width: 95vw; max-height: 95vh; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .barcode-zoom-image { max-width: 100%; height: auto; min-height: 150px; image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; } .barcode-zoom-text { font-family: monospace; font-size: 32px; color: #333; letter-spacing: 4px; margin-top: 20px; font-weight: bold; } .barcode-zoom-hint { font-size: 13px; color: #999; margin-top: 20px; } /* Make barcode image clickable */ .barcode-clickable { cursor: pointer !important; transition: transform 0.2s, box-shadow 0.2s; border: 2px solid transparent; border-radius: 4px; } .barcode-clickable:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 119, 179, 0.3); border-color: #0077b3; } `; document.head.appendChild(style); // Find and enhance barcode images function initBarcodeZoom() { // Find all barcode images (from viewimage.php with barcode modulepart) var barcodeImages = document.querySelectorAll('img[src*="modulepart=barcode"]'); barcodeImages.forEach(function(img) { // Extract barcode value from URL var src = img.src; var codeMatch = src.match(/code=([^&]+)/); if (!codeMatch) return; var barcodeValue = decodeURIComponent(codeMatch[1]); // Make image clickable img.classList.add("barcode-clickable"); img.title = "Klicken zum Vergroessern: " + barcodeValue; img.style.cursor = "pointer"; // Add click handler img.addEventListener("click", function(e) { e.preventDefault(); e.stopPropagation(); showBarcodeZoom(src, barcodeValue); }); }); } function showBarcodeZoom(imageSrc, barcodeValue) { // Create overlay var overlay = document.createElement("div"); overlay.className = "barcode-zoom-overlay"; overlay.onclick = function(e) { if (e.target === overlay) { overlay.remove(); } }; // Create content var content = document.createElement("div"); content.className = "barcode-zoom-content"; content.onclick = function(e) { e.stopPropagation(); }; // Create large barcode image (modify URL for larger size) var largeImg = document.createElement("img"); largeImg.className = "barcode-zoom-image"; // Dolibarr viewimage.php accepts width/height params for barcode var largeSrc = imageSrc; // Remove existing width/height if any largeSrc = largeSrc.replace(/&width=\d+/g, "").replace(/&height=\d+/g, ""); // Add larger dimensions largeSrc += "&width=400&height=150"; largeImg.src = largeSrc; largeImg.alt = "Barcode: " + barcodeValue; content.appendChild(largeImg); // Add barcode value text var text = document.createElement("div"); text.className = "barcode-zoom-text"; text.textContent = barcodeValue; content.appendChild(text); // Add hint var hint = document.createElement("div"); hint.className = "barcode-zoom-hint"; hint.textContent = "Klicken Sie ausserhalb oder druecken Sie ESC zum Schliessen"; content.appendChild(hint); overlay.appendChild(content); document.body.appendChild(overlay); // Close on Escape key var closeHandler = function(e) { if (e.key === "Escape") { overlay.remove(); document.removeEventListener("keydown", closeHandler); } }; document.addEventListener("keydown", closeHandler); } // Initialize when DOM is ready if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", initBarcodeZoom); } else { initBarcodeZoom(); } })();