Skip to content

Commit 5e49b69

Browse files
lukasz-galkalukasz-galka
authored
Merge pull request #240 from Monogramm/feature/preview-arrows
Add preview arrows option
2 parents 021dc19 + e4eead1 commit 5e49b69

5 files changed

+74
-4
lines changed

Diff for: ‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,8 @@ You can read more about this issue [here](https://github.com/angular/material2/i
113113

114114
- `preview` | Type: `boolean` | Default value: `true` - enables or disables preview
115115
- `previewDescription` | Type: `boolean` | Default value: `true` - enables or disables description for images
116+
- `previewArrows` | Type: `boolean` | Default value: `true` - enables or disables arrows
117+
- `previewArrowsAutoHide` | boolean: `string` | Default value: `false` - enables or disables arrows auto hide
116118
- `previewSwipe` | Type: `boolean` | Default value: `false` - enables or disables swipe
117119
- `previewFullscreen` | Type: `boolean` | Default value: `false` - enables or disables fullscreen icon
118120
- `previewForceFullscreen` | Type: `boolean` | Default value: `false` - enables or disables opening preview in fullscreen mode

Diff for: ‎src/ngx-gallery-options.model.ts

+6
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ export interface INgxGalleryOptions {
4545
thumbnailActions?: NgxGalleryAction[];
4646
preview?: boolean;
4747
previewDescription?: boolean;
48+
previewArrows?: boolean;
49+
previewArrowsAutoHide?: boolean;
4850
previewSwipe?: boolean;
4951
previewFullscreen?: boolean;
5052
previewForceFullscreen?: boolean;
@@ -118,6 +120,8 @@ export class NgxGalleryOptions implements INgxGalleryOptions {
118120
thumbnailActions?: NgxGalleryAction[];
119121
preview?: boolean;
120122
previewDescription?: boolean;
123+
previewArrows?: boolean;
124+
previewArrowsAutoHide?: boolean;
121125
previewSwipe?: boolean;
122126
previewFullscreen?: boolean;
123127
previewForceFullscreen?: boolean;
@@ -206,6 +210,8 @@ export class NgxGalleryOptions implements INgxGalleryOptions {
206210

207211
this.preview = use(obj.preview, true);
208212
this.previewDescription = use(obj.previewDescription, true);
213+
this.previewArrows = use(obj.previewArrows, true);
214+
this.previewArrowsAutoHide = use(obj.previewArrowsAutoHide, false);
209215
this.previewSwipe = use(obj.previewSwipe, false);
210216
this.previewFullscreen = use(obj.previewFullscreen, false);
211217
this.previewForceFullscreen = use(obj.previewForceFullscreen, false);

Diff for: ‎src/ngx-gallery-preview.component.spec.ts

+42
Original file line numberDiff line numberDiff line change
@@ -133,13 +133,55 @@ describe('NgxGalleryPreviewComponent', () => {
133133
comp.close();
134134
});
135135

136+
it('should hide arrows on the begining if arrows is false', () => {
137+
comp.arrows = false;
138+
fixture.detectChanges();
139+
140+
expect(comp.arrows).toBeFalsy();
141+
});
142+
143+
it('should not hide arrows on the begining even if arrowsAutoHide is true', () => {
144+
comp.arrowsAutoHide = true;
145+
comp.arrows = true;
146+
fixture.detectChanges();
147+
148+
expect(comp.arrows).toBeTruthy();
149+
});
150+
151+
it('should show arrows on mouseenter if arrowsAutoHide is true', () => {
152+
comp.arrowsAutoHide = true;
153+
fixture.detectChanges();
154+
155+
el.dispatchEvent(new Event('mouseenter'));
156+
157+
expect(comp.arrows).toBeTruthy();
158+
});
159+
160+
it('should hide arrows on mouseleave if arrowsAutoHide is true', () => {
161+
comp.arrowsAutoHide = true;
162+
comp.arrows = true;
163+
fixture.detectChanges();
164+
comp.arrows = true;
165+
166+
el.dispatchEvent(new Event('mouseleave'));
167+
168+
expect(comp.arrows).toBeFalsy();
169+
});
170+
136171
it('should prevent showing images if images arent defined', () => {
137172
comp.images = undefined;
138173

139174
expect(comp.canShowNext()).toBeFalsy();
140175
expect(comp.canShowPrev()).toBeFalsy();
141176
});
142177

178+
it('should prevent showing images if loading', () => {
179+
comp.loading = true;
180+
181+
expect(comp.canShowNext()).toBeFalsy();
182+
expect(comp.canShowPrev()).toBeFalsy();
183+
});
184+
143185
it('should stop auto play on moveenter if autoPlayPauseOnHover is true', (done) => {
144186
comp.autoPlay = true;
145187
comp.autoPlayInterval = 100;

Diff for: ‎src/ngx-gallery-preview.component.ts

+23-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ChangeDetectorRef, Component, Input, Output, EventEmitter, OnChanges, SimpleChanges, ElementRef, HostListener, ViewChild, Renderer } from '@angular/core';
1+
import { ChangeDetectorRef, Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, ElementRef, HostListener, ViewChild, Renderer } from '@angular/core';
22
import { SafeResourceUrl, DomSanitizer, SafeUrl, SafeStyle } from '@angular/platform-browser';
33

44
import { NgxGalleryAction } from './ngx-gallery-action.model';
@@ -7,7 +7,7 @@ import { NgxGalleryHelperService } from './ngx-gallery-helper.service';
77
@Component({
88
selector: 'ngx-gallery-preview',
99
template: `
10-
<ngx-gallery-arrows (onPrevClick)="showPrev()" (onNextClick)="showNext()" [prevDisabled]="!canShowPrev()" [nextDisabled]="!canShowNext()" [arrowPrevIcon]="arrowPrevIcon" [arrowNextIcon]="arrowNextIcon"></ngx-gallery-arrows>
10+
<ngx-gallery-arrows *ngIf="arrows" (onPrevClick)="showPrev()" (onNextClick)="showNext()" [prevDisabled]="!canShowPrev()" [nextDisabled]="!canShowNext()" [arrowPrevIcon]="arrowPrevIcon" [arrowNextIcon]="arrowNextIcon"></ngx-gallery-arrows>
1111
<div class="ngx-gallery-preview-top">
1212
<div class="ngx-gallery-preview-icons">
1313
<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';
3535
`,
3636
styleUrls: ['./ngx-gallery-preview.component.scss']
3737
})
38-
export class NgxGalleryPreviewComponent implements OnChanges {
38+
export class NgxGalleryPreviewComponent implements OnInit, OnChanges {
3939

4040
src: SafeUrl;
4141
srcIndex: number;
@@ -51,6 +51,8 @@ export class NgxGalleryPreviewComponent implements OnChanges {
5151
@Input() images: string[] | SafeResourceUrl[];
5252
@Input() descriptions: string[];
5353
@Input() showDescription: boolean;
54+
@Input() arrows: boolean;
55+
@Input() arrowsAutoHide: boolean;
5456
@Input() swipe: boolean;
5557
@Input() fullscreen: boolean;
5658
@Input() forceFullscreen: boolean;
@@ -101,6 +103,12 @@ export class NgxGalleryPreviewComponent implements OnChanges {
101103
private helperService: NgxGalleryHelperService, private renderer: Renderer,
102104
private changeDetectorRef: ChangeDetectorRef) {}
103105

106+
ngOnInit(): void {
107+
if (this.arrows && this.arrowsAutoHide) {
108+
this.arrows = false;
109+
}
110+
}
111+
104112
ngOnChanges(changes: SimpleChanges): void {
105113
if (changes['swipe']) {
106114
this.helperService.manageSwipe(this.swipe, this.elementRef,
@@ -114,6 +122,18 @@ export class NgxGalleryPreviewComponent implements OnChanges {
114122
}
115123
}
116124

125+
@HostListener('mouseenter') onMouseEnter() {
126+
if (this.arrowsAutoHide && !this.arrows) {
127+
this.arrows = true;
128+
}
129+
}
130+
131+
@HostListener('mouseleave') onMouseLeave() {
132+
if (this.arrowsAutoHide && this.arrows) {
133+
this.arrows = false;
134+
}
135+
}
136+
117137
onKeyDown(e) {
118138
if (this.isOpen) {
119139
if (this.keyboardNavigation) {

Diff for: ‎src/ngx-gallery.component.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { NgxGalleryOrderedImage } from './ngx-gallery-ordered-image.model';
2020
2121
<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>
2222
23-
<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>
23+
<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>
2424
</div>
2525
`,
2626
styleUrls: ['./ngx-gallery.component.scss'],

0 commit comments

Comments
 (0)