@ks89/angular-modal-gallery
Version:
Image gallery for Angular
247 lines (246 loc) • 10.4 kB
TypeScript
import { ChangeDetectorRef, OnDestroy, OnInit, TemplateRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { ImageModalEvent } from '../../model/image.class';
import { ConfigService } from '../../services/config.service';
import { DotsConfig } from '../../model/dots-config.interface';
import { ButtonEvent, ButtonsConfig } from '../../model/buttons-config.interface';
import { InternalLibImage } from '../../model/image-internal.class';
import { Action } from '../../model/action.enum';
import { CurrentImageComponent, ImageLoadEvent } from '../current-image/current-image.component';
import { IdValidatorService } from '../../services/id-validator.service';
import { KeyboardConfig } from '../../model/keyboard-config.interface';
import { PreviewConfig } from '../../model/preview-config.interface';
import { SlideConfig } from '../../model/slide-config.interface';
import { AccessibilityConfig } from '../../model/accessibility.interface';
import { PlainGalleryConfig } from '../../model/plain-gallery-config.interface';
import { ModalGalleryService } from './modal-gallery.service';
import { LibConfig } from '../../model/lib-config.interface';
import { ModalGalleryConfig } from '../../model/modal-gallery-config.interface';
import * as i0 from "@angular/core";
export declare class ModalGalleryComponent implements OnInit, OnDestroy {
private dialogContent;
private modalGalleryService;
private platformId;
private changeDetectorRef;
private idValidatorService;
private configService;
private sanitizer;
/**
* Reference to the CurrentImageComponent to invoke methods on it.
*/
currentImageComponent: CurrentImageComponent | undefined;
/**
* Unique id (>=0) of the current instance of this library. This is useful when you are using
* the service to call modal gallery without open it manually.
*/
id: number;
/**
* Object of type `ButtonsConfig` to show/hide buttons.
*/
buttonsConfig: ButtonsConfig | undefined;
/**
* Boolean to enable modal-gallery close behaviour when clicking
* on the semi-transparent background. Enabled by default.
*/
enableCloseOutside: boolean;
/**
* Object of type `DotsConfig` to init DotsComponent's features.
* For instance, it contains a param to show/hide dots.
*/
dotsConfig: DotsConfig | undefined;
/**
* Object of type `PreviewConfig` to init PreviewsComponent's features.
* For instance, it contains a param to show/hide previews.
*/
previewConfig: PreviewConfig | undefined;
/**
* Object of type `SlideConfig` to init side previews and `infinite sliding`.
*/
slideConfig: SlideConfig | undefined;
/**
* Object of type `AccessibilityConfig` to init custom accessibility features.
* For instance, it contains titles, alt texts, aria-labels and so on.
*/
accessibilityConfig: AccessibilityConfig;
/**
* Object of type `KeyboardConfig` to assign custom keys to ESC, RIGHT and LEFT keyboard's actions.
*/
keyboardConfig: KeyboardConfig | undefined;
/**
* Object of type `PlainGalleryConfig` to configure the plain gallery.
*/
plainGalleryConfig: PlainGalleryConfig | undefined;
/**
* Array of `InternalLibImage` representing the model of this library with all images, thumbs and so on.
*/
images: InternalLibImage[];
/**
* Optional template reference to use to render previews.
*/
customPreviewsTemplate?: TemplateRef<HTMLElement>;
/**
* `Image` that is visible right now.
*/
currentImage: InternalLibImage;
/**
* Boolean to open the modal gallery. False by default.
*/
showGallery: boolean;
/**
* Object to configure this component.
*/
libConfig: LibConfig | undefined;
private updateImagesSubscription;
/**
* HostListener to catch browser's back button and destroy the gallery.
* This prevents weired behaviour about scrolling.
* Added to fix this issue: https://github.com/Ks89/angular-modal-gallery/issues/159
*/
onPopState(): void;
/**
* HostListener to catch ctrl+s/meta+s and download the current image.
* Inspired by https://netbasal.com/add-keyboard-shortcuts-to-your-angular-app-9bf2e89862b3
*/
onSaveListener(event: KeyboardEvent): void;
constructor(dialogContent: ModalGalleryConfig, modalGalleryService: ModalGalleryService, platformId: Object, changeDetectorRef: ChangeDetectorRef, idValidatorService: IdValidatorService, configService: ConfigService, sanitizer: DomSanitizer);
/**
* Method ´ngOnInit´ to init images calling `initImages()`.
* This is an angular lifecycle hook, so its called automatically by Angular itself.
* In particular, it's called only one time!!!
*/
ngOnInit(): void;
/**
* Method called by custom upper buttons.
* @param event ButtonEvent event payload
*/
onCustomEmit(event: ButtonEvent): void;
/**
* Method called by the full-screen upper button.
* @param event ButtonEvent event payload
*/
onFullScreen(event: ButtonEvent): void;
/**
* Method called by the delete upper button.
* @param event ButtonEvent event payload
*/
onDelete(event: ButtonEvent): void;
/**
* Method called by the navigate upper button.
* @param event ButtonEvent event payload
*/
onNavigate(event: ButtonEvent): void;
/**
* This method is defined to be spied and replaced in unit testing with a fake method call.
* It must be public to be able to use jasmine spyOn method.
* @param newHref string new url
*/
updateLocationHref(newHref: string): void;
/**
* Method called by the download upper button.
* @param event ButtonEvent event payload
*/
onDownload(event: ButtonEvent): void;
/**
* Method called by the close upper button.
* @param event ButtonEvent event payload
* @param action Action that triggered the close method. `Action.NORMAL` by default
*/
onCloseGalleryButton(event: ButtonEvent, action?: Action): void;
/**
* Method called by CurrentImageComponent.
* @param event ImageModalEvent event payload
* @param action Action that triggered the close method. `Action.NORMAL` by default
*/
onCloseGallery(event: ImageModalEvent, action?: Action): void;
/**
* Method to close the modal gallery specifying the action.
* @param action Action action type. `Action.NORMAL` by default
* @param clickOutside boolean that is true if called clicking on the modal background. False by default.
*/
closeGallery(action?: Action, clickOutside?: boolean): void;
/**
* Method called when the image changes and used to update the `currentImage` object.
* @param event ImageModalEvent event payload
*/
onChangeCurrentImage(event: ImageModalEvent): void;
/**
* Method called when you click 'outside' (i.e. on the semi-transparent background)
* to close the modal gallery if `enableCloseOutside` is true.
* @param event boolean that is true to close the modal gallery, false otherwise
*/
onClickOutside(event: boolean): void;
/**
* Method called when an image is loaded and the loading spinner has gone.
* It sets the previouslyLoaded flag inside the Image to hide loading spinner when displayed again.
* @param event ImageLoadEvent event payload
*/
onImageLoad(event: ImageLoadEvent): void;
/**
* Method called when a dot is clicked and used to update the current image.
* @param index number index of the clicked dot
*/
onClickDot(index: number): void;
/**
* Method called when an image preview is clicked and used to update the current image.
* @param event ImageModalEvent preview image
*/
onClickPreview(event: ImageModalEvent): void;
/**
* Method to cleanup resources.
* This is an angular lifecycle hook that is called when this component is destroyed.
*/
ngOnDestroy(): void;
/**
* Method to download the current image, only if `downloadable` is true.
* @private
*/
private downloadImage;
/**
* Method to convert a base64 to a Blob
* @param base64Data string with base64 data
* @param contentType string with the MIME type
* @return Blob converted from the input base64Data
* @private
*/
private base64toBlob;
/**
* Private method to download the current image for all browsers.
* @private
*/
private downloadImageAllBrowsers;
/**
* Private method to get the `ButtonEvent` to emit, merging the input `ButtonEvent`
* with the current image.
* @param event ButtonEvent event payload to return
* @returns ButtonEvent event payload with the current image included
* @private
*/
private getButtonEventToEmit;
/**
* Private method to get the file name from an input path.
* This is used either to get the image's name from its path or from the Image itself,
* if specified as 'downloadFileName' by the user.
* @param image Image image to extract its file name
* @param isBase64 boolean to set if the image is a base64 file or not. False by default.
* @param base64Extension string to force the extension of the base64 image. Empty string by default.
* @returns string string file name of the input image.
* @private
*/
private getFileName;
/**
* Private method to initialize `images` as array of `Image`s.
* Also, it will emit ImageModalEvent to say that images are loaded.
* @private
*/
private initImages;
/**
* Private method to emit events when either the last or the first image are visible.
* @param action Action Enum of type Action that represents the source of the event that changed the
* current image to the first one or the last one.
* @param indexToCheck number is the index number of the image (the first or the last one).
* @private
*/
private emitBoundaryEvent;
static ɵfac: i0.ɵɵFactoryDeclaration<ModalGalleryComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<ModalGalleryComponent, "ks-modal-gallery", never, {}, {}, never, never, false, never>;
}