TC
/
arozos


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
							<!DOCTYPE html>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />
<html>
<head>
    <meta charset="UTF-8">
    <meta name="theme-color" content="#4b75ff">
    <title>Photo Viewer</title>
    <script src="../script/jquery.min.js"></script>
    <script src="../script/ao_module.js"></script>
    <link rel="manifest" href="manifest.json">
    <style>
        body{
            margin: 0px !important;
            background:rgba(34,34,34,1);
            overflow: hidden;
        }
        .arrow{
            width: 2em;
            opacity: 0.5;
            position: fixed;
            top: calc(50% - 1em);
            cursor: pointer;
        }

        .left.arrow{
            left: 2em;
        }

        .right.arrow{
            right: 2em;
        }
    </style>
</head>
<body>
    <img id="img" style="max-height: 100vh;max-width: 100%;">
    <img class="left arrow" onclick="previousImage();" src="embedded/arrow-left.svg">
    <img class="right arrow" onclick="nextImage();" src="embedded/arrow-right.svg">
    <script>
        //Get file playback info from hash
        var playbackFile = ao_module_loadInputFiles();
        var nearbyFileList = [];
        var currentViewingIndex = 0;
        //Only handle one file
        playbackFile = playbackFile[0];
        loadImage(playbackFile.filename, playbackFile.filepath);
        
        $(window).on("resize ", function() {
            updateImgSize();
        });

        //Load the nearby image files and allow swapping using <- and -> key
        function loadNearbyFiles(filepath){
            ao_module_agirun("Photo/embedded/listNearbyImage.js", {
                path: filepath
            }, function(data){
                if (data.error != undefined){
                    alert(data.error);
                }else{
                    nearbyFileList = data;

                    //Track which index currently the user is viewing
                    for (var i = 0; i < nearbyFileList.length; i++){
                        var thisPath = nearbyFileList[i];
                        if (thisPath == filepath.split("\\").join("/")){
                            currentViewingIndex = i;
                        }
                    }
                }
            })
        }

        function nextImage(){
            nextPhoto = currentViewingIndex + 1;
            if (nextPhoto > nearbyFileList.length - 1){
                nextPhoto = nearbyFileList.length - 1;
            }

            var filepath = nearbyFileList[nextPhoto];
            var filename = filepath.split('/').pop();
            if (nextPhoto != currentViewingIndex){
                //Change in photo index
                loadImage(filename, filepath);
                 currentViewingIndex = nextPhoto;
            }
        }

        function previousImage(){
            nextPhoto = currentViewingIndex - 1;
            if (nextPhoto < 0){
                nextPhoto = 0;
            }

            var filepath = nearbyFileList[nextPhoto];
            var filename = filepath.split('/').pop();
            if (nextPhoto != currentViewingIndex){
                //Change in photo index
                loadImage(filename, filepath);
                 currentViewingIndex = nextPhoto;
            }
        }

        //Bind arrow key events
        $("body").on("keydown", function(e){
            var nextPhoto = currentViewingIndex;
            if (e.keyCode == 37){
                //<-
                previousImage();
            }else if (e.keyCode == 39){
                //->
                nextImage();
            }else{
                //Invalid keycode to operate
                return;
            }
        })

        loadNearbyFiles(playbackFile.filepath);

        function loadImage(filename, filepath){
            $("#img").hide();
            ao_module_setWindowTitle("Photo - " + filename);
            $("#img").attr("src", '../media?file=' + encodeURIComponent(filepath))
            
            //realigin to center
            $('#img').on('load', function() {
                updateImgSize();
                $("#img").show();
            });
        }

        function updateImgSize() {
            $('#img').css("margin-top", (window.innerHeight - $("#img").height()) / 2);
            $('#img').css("margin-left", (window.innerWidth - $("#img").width()) / 2);
        }

        //Touch gesture detections
        document.addEventListener('touchstart', handleTouchStart, false);        
        document.addEventListener('touchmove', handleTouchMove, false);

        var xDown = null;                                                        
        var yDown = null;

        function getTouches(evt) {
        return evt.touches ||             // browser API
                evt.originalEvent.touches; // jQuery
        }                                                     
                                                                                
        function handleTouchStart(evt) {
            const firstTouch = getTouches(evt)[0];                                      
            xDown = firstTouch.clientX;
            yDown = firstTouch.clientY;
        };


        function handleTouchMove(evt) {
            if ( ! xDown || ! yDown ) {
                return;
            }

            var xUp = evt.touches[0].clientX;                                    
            var yUp = evt.touches[0].clientY;

            var xDiff = xDown - xUp;
            var yDiff = yDown - yUp;
                                                                                
            if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
                if ( xDiff > 0 ) {
                    /* right swipe */ 
                    nextImage();
                } else {
                    /* left swipe */
                    previousImage();
                }                       
            } else {
                if ( yDiff > 0 ) {
                    /* down swipe */ 
                } else { 
                    /* up swipe */
                }                                                                 
            }

            /* reset values */
            xDown = null;
            yDown = null;                        
        };

        function isZoomed(){
            return window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;
        }

    </script>
</body>

</html>