ng2-parallaxscroll
Version:
A parallax directive for Angular 2+, now with Universal support!
313 lines (305 loc) • 9.99 kB
JavaScript
import { Component, Input, Directive, ElementRef, Inject, PLATFORM_ID, NgModule } from '@angular/core';
import { isPlatformBrowser, CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ParallaxScrollComponent = /** @class */ (function () {
function ParallaxScrollComponent() {
}
/**
* @return {?}
*/
ParallaxScrollComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.parallaxStyles = {
'background-image': this.img ? 'url(' + this.img + ')' : '',
height: '100%',
width: '100%'
};
};
ParallaxScrollComponent.decorators = [
{ type: Component, args: [{
// tslint:disable-next-line:component-selector
selector: 'ng-parallax',
template: "\n <div parallax [config]=\"config\"\n [ngStyle]=\"parallaxStyles\"\n [ngClass]=\"paraClass\">\n <ng-content></ng-content>\n </div>\n ",
styles: ["\n :host {\n display: block;\n }\n "]
}] }
];
ParallaxScrollComponent.propDecorators = {
config: [{ type: Input }],
img: [{ type: Input, args: ['img',] }],
paraClass: [{ type: Input, args: ['class',] }]
};
return ParallaxScrollComponent;
}());
if (false) {
/** @type {?} */
ParallaxScrollComponent.prototype.config;
/** @type {?} */
ParallaxScrollComponent.prototype.img;
/** @type {?} */
ParallaxScrollComponent.prototype.paraClass;
/** @type {?} */
ParallaxScrollComponent.prototype.parallaxStyles;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ParallaxScrollDirective = /** @class */ (function () {
function ParallaxScrollDirective(element, platformId) {
var _this = this;
this.platformId = platformId;
this.axis = 'Y';
this.speed = -.7;
this.initialValue = 0;
this.cssUnit = 'px';
this.parallaxPivot = '50%';
this.cssProperty = 'backgroundPosition';
this.onScroll = (/**
* @return {?}
*/
function () {
/** @type {?} */
var result;
/** @type {?} */
var scrollPosition;
// Read scroll position * speed + initial val
if (_this.testBrowser && _this.scrollElement instanceof Window) {
scrollPosition = _this.scrollElement.scrollY * _this.speed + _this.initialValue;
}
else {
scrollPosition = _this.scrollElement.scrollTop * _this.speed + _this.initialValue;
}
// Set limits
if (_this.maxValue !== undefined && scrollPosition >= _this.maxValue) {
scrollPosition = _this.maxValue;
}
else if (_this.minValue !== undefined && scrollPosition <= _this.minValue) {
scrollPosition = _this.minValue;
}
// Get output based on axis
if (_this.axis === 'X') {
result = 'calc(' + _this.parallaxPivot + ' + ' + scrollPosition + _this.cssUnit + ') center';
}
else {
result = 'center calc(' + _this.parallaxPivot + ' + ' + scrollPosition + _this.cssUnit + ')';
}
_this.parallaxElement.style[(/** @type {?} */ (_this.cssProperty))] = result;
});
this.hostElement = element.nativeElement;
this.testBrowser = isPlatformBrowser(this.platformId);
// If the window exists, grab it, else set to hostElement to prevent errors
this.backupElement = this.testBrowser ? window : this.hostElement;
}
/**
* @return {?}
*/
ParallaxScrollDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
// Read config
for (var prop in this.config) {
if (this.config.hasOwnProperty(prop)) {
((/** @type {?} */ (this)))[prop] = ((/** @type {?} */ (this.config)))[prop];
}
}
this.speed = +this.speed;
this.initialValue = +this.initialValue;
this.parallaxElement = this.parallaxElement || this.hostElement;
// Grab scroll element
if (this.scrollerId) {
try {
this.scrollElement = document.getElementById(this.scrollerId);
if (!this.scrollElement) {
throw new Error(("ID ('" + this.scrollerId + "') does not exist! Using default"));
}
}
catch (e) {
this.scrollElement = this.backupElement;
}
}
else {
this.scrollElement = this.backupElement;
}
this.onScroll();
this.scrollElement.addEventListener('scroll', this.onScroll.bind(this));
};
ParallaxScrollDirective.decorators = [
{ type: Directive, args: [{
// tslint:disable-next-line:directive-selector
selector: '[parallax]'
},] }
];
/** @nocollapse */
ParallaxScrollDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: Object, decorators: [{ type: Inject, args: [PLATFORM_ID,] }] }
]; };
ParallaxScrollDirective.propDecorators = {
config: [{ type: Input }],
axis: [{ type: Input }],
speed: [{ type: Input }],
initialValue: [{ type: Input }],
maxValue: [{ type: Input }],
minValue: [{ type: Input }],
cssUnit: [{ type: Input }],
scrollerId: [{ type: Input }],
parallaxElement: [{ type: Input }],
parallaxPivot: [{ type: Input }]
};
return ParallaxScrollDirective;
}());
if (false) {
/**
* @type {?}
* @private
*/
ParallaxScrollDirective.prototype.config;
/**
* @type {?}
* @private
*/
ParallaxScrollDirective.prototype.axis;
/**
* @type {?}
* @private
*/
ParallaxScrollDirective.prototype.speed;
/**
* @type {?}
* @private
*/
ParallaxScrollDirective.prototype.initialValue;
/**
* @type {?}
* @private
*/
ParallaxScrollDirective.prototype.maxValue;
/**
* @type {?}
* @private
*/
ParallaxScrollDirective.prototype.minValue;
/**
* @type {?}
* @private
*/
ParallaxScrollDirective.prototype.cssUnit;
/**
* @type {?}
* @private
*/
ParallaxScrollDirective.prototype.scrollerId;
/**
* @type {?}
* @private
*/
ParallaxScrollDirective.prototype.parallaxElement;
/**
* @type {?}
* @private
*/
ParallaxScrollDirective.prototype.parallaxPivot;
/**
* @type {?}
* @private
*/
ParallaxScrollDirective.prototype.cssProperty;
/**
* @type {?}
* @private
*/
ParallaxScrollDirective.prototype.scrollElement;
/**
* @type {?}
* @private
*/
ParallaxScrollDirective.prototype.hostElement;
/**
* @type {?}
* @private
*/
ParallaxScrollDirective.prototype.backupElement;
/**
* @type {?}
* @private
*/
ParallaxScrollDirective.prototype.testBrowser;
/**
* @type {?}
* @private
*/
ParallaxScrollDirective.prototype.onScroll;
/**
* @type {?}
* @private
*/
ParallaxScrollDirective.prototype.platformId;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ParallaxScrollModule = /** @class */ (function () {
function ParallaxScrollModule() {
}
ParallaxScrollModule.decorators = [
{ type: NgModule, args: [{
declarations: [
ParallaxScrollComponent,
ParallaxScrollDirective
],
imports: [
CommonModule,
],
exports: [
ParallaxScrollComponent,
ParallaxScrollDirective
]
},] }
];
return ParallaxScrollModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function IParallaxScrollConfig() { }
if (false) {
/** @type {?|undefined} */
IParallaxScrollConfig.prototype.axis;
/** @type {?|undefined} */
IParallaxScrollConfig.prototype.speed;
/** @type {?|undefined} */
IParallaxScrollConfig.prototype.initialValue;
/** @type {?|undefined} */
IParallaxScrollConfig.prototype.maxValue;
/** @type {?|undefined} */
IParallaxScrollConfig.prototype.minValue;
/** @type {?|undefined} */
IParallaxScrollConfig.prototype.cssUnit;
/** @type {?|undefined} */
IParallaxScrollConfig.prototype.scrollerId;
/** @type {?|undefined} */
IParallaxScrollConfig.prototype.parallaxElement;
/** @type {?|undefined} */
IParallaxScrollConfig.prototype.parallaxPivot;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { ParallaxScrollComponent, ParallaxScrollModule, ParallaxScrollDirective as ɵa };
//# sourceMappingURL=ng2-parallaxscroll.js.map