From f327b6ee8bf55b39be705b873aa54273ebe632ef Mon Sep 17 00:00:00 2001
From: Boris Voropaev <boris1voropaev@gmail.com>
Date: Wed, 6 Dec 2023 12:05:07 +0300
Subject: [PATCH] swiper gallery

---
 .../images/images-section.component.html      | 68 ++-------------
 .../images/images-section.component.scss      |  3 +
 .../basic/images/images-section.component.ts  | 31 +------
 .../swiper-gallery.component.html             | 34 ++++++++
 .../swiper-gallery.component.scss             | 65 ++++++++++++++
 .../swiper-gallery.component.ts               | 67 +++++++++++++++
 src/app/_modules/widjet/widjet.module.ts      |  9 +-
 src/vniigaz-v2/css/_pages-section.scss        | 85 +++----------------
 8 files changed, 193 insertions(+), 169 deletions(-)
 create mode 100644 src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.html
 create mode 100644 src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.scss
 create mode 100644 src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.ts

diff --git a/src/app/_modules/pages/sections/types/basic/images/images-section.component.html b/src/app/_modules/pages/sections/types/basic/images/images-section.component.html
index 85da0ba..d140456 100644
--- a/src/app/_modules/pages/sections/types/basic/images/images-section.component.html
+++ b/src/app/_modules/pages/sections/types/basic/images/images-section.component.html
@@ -8,72 +8,14 @@
   </div>  
 
 
-  <div *ngIf="imageType==='carousel'" id="section-{{section.id}}" class="carousel">
-    <div class="prev">
-      <img src="/assets/images/icons/left_50.svg"/>
-    </div>
-    <div class="center">
-      <swiper [config]="config">
-        <ng-template  ngFor let-item [ngForOf]="items">
-          <ng-template swiperSlide>
-            <div class="slide">
-              <img [src]="item?.links?.full"/>
-            </div>
-          </ng-template>
-        </ng-template>
-      </swiper>
-    </div>
-
-    <div class="next">
-      <img src="/assets/images/icons/right_50.svg"/>
+  <div *ngIf="imageType==='carousel'" id="section-{{section.id}}" class="carousel">    
+    <div class="swiper-box">
+      <swiper-gallery [items]="items"></swiper-gallery>
     </div>
   </div>
 
 
-  <div *ngIf="showFullscreen" class="fullscreen desctop">
-
-    <div class="content center">
-      <img [src]="photo"/>      
-    </div>
-    <div class="content between">
-      <div class="close"  (click)="showFullscreen = false">
-        <img src="/assets/images/icons/close_50.svg"/>
-        
-      </div>
-      <div *ngIf="items.length > 1" class="left" (click)="go('decrement')">
-        <img *ngIf="backId!==''" src="/assets/images/icons/left_50.svg"/>
-      </div>  
-      <div *ngIf="items.length > 1" class="right" (click)="go('increment')">
-        <img *ngIf="nextId!==''" src="/assets/images/icons/right_50.svg"/>
-      </div>
-    </div>
-    <div class="content center bottom">
-      <div class="thumbnails" *ngFor="let item of items; let i = index">
-        <img [src]="item.links?.full" (click)="show(i)"/>
-      </div>
-    </div>    
+  <div *ngIf="showFullscreen" class="fullscreen">
+    <swiper-gallery [items]="items" [start]="activeIndex" (event)="showFullscreen=false" [closing]="true"></swiper-gallery>
   </div>
 </div>
-
-<div *ngIf="showFullscreen" class="fullscreen mobile" id="section-{{section.id}}" >
-  <div class="close"  (click)="showFullscreen = false">
-    <img src="/assets/images/icons/close_50.svg"/>
-    
-  </div>
-  <div class="prev" *ngIf="items.length > 1">
-    <img src="/assets/images/icons/left_50.svg"/>
-  </div>
-  <swiper [config]="config">
-    <ng-template ngFor let-item [ngForOf]="items">
-      <ng-template swiperSlide>
-        <div class="slide">
-          <img [src]="item?.links?.full"/>
-        </div>
-      </ng-template>
-    </ng-template>
-  </swiper>
-  <div class="next" *ngIf="items.length > 1">
-    <img src="/assets/images/icons/right_50.svg"/>
-  </div>
-</div>
-
diff --git a/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss b/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss
index e69de29..6acc99a 100644
--- a/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss
+++ b/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss
@@ -0,0 +1,3 @@
+:host{
+    position: relative;
+}
\ No newline at end of file
diff --git a/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts b/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts
index c510388..a9e4bef 100644
--- a/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts
+++ b/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts
@@ -80,36 +80,7 @@ export class ImagesSectionComponent {
   }
 
   show(i:number): void {
-    this.parsedPhotos?.forEach((photo: any) => {
-      if (photo.id === this.items[i].id) {
-        this.photo = photo.links.full
-        this.showFullscreen = true
-      }
-    })
     this.activeIndex = i;
-  }
-
-  go(how: string) {
-    this.show(this.activeIndex)
-    switch(how) {
-      case 'decrement':
-        this.activeIndex--
-        if (this.activeIndex < 0) this.activeIndex = this.parsedPhotos.length - 1
-        break
-      case 'increment':
-        this.activeIndex++
-        if (this.activeIndex == this.parsedPhotos.length) this.activeIndex = 0
-        break
-    }
-    this.parsedPhotos = this.parsedPhotos.map((item: any, index: number) => {
-      if (index === this.activeIndex) {
-        item.active = true
-        this.photo = item.links.full
-        this.showId = item.id
-      } else {
-        item.active = false
-      }
-      return item
-    })
+    this.showFullscreen = true
   }
 }
