From 5418ec124540edbb498a5565e4492a20ca87838d Mon Sep 17 00:00:00 2001
From: qyubee <quentinbaron.qb@gmail.com>
Date: Wed, 2 Oct 2024 22:22:11 +0400
Subject: [PATCH] feat; added arrows to scroll between images

---
 src/components/image/image.js              |  1 +
 src/components/image/image.scss            | 24 ++++++++++++++++++++++
 src/components/image/image.tpl.html        | 12 ++++++++---
 src/components/main/monument/monument.html |  4 ++--
 src/components/main/monument/monument.js   |  3 ++-
 5 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/components/image/image.js b/src/components/image/image.js
index 3b9e396..e6d0747 100755
--- a/src/components/image/image.js
+++ b/src/components/image/image.js
@@ -25,6 +25,7 @@ const ImageService = ($mdDialog, $timeout) => {
         vm.keyDown = keyDown;
         vm.nextImage = nextImage;
         vm.prevImage = prevImage;
+        vm.activate_scroll = params.activate_scroll
 
         init();
         $timeout(() => { vm.loaded = true; }, 150);
diff --git a/src/components/image/image.scss b/src/components/image/image.scss
index 8b3d6c2..a6a3098 100755
--- a/src/components/image/image.scss
+++ b/src/components/image/image.scss
@@ -27,6 +27,30 @@
     opacity: .75;
   }
 
+  .dialog__next_img {
+    position: absolute;
+    width: 70px;
+    height: 70px;
+    top: 50%;
+    right: 0;
+    margin: 0;
+    margin-top: -35px;
+    padding: 15px;
+    opacity: .75;
+  }
+
+  .dialog__prev_img {
+    position: absolute;
+    width: 70px;
+    height: 70px;
+    top: 50%;
+    left: 0;
+    margin: 0;
+    margin-top: -35px;
+    padding: 15px;
+    opacity: .75;
+  }
+
   .dialog__image-container {
     position: relative;
     background: black;
diff --git a/src/components/image/image.tpl.html b/src/components/image/image.tpl.html
index 20d7de0..e79135d 100755
--- a/src/components/image/image.tpl.html
+++ b/src/components/image/image.tpl.html
@@ -6,9 +6,15 @@
             layout="row" layout-align="center center"
             ng-swipe-right="nextImage()"
             ng-swipe-left="prevImage()">
-        <md-button class="md-icon-button dialog__close" ng-click="close()">
-          <md-icon>close</md-icon>
-        </md-button>
+            <md-button class="md-icon-button dialog__close" ng-click="close()">
+              <md-icon>close</md-icon>
+            </md-button>
+            <md-button ng-if="activate_scroll && " class="md-icon-button dialog__next_img" ng-click="nextImage()">
+              <md-icon>skip_next</md-icon>
+            </md-button>
+            <md-button ng-if="activate_scroll" class="md-icon-button dialog__prev_img" ng-click="prevImage()">
+              <md-icon>skip_previous</md-icon>
+            </md-button>
         <img load-src="{{ image.thumburlbig }}">
       </div>
       <div class="dialog__image-description"
diff --git a/src/components/main/monument/monument.html b/src/components/main/monument/monument.html
index 6407503..f787622 100755
--- a/src/components/main/monument/monument.html
+++ b/src/components/main/monument/monument.html
@@ -34,7 +34,7 @@ <h3 class="md-headline">Saving</h3>
               layout="row"
               layout-align="center center"
               ng-repeat="image in $ctrl.image"
-              ng-click="$ctrl.openImage(image, $event)"
+              ng-click="$ctrl.openImage(image, $event,false)"
             >
               <img load-src="{{image.thumburl}}" />
             </a>
@@ -359,7 +359,7 @@ <h4 class="monument__subtitle md-headline muted">
       <div class="monument__images" ng-if="$ctrl.images && $ctrl.images.length">
         <a
           ng-repeat="image in $ctrl.images"
-          ng-click="$ctrl.openImage(image, $event)"
+          ng-click="$ctrl.openImage(image, $event,$ctrl.images.length>1)"
         >
           <img class="image" ng-src="{{image.thumburl}}" />
         </a>
diff --git a/src/components/main/monument/monument.js b/src/components/main/monument/monument.js
index d64f7bb..7f453de 100755
--- a/src/components/main/monument/monument.js
+++ b/src/components/main/monument/monument.js
@@ -497,11 +497,12 @@ ${getCategory()}
     });
   }
 
-  function openImage(image, event) {
+  function openImage(image, event,activate_scroll) {
     imageService.openImage({
       image,
       event,
       list: vm.images,
+      activate_scroll:activate_scroll,
     });
   }