X-Git-Url: https://git.sesse.net/?p=pr0n;a=blobdiff_plain;f=files%2Fpr0n-fullscreen.js;h=076c626a9a81c49dc59a22189ead0eebef165f83;hp=a8ad78a9d0296ea912ba8ffab9840a9e68f620fc;hb=3302d279442feb859579d6be6b8feb9adee34418;hpb=6cd0332e10bb468ef5506be63b8a47f7c7e12fd9 diff --git a/files/pr0n-fullscreen.js b/files/pr0n-fullscreen.js index a8ad78a..076c626 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, box) { // 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 = box ? "fsbox" : "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, box); } 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. @@ -133,7 +133,11 @@ function display_image(url, backend_width, backend_height, elem_id, offset, prel // Seemingly one needs to delay position_image(), or Firefox will set the initial // scroll offset completely off. - setTimeout(function() { position_image(img, backend_width, backend_height, offset, preload); }, 1); + img.style.display = 'none'; + setTimeout(function() { + position_image(img, backend_width, backend_height, offset, box); + img.style.display = null; + }, 1); } } @@ -168,6 +172,7 @@ function display_image_num(num, offset) 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) + ")"; } if (offset === 0) { @@ -216,7 +221,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(); @@ -238,15 +243,17 @@ 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 + "px"; } else { img.style.top = (top / dpr) + "px"; img.style.lineHeight = (height / dpr) + "px"; @@ -379,11 +386,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) @@ -412,7 +419,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); @@ -495,10 +502,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) scale(" + (1.0 / dpr) + ")"; + } + } +} + +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); };