dolibarr.handybarcodescanner/js/barcodezoom.js.php

<?php
/* Copyright (C) 2026		Eduard Wisch		<data@data-it-solution.de>
 *
 * 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();
	}
})();