ng2-parallaxscroll
Version:
A parallax directive for Angular 2+, now with Universal support!
313 lines (305 loc) • 9.3 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
*/
class ParallaxScrollComponent {
/**
* @return {?}
*/
ngOnInit() {
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: `
<div parallax [config]="config"
[ngStyle]="parallaxStyles"
[ngClass]="paraClass">
<ng-content></ng-content>
</div>
`,
styles: [`
:host {
display: block;
}
`]
}] }
];
ParallaxScrollComponent.propDecorators = {
config: [{ type: Input }],
img: [{ type: Input, args: ['img',] }],
paraClass: [{ type: Input, args: ['class',] }]
};
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
*/
class ParallaxScrollDirective {
/**
* @param {?} element
* @param {?} platformId
*/
constructor(element, platformId) {
this.platformId = platformId;
this.axis = 'Y';
this.speed = -.7;
this.initialValue = 0;
this.cssUnit = 'px';
this.parallaxPivot = '50%';
this.cssProperty = 'backgroundPosition';
this.onScroll = (/**
* @return {?}
*/
() => {
/** @type {?} */
let result;
/** @type {?} */
let 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 {?}
*/
ngOnInit() {
// Read config
for (const 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 = () => [
{ 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 }]
};
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
*/
class ParallaxScrollModule {
}
ParallaxScrollModule.decorators = [
{ type: NgModule, args: [{
declarations: [
ParallaxScrollComponent,
ParallaxScrollDirective
],
imports: [
CommonModule,
],
exports: [
ParallaxScrollComponent,
ParallaxScrollDirective
]
},] }
];
/**
* @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