ngx-scrollreveal
Version:
Angular directives for ScrollReveal : a JavaScript library for easily animating elements as they enter/leave the viewport.
529 lines (516 loc) • 20.2 kB
JavaScript
import { Injectable, NgModule, Directive, HostBinding, ElementRef, Input, defineInjectable, inject } from '@angular/core';
import { Subject } from 'rxjs';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Configuration service for the NgsScrollReveal directives.
* You can inject this service, typically in your root component, and customize the values of its properties in
* order to provide default values for all the ngsReveal directives used in the application.
*/
var NgsRevealConfig = /** @class */ (function () {
function NgsRevealConfig() {
/**
* `options.delay` is the time before reveal animations begin.
* By default, delay will be used for all reveal animations,
* but `options.useDelay` can be used to change when delay is applied.
* However, animations triggered by `options.reset` will never use delay.
*/
this.delay = 0;
/**
* `options.distance` controls how far elements move when revealed.
*/
this.distance = '0px';
/**
* `options.duration` controls how long animations take to complete.
*/
this.duration = 600;
/**
* `options.easing` controls how animations transition between their start and end values.
* Accepts any valid CSS easing, e.g. 'ease', 'ease-in-out', 'linear', etc.
*/
this.easing = 'cubic-bezier(0.5, 0, 0, 1)';
/**
* `options.interval` is the time between each reveal.
*/
this.interval = 0;
/**
* `options.opacity` specifies the opacity they have prior to being revealed.<br/>
*/
this.opacity = 0;
/**
* `options.origin` specifies what direction elements come from when revealed.
*/
this.origin = 'bottom';
/**
* `options.rotate` specifies the rotation elements have prior to being revealed.
*/
this.rotate = { x: 0, y: 0, z: 0 };
/**
* `options.scale` specifies the size of elements have prior to being revealed.
*/
this.scale = 0.9;
/**
* When non-resetting reveal animations complete, `ScrollReveal` will remove that elements event listeners,
* generated styles and metadata. In some cases (such as asynchronous sequences), you may not want this behavior.
*/
this.cleanup = false;
/**
* `options.desktop` enables/disables animations on desktop browsers.
*/
this.desktop = true;
/**
* `options.mobile` enables/disables animations on mobile browsers.
*/
this.mobile = true;
/**
* `options.reset` enables/disables elements returning to their initialized position when they leave the viewport.
* When true elements reveal each time they enter the viewport instead of once.
*/
this.reset = false;
/**
* `options.useDelay` specifies when values assigned to options.delay are used.
*
* - 'always' — delay for all reveal animations
* - 'once' — delay only the first time reveals occur
* - 'onload' - delay only for animations triggered by first load
*/
this.useDelay = 'always';
/**
* `options.viewFactor` specifies what portion of an element must be within the viewport for it to be considered visible.
*/
this.viewFactor = 0.2;
/**
* `options.viewOffset` expands/contracts the active boundaries of the viewport when calculating element visibility.
*
* Visual Aid: https://scrollrevealjs.org/assets/viewoffset.png
*/
this.viewOffset = { top: 0, right: 0, bottom: 0, left: 0 };
}
NgsRevealConfig.decorators = [
{ type: Injectable, args: [{
providedIn: 'root',
},] },
];
/** @nocollapse */ NgsRevealConfig.ngInjectableDef = defineInjectable({ factory: function NgsRevealConfig_Factory() { return new NgsRevealConfig(); }, token: NgsRevealConfig, providedIn: "root" });
return NgsRevealConfig;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Service to interact with the window object.
*/
var WindowService = /** @class */ (function () {
function WindowService() {
}
Object.defineProperty(WindowService.prototype, "nativeWindow", {
get: /**
* @return {?}
*/
function () {
return _window();
},
enumerable: true,
configurable: true
});
WindowService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root',
},] },
];
/** @nocollapse */ WindowService.ngInjectableDef = defineInjectable({ factory: function WindowService_Factory() { return new WindowService(); }, token: WindowService, providedIn: "root" });
return WindowService;
}());
/**
* @return {?}
*/
function _window() {
// Return the global native browser window object
return typeof window !== 'undefined' ? window : undefined;
}
var __assign = (undefined && undefined.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
/**
* Service to inject in directives to use ScrollReveal JS.
* It delegates the work to SR, when DOM manipulation is possible (i.e app is not running in a web worker for e.g).
* If not possible, most methods simply do nothing, as DOM elements are not available anyway.
*/
var NgsRevealService = /** @class */ (function () {
function NgsRevealService(config, windowService) {
// Observable sources
this.beforeRevealSource = new Subject();
this.afterRevealSource = new Subject();
this.beforeResetSource = new Subject();
this.afterResetSource = new Subject();
// Observable streams
this.beforeReveal$ = this.beforeRevealSource.asObservable();
this.afterReveal$ = this.afterRevealSource.asObservable();
this.beforeReset$ = this.beforeResetSource.asObservable();
this.afterReset$ = this.afterResetSource.asObservable();
this.window = windowService.nativeWindow;
this.init(config);
}
/**
* Initializes Cookie Consent with the provided configuration.
* @param config the configuration object
*/
/**
* Initializes Cookie Consent with the provided configuration.
* @param {?} config the configuration object
* @return {?}
*/
NgsRevealService.prototype.init = /**
* Initializes Cookie Consent with the provided configuration.
* @param {?} config the configuration object
* @return {?}
*/
function (config) {
var _this = this;
if (this.window) {
// universal support
this.config = config;
// Set callbacks hooks:
this.config.beforeReveal = function (el) { return _this.beforeRevealSource.next(el); };
this.config.afterReveal = function (el) { return _this.afterRevealSource.next(el); };
this.config.beforeReset = function (el) { return _this.beforeResetSource.next(el); };
this.config.afterReset = function (el) { return _this.afterResetSource.next(el); };
// init the scrollReveal library with injected config
this.sr = ScrollReveal(config);
}
};
/**
* Gets the current configuration used by ScrollReveal.
*/
/**
* Gets the current configuration used by ScrollReveal.
* @return {?}
*/
NgsRevealService.prototype.getConfig = /**
* Gets the current configuration used by ScrollReveal.
* @return {?}
*/
function () {
return this.config;
};
/**
* Method to reveal a single DOM element.
* @param elementRef a reference to the element to reveal
* @param config (optional) custom configuration to use when revealing this element
*/
/**
* Method to reveal a single DOM element.
* @param {?} elementRef a reference to the element to reveal
* @param {?=} config (optional) custom configuration to use when revealing this element
* @return {?}
*/
NgsRevealService.prototype.reveal = /**
* Method to reveal a single DOM element.
* @param {?} elementRef a reference to the element to reveal
* @param {?=} config (optional) custom configuration to use when revealing this element
* @return {?}
*/
function (elementRef, config) {
if (this.window && elementRef.nativeElement) {
this.sr.reveal(elementRef.nativeElement, config);
}
};
/**
* Method to reveal a set of DOM elements.
* @param parentElementRef the parent DOM element encaspulating the child elements to reveal
* @param selector a list of CSS selectors (comma-separated) that identifies child elements to reveal
* @param interval (optional) interval in milliseconds, to animate child elemnts sequentially
* @param config (optional) custom configuration to use when revealing this set of elements
*/
/**
* Method to reveal a set of DOM elements.
* @param {?} parentElementRef the parent DOM element encaspulating the child elements to reveal
* @param {?} selector a list of CSS selectors (comma-separated) that identifies child elements to reveal
* @param {?=} interval (optional) interval in milliseconds, to animate child elemnts sequentially
* @param {?=} config (optional) custom configuration to use when revealing this set of elements
* @return {?}
*/
NgsRevealService.prototype.revealSet = /**
* Method to reveal a set of DOM elements.
* @param {?} parentElementRef the parent DOM element encaspulating the child elements to reveal
* @param {?} selector a list of CSS selectors (comma-separated) that identifies child elements to reveal
* @param {?=} interval (optional) interval in milliseconds, to animate child elemnts sequentially
* @param {?=} config (optional) custom configuration to use when revealing this set of elements
* @return {?}
*/
function (parentElementRef, selector, interval, config) {
if (this.window && parentElementRef.nativeElement) {
var /** @type {?} */ options = __assign({}, config, { interval: interval });
this.sr.reveal(selector, options);
}
};
/**
* Method to synchronize and consider newly added child elements (for e.g when child elements were added asynchronously to parent DOM) .
*/
/**
* Method to synchronize and consider newly added child elements (for e.g when child elements were added asynchronously to parent DOM) .
* @return {?}
*/
NgsRevealService.prototype.sync = /**
* Method to synchronize and consider newly added child elements (for e.g when child elements were added asynchronously to parent DOM) .
* @return {?}
*/
function () {
if (this.window) {
// universal support
this.sr.sync();
}
};
/**
* Reverses the effects of all `reveal()` calls, removing all generated styles and event listeners, and clears the `ScrollReveal` store.
*/
/**
* Reverses the effects of all `reveal()` calls, removing all generated styles and event listeners, and clears the `ScrollReveal` store.
* @return {?}
*/
NgsRevealService.prototype.destroy = /**
* Reverses the effects of all `reveal()` calls, removing all generated styles and event listeners, and clears the `ScrollReveal` store.
* @return {?}
*/
function () {
if (this.window) {
this.sr.destroy();
}
};
NgsRevealService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root',
},] },
];
/** @nocollapse */
NgsRevealService.ctorParameters = function () { return [
{ type: NgsRevealConfig, },
{ type: WindowService, },
]; };
/** @nocollapse */ NgsRevealService.ngInjectableDef = defineInjectable({ factory: function NgsRevealService_Factory() { return new NgsRevealService(inject(NgsRevealConfig), inject(WindowService)); }, token: NgsRevealService, providedIn: "root" });
return NgsRevealService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Base directive class shared by the concrete ScrollReveal directives.
* @abstract
*/
var /**
* Base directive class shared by the concrete ScrollReveal directives.
* @abstract
*/
AbstractNgsRevealDirective = /** @class */ (function () {
function AbstractNgsRevealDirective(ngsRevealService) {
this.ngsRevealService = ngsRevealService;
}
/**
* @param {?} value
* @return {?}
*/
AbstractNgsRevealDirective.prototype._initConfig = /**
* @param {?} value
* @return {?}
*/
function (value) {
if (value && typeof value === 'string') {
this.config = JSON.parse(value);
}
else if (value && typeof value === 'object') {
this.config = value;
}
};
return AbstractNgsRevealDirective;
}());
var __extends = (undefined && undefined.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
/**
* Directive to add 'ScrollReveal' functionality to a <b>single DOM element</b> in the page.
*/
var NgsRevealDirective = /** @class */ (function (_super) {
__extends(NgsRevealDirective, _super);
function NgsRevealDirective(elementRef, ngsRevealService) {
var _this = _super.call(this, ngsRevealService) || this;
_this.elementRef = elementRef;
_this.visibility = 'hidden';
return _this;
}
Object.defineProperty(NgsRevealDirective.prototype, "_config", {
set: /**
* Custom configuration to use when revealing this element
* @param {?} value
* @return {?}
*/
function (value) {
this._initConfig(value);
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
NgsRevealDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.ngsRevealService.reveal(this.elementRef, this.config);
};
NgsRevealDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngsReveal]'
},] },
];
/** @nocollapse */
NgsRevealDirective.ctorParameters = function () { return [
{ type: ElementRef, },
{ type: NgsRevealService, },
]; };
NgsRevealDirective.propDecorators = {
"visibility": [{ type: HostBinding, args: ['style.visibility',] },],
"_config": [{ type: Input, args: ['ngsReveal',] },],
};
return NgsRevealDirective;
}(AbstractNgsRevealDirective));
var __extends$1 = (undefined && undefined.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
/**
* Directive to add 'ScrollReveal' functionality to a <b>set of DOM elements</b> (identify via the `[ngsSelector]` attribute) in the page.
* This directive is meant to be placed on the <b>parent node</b> that contains the child elements to reveal.
* You can optionally add the `[ngsInterval]` attribute to reveal items sequentially, following the given interval(in milliseconds).
* You can optionally add the `[ngsSync]` attribute to reveal new child elements that may have been added in the parent node asynchronously.
*
*/
var NgsRevealSetDirective = /** @class */ (function (_super) {
__extends$1(NgsRevealSetDirective, _super);
function NgsRevealSetDirective(elementRef, ngsRevealService) {
var _this = _super.call(this, ngsRevealService) || this;
_this.elementRef = elementRef;
return _this;
}
Object.defineProperty(NgsRevealSetDirective.prototype, "_config", {
set: /**
* Custom configuration to use when revealing this set of elements
* @param {?} value
* @return {?}
*/
function (value) {
this._initConfig(value);
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
NgsRevealSetDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (!this.ngsSelector && console) {
var /** @type {?} */ item = this.elementRef.nativeElement ? this.elementRef.nativeElement.className : '';
console.error("[ngx-scrollreveal] You must set \"[ngsSelector]\" attribute on item '" + item + "' when using \"ngsRevealSet\"");
return;
}
this.ngsRevealService.revealSet(this.elementRef, this.ngsSelector, this.ngsInterval, this.config);
};
/**
* @param {?} changes
* @return {?}
*/
NgsRevealSetDirective.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
var /** @type {?} */ ngsSyncProp = 'ngsSync';
if (ngsSyncProp in changes
&& !changes[ngsSyncProp].isFirstChange()
&& !changes[ngsSyncProp].currentValue()) {
this.ngsRevealService.sync();
}
};
NgsRevealSetDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngsRevealSet]'
},] },
];
/** @nocollapse */
NgsRevealSetDirective.ctorParameters = function () { return [
{ type: ElementRef, },
{ type: NgsRevealService, },
]; };
NgsRevealSetDirective.propDecorators = {
"_config": [{ type: Input, args: ['ngsRevealSet',] },],
"ngsSelector": [{ type: Input },],
"ngsInterval": [{ type: Input },],
"ngsSync": [{ type: Input },],
};
return NgsRevealSetDirective;
}(AbstractNgsRevealDirective));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Main module of the library
*/
var NgsRevealModule = /** @class */ (function () {
function NgsRevealModule() {
}
NgsRevealModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
exports: [NgsRevealDirective, NgsRevealSetDirective],
declarations: [NgsRevealDirective, NgsRevealSetDirective]
},] },
];
return NgsRevealModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
export { WindowService, NgsRevealService, NgsRevealConfig, NgsRevealDirective, NgsRevealSetDirective, NgsRevealModule, AbstractNgsRevealDirective as ɵa };
//# sourceMappingURL=ngx-scrollreveal.es5.js.map