ngx-parallax-scroll
Version:
This is a simple angular plugin, that allows us to implement parallax effect for some element in page
330 lines (322 loc) • 10.7 kB
JavaScript
import { isPlatformServer } from '@angular/common';
import { fromEvent } from 'rxjs';
import { throttleTime } from 'rxjs/operators';
import { Directive, ElementRef, Renderer2, Input, Inject, PLATFORM_ID, isDevMode, Component, NgModule } from '@angular/core';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ParallaxScrollDirective {
/**
* @param {?} elem
* @param {?} renderer
* @param {?} platformId
*/
constructor(elem, renderer, platformId) {
this.elem = elem;
this.renderer = renderer;
this.platformId = platformId;
this._parallaxTimingFunVal = 'linear';
this._parallaxThrottleTime = 0;
this.directiveName = this.constructor.name;
}
/**
* @return {?}
*/
ngOnInit() {
if (isPlatformServer(this.platformId))
return;
// Initing parallax effect and setting element styles
this.initParallax();
this.setParallaxElTransform();
this.setParallaxTransition();
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
// Setting parallax options from config object or input props
/** @type {?} */
const prlxSpeed = (changes['parallaxSpeed'] && changes['parallaxSpeed'].currentValue) ||
(changes['config'] && changes['config'].currentValue.parallaxSpeed);
/** @type {?} */
const prlxSmoothness = (changes['parallaxSmoothness'] && changes['parallaxSmoothness'].currentValue) ||
(changes['config'] && changes['config'].currentValue.parallaxSmoothness);
/** @type {?} */
const prlxDirection = (changes['parallaxDirection'] && changes['parallaxDirection'].currentValue) ||
(changes['config'] && changes['config'].currentValue.parallaxDirection);
/** @type {?} */
const prlxTimingFunction = (changes['parallaxTimingFunction'] && changes['parallaxTimingFunction'].currentValue) ||
(changes['config'] && changes['config'].currentValue.parallaxTimingFunction);
/** @type {?} */
const prlxThrottleTime = (changes['parallaxThrottleTime'] && changes['parallaxThrottleTime'].currentValue) ||
(changes['config'] && changes['config'].currentValue.parallaxThrottleTime);
this.setParallaxSpeed(prlxSpeed);
this.setParallaxSmoothness(prlxSmoothness);
this.setParallaxDirection(prlxDirection);
this.setParallaxTimingFun(prlxTimingFunction);
this.setParallaxThrottleTime(prlxThrottleTime);
}
/**
* @return {?}
*/
ngAfterViewInit() { }
/**
* @return {?}
*/
ngOnDestroy() {
this.scrollSubscribtion && this.scrollSubscribtion.unsubscribe();
}
// Setting parallax effect and setting element styles
/**
* @return {?}
*/
initParallax() {
this.scrollSubscribtion = fromEvent(window, 'scroll')
.pipe(throttleTime(this.prlxThrottleTime))
.subscribe((/**
* @return {?}
*/
() => {
this.setParallaxElTransform();
}));
}
// Setting parallax speed effect styles
/**
* @return {?}
*/
setParallaxElTransform() {
/** @type {?} */
let scrolled = window.pageYOffset;
this.renderer.setStyle(this.elem.nativeElement, 'transform', `translateY(${scrolled * this.prlxSpeed}px) translateZ(0)`);
}
// Setting parallax smooth effect styles, based on CSS animation-timing-function
/**
* @return {?}
*/
setParallaxTransition() {
this.renderer.setStyle(this.elem.nativeElement, 'transition', `transform ${this.prlxSmoothness}s ${this.prlxTimingFun}`);
}
// Setting parallax properties
/**
* @param {?} speedVal
* @return {?}
*/
setParallaxSpeed(speedVal) {
/** @type {?} */
const propName = 'parallaxSpeed';
this.validateParallaxSpeed(speedVal, propName, 'number') && (this._parallaxSpeedVal = speedVal);
}
/**
* @param {?} smoothnessVal
* @return {?}
*/
setParallaxSmoothness(smoothnessVal) {
/** @type {?} */
const propName = 'parallaxSmoothness';
this.validateParallaxSmoothness(smoothnessVal, propName, 'number') &&
(this._parallaxSmoothnessVal = smoothnessVal);
}
/**
* @param {?} directionVal
* @return {?}
*/
setParallaxDirection(directionVal) {
/** @type {?} */
const propName = 'parallaxDirection';
directionVal &&
this.isTypeOf(directionVal, 'string', propName) &&
directionVal === 'reverse' &&
(this._parallaxSpeedVal *= -1);
}
/**
* @param {?} timingFun
* @return {?}
*/
setParallaxTimingFun(timingFun) {
/** @type {?} */
const propName = 'parallaxTimingFunction';
timingFun &&
this.isTypeOf(timingFun, 'string', propName) &&
(this._parallaxTimingFunVal = timingFun);
}
/**
* @param {?} throttleTime
* @return {?}
*/
setParallaxThrottleTime(throttleTime$$1) {
/** @type {?} */
const propName = 'parallaxThrottleTime';
throttleTime$$1 &&
this.isTypeOf(throttleTime$$1, 'number', propName) &&
(this._parallaxThrottleTime = throttleTime$$1);
}
// Getters for parallax options
/**
* @return {?}
*/
get prlxSpeed() {
return this._parallaxSpeedVal;
}
/**
* @return {?}
*/
get prlxSmoothness() {
return this._parallaxSmoothnessVal;
}
/**
* @return {?}
*/
get prlxTimingFun() {
return this._parallaxTimingFunVal;
}
/**
* @return {?}
*/
get prlxThrottleTime() {
return this._parallaxThrottleTime;
}
// Validation functions
/**
* @param {?} value
* @param {?} propName
* @return {?}
*/
isProvided(value, propName) {
/** @type {?} */
const isNotProvided = value == null || value === '';
if (isNotProvided && isDevMode()) {
throw new Error(`${this.directiveName}: [${propName}] is required, but was not provided`);
}
return true;
}
/**
* @param {?} value
* @param {?} requiredType
* @param {?} propName
* @return {?}
*/
isTypeOf(value, requiredType, propName) {
/** @type {?} */
const isRequiredType = typeof value === requiredType;
if (!isRequiredType && isDevMode()) {
throw new Error(`${this.directiveName}: [${propName}] is expected to be of type '${requiredType}', but type '${typeof value}' was provided`);
}
return true;
}
/**
* @param {?} value
* @param {?} propName
* @return {?}
*/
isPositive(value, propName) {
/** @type {?} */
const isRequiredType = typeof value === 'number';
/** @type {?} */
const isValid = value >= 0;
if (isRequiredType && !isValid && isDevMode()) {
throw new Error(`${this.directiveName}: [${propName}] is expected to be positive value, but negative '${value}' value was provided`);
}
return true;
}
// Executing validation functions to validate parallax speed
/**
* @param {?} value
* @param {?} propName
* @param {?} requiredType
* @return {?}
*/
validateParallaxSpeed(value, propName, requiredType) {
return (this.isProvided(value, propName) &&
this.isTypeOf(value, requiredType, propName) &&
this.isPositive(value, propName));
}
// Executing validation functions to validate parallax smoothness
/**
* @param {?} value
* @param {?} propName
* @param {?} requiredType
* @return {?}
*/
validateParallaxSmoothness(value, propName, requiredType) {
return (this.isProvided(value, propName) &&
this.isTypeOf(value, requiredType, propName) &&
this.isPositive(value, propName));
}
}
ParallaxScrollDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngxParallaxScroll]'
},] }
];
/** @nocollapse */
ParallaxScrollDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 },
{ type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
];
ParallaxScrollDirective.propDecorators = {
config: [{ type: Input }],
parallaxSpeed: [{ type: Input }],
parallaxSmoothness: [{ type: Input }],
parallaxDirection: [{ type: Input }],
parallaxTimingFunction: [{ type: Input }],
parallaxThrottleTime: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NgxParallaxScrollComponent {
constructor() { }
/**
* @return {?}
*/
ngOnInit() { }
}
NgxParallaxScrollComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-parallax-scroll',
template: `
<div class="parallax-container" ngxParallaxScroll [config]="config">
<ng-content></ng-content>
</div>
`,
styles: [`
.parallax-container display: inline-block;
`]
}] }
];
/** @nocollapse */
NgxParallaxScrollComponent.ctorParameters = () => [];
NgxParallaxScrollComponent.propDecorators = {
config: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NgxParallaxScrollModule {
}
NgxParallaxScrollModule.decorators = [
{ type: NgModule, args: [{
declarations: [NgxParallaxScrollComponent, ParallaxScrollDirective],
imports: [],
exports: [NgxParallaxScrollComponent, ParallaxScrollDirective]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { ParallaxScrollDirective, NgxParallaxScrollComponent, NgxParallaxScrollModule };
//# sourceMappingURL=ngx-parallax-scroll.js.map