Implement virtual slides on photo page. Close #59.

seanwu1105 · Mar 16, 2021 · 2c887b5 · 2c887b5
1 parent 6aa994a
commit 2c887b5
Show file tree

Hide file tree

Showing 8 changed files with 215 additions and 122 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "rxdb": "^9.15.0",
     "rxjs": "^6.6.6",
     "stream-browserify": "^3.0.0",
+    "swiper": "^6.5.0",
     "tslib": "^2.0.0",
     "zone.js": "^0.11.4"
   },

diff --git a/src/app/features/home/photo/photo.module.ts b/src/app/features/home/photo/photo.module.ts
@@ -1,11 +1,17 @@
 import { NgModule } from '@angular/core';
 import { NgxIonicImageViewerModule } from 'ngx-ionic-image-viewer';
+import { SwiperModule } from 'swiper/angular';
 import { SharedModule } from '../../../shared/shared.module';
 import { PhotoPageRoutingModule } from './photo-routing.module';
 import { PhotoPage } from './photo.page';
 
 @NgModule({
-  imports: [SharedModule, PhotoPageRoutingModule, NgxIonicImageViewerModule],
+  imports: [
+    SharedModule,
+    PhotoPageRoutingModule,
+    NgxIonicImageViewerModule,
+    SwiperModule,
+  ],
   declarations: [PhotoPage],
 })
 export class PhotoPageModule {}
diff --git a/src/app/features/home/photo/photo.page.html b/src/app/features/home/photo/photo.page.html
@@ -30,98 +30,106 @@
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
-<ion-content fullscreen *transloco="let t">
-  <ion-slides
-    *ngrxLet="photoSlidesOptions$ as options"
-    [options]="options"
-    (ionSlideDidChange)="onPhotoSlidesChanged($event)"
+<ion-content fullscreen *ngrxLet="moments$ as moments">
+  <swiper
+    *ngrxLet="initialSlide$ as initialSlide"
+    [virtual]="true"
+    [resistanceRatio]="0"
+    [initialSlide]="initialSlide"
+    (swiper)="onSwiperCreated($event)"
+    (slideChange)="onPhotoSlidesChanged()"
+    class="swiper"
   >
-    <ion-slide *ngFor="let moment of moments$ | ngrxPush; trackBy: trackMoment">
-      <app-image
-        *ngrxLet="moment.photoUrl$ as photoUrl"
-        ionImgViewer
-        [src]="photoUrl"
-      ></app-image>
+    <ng-template
+      swiperSlide
+      *ngFor="let moment of moments; trackBy: trackMoment"
+    >
+      <div class="slide" *transloco="let t">
+        <app-image
+          *ngrxLet="moment.photoUrl$ as photoUrl"
+          [src]="photoUrl"
+        ></app-image>
 
-      <ion-list lines="none">
-        <ion-item>
-          <ion-label>
-            {{
-              moment.timestamp
-                | translocoDate: { dateStyle: 'full', timeStyle: 'full' }
-            }}
-          </ion-label>
-        </ion-item>
-        <ion-item-group *ngIf="moment.geolocationPosition">
-          <ion-item-divider>
-            <ion-label>{{ t('location') }}</ion-label>
-          </ion-item-divider>
-          <iframe
-            *ngrxLet="mapUrl$ as mapUrl"
-            [src]="mapUrl"
-            frameborder="0"
-            loading="lazy"
-          ></iframe>
+        <ion-list lines="none">
           <ion-item>
-            <ion-icon name="location-outline" slot="start"></ion-icon>
             <ion-label>
-              <h3>{{ t('coordinates') }}</h3>
-              <p>
-                {{ moment.geolocationPosition?.latitude }}
-                ,
-                {{ moment.geolocationPosition?.longitude }}
-              </p>
+              {{
+                moment.timestamp
+                  | translocoDate: { dateStyle: 'full', timeStyle: 'full' }
+              }}
             </ion-label>
-            <app-copy-clipboard
-              [text]="
-                moment.geolocationPosition?.latitude +
-                ',' +
-                moment.geolocationPosition?.longitude
-              "
-              slot="end"
-            ></app-copy-clipboard>
           </ion-item>
