add close fullscreen button

GeotrekCE · Feb 7, 2024 · ef73a5d · ef73a5d
1 parent ee2bd2d
commit ef73a5d
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 10 deletions.
diff --git a/src/components/grw-touristic-content-detail/grw-touristic-content-detail.scss b/src/components/grw-touristic-content-detail/grw-touristic-content-detail.scss
@@ -197,3 +197,21 @@ grw-touristic-content-detail {
   width: 100%;
   text-align: center;
 }
+
+.close-fullscreen-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 40;
+  top: 16px;
+  right: 16px;
+  color: var(--swiper-navigation-color, var(--swiper-theme-color));
+  background-color: var(--color-primary-container);
+  padding: 4px;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--border-radius, 32px);
+  box-shadow: var(--elevation-1);
+  cursor: pointer;
+}
diff --git a/src/components/grw-touristic-content-detail/grw-touristic-content-detail.tsx b/src/components/grw-touristic-content-detail/grw-touristic-content-detail.tsx
@@ -49,9 +49,13 @@ export class GrwTouristicContentDetail {
     };
   }
 
-  handleFullscreen() {
-    if (state.currentTouristicContent.attachments && state.currentTouristicContent.attachments[0] && state.currentTouristicContent.attachments[0].url) {
-      this.swiperImagesRef.requestFullscreen();
+  handleFullscreen(close: boolean = false) {
+    if (!close) {
+      if (state.currentTouristicContent.attachments && state.currentTouristicContent.attachments[0] && state.currentTouristicContent.attachments[0].url) {
+        this.swiperImagesRef.requestFullscreen();
+      }
+    } else {
+      (document as any).exitFullscreen();
     }
   }
 
@@ -94,6 +98,14 @@ export class GrwTouristicContentDetail {
                         const legend = [attachment.legend, attachment.author].filter(Boolean).join(' - ');
                         return (
                           <div class="swiper-slide">
+                            {this.displayFullscreen && (
+                              <div class="close-fullscreen-button" onClick={() => this.handleFullscreen(true)}>
+                                {/* @ts-ignore */}
+                                <span translate={false} class="material-symbols material-symbols-outlined">
+                                  close
+                                </span>
+                              </div>
+                            )}
                             <div class="legend-container">{legend}</div>
                             <img
                               /* @ts-ignore */

diff --git a/src/components/grw-touristic-event-detail/grw-touristic-event-detail.scss b/src/components/grw-touristic-event-detail/grw-touristic-event-detail.scss
@@ -205,3 +205,21 @@ grw-touristic-event-detail {
   width: 100%;
   text-align: center;
 }
+
+.close-fullscreen-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 40;
+  top: 16px;
+  right: 16px;
+  color: var(--swiper-navigation-color, var(--swiper-theme-color));
+  background-color: var(--color-primary-container);
+  padding: 4px;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--border-radius, 32px);
+  box-shadow: var(--elevation-1);
+  cursor: pointer;
+}
diff --git a/src/components/grw-touristic-event-detail/grw-touristic-event-detail.tsx b/src/components/grw-touristic-event-detail/grw-touristic-event-detail.tsx
@@ -49,9 +49,13 @@ export class GrwTouristicEventDetail {
     };
   }
 
-  handleFullscreen() {
-    if (state.currentTouristicEvent.attachments && state.currentTouristicEvent.attachments[0] && state.currentTouristicEvent.attachments[0].url) {
-      this.swiperImagesRef.requestFullscreen();
+  handleFullscreen(close: boolean = false) {
+    if (!close) {
+      if (state.currentTouristicEvent.attachments && state.currentTouristicEvent.attachments[0] && state.currentTouristicEvent.attachments[0].url) {
+        this.swiperImagesRef.requestFullscreen();
+      } else {
+        (document as any).exitFullscreen();
+      }
     }
   }
 
@@ -94,6 +98,14 @@ export class GrwTouristicEventDetail {
                         const legend = [attachment.legend, attachment.author].filter(Boolean).join(' - ');
                         return (
                           <div class="swiper-slide">
+                            {this.displayFullscreen && (
+                              <div class="close-fullscreen-button" onClick={() => this.handleFullscreen(true)}>
+                                {/* @ts-ignore */}
+                                <span translate={false} class="material-symbols material-symbols-outlined">
+                                  close
+                                </span>
+                              </div>
+                            )}
                             <div class="legend-container">{legend}</div>
                             <img
                               /* @ts-ignore */

diff --git a/src/components/grw-trek-detail/grw-trek-detail.scss b/src/components/grw-trek-detail/grw-trek-detail.scss
@@ -667,3 +667,21 @@ grw-trek-detail {
   width: 100%;
   text-align: center;
 }
+
+.close-fullscreen-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 40;
+  top: 16px;
+  right: 16px;
+  color: var(--swiper-navigation-color, var(--swiper-theme-color));
+  background-color: var(--color-primary-container);
+  padding: 4px;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--border-radius, 32px);
+  box-shadow: var(--elevation-1);
+  cursor: pointer;
+}
diff --git a/src/components/grw-trek-detail/grw-trek-detail.tsx b/src/components/grw-trek-detail/grw-trek-detail.tsx
@@ -507,10 +507,13 @@ export class GrwTrekDetail {
       touristicEvents: { ...touristicEvents, visible: Boolean(state.trekTouristicEvents && state.trekTouristicEvents.length > 0) },
     };
   }
-
-  handleFullscreen() {
-    if (this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].url) {
-      this.swiperImagesRef.requestFullscreen();
+  handleFullscreen(close: boolean = false) {
+    if (!close) {
+      if (this.currentTrek.attachments && this.currentTrek.attachments[0] && this.currentTrek.attachments[0].url) {
+        this.swiperImagesRef.requestFullscreen();
+      }
+    } else {
+      (document as any).exitFullscreen();
     }
   }
 
@@ -686,6 +689,14 @@ export class GrwTrekDetail {
                       const legend = [attachment.legend, attachment.author].filter(Boolean).join(' - ');
                       return (
                         <div class="swiper-slide">
+                          {this.displayFullscreen && (
+                            <div class="close-fullscreen-button" onClick={() => this.handleFullscreen(true)}>
+                              {/* @ts-ignore */}
+                              <span translate={false} class="material-symbols material-symbols-outlined">
+                                close
+                              </span>
+                            </div>
+                          )}
                           <div class="legend-container">{legend}</div>
                           <img
                             /* @ts-ignore */