From ae5074fec55b52590abc209b7cd60ef3c71552bc Mon Sep 17 00:00:00 2001 From: Stefano Cappa Date: Wed, 31 May 2017 00:26:34 +0200 Subject: [PATCH] basic tslint config for angular-modal-gallery lib #59 + library documentation with typedoc #58 --- index.ts | 2 +- src/components/gallery.component.ts | 4 +- src/components/keyboard.service.ts | 2 +- src/components/modal-gallery.component.ts | 186 +++++++++++--------- src/directives/click-outside.directive.ts | 4 +- src/directives/close-button.directive.ts | 2 +- src/directives/directives.ts | 2 +- src/directives/download-button.directive.ts | 8 +- src/directives/external-url.directive.ts | 9 +- src/modal-gallery.module.ts | 8 +- 10 files changed, 126 insertions(+), 101 deletions(-) diff --git a/index.ts b/index.ts index a69fee39..eb0b7cc0 100644 --- a/index.ts +++ b/index.ts @@ -52,4 +52,4 @@ export class ModalGalleryModule { ngModule: AngularRootModalGalleryModule }; } -} \ No newline at end of file +} diff --git a/src/components/gallery.component.ts b/src/components/gallery.component.ts index 54bfb932..e25f3e2e 100644 --- a/src/components/gallery.component.ts +++ b/src/components/gallery.component.ts @@ -31,7 +31,7 @@ import {Image} from "./modal-gallery.component"; styleUrls: ['gallery.scss'], templateUrl: 'gallery.html' }) -export class Gallery { +export class GalleryComponent { @Input() images: Image[]; @Input() showGallery: boolean; @@ -41,4 +41,4 @@ export class Gallery { showModalGallery(index: number) { this.show.emit(index); } -} \ No newline at end of file +} diff --git a/src/components/keyboard.service.ts b/src/components/keyboard.service.ts index 4e2f723d..4b216f08 100644 --- a/src/components/keyboard.service.ts +++ b/src/components/keyboard.service.ts @@ -24,4 +24,4 @@ export class KeyboardService { reset() { this.mousetrap.reset(); } -} \ No newline at end of file +} diff --git a/src/components/modal-gallery.component.ts b/src/components/modal-gallery.component.ts index 012fe5b3..2828ee9f 100644 --- a/src/components/modal-gallery.component.ts +++ b/src/components/modal-gallery.component.ts @@ -120,28 +120,34 @@ export interface KeyboardConfig { styleUrls: ['modal-gallery.scss'], templateUrl: 'modal-gallery.html' }) -export class AngularModalGallery implements OnInit, OnDestroy, OnChanges { +export class AngularModalGalleryComponent implements OnInit, OnDestroy, OnChanges { /** - * Array or Observable input that represets a list of Images use to show both the + * Array or Observable input that represents a list of Images use to show both the * thumbs gallery and the modal gallery. */ @Input() modalImages: Observable> | Array; + /** + * Number to open the modal gallery (passing a value >=0) showing the image with the imagePointer's index + */ @Input() imagePointer: number; + /** + * Boolean required to enable image download with both ctrl+s and download button. + * If you want to show enable button, this is not enough. You have to use also `buttonsConfig`. + */ @Input() downloadable: boolean = false; + /** + * Description object with the configuration to show image descriptions. + */ @Input() description: Description; - /** * Object of type `ButtonsConfig` to show/hide buttons. * This is used only inside `ngOnInit()` to create `configButtons` used into upper-buttons */ @Input() buttonsConfig: ButtonsConfig; - /** * Object of type `KeyboardConfig` to assign custom keys to ESC, RIGHT and LEFT keyboard's actions. */ @Input() keyboardConfig: KeyboardConfig; - - /** * enableCloseOutside's input to enable modal-gallery close behaviour while clicking * on the semi-transparent background. Disabled by default. @@ -149,11 +155,11 @@ export class AngularModalGallery implements OnInit, OnDestroy, OnChanges { @Input() enableCloseOutside: boolean = false; /** - * deprecated both showDownloadButton and showExtUrlButton + * -----REMOVE THIS IN 4.0.0----- deprecated both showDownloadButton and showExtUrlButton */ @Input() showDownloadButton: boolean = false; // deprecated /** - * deprecated both showDownloadButton and showExtUrlButton + * -----REMOVE THIS IN 4.0.0----- deprecated both showDownloadButton and showExtUrlButton */ @Input() showExtUrlButton: boolean = false; // deprecated @@ -163,42 +169,35 @@ export class AngularModalGallery implements OnInit, OnDestroy, OnChanges { @Output() lastImage: EventEmitter = new EventEmitter(); @Output() hasData: EventEmitter = new EventEmitter(); - @HostListener('window:keydown', ['$event']) - onKeyDown(e: KeyboardEvent) { - if (!this.opened) { - return; - } - const esc: number = this.keyboardConfig && this.keyboardConfig.esc ? this.keyboardConfig.esc : Keyboard.ESC; - const right: number = this.keyboardConfig && this.keyboardConfig.right ? this.keyboardConfig.right : Keyboard.RIGHT_ARROW; - const left: number = this.keyboardConfig && this.keyboardConfig.left ? this.keyboardConfig.left : Keyboard.LEFT_ARROW; - - switch (e.keyCode) { - case esc: - this.closeGallery(Action.KEYBOARD); - break; - case right: - this.nextImage(Action.KEYBOARD); - break; - case left: - this.prevImage(Action.KEYBOARD); - break; - } - } - + /** + * Boolean that it is true if the modal gallery is visible + */ opened: boolean = false; + /** + * Boolean that it is true if an image of the modal gallery is still loading + */ loading: boolean = false; + /** + * Boolean to open the modal gallery. Closed by default. + */ showGallery: boolean = false; - + /** + * Array of `Image` that represent the model of this library with all images, thumbs and so on. + */ images: Image[]; + /** + * `Image` currently visible. + */ currentImage: Image; + /** + * Number that represents the index of the current image. + */ currentImageIndex: number = 0; - /** * Object of type `ButtonsConfig` used to configure buttons visibility. This is a temporary value * initialized by the real `buttonsConfig`'s input */ configButtons: ButtonsConfig; - /** * Enum of type `Action` used to pass a click action when you click over the modal image. * Declared here to be used inside the template. @@ -221,6 +220,34 @@ export class AngularModalGallery implements OnInit, OnDestroy, OnChanges { private subscription: Subscription; + /** + * Listener to catch keyboard's events and call the right method based on the key. + * For instance, pressing esc, this will call `closeGallery(Action.KEYBOARD)` and so on. + * If you passed a valid `keyboardConfig` esc, right and left buttons will be customized based on your data. + * @param e KeyboardEvent catched by the listener. + */ + @HostListener('window:keydown', ['$event']) + onKeyDown(e: KeyboardEvent) { + if (!this.opened) { + return; + } + const esc: number = this.keyboardConfig && this.keyboardConfig.esc ? this.keyboardConfig.esc : Keyboard.ESC; + const right: number = this.keyboardConfig && this.keyboardConfig.right ? this.keyboardConfig.right : Keyboard.RIGHT_ARROW; + const left: number = this.keyboardConfig && this.keyboardConfig.left ? this.keyboardConfig.left : Keyboard.LEFT_ARROW; + + switch (e.keyCode) { + case esc: + this.closeGallery(Action.KEYBOARD); + break; + case right: + this.nextImage(Action.KEYBOARD); + break; + case left: + this.prevImage(Action.KEYBOARD); + break; + } + } + /** * Constructor with the injection of ´KeyboardService´ that initialize some description fields based on default values. */ @@ -231,7 +258,7 @@ export class AngularModalGallery implements OnInit, OnDestroy, OnChanges { imageText: 'Image ', numberSeparator: '/', beforeTextDescription: ' - ' - } + }; } // if one of the Description fields isn't initialized, provide a default value @@ -254,39 +281,6 @@ export class AngularModalGallery implements OnInit, OnDestroy, OnChanges { this.initImages(); } - /** - * Private method ´initImages´ to initialize `images` as array of `Image` or as an Observable of `Array`. - * Also, it will call completeInitialization. - */ - private initImages() { - if (this.modalImages instanceof Array) { - this.images = this.modalImages; - this.completeInitialization(); - } else { - if (this.modalImages instanceof Observable) { - this.subscription = this.modalImages.subscribe((val: Array) => { - this.images = val; - this.completeInitialization(); - }); - } - } - } - - /** - * Private method ´completeInitialization´ to emit ImageModalEvent to say that images are loaded. If you are - * using imagePointer feature, it will also call showModalGallery with imagePointer as parameter. - */ - private completeInitialization() { - this.hasData.emit(new ImageModalEvent(Action.LOAD, true)); - this.loading = true; - if (this.imagePointer >= 0) { - this.showGallery = false; - this.showModalGallery(this.imagePointer); - } else { - this.showGallery = true; - } - } - /** * Method ´ngOnChanges´ to init images preventing errors. */ @@ -430,11 +424,22 @@ export class AngularModalGallery implements OnInit, OnDestroy, OnChanges { * @param event Boolean that is true if user clicked on the semi-trasparent background, false otherwise. */ onClickOutside(event: boolean) { - if(event && this.enableCloseOutside) { + if (event && this.enableCloseOutside) { this.closeGallery(Action.CLICK); } } + /** + * Method `ngOnDestroy` to cleanup resources. In fact, this will unsubscribe + * all subscriptions and it will reset keyboard's service. + */ + ngOnDestroy() { + if (this.subscription) { + this.subscription.unsubscribe(); + } + this.keyboardService.reset(); + } + /** * Private method `getNextIndex` to get the next index, based on the action and the current index. * This is necessary because at the end and calling prnextev again, you'll go to the first image, because they are shown like in a circle. @@ -483,6 +488,40 @@ export class AngularModalGallery implements OnInit, OnDestroy, OnChanges { return newIndex; } + + /** + * Private method ´initImages´ to initialize `images` as array of `Image` or as an Observable of `Array`. + * Also, it will call completeInitialization. + */ + private initImages() { + if (this.modalImages instanceof Array) { + this.images = this.modalImages; + this.completeInitialization(); + } else { + if (this.modalImages instanceof Observable) { + this.subscription = this.modalImages.subscribe((val: Array) => { + this.images = val; + this.completeInitialization(); + }); + } + } + } + + /** + * Private method ´completeInitialization´ to emit ImageModalEvent to say that images are loaded. If you are + * using imagePointer feature, it will also call showModalGallery with imagePointer as parameter. + */ + private completeInitialization() { + this.hasData.emit(new ImageModalEvent(Action.LOAD, true)); + this.loading = true; + if (this.imagePointer >= 0) { + this.showGallery = false; + this.showModalGallery(this.imagePointer); + } else { + this.showGallery = true; + } + } + /** * Private method `emitBoundaryEvent` to emit events when either the last or the first image are visible. * @param action Enum of type Action that represents the source of the event that changed the @@ -510,15 +549,4 @@ export class AngularModalGallery implements OnInit, OnDestroy, OnChanges { private getFileName(path: string) { return path.replace(/^.*[\\\/]/, ''); } - - /** - * Method `ngOnDestroy` to cleanup resources. In fact, this will unsubscribe - * all subscriptions and it will reset keyboard's service. - */ - ngOnDestroy() { - if (this.subscription) { - this.subscription.unsubscribe(); - } - this.keyboardService.reset(); - } } diff --git a/src/directives/click-outside.directive.ts b/src/directives/click-outside.directive.ts index 10655b47..35939818 100644 --- a/src/directives/click-outside.directive.ts +++ b/src/directives/click-outside.directive.ts @@ -13,8 +13,8 @@ export class ClickOutsideDirective { onClick(targetElement: Element) { let elementId: string = targetElement.id; - if(elementId === 'ng-gallery-content' && this.clickOutsideEnable) { + if (elementId === 'ng-gallery-content' && this.clickOutsideEnable) { this.clickOutside.emit(true); } } -} \ No newline at end of file +} diff --git a/src/directives/close-button.directive.ts b/src/directives/close-button.directive.ts index a4ad457a..804cb419 100644 --- a/src/directives/close-button.directive.ts +++ b/src/directives/close-button.directive.ts @@ -17,4 +17,4 @@ export class CloseButtonDirective implements OnChanges { // hide closeButton if configButtons.close is false this.el.nativeElement.hidden = this.configButtons && !this.configButtons.close; } -} \ No newline at end of file +} diff --git a/src/directives/directives.ts b/src/directives/directives.ts index 52d8098c..e320c10d 100644 --- a/src/directives/directives.ts +++ b/src/directives/directives.ts @@ -5,4 +5,4 @@ import { ClickOutsideDirective } from './click-outside.directive'; export const DIRECTIVES = [ ExternalUrlButtonDirective, DownloadButtonDirective, CloseButtonDirective, ClickOutsideDirective -]; \ No newline at end of file +]; diff --git a/src/directives/download-button.directive.ts b/src/directives/download-button.directive.ts index e627b1c8..cc6a7a63 100644 --- a/src/directives/download-button.directive.ts +++ b/src/directives/download-button.directive.ts @@ -29,18 +29,18 @@ export class DownloadButtonDirective implements OnChanges { private getNumOfPrecedingButtons() { let num: number = 0; - if(!this.configButtons) { + if (!this.configButtons) { return num; } - if(this.configButtons.extUrl && this.imgExtUrl) { + if (this.configButtons.extUrl && this.imgExtUrl) { num++; } - if(this.configButtons.close) { + if (this.configButtons.close) { num++; } return num; } -} \ No newline at end of file +} diff --git a/src/directives/external-url.directive.ts b/src/directives/external-url.directive.ts index 7abe635d..42bc7af2 100644 --- a/src/directives/external-url.directive.ts +++ b/src/directives/external-url.directive.ts @@ -31,15 +31,12 @@ export class ExternalUrlButtonDirective implements OnChanges { private getNumOfPrecedingButtons() { let num: number = 0; - if(!this.configButtons) { + if (!this.configButtons) { return num; } - - if(this.configButtons.close) { + if (this.configButtons.close) { num++; } - return num; } - -} \ No newline at end of file +} diff --git a/src/modal-gallery.module.ts b/src/modal-gallery.module.ts index ecc67a6c..a9802192 100644 --- a/src/modal-gallery.module.ts +++ b/src/modal-gallery.module.ts @@ -25,16 +25,16 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { AngularModalGallery } from './components/modal-gallery.component'; +import { AngularModalGalleryComponent } from './components/modal-gallery.component'; import { DIRECTIVES } from './directives/directives'; import { UpperButtonsComponent } from './components/upper-buttons.component'; import { KeyboardService } from './components/keyboard.service'; -import { Gallery } from './components/gallery.component'; +import { GalleryComponent } from './components/gallery.component'; @NgModule({ imports: [ CommonModule ], - declarations: [ AngularModalGallery, UpperButtonsComponent, Gallery, DIRECTIVES ], - exports: [ AngularModalGallery ] + declarations: [ AngularModalGalleryComponent, UpperButtonsComponent, GalleryComponent, DIRECTIVES ], + exports: [ AngularModalGalleryComponent ] }) export class AngularModalGalleryModule { static forRoot(): ModuleWithProviders {