-          <ion-item>
-            <ion-icon name="home-outline" slot="start"></ion-icon>
-            <ion-label>
-              <h3>{{ t('address') }}</h3>
-              <p>{{ address$ | ngrxPush }}</p>
-            </ion-label>
-            <app-copy-clipboard
-              [text]="address$ | ngrxPush"
-              slot="end"
-            ></app-copy-clipboard>
-          </ion-item>
-        </ion-item-group>
+          <ion-item-group *ngIf="moment.geolocationPosition">
+            <ion-item-divider>
+              <ion-label>{{ t('location') }}</ion-label>
+            </ion-item-divider>
+            <iframe
+              *ngrxLet="mapUrl$ as mapUrl"
+              [src]="mapUrl"
+              frameborder="0"
+              loading="lazy"
+            ></iframe>
+            <ion-item>
+              <ion-icon name="location-outline" slot="start"></ion-icon>
+              <ion-label>
+                <h3>{{ t('coordinates') }}</h3>
+                <p>
+                  {{ moment.geolocationPosition?.latitude }}
+                  ,
+                  {{ moment.geolocationPosition?.longitude }}
+                </p>
+              </ion-label>
+              <app-copy-clipboard
+                [text]="
+                  moment.geolocationPosition?.latitude +
+                  ',' +
+                  moment.geolocationPosition?.longitude
+                "
+                slot="end"
+              ></app-copy-clipboard>
+            </ion-item>
+            <ion-item>
+              <ion-icon name="home-outline" slot="start"></ion-icon>
+              <ion-label>
+                <h3>{{ t('address') }}</h3>
+                <p>{{ address$ | ngrxPush }}</p>
+              </ion-label>
+              <app-copy-clipboard
+                [text]="address$ | ngrxPush"
+                slot="end"
+              ></app-copy-clipboard>
+            </ion-item>
+          </ion-item-group>
 
-        <ion-item-group>
-          <ion-item-divider>
-            <ion-label>{{ t('details') }}</ion-label>
-          </ion-item-divider>
-          <ion-item>
-            <ion-icon name="code-outline" slot="start"></ion-icon>
-            <ion-label>
-              <h3>{{ t('hash') }}</h3>
-              <p>{{ moment.id }}</p>
-            </ion-label>
-            <app-copy-clipboard
-              [text]="moment.id"
-              slot="end"
-            ></app-copy-clipboard>
-          </ion-item>
-          <ion-item>
-            <ion-icon name="document-outline" slot="start"></ion-icon>
-            <ion-label>
-              <h3>{{ t('mimeType') }}</h3>
-              <p>{{ moment.mimeType }}</p>
-            </ion-label>
-            <app-copy-clipboard
-              [text]="moment.mimeType"
-              slot="end"
-            ></app-copy-clipboard>
-          </ion-item>
-        </ion-item-group>
-      </ion-list>
-    </ion-slide>
-  </ion-slides>
+          <ion-item-group>
+            <ion-item-divider>
+              <ion-label>{{ t('details') }}</ion-label>
+            </ion-item-divider>
+            <ion-item>
+              <ion-icon name="code-outline" slot="start"></ion-icon>
+              <ion-label>
+                <h3>{{ t('hash') }}</h3>
+                <p>{{ moment.id }}</p>
+              </ion-label>
+              <app-copy-clipboard
+                [text]="moment.id"
+                slot="end"
+              ></app-copy-clipboard>
+            </ion-item>
+            <ion-item>
+              <ion-icon name="document-outline" slot="start"></ion-icon>
+              <ion-label>
+                <h3>{{ t('mimeType') }}</h3>
+                <p>{{ moment.mimeType }}</p>
+              </ion-label>
+              <app-copy-clipboard
+                [text]="moment.mimeType"
+                slot="end"
+              ></app-copy-clipboard>
+            </ion-item>
+          </ion-item-group>
+        </ion-list>
+      </div>
+    </ng-template>
+  </swiper>
 </ion-content>
diff --git a/src/app/features/home/photo/photo.page.scss b/src/app/features/home/photo/photo.page.scss
@@ -8,14 +8,16 @@ ion-toolbar {
   --background: #00000025;
 }
 
-ion-slides {
+.swiper {
   height: 100%;
+  width: 100%;
 }
 
-ion-slide {
+.slide {
+  display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  height: auto;
+  height: 100%;
 }
 
 app-image {
@@ -31,7 +33,7 @@ app-image {
 
 ion-list {
   width: 100%;
-  overflow: scroll;
+  overflow: auto;
   margin-top: calc(-1 * var(--photo-radius));
   padding-top: var(--photo-radius);