UNPKG

@ks89/angular-modal-gallery

Version:
247 lines (246 loc) 10.4 kB
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>; }