ngx-parallax-scroll
Version:
This is a simple angular plugin, that allows us to implement parallax effect for some element in page
433 lines (425 loc) • 17.2 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('rxjs'), require('rxjs/operators'), require('@angular/core')) :
typeof define === 'function' && define.amd ? define('ngx-parallax-scroll', ['exports', '@angular/common', 'rxjs', 'rxjs/operators', '@angular/core'], factory) :
(factory((global['ngx-parallax-scroll'] = {}),global.ng.common,global.rxjs,global.rxjs.operators,global.ng.core));
}(this, (function (exports,common,rxjs,operators,core) { 'use strict';
/**
* @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 (common.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 = rxjs.fromEvent(window, 'scroll')
.pipe(operators.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) {
/** @type {?} */
var propName = 'parallaxThrottleTime';
throttleTime &&
this.isTypeOf(throttleTime, 'number', propName) &&
(this._parallaxThrottleTime = throttleTime);
};
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 && core.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 && core.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 && core.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: core.Directive, args: [{
selector: '[ngxParallaxScroll]'
},] }
];
/** @nocollapse */
ParallaxScrollDirective.ctorParameters = function () {
return [
{ type: core.ElementRef },
{ type: core.Renderer2 },
{ type: Object, decorators: [{ type: core.Inject, args: [core.PLATFORM_ID,] }] }
];
};
ParallaxScrollDirective.propDecorators = {
config: [{ type: core.Input }],
parallaxSpeed: [{ type: core.Input }],
parallaxSmoothness: [{ type: core.Input }],
parallaxDirection: [{ type: core.Input }],
parallaxTimingFunction: [{ type: core.Input }],
parallaxThrottleTime: [{ type: core.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: core.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: core.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: core.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
*/
exports.ParallaxScrollDirective = ParallaxScrollDirective;
exports.NgxParallaxScrollComponent = NgxParallaxScrollComponent;
exports.NgxParallaxScrollModule = NgxParallaxScrollModule;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ngx-parallax-scroll.umd.js.map