✨ Add preview arrows option for #239

lukasz-galka · Mar 19, 2019 · bb8a200 · bb8a200
1 parent c579ab1
commit bb8a200
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -113,6 +113,8 @@ You can read more about this issue [here](https://github.com/angular/material2/i
 
 - `preview` | Type: `boolean` | Default value: `true` - enables or disables preview
 - `previewDescription` | Type: `boolean` | Default value: `true` - enables or disables description for images
+- `previewArrows` | Type: `boolean` | Default value: `true` - enables or disables arrows
+- `previewArrowsAutoHide` | boolean: `string` | Default value: `false` - enables or disables arrows auto hide
 - `previewSwipe` | Type: `boolean` | Default value: `false` - enables or disables swipe
 - `previewFullscreen` | Type: `boolean` | Default value: `false` - enables or disables fullscreen icon
 - `previewForceFullscreen` | Type: `boolean` | Default value: `false` - enables or disables opening preview in fullscreen mode

diff --git a/src/ngx-gallery-options.model.ts b/src/ngx-gallery-options.model.ts
@@ -45,6 +45,8 @@ export interface INgxGalleryOptions {
     thumbnailActions?: NgxGalleryAction[];
     preview?: boolean;
     previewDescription?: boolean;
+    previewArrows?: boolean;
+    previewArrowsAutoHide?: boolean;
     previewSwipe?: boolean;
     previewFullscreen?: boolean;
     previewForceFullscreen?: boolean;
@@ -118,6 +120,8 @@ export class NgxGalleryOptions implements INgxGalleryOptions {
     thumbnailActions?: NgxGalleryAction[];
     preview?: boolean;
     previewDescription?: boolean;
+    previewArrows?: boolean;
+    previewArrowsAutoHide?: boolean;
     previewSwipe?: boolean;
     previewFullscreen?: boolean;
     previewForceFullscreen?: boolean;
@@ -206,6 +210,8 @@ export class NgxGalleryOptions implements INgxGalleryOptions {
 
         this.preview = use(obj.preview, true);
         this.previewDescription = use(obj.previewDescription, true);
+        this.previewArrows = use(obj.previewArrows, true);
+        this.previewArrowsAutoHide = use(obj.previewArrowsAutoHide, false);
         this.previewSwipe = use(obj.previewSwipe, false);
         this.previewFullscreen = use(obj.previewFullscreen, false);
         this.previewForceFullscreen = use(obj.previewForceFullscreen, false);

diff --git a/src/ngx-gallery-preview.component.spec.ts b/src/ngx-gallery-preview.component.spec.ts
@@ -133,6 +133,34 @@ describe('NgxGalleryPreviewComponent', () => {
         comp.close();
     });
 
+    it('should hide arrows on the begining if arrowsAutoHide is true', () => {
+        comp.arrowsAutoHide = true;
+        comp.arrows = true;
+        fixture.detectChanges();
+
+        expect(comp.arrows).toBeFalsy();
+    });
+
+    it('should show arrows on mouseenter if arrowsAutoHide is true', () => {
+        comp.arrowsAutoHide = true;
+        fixture.detectChanges();
+
+        el.dispatchEvent(new Event('mouseenter'));
+
+        expect(comp.arrows).toBeTruthy();
+    });
+
+    it('should hide arrows on mouseleave if arrowsAutoHide is true', () => {
+        comp.arrowsAutoHide = true;
+        comp.arrows = true;
+        fixture.detectChanges();
+        comp.arrows = true;
+
+        el.dispatchEvent(new Event('mouseleave'));
+
+        expect(comp.arrows).toBeFalsy();
+    });
+
     it('should prevent showing images if images arent defined', () => {
         comp.images = undefined;
 

diff --git a/src/ngx-gallery-preview.component.ts b/src/ngx-gallery-preview.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, Input, Output, EventEmitter, OnChanges, SimpleChanges, ElementRef, HostListener, ViewChild, Renderer } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, ElementRef, HostListener, ViewChild, Renderer } from '@angular/core';
 import { SafeResourceUrl, DomSanitizer, SafeUrl, SafeStyle } from '@angular/platform-browser';
 
 import { NgxGalleryAction } from './ngx-gallery-action.model';
@@ -7,7 +7,7 @@ import { NgxGalleryHelperService } from './ngx-gallery-helper.service';
 @Component({
     selector: 'ngx-gallery-preview',
     template: `
-        <ngx-gallery-arrows (onPrevClick)="showPrev()" (onNextClick)="showNext()" [prevDisabled]="!canShowPrev()" [nextDisabled]="!canShowNext()" [arrowPrevIcon]="arrowPrevIcon" [arrowNextIcon]="arrowNextIcon"></ngx-gallery-arrows>
+        <ngx-gallery-arrows *ngIf="arrows" (onPrevClick)="showPrev()" (onNextClick)="showNext()" [prevDisabled]="!canShowPrev()" [nextDisabled]="!canShowNext()" [arrowPrevIcon]="arrowPrevIcon" [arrowNextIcon]="arrowNextIcon"></ngx-gallery-arrows>
         <div class="ngx-gallery-preview-top">
             <div class="ngx-gallery-preview-icons">
                 <ngx-gallery-action *ngFor="let action of actions" [icon]="action.icon" [disabled]="action.disabled" [titleText]="action.titleText" (onClick)="action.onClick($event, index)"></ngx-gallery-action>
@@ -35,7 +35,7 @@ import { NgxGalleryHelperService } from './ngx-gallery-helper.service';
     `,
     styleUrls: ['./ngx-gallery-preview.component.scss']
 })
-export class NgxGalleryPreviewComponent implements OnChanges {
+export class NgxGalleryPreviewComponent implements OnInit, OnChanges {
 
     src: SafeUrl;
     srcIndex: number;
@@ -51,6 +51,8 @@ export class NgxGalleryPreviewComponent implements OnChanges {
     @Input() images: string[] | SafeResourceUrl[];
     @Input() descriptions: string[];
     @Input() showDescription: boolean;
+    @Input() arrows: boolean;
+    @Input() arrowsAutoHide: boolean;
     @Input() swipe: boolean;
     @Input() fullscreen: boolean;
     @Input() forceFullscreen: boolean;
@@ -101,6 +103,12 @@ export class NgxGalleryPreviewComponent implements OnChanges {
         private helperService: NgxGalleryHelperService, private renderer: Renderer,
         private changeDetectorRef: ChangeDetectorRef) {}
 
+    ngOnInit(): void {
+        if (this.arrows && this.arrowsAutoHide) {
+            this.arrows = false;
+        }
+    }
+
     ngOnChanges(changes: SimpleChanges): void {
         if (changes['swipe']) {
             this.helperService.manageSwipe(this.swipe, this.elementRef,
@@ -114,6 +122,18 @@ export class NgxGalleryPreviewComponent implements OnChanges {
         }
     }
 
+    @HostListener('mouseenter') onMouseEnter() {
+        if (this.arrowsAutoHide && !this.arrows) {
+            this.arrows = true;
+        }
+    }
+
+    @HostListener('mouseleave') onMouseLeave() {
+        if (this.arrowsAutoHide && this.arrows) {
+            this.arrows = false;
+        }
+    }
+
     onKeyDown(e) {
         if (this.isOpen) {
             if (this.keyboardNavigation) {

diff --git a/src/ngx-gallery.component.ts b/src/ngx-gallery.component.ts
@@ -20,7 +20,7 @@ import { NgxGalleryOrderedImage } from './ngx-gallery-ordered-image.model';
 
         <ngx-gallery-thumbnails *ngIf="currentOptions?.thumbnails" [style.marginTop]="getThumbnailsMarginTop()" [style.marginBottom]="getThumbnailsMarginBottom()" [style.height]="getThumbnailsHeight()" [images]="smallImages" [links]="currentOptions?.thumbnailsAsLinks ? links : []" [labels]="labels" [linkTarget]="currentOptions?.linkTarget" [selectedIndex]="selectedIndex" [columns]="currentOptions?.thumbnailsColumns" [rows]="currentOptions?.thumbnailsRows" [margin]="currentOptions?.thumbnailMargin" [arrows]="currentOptions?.thumbnailsArrows" [arrowsAutoHide]="currentOptions?.thumbnailsArrowsAutoHide" [arrowPrevIcon]="currentOptions?.arrowPrevIcon" [arrowNextIcon]="currentOptions?.arrowNextIcon" [clickable]="currentOptions?.image || currentOptions?.preview" [swipe]="currentOptions?.thumbnailsSwipe" [size]="currentOptions?.thumbnailSize" [moveSize]="currentOptions?.thumbnailsMoveSize" [order]="currentOptions?.thumbnailsOrder" [remainingCount]="currentOptions?.thumbnailsRemainingCount" [lazyLoading]="currentOptions?.lazyLoading" [actions]="currentOptions?.thumbnailActions"  (onActiveChange)="selectFromThumbnails($event)"></ngx-gallery-thumbnails>
 
-        <ngx-gallery-preview [images]="bigImages" [descriptions]="descriptions" [showDescription]="currentOptions?.previewDescription" [arrowPrevIcon]="currentOptions?.arrowPrevIcon" [arrowNextIcon]="currentOptions?.arrowNextIcon" [closeIcon]="currentOptions?.closeIcon" [fullscreenIcon]="currentOptions?.fullscreenIcon" [spinnerIcon]="currentOptions?.spinnerIcon" [swipe]="currentOptions?.previewSwipe" [fullscreen]="currentOptions?.previewFullscreen" [forceFullscreen]="currentOptions?.previewForceFullscreen" [closeOnClick]="currentOptions?.previewCloseOnClick" [closeOnEsc]="currentOptions?.previewCloseOnEsc" [keyboardNavigation]="currentOptions?.previewKeyboardNavigation" [animation]="currentOptions?.previewAnimation" [autoPlay]="currentOptions?.previewAutoPlay" [autoPlayInterval]="currentOptions?.previewAutoPlayInterval" [autoPlayPauseOnHover]="currentOptions?.previewAutoPlayPauseOnHover" [infinityMove]="currentOptions?.previewInfinityMove" [zoom]="currentOptions?.previewZoom" [zoomStep]="currentOptions?.previewZoomStep" [zoomMax]="currentOptions?.previewZoomMax" [zoomMin]="currentOptions?.previewZoomMin" [zoomInIcon]="currentOptions?.zoomInIcon" [zoomOutIcon]="currentOptions?.zoomOutIcon" [actions]="currentOptions?.actions" [rotate]="currentOptions?.previewRotate" [rotateLeftIcon]="currentOptions?.rotateLeftIcon" [rotateRightIcon]="currentOptions?.rotateRightIcon" [download]="currentOptions?.previewDownload" [downloadIcon]="currentOptions?.downloadIcon" [bullets]="currentOptions?.previewBullets" (onClose)="onPreviewClose()" (onOpen)="onPreviewOpen()" (onActiveChange)="previewSelect($event)" [class.ngx-gallery-active]="previewEnabled"></ngx-gallery-preview>
+        <ngx-gallery-preview [images]="bigImages" [descriptions]="descriptions" [showDescription]="currentOptions?.previewDescription" [arrowPrevIcon]="currentOptions?.arrowPrevIcon" [arrowNextIcon]="currentOptions?.arrowNextIcon" [closeIcon]="currentOptions?.closeIcon" [fullscreenIcon]="currentOptions?.fullscreenIcon" [spinnerIcon]="currentOptions?.spinnerIcon" [arrows]="currentOptions?.previewArrows" [arrowsAutoHide]="currentOptions?.previewArrowsAutoHide" [swipe]="currentOptions?.previewSwipe" [fullscreen]="currentOptions?.previewFullscreen" [forceFullscreen]="currentOptions?.previewForceFullscreen" [closeOnClick]="currentOptions?.previewCloseOnClick" [closeOnEsc]="currentOptions?.previewCloseOnEsc" [keyboardNavigation]="currentOptions?.previewKeyboardNavigation" [animation]="currentOptions?.previewAnimation" [autoPlay]="currentOptions?.previewAutoPlay" [autoPlayInterval]="currentOptions?.previewAutoPlayInterval" [autoPlayPauseOnHover]="currentOptions?.previewAutoPlayPauseOnHover" [infinityMove]="currentOptions?.previewInfinityMove" [zoom]="currentOptions?.previewZoom" [zoomStep]="currentOptions?.previewZoomStep" [zoomMax]="currentOptions?.previewZoomMax" [zoomMin]="currentOptions?.previewZoomMin" [zoomInIcon]="currentOptions?.zoomInIcon" [zoomOutIcon]="currentOptions?.zoomOutIcon" [actions]="currentOptions?.actions" [rotate]="currentOptions?.previewRotate" [rotateLeftIcon]="currentOptions?.rotateLeftIcon" [rotateRightIcon]="currentOptions?.rotateRightIcon" [download]="currentOptions?.previewDownload" [downloadIcon]="currentOptions?.downloadIcon" [bullets]="currentOptions?.previewBullets" (onClose)="onPreviewClose()" (onOpen)="onPreviewOpen()" (onActiveChange)="previewSelect($event)" [class.ngx-gallery-active]="previewEnabled"></ngx-gallery-preview>
     </div>
     `,
     styleUrls: ['./ngx-gallery.component.scss'],