ng2-parallaxscroll
Version:
A parallax directive for Angular 2+, now with Universal support!
312 lines (304 loc) • 11.4 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ng2-parallaxscroll', ['exports', '@angular/core', '@angular/common'], factory) :
(global = global || self, factory(global['ng2-parallaxscroll'] = {}, global.ng.core, global.ng.common));
}(this, function (exports, core, common) { 'use strict';
/**
* @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: core.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: core.Input }],
img: [{ type: core.Input, args: ['img',] }],
paraClass: [{ type: core.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 = common.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: core.Directive, args: [{
// tslint:disable-next-line:directive-selector
selector: '[parallax]'
},] }
];
/** @nocollapse */
ParallaxScrollDirective.ctorParameters = function () { return [
{ type: core.ElementRef },
{ type: Object, decorators: [{ type: core.Inject, args: [core.PLATFORM_ID,] }] }
]; };
ParallaxScrollDirective.propDecorators = {
config: [{ type: core.Input }],
axis: [{ type: core.Input }],
speed: [{ type: core.Input }],
initialValue: [{ type: core.Input }],
maxValue: [{ type: core.Input }],
minValue: [{ type: core.Input }],
cssUnit: [{ type: core.Input }],
scrollerId: [{ type: core.Input }],
parallaxElement: [{ type: core.Input }],
parallaxPivot: [{ type: core.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: core.NgModule, args: [{
declarations: [
ParallaxScrollComponent,
ParallaxScrollDirective
],
imports: [
common.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;
}
exports.ParallaxScrollComponent = ParallaxScrollComponent;
exports.ParallaxScrollModule = ParallaxScrollModule;
exports.ɵa = ParallaxScrollDirective;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng2-parallaxscroll.umd.js.map