ngx-scrollreveal
Version:
Angular directives for ScrollReveal : a JavaScript library for easily animating elements as they enter/leave the viewport.
426 lines (413 loc) • 14.4 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.
*/
class NgsRevealConfig {
constructor() {
/**
* `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" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Service to interact with the window object.
*/
class WindowService {
/**
* @return {?}
*/
get nativeWindow() {
return _window();
}
}
WindowService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root',
},] },
];
/** @nocollapse */ WindowService.ngInjectableDef = defineInjectable({ factory: function WindowService_Factory() { return new WindowService(); }, token: WindowService, providedIn: "root" });
/**
* @return {?}
*/
function _window() {
// Return the global native browser window object
return typeof window !== 'undefined' ? window : undefined;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* 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.
*/
class NgsRevealService {
/**
* @param {?} config
* @param {?} windowService
*/
constructor(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
* @return {?}
*/
init(config) {
if (this.window) {
// universal support
this.config = config;
// Set callbacks hooks:
this.config.beforeReveal = (el) => this.beforeRevealSource.next(el);
this.config.afterReveal = (el) => this.afterRevealSource.next(el);
this.config.beforeReset = (el) => this.beforeResetSource.next(el);
this.config.afterReset = (el) => this.afterResetSource.next(el);
// init the scrollReveal library with injected config
this.sr = ScrollReveal(config);
}
}
/**
* Gets the current configuration used by ScrollReveal.
* @return {?}
*/
getConfig() {
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
* @return {?}
*/
reveal(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
* @return {?}
*/
revealSet(parentElementRef, selector, interval, config) {
if (this.window && parentElementRef.nativeElement) {
const /** @type {?} */ options = Object.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) .
* @return {?}
*/
sync() {
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.
* @return {?}
*/
destroy() {
if (this.window) {
this.sr.destroy();
}
}
}
NgsRevealService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root',
},] },
];
/** @nocollapse */
NgsRevealService.ctorParameters = () => [
{ type: NgsRevealConfig, },
{ type: WindowService, },
];
/** @nocollapse */ NgsRevealService.ngInjectableDef = defineInjectable({ factory: function NgsRevealService_Factory() { return new NgsRevealService(inject(NgsRevealConfig), inject(WindowService)); }, token: NgsRevealService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Base directive class shared by the concrete ScrollReveal directives.
* @abstract
*/
class AbstractNgsRevealDirective {
/**
* @param {?} ngsRevealService
*/
constructor(ngsRevealService) {
this.ngsRevealService = ngsRevealService;
}
/**
* @param {?} value
* @return {?}
*/
_initConfig(value) {
if (value && typeof value === 'string') {
this.config = JSON.parse(value);
}
else if (value && typeof value === 'object') {
this.config = value;
}
}
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* Directive to add 'ScrollReveal' functionality to a <b>single DOM element</b> in the page.
*/
class NgsRevealDirective extends AbstractNgsRevealDirective {
/**
* @param {?} elementRef
* @param {?} ngsRevealService
*/
constructor(elementRef, ngsRevealService) {
super(ngsRevealService);
this.elementRef = elementRef;
this.visibility = 'hidden';
}
/**
* Custom configuration to use when revealing this element
* @param {?} value
* @return {?}
*/
set _config(value) {
this._initConfig(value);
}
/**
* @return {?}
*/
ngOnInit() {
this.ngsRevealService.reveal(this.elementRef, this.config);
}
}
NgsRevealDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngsReveal]'
},] },
];
/** @nocollapse */
NgsRevealDirective.ctorParameters = () => [
{ type: ElementRef, },
{ type: NgsRevealService, },
];
NgsRevealDirective.propDecorators = {
"visibility": [{ type: HostBinding, args: ['style.visibility',] },],
"_config": [{ type: Input, args: ['ngsReveal',] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
/**
* 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.
*
*/
class NgsRevealSetDirective extends AbstractNgsRevealDirective {
/**
* @param {?} elementRef
* @param {?} ngsRevealService
*/
constructor(elementRef, ngsRevealService) {
super(ngsRevealService);
this.elementRef = elementRef;
}
/**
* Custom configuration to use when revealing this set of elements
* @param {?} value
* @return {?}
*/
set _config(value) {
this._initConfig(value);
}
/**
* @return {?}
*/
ngOnInit() {
if (!this.ngsSelector && console) {
const /** @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 {?}
*/
ngOnChanges(changes) {
const /** @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 = () => [
{ type: ElementRef, },
{ type: NgsRevealService, },
];
NgsRevealSetDirective.propDecorators = {
"_config": [{ type: Input, args: ['ngsRevealSet',] },],
"ngsSelector": [{ type: Input },],
"ngsInterval": [{ type: Input },],
"ngsSync": [{ type: Input },],
};
/**
* @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
*/
class NgsRevealModule {
}
NgsRevealModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule
],
exports: [NgsRevealDirective, NgsRevealSetDirective],
declarations: [NgsRevealDirective, NgsRevealSetDirective]
},] },
];
/**
* @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.js.map