X-Git-Url: https://git.sesse.net/?p=pr0n;a=blobdiff_plain;f=files%2Fpr0n-fullscreen.js;h=076c626a9a81c49dc59a22189ead0eebef165f83;hp=e81fd37886a6a3e718a1be8c4c94b760abf6c553;hb=HEAD;hpb=5e125fda482f5887459721b76ef24cf82aa4202b

diff --git a/files/pr0n-fullscreen.js b/files/pr0n-fullscreen.js
index e81fd37..f08605c 100644
--- a/files/pr0n-fullscreen.js
+++ b/files/pr0n-fullscreen.js
@@ -104,7 +104,7 @@ function rename_element(old_name, new_name)
 	return elem;
 }
 
-function display_image(url, backend_width, backend_height, elem_id, offset, preload)
+function display_image(url, backend_width, backend_height, elem_id, offset)
 {
 	// See if this image already exists in the DOM; if not, add it.
 	var img = document.getElementById(elem_id);
@@ -112,7 +112,7 @@ function display_image(url, backend_width, backend_height, elem_id, offset, prel
 		img = document.createElement("img");
 		img.id = elem_id;
 		img.alt = "";
-		img.className = preload ? "fsbox" : "fsimg";
+		img.className = "fsimg";
 	}
 	img.style.position = "absolute";
 	img.style.transformOrigin = "top left";
@@ -120,7 +120,7 @@ function display_image(url, backend_width, backend_height, elem_id, offset, prel
 
 	if (offset === 0) {
 		img.src = url;
-		position_image(img, backend_width, backend_height, offset, preload);
+		position_image(img, backend_width, backend_height, offset, false);
 	} else {
 		// This is a preload, so wait for the main image to be ready.
 		// The test for .complete is an old IE hack, which I don't know if is relevant anymore.
@@ -128,13 +128,45 @@ function display_image(url, backend_width, backend_height, elem_id, offset, prel
 		if (main_img === null || main_img.complete) {
 			img.src = url;
 		} else {
-			main_img.addEventListener('load', function() { img.src = url; }, false);
+			main_img.addEventListener('load', function() { img.src = url; }, { 'once': true });
 		}
 
 		// Seemingly one needs to delay position_image(), or Firefox will set the initial
 		// scroll offset completely off.
 		img.style.display = 'none';
-		setTimeout(function() { position_image(img, backend_width, backend_height, offset, preload); img.style.display = null; }, 1);
+		setTimeout(function() {
+			img.style.display = null;  // Must be done before position_image(), for measurement.
+			position_image(img, backend_width, backend_height, offset, false);
+		}, 1);
+	}
+}
+
+function display_infobox(html, backend_width, backend_height, elem_id, offset)
+{
+	// See if this image already exists in the DOM; if not, add it.
+	var box = document.getElementById(elem_id);
+	if (box === null) {
+		box = document.createElement("div");
+		box.id = elem_id;
+		box.alt = "";
+		box.className = "fsbox";
+	}
+	box.style.position = "absolute";
+	box.style.transformOrigin = "top left";
+	box.innerHTML = html;
+	document.getElementById("main").appendChild(box);
+
+	if (offset === 0) {
+		position_image(box, backend_width, backend_height, offset, true);
+	} else {
+		// This is a preload.
+		// Seemingly one needs to delay position_image(), or Firefox will set the initial
+		// scroll offset completely off.
+		box.style.display = 'none';
+		setTimeout(function() {
+			box.style.display = null;  // Must be done before position_image(), for measurement.
+			position_image(box, backend_width, backend_height, offset, true);
+		}, 1);
 	}
 }
 
@@ -157,19 +189,11 @@ function display_image_num(num, offset)
 	var url = window.location.origin + "/" + evt + "/" + backend_width + "x" + backend_height + "/" + filename;
 	var elem_id = num;
 
-	display_image(url, adjusted_size[2], adjusted_size[3], elem_id, offset, false);
+	display_image(url, adjusted_size[2], adjusted_size[3], elem_id, offset);
 
 	if (global_infobox) {
-		var url;
-		var dpr = find_dpr();
 		var elem_id = num + "_box";
-		if (dpr == 1) {
-			url = window.location.origin + "/" + evt + "/" + backend_width + "x" + backend_height + "/box/" + filename;
-		} else {
-			url = window.location.origin + "/" + evt + "/" + backend_width + "x" + backend_height + "@" + dpr.toFixed(2) + "/box/" + filename;
-		}
-		display_image(url, adjusted_size[2], adjusted_size[3], elem_id, offset, true);
-		document.getElementById(elem_id).style.transform += " scale(" + (1.0 / dpr) + ")";
+		display_infobox(global_image_list[num][4], adjusted_size[2], adjusted_size[3], elem_id, offset);
 	}
 
 	if (offset === 0) {
@@ -218,7 +242,7 @@ function set_opacity(id, amount)
 	elem.style.opacity = amount;
 }
 
-function position_image(img, backend_width, backend_height, offset, preload)
+function position_image(img, backend_width, backend_height, offset, box)
 {
 	var screen_size = find_width();
 	var dpr = find_dpr();
@@ -240,15 +264,23 @@ function position_image(img, backend_width, backend_height, offset, preload)
 	var left = (screen_size[0] - width) / 2;
 	var top = (screen_size[1] - height) / 2;
 
-	if (global_infobox) top -= dpr * (24/2);
+	if (global_infobox) {
+		top = Math.max(top - dpr * (24/2), 0);
+	}
 
 	// center the image on-screen
 	img.style.position = "absolute";
 	img.style.left = (left / dpr) + "px";
 	img.style.transform = "translate(" + extra_x_offset + "px,0px)";
 
-	if (preload) {
-		img.style.top = (top + height) / dpr + "px";
+	if (box) {
+		img.style.top = Math.min(top + height, screen_size[1] - 24 * dpr) / dpr + "px";
+		img.style.height = "24px";
+		img.style.width = null;
+		img.style.whiteSpace = 'nowrap';
+		// Hide the box if there's no room for all the text.
+		img.style.opacity = (img.clientWidth < width / dpr + 10) ? null : 0.0;
+		img.style.width = (width / dpr) + "px";
 	} else {
 		img.style.top = (top / dpr) + "px";
 		img.style.lineHeight = (height / dpr) + "px";
@@ -283,7 +315,7 @@ function update_shown_images()
 		//    inum !== global_image_num + 1) {
 		//	to_remove.push(child);
 		//}
-		if (inum !== global_image_num) {
+		if (inum !== global_image_num || (child.className === "fsbox" && !global_infobox)) {
 			to_remove.push(child);
 		}
 	}
@@ -381,11 +413,11 @@ function draw_text(msg)
 	text.style.font = "24px verdana, arial, sans-serif";
 	text.innerHTML = msg;
 
-	var main = document.getElementById("main");
-	main.appendChild(text);
+	document.getElementById("main").appendChild(text);
 
-	text.style.left = (main.clientWidth - text.clientWidth) / 2 + "px";
-	text.style.top = (main.clientHeight - text.clientHeight) / 2 + "px";
+	var screen_size = find_width();
+	text.style.left = (screen_size[0] - text.clientWidth) / 2 + "px";
+	text.style.top = (screen_size[1] - text.clientHeight) / 2 + "px";
 }
 
 function fade_text(opacity)
@@ -414,7 +446,7 @@ function select_image(evt, filename, selected)
 	}
 	
 	var req = new XMLHttpRequest();
-	req.open("POST", window.location.origin + "/select", false);
+	req.open("POST", window.location.origin + "/select", true);
 	req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 	req.send("event=" + evt + "&filename=" + filename + "&selected=" + selected);
 
@@ -497,10 +529,79 @@ function toggle_immersive() {
 }
 window['toggle_immersive'] = toggle_immersive;
 
+var swiping = false;
+var swipe_start_x = 0;
+
+function set_swipe_pos(x, transition)
+{
+	x = Math.max(x, -window.innerWidth);
+	x = Math.min(x,  window.innerWidth);
+	if (!can_go_previous()) {
+		x = Math.min(x, window.innerWidth / 8);
+	}
+	if (!can_go_next()) {
+		x = Math.max(x, -window.innerWidth / 8);
+	}
+
+	var dpr = find_dpr();
+	var main = document.getElementById("main");
+	var children = main.children;
+	var to_remove = [];
+	for (var i = 0; i < children.length; i++) {
+		var child = children[i];
+		if (child.className === "fsimg") {
+			var inum = parseInt(child.id);
+			var offset = inum - global_image_num;
+			child.style.transition = transition;
+			child.style.transform = "translate(" + (x + find_width()[0] * offset / dpr) + "px,0px)";
+		} else if (child.className === "fsbox") {
+			var inum = parseInt(child.id.replace("_box", ""));
+			var offset = inum - global_image_num;
+			child.style.transition = transition;
+			child.style.transform = "translate(" + (x + find_width()[0] * offset / dpr) + "px,0px)";
+		}
+	}
+}
+
+function start_swipe(e)
+{
+	swiping = true;
+	swipe_start_x = e.changedTouches[0].pageX;
+}
+
+function end_swipe(e)
+{
+	if (swiping) {
+		var new_x = (e.changedTouches[0].pageX - swipe_start_x);
+		if (new_x < -window.innerWidth / 4 && can_go_next()) {
+			set_swipe_pos(-window.innerWidth, "transform 0.1s ease-out");
+			setTimeout(function() { go_next(); }, 100);
+		} else if (new_x > window.innerWidth / 4 && can_go_previous()) {
+			set_swipe_pos(window.innerWidth, "transform 0.1s ease-out");
+			setTimeout(function() { go_previous(); }, 100);
+		} else {
+			set_swipe_pos(0, "transform 0.1s ease-out");
+		}
+		swiping = false;
+	}
+}
+
+function swipe(e)
+{
+	if (swiping) {
+		var new_x = (e.changedTouches[0].pageX - swipe_start_x);
+		set_swipe_pos(new_x, null);
+	}
+}
+
 window.onload = function() {
 	relayout();
 	setInterval(check_for_hash_change, 1000);
 
+	document.addEventListener('touchstart', start_swipe, false);
+	document.addEventListener('touchend', end_swipe, false);
+	document.addEventListener('touchmove', swipe, false)
+
 	var body = document.body;
 	body.onresize = function() { relayout(); };
 	body.onkeydown = function(evt) { key_down(evt.keyCode); };