diff --git a/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.html b/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.html
new file mode 100644
index 0000000..5f8f0b2
--- /dev/null
+++ b/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.html
@@ -0,0 +1,34 @@
+<div *ngIf="single" class="single">
+  <img [src]="items[0].links?.full"/>
+</div>
+
+<div class="top-swiper" *ngIf="!single">
+  <swiper #swiper (swiper)="swiperOn($event)" (slideChange)="onSwiperChange($event)"
+  [config]="config" class="swiper">
+    <ng-template  ngFor let-item [ngForOf]="items">
+      <ng-template swiperSlide>
+        <div class="slide">
+          <img [src]="item?.links?.full"/>
+        </div>
+      </ng-template>
+    </ng-template>
+  </swiper>
+  <div class="swiper-pagination"></div>
+  <div class="swiper-button-next"></div>
+  <div class="swiper-button-prev"></div>
+</div>
+<swiper #thumb (swiper)="thumbOn($event)"
+*ngIf="!single" [config]="thumbConfig" class="thumb">
+    <ng-template  ngFor let-item [ngForOf]="items"  let-i="index" (click)="select(i)">
+      <ng-template swiperSlide>
+        <div (click)="select(i)"  class="slide">
+          <img [src]="item?.links?.thumb"  [class.active]="i==active"/>
+        </div>
+      </ng-template>
+    </ng-template>
+</swiper>
+<div (click)="close()" *ngIf="closing" class="swiper-close">
+  <ico ico="close_24" color="var(--prime)"></ico>
+</div>  
+
+
diff --git a/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.scss b/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.scss
new file mode 100644
index 0000000..02c1843
--- /dev/null
+++ b/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.scss
@@ -0,0 +1,65 @@
+.single{
+    width: 100%;
+    height: 100%;
+    img{
+        width: 100%;
+        height: 100%;
+        object-fit:contain;
+    }
+}
+
+.top-swiper{
+ width: 100%;
+ height: 80%;
+ position: relative;
+ --swiper-navigation-color: #fff; 
+ --swiper-pagination-color: #fff;
+ >swiper{
+    height: 100%;
+    img {
+        object-fit:contain;
+    }
+ }
+}
+.thumb{
+    margin-top: 10px;
+    width: 100%;
+    height: calc( 20% - 10px);
+    cursor: pointer;
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit:cover;
+        &:not(.active){
+            filter: brightness(50%);
+        }
+    }
+}
+.slide{
+    width: 100%;
+    height: 100%;
+    display: block;
+    background-color: grey;
+    cursor:w-resize;
+    img {
+      object-fit: cover;
+      width: 100%;
+      height: 100%;      
+    }
+}
+.swiper-close{
+    position: absolute;
+    z-index: 10;
+    top: 20px;
+    right: 20px;
+    width: 40px;
+    height: 40px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+    border-radius: 20px;
+    cursor: pointer;
+}
+
diff --git a/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.ts b/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.ts
new file mode 100644
index 0000000..c7d26ca
--- /dev/null
+++ b/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.ts
@@ -0,0 +1,67 @@
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import SwiperCore, {Navigation, Pagination, SwiperOptions} from 'swiper';
+import { SwiperComponent } from "swiper/angular";
+SwiperCore.use([Navigation, Pagination]);
+
+@Component({
+  selector: 'swiper-gallery',
+  templateUrl: './swiper-gallery.component.html',
+  styleUrls: ['./swiper-gallery.component.scss']
+})
+export class SwiperGalleryComponent {
+  @Input() items: any;
+  @Input() start = 0;
+  @Input() closing:boolean;
+  @Output() event = new EventEmitter<string>() 
+  @ViewChild('swiper', { static: false }) swiper?: SwiperComponent;
+  @ViewChild('thumb', { static: false }) thumb?: SwiperComponent;
+  public active:number;
+  public single: boolean;
+
+  public config: SwiperOptions = {
+    slidesPerView: 1,
+    spaceBetween: 50,
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+    pagination: {
+      el: ".swiper-pagination",
+    }
+  };
+
+  public thumbConfig: SwiperOptions = {
+    spaceBetween: 10,
+    slidesPerView: 5,
+    freeMode: true,
+    watchSlidesProgress: true,
+  }
+
+  ngOnInit(){
+    this.active = this.start;
+    this.single = this.items.length === 1;
+  }
+
+  swiperOn(swiper){
+    this.swiper.swiperRef.slideTo(this.start)
+  }
+
+  onSwiperChange(event) {
+    this.thumb.swiperRef.slideTo(event[0].realIndex-1)
+  }
+
+  thumbOn(swiper){
+    this.thumb.swiperRef.slideTo(this.start-2)
+  }
+
+  select(i){
+    this.active = i;
+    this.thumb.swiperRef.slideTo(i)
+    this.swiper.swiperRef.slideTo(i)
+  }
+
+  close(){
+    console.log('click')
+    this.event.emit('close')
+  }
+}
diff --git a/src/app/_modules/widjet/widjet.module.ts b/src/app/_modules/widjet/widjet.module.ts
index e3c84af..5626776 100644
--- a/src/app/_modules/widjet/widjet.module.ts
+++ b/src/app/_modules/widjet/widjet.module.ts
@@ -10,12 +10,15 @@ import { SwitchComponent } from './switch/switch.component';
 import { LocaleComponent } from './locale/locale.component';
 import { FileIcoComponent } from './file-ico/file-ico.component';
 import { ModalComponent } from './modal/modal.component';
