rfx-parallax
Version:
RfxParallax - parallax made easy
216 lines (215 loc) • 7.5 kB
TypeScript
import { ElementRef, OnChanges, OnInit, Renderer2, SimpleChanges } from '@angular/core';
import { ResizeEventService, ScrollEventService } from '../../services';
import * as i0 from "@angular/core";
export declare class RfxParallaxComponent implements OnInit, OnChanges {
private htmlElement;
private renderer;
private scrollEventService;
private resizeEventService;
private platformId;
/**
* Image url.
* Can be http(s) or relative path.
* TODO: Add support for fallback.
* @type {string}
*/
imageUrl: string | undefined;
/**
* Image alt attribute.
* @type {string}
*/
imageAlt: string | undefined;
/**
* Percentage of image scrolling.
* e.g. 40% will scroll 40% of the image.
* Default is 40.
* @type {number}
*/
parallaxPercentage: number;
/**
* Image view position in percentage.
* e.g. 50% will show centered image in container.
* Default is 50.
* @type {number}
*/
positionPercentage: number;
/**
* Image z-index property.
* Default is -1.
* @type {number}
*/
imageZIndex: number;
/**
* Show or hide image overflow on container.
* Default is false (hide).
* @type {boolean}
*/
visibleOverflow: boolean;
/**
* Disable image parallax effect and
* restore default image position.
* Useful on low performance devices.
* @type {boolean}
*/
isDisabled: boolean;
/**
* Force image to be 100% of container width.
* @type {boolean}
*/
forceFullWidth: boolean;
/**
* Subscription to scroll event.
* @type {Subscription | undefined}
*/
private scrollEventListener;
/**
* Subscription to resize event.
* @type {Subscription | undefined}
*/
private resizeEventListener;
/**
* Parallaxed image boundaries.
* @type {ParallaxBoundariesModel | undefined}
*/
private parallaxBoundaries;
/**
* Image to be parallaxed.
* @type {HTMLImageElement | undefined}
*/
private image;
/**
* Image left position.
* We save this value and reduce overhead of
* calculating it every time on scroll.
* @type {number}
*/
private imageLeftPx;
/**
* Is image loaded.
* @type {boolean}
*/
isLoaded: boolean;
/**
* Is platform browser.
* False for example when using SSR.
* @type {boolean}
*/
isBrowser: boolean;
constructor(htmlElement: ElementRef, renderer: Renderer2, scrollEventService: ScrollEventService, resizeEventService: ResizeEventService, platformId: Object);
/**
* Set container position and overflow.
* If parallax is not disabled, create listeners.
*/
ngOnInit(): void;
/**
* Update parallax values when some properies changed.
* - isDisabled change, enable or disable parallax and refresh image properties.
* - visibleOverflow change, show or hide image overflow on container without refresh.
* - imagerUrl, parallaxPercentage or positionPercentage change, refresh image properties.
* @param {SimpleChanges} changes - SimpleChanges object.
*/
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
/**
* Check if SimpleChange value has changed.
* Eventually check if value corresponds to a new value.
* @param {SimpleChange} change - SimpleChange object.
* @param {any} newValue - New value.
* @returns {boolean} - true if value has changed.
*/
private hasValueChanged;
/**
* Destroy all listeners.
*/
private destroyListeners;
/**
* Listen to scroll and resize events.
* Destroy alreay existing listeners.
*/
private createListeners;
/**
* On mouse scroll event recalculate and change
* parallaxed image position.
* @param {number} scroll - Scroll value.
*/
private onMouseScroll;
/**
* On window resize event reload parallax properties.
*/
private onResize;
/**
* Set image object and loading status.
* Set image properties after image is fully loaded
* but only if platform is browser.
* @param {Event} event - Image loaded event.
*/
onImageLoaded(event: Event): void;
/**
* Set image properties needed for parallax effect.
* @param {HTMLImageElement} image - Image to be parallaxed.
*/
private setImageProperties;
/**
* Set container position to relative
* if image is not already in relative or absolute position.
* @param {HTMLElement} container
*/
private setContainerPosition;
/**
* Set container overflow.
* @param {HTMLElement} container - Container element.
* @param {boolean} isOverflowVisible - true to show container overflow.
*/
private setContainerOverflow;
/**
* Set image size based on container size,
* parallax percentage and disabled state.
* @param {HTMLImageElement} image - Image element.
* @param {number} containerWidth - Container width.
* @param {number} containerHeight - Container height.
* @param {number} parallaxPercentage - Parallax percentage.
* @param {boolean} isDisabled - true to disable parallax effect.
* @param {boolean} forceFullWidth - true to force image size to container width.
*/
private setImageSize;
/**
* Get parallax boundaries. This data is used
* to calculate parallax movement.
* @param {number} scrollTop - Scroll top.
* @param {HTMLElement} container - Container element.
* @param {number} imageHeight - Image height.
* @param {number} parallaxPercentage - Parallax percentage.
* @return {ParallaxBoundariesModel} - Parallax boundaries.
*/
private getParallaxBoundaries;
/**
* Get image left position.
* @param {number} containerWidth - Container width.
* @param {number} imageWidth - Image width.
* @param {number} positionPercentage - Position percentage.
* @return {number} - Image left position.
*/
private getImageLeft;
/**
* Get image top position.
* @param {number} scrollTop - Scroll top.
* @param {ParallaxBoundariesModel} boundaries - Parallax boundaries.
* @return {number} - Image top position.
*/
private getImageTop;
/**
* Get disabled image top position.
* @param {number} boundaries - Parallax boundaries.
* @return {number} - Image top position.
*/
private getDisabledImageTop;
/**
* Set image transform properties.
* @param {HTMLImageElement} image - Image element.
* @param {number} leftPx - Image left position.
* @param {number} topPx - Image top position.
*/
private setImageTransform;
static ɵfac: i0.ɵɵFactoryDeclaration<RfxParallaxComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<RfxParallaxComponent, "[libRfxParallax]", never, { "imageUrl": "imageUrl"; "imageAlt": "imageAlt"; "parallaxPercentage": "parallaxPercentage"; "positionPercentage": "positionPercentage"; "imageZIndex": "imageZIndex"; "visibleOverflow": "visibleOverflow"; "isDisabled": "isDisabled"; "forceFullWidth": "forceFullWidth"; }, {}, never, ["*"]>;
}