Stop swiping beyond the end.

[pr0n] / files / pr0n-fullscreen.js

diff --git a/files/pr0n-fullscreen.js b/files/pr0n-fullscreen.js
index 14b080d5d830766750c0c9ac69b14dba4f11beff..7ab77cd3155b4ad28320b4c54ed0af8121a4373f 100644 (file)
--- a/files/pr0n-fullscreen.js
+++ b/files/pr0n-fullscreen.js
@@ -169,6 +169,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) {
@@ -496,10 +497,80 @@ 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);
+       }
+       e.preventDefault();
+}
+
 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); };