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