obrazki/image.js

var imglist = null;
var dirname = null;
var filename = null;
var currId = 0;

function makeImageUrl(dir, file) {
	var res = scriptUrlPrefix + 'image.php?dir=' + dirname + '&file=' + filename;
	if (mode && mode.length > 0) {
		res += '&mode=' + mode;
	}
	return res;
}

function setLinks(e) {
	var doPush = false;

	/* browser navigation handling */
	if (e === undefined || e.type != 'popstate') {
		doPush = true;
	} else {
		currId = e.state;
	}

	/* replace the content */
	filename = imglist[currId].name;
	if (currId > 0) {
		$('#poprz').attr('href', makeImageUrl(dirname, imglist[currId-1].name));
		$('#poprz').show();
	} else {
		$('#poprz').hide();
	}
	if (currId < imglist.length - 1) {
		var url = makeImageUrl(dirname, imglist[currId+1].name);
		$('#nast').attr('href', url);
		$('#imagelink').attr('href', url);
		$('#nast').show();
	} else {
		$('#nast').hide();
		$('#imagelink').removeAttr('href');
	}
    var image = $("#image");
    image.removeClass('expanded');
    image.css('opacity', '0.2');
    image.attr('src', imageUrlPrefix + dirname + '/' + filename);
    image.off('load').on('load', function() {
	image.css('opacity', '1');
	scrollToImage();
    });
    if (doPush)
	window.history.pushState(currId, '', makeImageUrl(dirname, filename));
    commentsImageReplace(imglist[currId]);
    refreshComments();
}

function nextImage(e) {
	if (e)
		e.preventDefault();
	if (currId >= imglist.length - 1)
		return;
	currId++;
	setLinks();
}

function prevImage(e) {
	if (e)
		e.preventDefault();
	if (currId == 0)
		return;
	currId--;
	setLinks();
}

function imglistReceived(data) {
	imglist = data;
	/* find current id by url */
	var found = false;
	for (var i=0; i<data.length; i++) {
		file = data[i];
		if(file.name == filename) {
			currId = file.ord;
			found = true;
			break;
		}
	}
	if (!found) /* don't know where i am */
		return;
	$('#poprz').click(prevImage);
	$('#imagelink').click(nextImage);
	$('#nast').click(nextImage);
	window.onpopstate = setLinks;
	window.history.replaceState(currId, '', makeImageUrl(dirname, filename));
}

function getImgList() {
	var queryString = window.location.search;
	if (URLSearchParams === undefined)
		return; /* browser not supported */
	var urlParams = new URLSearchParams(queryString);
	dirname = urlParams.get('dir');
	filename = urlParams.get('file');
	if (dirname === null || filename === null) /* invalid params */
		return;
	var args = 'dir=' + dirname;
	if (mode && mode.length > 0) {
		args += '&mode=' + mode;
	}
	$.ajax({
		dataType: 'json',
		url: scriptUrlPrefix+'dirlist.php?'+args,
		success: imglistReceived
	});
}

$(document).keydown(function(e) {
	switch (e.which) {
		case 37:
			prevImage();
			return false;
		case 39:
			nextImage();
			return false;
	}
});

function initImageInteraction() {
	var img = document.getElementById('image');
	var imagelink = document.getElementById('imagelink');
	var isDragging = false;
	var hasDragged = false;
	var startX, startY, scrollLeft, scrollTop;
	var clickCount = 0;
	var clickTimer = null;
	var suppressNextClick = false;

	/* intercept clicks in capture phase to distinguish single vs double click */
	imagelink.addEventListener('click', function(e) {
		e.stopPropagation();
		e.preventDefault();

		if (suppressNextClick) {
			suppressNextClick = false;
			return;
		}

		clickCount++;
		clearTimeout(clickTimer);

		if (clickCount >= 2) {
			clickCount = 0;
			img.classList.toggle('expanded');
			if (!img.classList.contains('expanded')) {
				img.scrollIntoView({behavior: 'smooth', block: 'nearest', inline: 'nearest'});
			}
		} else {
			clickTimer = setTimeout(function() {
				clickCount = 0;
				if (!img.classList.contains('expanded')) {
					nextImage();
				}
			}, 250);
		}
	}, true);

	img.addEventListener('mousedown', function(e) {
		if (!img.classList.contains('expanded') || e.button !== 0) return;
		isDragging = true;
		hasDragged = false;
		startX = e.clientX;
		startY = e.clientY;
		scrollLeft = window.scrollX;
		scrollTop = window.scrollY;
		img.classList.add('dragging');
		e.preventDefault();
	});

	document.addEventListener('mousemove', function(e) {
		if (!isDragging) return;
		var dx = e.clientX - startX;
		var dy = e.clientY - startY;
		if (Math.abs(dx) > 3 || Math.abs(dy) > 3) hasDragged = true;
		window.scrollTo(scrollLeft - dx, scrollTop - dy);
	});

	document.addEventListener('mouseup', function() {
		if (!isDragging) return;
		isDragging = false;
		img.classList.remove('dragging');
		if (hasDragged) suppressNextClick = true;
	});

	img.addEventListener('touchstart', function(e) {
		if (!img.classList.contains('expanded') || e.touches.length !== 1) return;
		isDragging = true;
		hasDragged = false;
		startX = e.touches[0].clientX;
		startY = e.touches[0].clientY;
		scrollLeft = window.scrollX;
		scrollTop = window.scrollY;
	}, {passive: true});

	img.addEventListener('touchmove', function(e) {
		if (!isDragging || e.touches.length !== 1) return;
		var dx = e.touches[0].clientX - startX;
		var dy = e.touches[0].clientY - startY;
		if (Math.abs(dx) > 3 || Math.abs(dy) > 3) hasDragged = true;
		window.scrollTo(scrollLeft - dx, scrollTop - dy);
		e.preventDefault();
	}, {passive: false});

	img.addEventListener('touchend', function() {
		isDragging = false;
	});
}

function scrollToImage() {
	var img = document.getElementById('image');
	img.scrollIntoView({behavior: 'smooth', block: 'nearest', inline: 'nearest'});
}

$(document).ready(function() {
	getImgList();
	$('body').on('swipeleft', nextImage);
	$('body').on('swiperight', prevImage);
	initImageInteraction();
	var img = document.getElementById('image');
	if (img.complete) {
		scrollToImage();
	} else {
		img.addEventListener('load', scrollToImage, {once: true});
	}
});