feat(gallery): input pagerVisible

Author: garygrossgarten

projects/core/src/lib/gallery/gallery.component.html

@@ -7,7 +7,7 @@
   </div>
 
   <ng-container *fivIf="['desktop']">
-    <ion-fab [@scale] *ngIf="controlsVisible && images?.length > 0" vertical="center" horizontal="start" slot="fixed">
+    <ion-fab [@scale] *ngIf="controlsVisible && images?.length > 0 && pagerVisible" vertical="center" horizontal="start" slot="fixed">
       <ion-fab-button color="light" (click)="prev()" [disabled]="activeIndex === 0">
         <ion-icon name="arrow-back"></ion-icon>
       </ion-fab-button>
@@ -28,7 +28,7 @@
   </div>
 
   <ng-container *fivIf="['desktop']">
-    <ion-fab [@scale] *ngIf="controlsVisible" vertical="center" horizontal="end" slot="fixed">
+    <ion-fab [@scale] *ngIf="controlsVisible && pagerVisible" vertical="center" horizontal="end" slot="fixed">
       <ion-fab-button color="light" (click)="next()" [disabled]="activeIndex === images.length - 1">
         <ion-icon name="arrow-forward"></ion-icon>
       </ion-fab-button>

projects/core/src/lib/gallery/gallery.component.ts

@@ -5,7 +5,7 @@ import { IonSlides, DomController, Platform } from '@ionic/angular';
 import { FivOverlay } from './../overlay/overlay.component';
 import {
   Component, OnInit, ViewChild, ElementRef, Renderer2,
-  ContentChildren, QueryList, AfterContentInit, forwardRef, HostListener, Inject, ChangeDetectorRef, TemplateRef, ViewChildren
+  ContentChildren, QueryList, AfterContentInit, forwardRef, HostListener, Inject, ChangeDetectorRef, TemplateRef, ViewChildren, Input
 } from '@angular/core';
 import { style, animate, AnimationBuilder, trigger, transition } from '@angular/animations';
 import { Key } from './keycodes.enum';
@@ -71,6 +71,7 @@ export class FivGallery implements OnInit, AfterContentInit {
   inFullscreen: boolean;
   zoomedIn: boolean;
   controlsVisible = true;
+  @Input() pagerVisible = true;
   private slidesLoaded;
 
   @HostListener('window:keyup', ['$event'])

projects/core/src/lib/loading-content/loading-content.component.html

@@ -8,6 +8,8 @@
 
 <ion-content [forceOverscroll]="false" fivPull [maxPullHeight]="maxPullHeight" [minPullHeight]="minPullHeight" (fivPull)="fivPull($event)"
   (fivRefresh)="onRefresh()" (fivCancel)="fivCancel()" [enabled]="!refreshing && !hintVisible">
+  <div class="content">
+    <ng-content></ng-content>
+  </div>
 
-  <ng-content></ng-content>
 </ion-content>

projects/core/src/lib/loading-content/loading-content.component.scss

@@ -12,6 +12,10 @@ ion-content {
     --padding-top: calc(env(safe-area-inset-top) + var(--fiv-padding-top, 0px));
 }
 
+.content{
+    transform: translate3d(0, 0, 0);
+}
+
 .icon {
     height: 20px;
     width: 20px;

projects/core/src/lib/loading-content/loading-content.component.ts

@@ -37,7 +37,8 @@ import { animate, style, transition, trigger, state, AnimationBuilder, Animation
       ]),
       transition('* => void', [
         style({ width: '112px', opacity: 1, transform: 'translateY(calc(112px + env(safe-area-inset-top))) translateX(-50%)' }),
-        animate('125ms ease-out', style({ width: '40px', transform: 'translateY(calc(112px + env(safe-area-inset-top))) translateX(-50%)' }))
+        animate('125ms ease-out',
+          style({ width: '40px', transform: 'translateY(calc(112px + env(safe-area-inset-top))) translateX(-50%)' }))
       ]),
     ]
     ),