TC
/
WebStick


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
							<!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="https://code.jquery.com/jquery-3.6.0.min.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;
        }

        .zoom{
            width: 2em;
            opacity: 0.5;
            position: fixed;
            bottom: 1em;
            cursor: pointer;
        }

        .zoom.out{
            right: 1em;
        }

        .zoom.in{
            right: 3.2em;
        }

        #img{
            transition: transform 0.5s;
        }

    </style>
</head>
<body>
    <img id="img" style="max-height: 100vh;max-width: 100%;">
    <img class="left arrow" style="display:none;" onclick="previousImage();" src="img/arrow-left.svg">
    <img class="right arrow" style="display:none;" onclick="nextImage();" src="img/arrow-right.svg">
    <img class="zoom in" onclick="zoomIn();" src="img/zoom-in.svg">
    <img class="zoom out" onclick="zoomOut();" src="img/zoom-out.svg">
    <script>
        function loadInputFiles(){
            try{
                if (window.location.hash.length == 0){
                    return null;
                }
                var inputFileInfo = window.location.hash.substring(1,window.location.hash.length);
                inputFileInfo = JSON.parse(decodeURIComponent(inputFileInfo));

                if (inputFileInfo.length == 0){
                    return null;
                }
                return inputFileInfo
            }catch{
                return null;
            }
        }

        //Get file playback info from hash
        var playbackFile = {};
        var nearbyFileList = [];
        var currentImageURL = "";
        var currentImageFilename = "";
        var currentViewingIndex = 0;
        var zoomLevel = 1;
        var initMargin = [];
        var currentMargin = [];

        $(document).ready(function(){
            playbackFile = loadInputFiles();
            playbackFile = playbackFile;
            loadImage(playbackFile.filename, playbackFile.filepath);
            loadNearbyFiles(playbackFile.filepath);
        });

        $(window).on("resize ", function() {
            updateImgSize();
        });

        /*
            Zooming related functions
        */

        function zoomIn(){
            zoomLevel+= 0.5;
            if (zoomLevel >=3){
                zoomLevel = 3;
            }
            applyZoom();
        }

        function zoomOut(){
            zoomLevel-= 0.5;
            applyZoom();
        }

        $(window).bind('mousewheel DOMMouseScroll', function(event){
            //Get the percentage of offsets from the cursor position to the photo edge
           
            
            if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
                // scroll up
                zoomIn();
            }
            else {
                // scroll down
                zoomOut();
            }
        });

        function applyZoom(){
            if (zoomLevel < 1){
                zoomLevel = 1;
            }

            if (zoomLevel == 1){
                //Reset offsets
                updateImgSize();
            }

            $("#img").css("transform", `scale(${zoomLevel})`);
        }

        //Event binding for photo draging
        var isDragging = false;
        var initPositions = [];
        $(window).mousedown(function(evt) {
            evt.preventDefault();
            handleZoomMousedown(evt.clientX, evt.clientY);
        });

        $(window).mousemove(function(evt) {
            handleZoomMouseMove(evt.clientX, evt.clientY);
        });

        $(window).mouseup(function() {
            handleZoomMouseUp();
        });

        function getCurrentImageMargins(){
            var accLeft = $("#img").css("margin-left").replace("px","");
            var accTop = $("#img").css("margin-top").replace("px","");
            return [parseFloat(accLeft), parseFloat(accTop)];
        }

        function handleZoomMousedown(x,y){
            if (zoomLevel > 1){
                //Only allow dragging when zoomlv > 1
                isDragging = true;
                var accLeft = $("#img").css("margin-left").replace("px","");
                var accTop = $("#img").css("margin-top").replace("px","");
                initPositions = [JSON.parse(JSON.stringify(x - accLeft)), JSON.parse(JSON.stringify(y - accTop))];
            }
        }

        function handleZoomMouseMove(x,y){
            if (isDragging){
                console.log("dragging");
                var offsetsToStartPoint = [initPositions[0] - x, initPositions[1] - y];
                MoveImage(-offsetsToStartPoint[0], -offsetsToStartPoint[1]);
            }
        }

        function MoveImage(x,y){
            $("#img").css("margin-left",  x + "px");
            $("#img").css("margin-top", y + "px");
        }

        function handleZoomMouseUp(){
            isDragging = false;
        }


        //Load the nearby image files and allow swapping using <- and -> key
        function loadNearbyFiles(filepath){
            let parentDir = filepath.split("/");
            parentDir.pop();
            parentDir = parentDir.join("/");

            console.log(filepath, parentDir);
            $.get("/api/fs/list?dir=" + parentDir, function(data){
                if (data.error != undefined){
                    alert(data.error);
                }else{
                    nearbyFileList = [];
                    data.forEach(fileEntry => {
                        if (fileEntry.IsDir){
                            return;
                        }
                        let ext = fileEntry.Filename.split(".").pop();
                        if (ext == "jpg" || ext == "jpeg" || ext == "webp" || ext == "png" || ext == "gif"){
                            //Can render on web
                            nearbyFileList.push(parentDir + "/" + fileEntry.Filename);
                        }
                    });

                    if (nearbyFileList.length > 0){
                        $(".arrow").css("display", "");
                    }

                    //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;
                        }
                    }
                }
            });

            /*
            ao_module_agirun("Photo/embedded/listNearbyImage.js", {
                path: filepath
            }, function(data){
                if (data.error != undefined){
                    alert(data.error);
                }else{
                    nearbyFileList = data;
                    $(".arrow").css("display", "");
                    //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){
                //<-
                if (nearbyFileList.length > 0){
                    previousImage();
                }
            }else if (e.keyCode == 39){
                //->
                if (nearbyFileList.length > 0){
                    nextImage();
                }
            }else{
                //Invalid keycode to operate
                return;
            }
        })


        function loadImage(filename, filepath){
            $("#img").hide();
            document.title = ("Photo - " + filename);
            $("#img").attr("src", '/api/fs/download?preview=true&file=' + encodeURIComponent(filepath))
            currentImageURL = '/api/fs/download?preview=true&file=' + encodeURIComponent(filepath);
            currentImageFilename = filename;
            //realigin to center
            $('#img').on('load', function() {
                zoomLevel = 1;
                applyZoom();
                updateImgSize();
                $("#img").show();
            });
        }

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

        //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 imgmg = getCurrentImageMargins();
            var xDiff = xDown - xUp;
            var xDiffAcc = xDiff - imgmg[0];
            var yDiff = yDown - yUp;
            var yDiffAcc = yDiff - imgmg[1];
            
            if (zoomLevel == 1){
                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 */
    
                    }                                                                 
                }
            }else{
                MoveImage(-xDiffAcc, -yDiffAcc);
            }
            

            /* reset values */
            if (zoomLevel == 1){
                xDown = null;
                yDown = null;
            }else{
                xDown = xUp;
                yDown = yUp;
            }
                              
        };

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

    </script>
</body>

</html>