Add edit feature to embed photo viewer

src/web/Photo/embedded.html

@@ -13,8 +13,22 @@
     <style>
         body{
             margin: 0px !important;
-            background:rgba(34,34,34,1);
+            background:#1a1a1a;
             overflow: hidden;
+            display: flex;
+        }
+        
+        #imageContainer{
+            flex: 1;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: margin-right 0.3s ease;
+        }
+        
+        #imageContainer.editing{
+            margin-right: 320px;
         }
         .arrow{
             width: 2em;
@@ -32,43 +46,234 @@
             right: 2em;
         }
 
-        .zoom{
+
+
+        #img{
+            transition: transform 0.5s;
+        }
+
+        .edit{
             width: 2em;
             opacity: 0.5;
             position: fixed;
             bottom: 1em;
             cursor: pointer;
+            left: 1em;
         }
 
-        .zoom.out{
-            right: 1em;
+        .edit:hover{
+            opacity: 1;
         }
 
-        .zoom.in{
-            right: 3.2em;
+        #editPanel{
+            position: fixed;
+            right: 0;
+            top: 0;
+            width: 320px;
+            height: 100vh;
+            background: rgba(26, 26, 26, 0.95);
+            backdrop-filter: blur(10px);
+            color: white;
+            padding: 20px;
+            box-sizing: border-box;
+            transform: translateX(100%);
+            transition: transform 0.3s ease;
+            z-index: 1000;
+            overflow-y: auto;
+            flex-shrink: 0;
         }
 
-        #img{
-            transition: transform 0.5s;
+        #editPanel.active{
+            transform: translateX(0);
         }
 
-        .print{
-            width: 2em;
-            opacity: 0.5;
+        .edit-section{
+            margin-bottom: 25px;
+            padding-bottom: 20px;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+        }
+
+        .edit-section:last-child{
+            border-bottom: none;
+        }
+
+        .edit-section h3{
+            margin: 0 0 15px 0;
+            font-size: 14px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: #4b75ff;
+        }
+
+
+
+        .button-group{
+            display: flex;
+            gap: 10px;
+            margin-top: 10px;
+        }
+
+        .edit-button{
+            flex: 1;
+            padding: 10px;
+            background: #4b75ff;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 13px;
+            transition: background 0.2s;
+        }
+
+        .edit-button:hover{
+            background: #3d5fd8;
+        }
+
+        .edit-button.secondary{
+            background: rgba(255,255,255,0.1);
+        }
+
+        .edit-button.secondary:hover{
+            background: rgba(255,255,255,0.2);
+        }
+
+        #cropOverlay{
             position: fixed;
-            bottom: 1em;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: none;
+            z-index: 999;
+        }
+
+        #cropOverlay.active{
+            display: block;
+        }
+
+        #cropBox{
+            position: absolute;
+            border: 2px solid #4b75ff;
+            box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
+            cursor: move;
+        }
+
+        .crop-handle{
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background: white;
+            border: 2px solid #4b75ff;
+            border-radius: 50%;
+            cursor: move;
+        }
+
+        .crop-handle.top{
+            top: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            cursor: ns-resize;
+        }
+
+        .crop-handle.bottom{
+            bottom: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            cursor: ns-resize;
+        }
+
+        .crop-handle.left{
+            left: -10px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: ew-resize;
+        }
+
+        .crop-handle.right{
+            right: -10px;
+            top: 50%;
+            transform: translateY(-50%);
+            cursor: ew-resize;
+        }
+
+        #closeEditPanel{
+            position: absolute;
+            top: 15px;
+            right: 15px;
+            width: 30px;
+            height: 30px;
+            background: rgba(255,255,255,0.1);
+            border: none;
+            border-radius: 50%;
+            color: white;
+            font-size: 20px;
             cursor: pointer;
-            left: 1em;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.2s;
+        }
+
+        #closeEditPanel:hover{
+            background: rgba(255,255,255,0.2);
         }
     </style>
 </head>
 <body>
