Git pull made

src/app/pages/chat/group-messages/group-messages.page.ts

@@ -1,5 +1,5 @@
-import { Component, ElementRef, OnInit, ViewChild, AfterViewChecked, AfterViewInit, OnDestroy, } from '@angular/core';
-import { ActionSheetController, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { Component, ElementRef, OnInit, ViewChild, AfterViewChecked, AfterViewInit, OnDestroy, ChangeDetectorRef, } from '@angular/core';
+import { ActionSheetController, IonSlides, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
 import { AlertService } from 'src/app/services/alert.service';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
@@ -20,6 +20,7 @@ import { NewEventPage } from '../../agenda/new-event/new-event.page';
 import { EventPerson } from 'src/app/models/eventperson.model';
 import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
 import { ThemeService } from 'src/app/services/theme.service'
+import { PreviewCameraPage } from 'src/app/modals/preview-camera/preview-camera.page';
 
 @Component({
   selector: 'app-group-messages',
@@ -27,6 +28,9 @@ import { ThemeService } from 'src/app/services/theme.service'
   styleUrls: ['./group-messages.page.scss'],
 })
 export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
+
+  
+
   showLoader: boolean;
   isGroupCreated:boolean;
   loggedUser: any;
@@ -75,7 +79,8 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     private fileToBase64Service: FileToBase64Service,
     private fileService: FileService,
     private toastService: ToastService,
-    public ThemeService: ThemeService
+    public ThemeService: ThemeService,
+    private changeDetectorRef: ChangeDetectorRef
   ) {
     this.loggedUserChat = authService.ValidatedUserChat['data'];
     this.isGroupCreated = true;
@@ -580,4 +585,59 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
   });
   }
 
+  sliderOpts = {
+    zoom: false,
+    slidesPerView: 1.5,
+    spaceBetween: 20,
+    centeredSlides: true
+  };
+  zoomActive = false;
+zoomScale = 1;
+ 
+sliderZoomOpts = {
+  allowSlidePrev: false,
+  allowSlideNext: false,
+  zoom: {
+    maxRatio: 5
+  },
+  on: {
+    zoomChange: (scale, imageEl, slideEl) => {        
+      this.zoomActive = true;
+      this.zoomScale = scale/5;
+      this.changeDetectorRef.detectChanges();         
+    }
+  }
 }
+ 
+async touchEnd(zoomslides: IonSlides, card) {
+  // Zoom back to normal
+  const slider = await zoomslides.getSwiper();
+  const zoom = slider.zoom;
+  zoom.out();
+ 
+  // Card back to normal
+  card.el.style['z-index'] = 9;
+ 
+  this.zoomActive = false;
+  this.changeDetectorRef.detectChanges();
+}
+ 
+touchStart(card) {
+  // Make card appear above backdrop
+  card.el.style['z-index'] = 11;
+}
+
+  async openPreview(img) {
+    const modal = await this.modalController.create({
+      component:  PreviewCameraPage,
+      cssClass: 'transparent-modal',
+      componentProps: {
+        image: img.attachments[0].image_url,
+        username: img.u.username,
+        _updatedAt: img._updatedAt
+      }
+    });
+    modal.present();
+  }
+}
+