Merge pull request #36558 from thersane-john/fix-dialog-patch-02-grab-to-scroll

UIUX : Add real-size image dialog with drag-to-scroll support in WebPortal

htdocs/public/webportal/css/mixin.css

@@ -14,3 +14,17 @@
 .width150 {
 	width: 150px;
 }
+
+/* special style for drag to scroll behavior */
+.--drag-to-scroll{
+	cursor: grab;
+}
+.--drag-to-scroll-is-active {
+	user-select: none;
+	cursor: grabbing;
+}
+.--drag-to-scroll-is-active object,
+.--drag-to-scroll-is-active iframe,
+.--drag-to-scroll-is-active embed {
+	pointer-events: none;
+}

htdocs/public/webportal/js/theme.js

@@ -19,3 +19,62 @@ document.addEventListener("DOMContentLoaded", function() {
 	});
 
 });
+
+/**
+ * Enables drag-to-scroll behavior on a given element.
+ * Supports mouse, touch, pen, X and Y scrolling.
+ *
+ * @param {string | Element | jQuery} slider - A CSS selector, DOM element, or jQuery object.
+ * @param {string|false} classForEnable - Optional class required to enable dragging.
+ */
+function dragToScroll(slider, classForEnable = false) {
+
+	const classActive = '--drag-to-scroll-is-active';
+
+	// Normalize input
+	if (typeof slider === 'string') {
+		slider = document.querySelector(slider);
+	} else if (window.jQuery && slider instanceof jQuery) {
+		slider = slider[0];
+	} else if (!(slider instanceof Element)) {
+		console.warn('dragToScroll: invalid element', slider);
+		return;
+	}
+
+	let isDown = false;
+	let startX;
+	let startY;
+	let scrollLeft;
+	let scrollTop;
+
+	slider.addEventListener('pointerdown', (e) => {
+		if (classForEnable && !slider.classList.contains(classForEnable)) return;
+
+		isDown = true;
+		slider.setPointerCapture(e.pointerId);
+		slider.classList.add(classActive);
+
+		startX = e.clientX;
+		startY = e.clientY;
+
+		scrollLeft = slider.scrollLeft;
+		scrollTop = slider.scrollTop;
+	});
+
+	slider.addEventListener('pointermove', (e) => {
+		if (!isDown) return;
+
+		e.preventDefault();
+
+		const walkX = e.clientX - startX;
+		const walkY = e.clientY - startY;
+
+		slider.scrollLeft = scrollLeft - walkX;
+		slider.scrollTop = scrollTop - walkY;
+	});
+
+	slider.addEventListener('pointerup', () => {
+		isDown = false;
+		slider.classList.remove(classActive);
+	});
+}

htdocs/public/webportal/tpl/footer.tpl.php

@@ -258,6 +258,10 @@ if (empty($conf->browser->layout) || $conf->browser->layout != 'phone') { ?>
 
 				$('#modalforpopup article').html(newElem);
 
+				if (mode == 'image' && showOriginalSizeButton) {
+					dragToScroll($('#modalforpopup .dialog-body'), '--drag-to-scroll');
+				}
+
 				let modal = document.getElementById('modalforpopup');
 
 				// Add close button handler
@@ -278,6 +282,7 @@ if (empty($conf->browser->layout) || $conf->browser->layout != 'phone') { ?>
 		function document_preview_original_size() {
 			console.log("document_preview_original_size A click on original size");
 			jQuery("#modalforpopup object.object-preview").toggleClass('--show-original-size');
+			jQuery("#modalforpopup .dialog-body").toggleClass('--drag-to-scroll');
 		}
 	</script>