-    <img id="img" style="max-height: 100vh;max-width: 100%;">
-    <img class="left arrow" style="display:none;" onclick="previousImage();" src="embedded/arrow-left.svg">
-    <img class="right arrow" style="display:none;" onclick="nextImage();" src="embedded/arrow-right.svg">
-    <img class="zoom in" onclick="zoomIn();" src="embedded/zoom-in.svg">
-    <img class="zoom out" onclick="zoomOut();" src="embedded/zoom-out.svg">
-    <img class="print" onclick="PrintImage();" src="embedded/print.svg">
+    <div id="imageContainer">
+        <img id="img" style="max-height: 100vh;max-width: 100%;">
+        <img class="left arrow" style="display:none;" onclick="previousImage();" src="embedded/arrow-left.svg">
+        <img class="right arrow" style="display:none;" onclick="nextImage();" src="embedded/arrow-right.svg">
+        <img class="edit" onclick="toggleEditPanel();" src="embedded/edit.svg" title="Edit Image">
+    </div>
+    
+    <!-- Edit Panel -->
+    <div id="editPanel">
+        <button id="closeEditPanel" onclick="toggleEditPanel();">×</button>
+        <h2 style="margin-top: 0; font-size: 18px;">Edit Image</h2>
+        
+        <!-- Crop Section -->
+        <div class="edit-section">
+            <h3>Crop Image</h3>
+            <div class="button-group">
+                <button class="edit-button" onclick="startCrop();">Start Crop</button>
+                <button class="edit-button secondary" onclick="cancelCrop();">Cancel</button>
+            </div>
+            <button class="edit-button" style="margin-top: 10px; width: 100%;" onclick="applyCrop();">Apply Crop</button>
+        </div>
+        
+        <!-- Rotation Section -->
+        <div class="edit-section">
+            <h3>Rotate</h3>
+            <div class="button-group">
+                <button class="edit-button" onclick="rotateImage(-90);">↺ Left</button>
+                <button class="edit-button" onclick="rotateImage(90);">↻ Right</button>
+            </div>
+        </div>
+        
+        <!-- Save Section -->
+        <div class="edit-section">
+            <h3>Save</h3>
+            <button class="edit-button" style="width: 100%; margin-bottom: 10px;" onclick="saveToArozOS();">Save to ArozOS</button>
+            <button class="edit-button secondary" style="width: 100%;" onclick="downloadImage();">Download to Device</button>
+        </div>
+        
+        <!-- Reset Section -->
+        <div class="edit-section">
+            <button class="edit-button secondary" style="width: 100%;" onclick="resetEdits();">Reset All Changes</button>
+        </div>
+    </div>
+    
+    <!-- Crop Overlay -->
+    <div id="cropOverlay">
+        <div id="cropBox">
+            <div class="crop-handle top"></div>
+            <div class="crop-handle bottom"></div>
+            <div class="crop-handle left"></div>
+            <div class="crop-handle right"></div>
+        </div>
+    </div>
     <script>
         //Get file playback info from hash
         var playbackFile = ao_module_loadInputFiles();
@@ -76,9 +281,16 @@
         var currentImageURL = "";
         var currentImageFilename = "";
         var currentViewingIndex = 0;
-        var zoomLevel = 1;
         var initMargin = [];
         var currentMargin = [];
+        
+        // Edit functionality variables
+        var rotation = 0;
+        var isCropping = false;
+        var isEditMode = false;
+        var cropData = null;
+        var canvas = document.createElement('canvas');
+        var ctx = canvas.getContext('2d');
 
         //Only handle one file
         playbackFile = playbackFile[0];
@@ -88,130 +300,330 @@
             updateImgSize();
         });
 
+
+
         /*
-            Zooming related functions
+            Edit Panel Functions
         */