+import {SwiperModule} from "swiper/angular";
+import { SwiperGalleryComponent } from './swiper-gallery/swiper-gallery.component';
 
 
 @NgModule({
     imports:[
         BrowserModule,
-        RouterModule
+        RouterModule,
+        SwiperModule
         // QRCodeModule
     ],
     declarations: [
@@ -27,6 +30,7 @@ import { ModalComponent } from './modal/modal.component';
         LocaleComponent,
         FileIcoComponent,
         ModalComponent,
+        SwiperGalleryComponent,
     ],
     exports: [
         IcoComponent,
@@ -36,7 +40,8 @@ import { ModalComponent } from './modal/modal.component';
         SwitchComponent,
         LocaleComponent,
         FileIcoComponent,
-        ModalComponent
+        ModalComponent,
+        SwiperGalleryComponent
     ]
 })
 export class WidjetModule {
diff --git a/src/vniigaz-v2/css/_pages-section.scss b/src/vniigaz-v2/css/_pages-section.scss
index b2a46ef..14a0e60 100644
--- a/src/vniigaz-v2/css/_pages-section.scss
+++ b/src/vniigaz-v2/css/_pages-section.scss
@@ -212,21 +212,18 @@ images-section{
       }
     }
     .center {
-      width: 600px;
-    }
-  }
-  
-  .slide {
-    width: 600px;
-    height: 450px;
-  
-    display: block;
-    img {
-      object-fit: cover;
+      display: block;
       width: 100%;
-      height: 100%;
+      aspect-ratio: 16 / 9;
     }
   }
+
+  .swiper-box{
+    width: 100%;
+    height: 50vw;
+    max-height: 400px;
+  }
+
   
   .fullscreen {
     top: 0;
@@ -236,69 +233,9 @@ images-section{
     z-index: 2;
     position: fixed;
     align-items: center;
-    justify-content: center;
+    width: 100vw;
+    height: 100vh;
     background-color: rgba(37, 46, 52, 60%);
-   
-    .content {
-      position: fixed;
-      display: flex;
-      pointer-events: none;
-      
-      
-      width: calc(100vw - 2 * 24px);
-      height: calc(100vh - 2 * 24px);
-      left: 24px;
-      right: 24px;
-      *{
-        pointer-events:all;
-      }
-      img {
-        object-fit: contain;
-        width: 100%;
-    height: 100%;
-      }
-  
-      .left {
-        width: 72px;
-        flex-grow: 0;
-        display: flex;
-        cursor: pointer;
-        align-items: center;
-        justify-content: center;
-      }
-      .right {
-        width: 72px;
-        flex-grow: 0;
-        display: flex;
-        cursor: pointer;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-    .between{
-      justify-content:space-between;
-    }
-    .center{
-      justify-content:center;
-    }
-    .bottom{
-      align-items: flex-end;
-      gap: 8px;
-      .thumbnails{
-        position: static;
-        display: block;
-        width: 72px;
-        height: 52px;
-        border: 2px solid var(--prime);
-  
-        img{
-          width: 100%;
-          height: 100%;
-          object-fit:cover;
-        };
-      };
-  
-    }
   
   }