basic tslint config for angular-modal-gallery lib #59 + library docum…

…entation with typedoc #58

index.ts

@@ -52,4 +52,4 @@ export class ModalGalleryModule {
       ngModule: AngularRootModalGalleryModule
     };
   }
-}
+}

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);
   }
-}
+}

src/components/keyboard.service.ts

@@ -24,4 +24,4 @@ export class KeyboardService {
   reset() {
     this.mousetrap.reset();
   }
-}
+}

src/components/modal-gallery.component.ts

@@ -120,40 +120,46 @@ 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<Image>> | Array<Image>;
+  /**
+   * 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.
    */
   @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<ImageModalEvent> = new EventEmitter<ImageModalEvent>();
   @Output() hasData: EventEmitter<ImageModalEvent> = new EventEmitter<ImageModalEvent>();
 
-  @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<Image>`.
-   * 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<Image>) => {
-          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<Image>`.
+   * 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<Image>) => {
+          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();
-  }
 }

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);
     }
   }
-}
+}

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;
   }
-}
+}

src/directives/directives.ts

@@ -5,4 +5,4 @@ import { ClickOutsideDirective } from './click-outside.directive';
 
 export const DIRECTIVES = [
   ExternalUrlButtonDirective, DownloadButtonDirective, CloseButtonDirective, ClickOutsideDirective
-];
+];

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;
   }
-}
+}

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;
   }
-
-}
+}