-
-        function zoomIn(){
-            zoomLevel+= 0.5;
-            if (zoomLevel >=3){
-                zoomLevel = 3;
+        let interval;
+        function toggleEditPanel(){
+            var panel = document.getElementById('editPanel');
+            var container = document.getElementById('imageContainer');
+            panel.classList.toggle('active');
+            container.classList.toggle('editing');
+            isEditMode = panel.classList.contains('active');
+
+            if (interval){
+                clearInterval(interval);
             }
-            applyZoom();
+            interval = setInterval(function(){
+                updateImgSize();
+            }, 1);
+            setTimeout(function(){
+               clearInterval(interval);
+            }, 300);
         }
 
-        function zoomOut(){
-            zoomLevel-= 0.5;
-            applyZoom();
+        function applyAllFilters(){
+            var transformString = `rotate(${rotation}deg)`;
+            var img = document.getElementById('img');
+            img.style.transform = transformString;
         }
 
-        $(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})`);
+        function rotateImage(degrees){
+            rotation += degrees;
+            applyAllFilters();
         }
 
-        //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 resetEdits(){
+            rotation = 0;
+            cancelCrop();
+            document.getElementById('img').src = currentImageURL;
+            cropData = null;
+            applyAllFilters();
+            updateImgSize();
         }
 
-        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))];
-            }
+        /*
+            Crop Functions
+        */
+
+        function startCrop(){
+            if (isCropping) return;
+            
+            isCropping = true;
+            var overlay = document.getElementById('cropOverlay');
+            var cropBox = document.getElementById('cropBox');
+            var img = document.getElementById('img');
+            
+            // Get image position and size
+            var rect = img.getBoundingClientRect();
+            
+            // Initialize crop box to center of image (50% size)
+            var cropWidth = rect.width * 0.6;
+            var cropHeight = rect.height * 0.6;
+            var cropLeft = rect.left + (rect.width - cropWidth) / 2;
+            var cropTop = rect.top + (rect.height - cropHeight) / 2;
+            
+            cropBox.style.left = cropLeft + 'px';
+            cropBox.style.top = cropTop + 'px';
+            cropBox.style.width = cropWidth + 'px';
+            cropBox.style.height = cropHeight + 'px';
+            
+            overlay.classList.add('active');
+            
+            // Add drag functionality to handles
+            setupCropHandles();
         }
 
-        function handleZoomMouseMove(x,y){
-            if (isDragging){
-                console.log("dragging");
-                var offsetsToStartPoint = [initPositions[0] - x, initPositions[1] - y];
-                MoveImage(-offsetsToStartPoint[0], -offsetsToStartPoint[1]);
-            }
+        function setupCropHandles(){
+            var cropBox = document.getElementById('cropBox');
+            var handles = cropBox.querySelectorAll('.crop-handle');
+            
+            // Remove existing listeners by cloning
+            var newCropBox = cropBox.cloneNode(true);
+            cropBox.parentNode.replaceChild(newCropBox, cropBox);
+            cropBox = newCropBox;
+            handles = cropBox.querySelectorAll('.crop-handle');
+            
+            // Add drag functionality to the crop box itself
+            cropBox.addEventListener('mousedown', function(e){
+                // Check if clicking on the box itself, not a handle
+                if (e.target === cropBox){
+                    e.preventDefault();
+                    var startX = e.clientX;
+                    var startY = e.clientY;
+                    var startLeft = parseInt(cropBox.style.left);
+                    var startTop = parseInt(cropBox.style.top);
+                    var img = document.getElementById('img');
+                    var imgRect = img.getBoundingClientRect();
+                    var boxWidth = parseInt(cropBox.style.width);
+                    var boxHeight = parseInt(cropBox.style.height);
+                    
+                    function onMouseMove(e){
+                        var dx = e.clientX - startX;
+                        var dy = e.clientY - startY;
+                        var newLeft = startLeft + dx;
+                        var newTop = startTop + dy;
+                        
+                        // Constrain to image boundaries
+                        if (newLeft < imgRect.left) newLeft = imgRect.left;
+                        if (newTop < imgRect.top) newTop = imgRect.top;
+                        if (newLeft + boxWidth > imgRect.right) newLeft = imgRect.right - boxWidth;
+                        if (newTop + boxHeight > imgRect.bottom) newTop = imgRect.bottom - boxHeight;
+                        
+                        cropBox.style.left = newLeft + 'px';
+                        cropBox.style.top = newTop + 'px';
+                    }
+                    
+                    function onMouseUp(){
+                        document.removeEventListener('mousemove', onMouseMove);
+                        document.removeEventListener('mouseup', onMouseUp);
+                    }
+                    
+                    document.addEventListener('mousemove', onMouseMove);
+                    document.addEventListener('mouseup', onMouseUp);
+                }
+            });
+            
+            // Add handle resize functionality
+            handles.forEach(function(handle){
+                handle.addEventListener('mousedown', function(e){
+                    e.preventDefault();
+                    e.stopPropagation(); // Prevent triggering box drag
+                    var startX = e.clientX;
+                    var startY = e.clientY;
+                    var startLeft = parseInt(cropBox.style.left);
+                    var startTop = parseInt(cropBox.style.top);
+                    var startWidth = parseInt(cropBox.style.width);
+                    var startHeight = parseInt(cropBox.style.height);
+                    var handleClass = handle.className.split(' ')[1];
+                    var img = document.getElementById('img');
+                    var imgRect = img.getBoundingClientRect();
+                    var minSize = 20; // Minimum crop box size
+                    
+                    function onMouseMove(e){
+                        var dx = e.clientX - startX;
+                        var dy = e.clientY - startY;
+                        
+                        if (handleClass === 'top'){
+                            var newTop = startTop + dy;
+                            var newHeight = startHeight - dy;
+                            // Constrain to image boundaries and minimum size
+                            if (newTop < imgRect.top) {
+                                newTop = imgRect.top;
+                                newHeight = startTop + startHeight - imgRect.top;
+                            }
+                            if (newHeight >= minSize){
+                                cropBox.style.top = newTop + 'px';
+                                cropBox.style.height = newHeight + 'px';
+                            }
+                        } else if (handleClass === 'bottom'){
+                            var newHeight = startHeight + dy;
+                            var maxHeight = imgRect.bottom - startTop;
+                            if (newHeight > maxHeight) newHeight = maxHeight;
+                            if (newHeight >= minSize){
+                                cropBox.style.height = newHeight + 'px';
+                            }
+                        } else if (handleClass === 'left'){
+                            var newLeft = startLeft + dx;
+                            var newWidth = startWidth - dx;
+                            // Constrain to image boundaries and minimum size
+                            if (newLeft < imgRect.left) {
+                                newLeft = imgRect.left;
+                                newWidth = startLeft + startWidth - imgRect.left;
+                            }
+                            if (newWidth >= minSize){
+                                cropBox.style.left = newLeft + 'px';
+                                cropBox.style.width = newWidth + 'px';
+                            }
+                        } else if (handleClass === 'right'){
+                            var newWidth = startWidth + dx;
+                            var maxWidth = imgRect.right - startLeft;
+                            if (newWidth > maxWidth) newWidth = maxWidth;
+                            if (newWidth >= minSize){
+                                cropBox.style.width = newWidth + 'px';
+                            }
+                        }
+                    }
+                    
+                    function onMouseUp(){
+                        document.removeEventListener('mousemove', onMouseMove);
+                        document.removeEventListener('mouseup', onMouseUp);
+                    }
+                    
+                    document.addEventListener('mousemove', onMouseMove);
+                    document.addEventListener('mouseup', onMouseUp);
+                });
+            });
         }
 
-        function MoveImage(x,y){
-            $("#img").css("margin-left",  x + "px");
-            $("#img").css("margin-top", y + "px");
+        function cancelCrop(){
+            isCropping = false;
+            document.getElementById('cropOverlay').classList.remove('active');
         }
 
-        function handleZoomMouseUp(){
-            isDragging = false;
+        function applyCrop(){
+            if (!isCropping) return;
+            
+            var cropBox = document.getElementById('cropBox');
+            var img = document.getElementById('img');
+            var imgRect = img.getBoundingClientRect();
+            var cropRect = cropBox.getBoundingClientRect();
+            
+            // Calculate crop coordinates relative to the image
+            var scaleX = img.naturalWidth / imgRect.width;
+            var scaleY = img.naturalHeight / imgRect.height;
+            
+            cropData = {
+                x: (cropRect.left - imgRect.left) * scaleX,
+                y: (cropRect.top - imgRect.top) * scaleY,
+                width: cropRect.width * scaleX,
+                height: cropRect.height * scaleY
+            };
+            
+            // Apply crop visually
+            canvas.width = cropData.width;
+            canvas.height = cropData.height;
+            
+            var tempImg = new Image();
+            tempImg.crossOrigin = 'anonymous';
+            tempImg.onload = function(){
+                ctx.drawImage(tempImg, cropData.x, cropData.y, cropData.width, cropData.height, 0, 0, cropData.width, cropData.height);
+                img.src = canvas.toDataURL('image/png');
+                cancelCrop();
+            };
+            tempImg.src = currentImageURL;
         }
 
         /*
-            Printing related
+            Save Functions
         */
 
-        function ImagetoPrint(source, title=""){
-            return `<html>
-                <head>
-                    <title>${title}</title>
-                    <${"script"}>
-                        function pre(){
-                            setTimeout('startprint()', 10);
-                        }
-                        
-                        function startprint(){
-                            window.print();
-                            window.close();
-                        }
-                    </${"script"}>
-                </head>
-                <body onload="pre()">
-                    <img style="max-width: 100%; max-height: 100%;" src='${source}' />
-                </body>
-            </html>`;
+        function getEditedImageBlob(callback){
+            var img = document.getElementById('img');
+            
+            // Create a new canvas with all edits applied
+            var editCanvas = document.createElement('canvas');
+            var editCtx = editCanvas.getContext('2d');
+            
+            var tempImg = new Image();
+            tempImg.crossOrigin = 'anonymous';
+            tempImg.onload = function(){
+                // Handle rotation
+                if (rotation % 180 !== 0){
+                    editCanvas.width = tempImg.height;
+                    editCanvas.height = tempImg.width;
+                } else {
+                    editCanvas.width = tempImg.width;
+                    editCanvas.height = tempImg.height;
+                }
+                
+                editCtx.translate(editCanvas.width / 2, editCanvas.height / 2);
+                editCtx.rotate(rotation * Math.PI / 180);
+                
+                editCtx.drawImage(tempImg, -tempImg.width / 2, -tempImg.height / 2);
+                
+                editCanvas.toBlob(function(blob){
+                    callback(blob);
+                }, 'image/png');
+            };
+            tempImg.src = img.src;
         }
 
-        function PrintImage(){
-            var Pagelink = "about:blank";
-            var pwa = window.open(Pagelink, "_new");
-            pwa.document.open();
-            pwa.document.write(ImagetoPrint(currentImageURL, currentImageFilename));
-            pwa.document.close();
+        let savePendingblob = null;
+        function saveToArozOS(){
+            getEditedImageBlob(function(blob){
+                // Get current file's directory
+                var currentDir = playbackFile.filepath.substring(0, playbackFile.filepath.lastIndexOf('/'));
+                savePendingblob = blob;
+                ao_module_openFileSelector(fileSelected, currentDir, 'new', false, {
+                    defaultName: 'edited_' + currentImageFilename
+                });
+            });
+        }
+
+        function fileSelected(selectedFiles){
+            if (selectedFiles.length === 0){
+                console.log('Save cancelled');
+                return;
+            }
+            
+            var savePath = selectedFiles[0].filepath;
+            savePath = savePath.split("/");
+            savePath.pop();
+            savePath = savePath.join("/") + "/";
+            var saveFilename = selectedFiles[0].filename;
+
+            // Upload the edited image using ao_module_uploadFile
+            var file = new File([savePendingblob], currentImageFilename, { type: 'image/png' });
+            savePendingblob = null;
+            
+            ao_module_uploadFile(
+                file,
+                savePath,
+                function(response){
+                    alert('Image saved successfully!');
+                },
+                undefined,
+                function(status){
+                    alert('Failed to save image. Error code: ' + status);
+                }
+            );
+        }
+
+
+        function downloadImage(){
+            getEditedImageBlob(function(blob){
+                var url = URL.createObjectURL(blob);
+                var a = document.createElement('a');
+                a.href = url;
+                a.download = 'edited_' + currentImageFilename;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+            });
         }
 
 
@@ -237,6 +649,9 @@
         }
 
         function nextImage(){
+            // Don't allow navigation when in edit mode
+            if (isEditMode) return;
+            
             nextPhoto = currentViewingIndex + 1;
             if (nextPhoto > nearbyFileList.length - 1){
                 nextPhoto = nearbyFileList.length - 1;
@@ -252,6 +667,9 @@
         }
 
         function previousImage(){
+            // Don't allow navigation when in edit mode
+            if (isEditMode) return;
+            
             nextPhoto = currentViewingIndex - 1;
             if (nextPhoto < 0){
                 nextPhoto = 0;
@@ -268,6 +686,9 @@
 
         //Bind arrow key events
         $("body").on("keydown", function(e){
+            // Don't allow navigation when in edit mode
+            if (isEditMode) return;
+            
             var nextPhoto = currentViewingIndex;
             if (e.keyCode == 37){
                 //<-
@@ -298,8 +719,9 @@
             currentImageFilename = filename;
             //realigin to center
             $('#img').on('load', function() {
-                zoomLevel = 1;
-                applyZoom();
+                // Reset all edits when loading new image
+                rotation = 0;
+                applyAllFilters();
                 updateImgSize();
                 $("#img").show();
             });
@@ -307,7 +729,6 @@
 
         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;
         }
@@ -339,42 +760,29 @@
             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();
-                    }                       
+            if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
+                if ( xDiff > 0 ) {
+                    /* right swipe */ 
+                    nextImage();
                 } else {
-                    if ( yDiff > 0 ) {
-                        /* down swipe */ 
-                    } else { 
-                        /* up swipe */
-    
-                    }                                                                 
-                }
-            }else{
-                MoveImage(-xDiffAcc, -yDiffAcc);
+                    /* left swipe */
+                    previousImage();
+                }                       
+            } else {
+                if ( yDiff > 0 ) {
+                    /* down swipe */ 
+                } else { 
+                    /* up swipe */
+
+                }                                                                 
             }
             
-
             /* reset values */
-            if (zoomLevel == 1){
-                xDown = null;
-                yDown = null;
-            }else{
-                xDown = xUp;
-                yDown = yUp;
-            }
+            xDown = null;
+            yDown = null;
                               
         };
 

src/web/Photo/embedded/edit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path stroke="#231815" stroke-width="0.4px" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>

src/web/Photo/embedded/listNearbyImage.js

@@ -61,13 +61,14 @@ function filterDuplicates(files){
 }
 
 function listNearby(){
+    
     var result = [];
     //Extract the path from the filepath
     var dirpath = path.split("\\").join("/");
     dirpath = dirpath.split("/");
     dirpath.pop();
     dirpath = dirpath.join("/");
-
+    
     //Get nearby files and filter out the one that is web supported photo format
     var nearbyFiles = filelib.readdir(dirpath, "user")
     for (var i = 0; i < nearbyFiles.length; i++){
@@ -75,8 +76,7 @@ function listNearby(){
         //console.log(JSON.stringify(nearbyFiles[i]));
         var ext = thisFile.Ext.substr(1);
         ext = ext.toLowerCase();
-        if (ext == "png" || ext == "jpg" || ext == "jpeg" || ext == "gif" || ext == "webp" ||
-            isRawImage(filename)){
+        if (ext == "png" || ext == "jpg" || ext == "jpeg" || ext == "gif" || ext == "webp" || isRawImage(thisFile.Filename)){
             result.push(thisFile.Filepath);
         }
     }