188 lines
8.7 KiB
JavaScript
188 lines
8.7 KiB
JavaScript
import { coerceElement, coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
|
|
import * as i0 from '@angular/core';
|
|
import { Injectable, EventEmitter, Directive, Output, Input, NgModule } from '@angular/core';
|
|
import { Observable, Subject } from 'rxjs';
|
|
import { debounceTime } from 'rxjs/operators';
|
|
|
|
/**
|
|
* Factory that creates a new MutationObserver and allows us to stub it out in unit tests.
|
|
* @docs-private
|
|
*/
|
|
class MutationObserverFactory {
|
|
create(callback) {
|
|
return typeof MutationObserver === 'undefined' ? null : new MutationObserver(callback);
|
|
}
|
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MutationObserverFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MutationObserverFactory, providedIn: 'root' }); }
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: MutationObserverFactory, decorators: [{
|
|
type: Injectable,
|
|
args: [{ providedIn: 'root' }]
|
|
}] });
|
|
/** An injectable service that allows watching elements for changes to their content. */
|
|
class ContentObserver {
|
|
constructor(_mutationObserverFactory) {
|
|
this._mutationObserverFactory = _mutationObserverFactory;
|
|
/** Keeps track of the existing MutationObservers so they can be reused. */
|
|
this._observedElements = new Map();
|
|
}
|
|
ngOnDestroy() {
|
|
this._observedElements.forEach((_, element) => this._cleanupObserver(element));
|
|
}
|
|
observe(elementOrRef) {
|
|
const element = coerceElement(elementOrRef);
|
|
return new Observable((observer) => {
|
|
const stream = this._observeElement(element);
|
|
const subscription = stream.subscribe(observer);
|
|
return () => {
|
|
subscription.unsubscribe();
|
|
this._unobserveElement(element);
|
|
};
|
|
});
|
|
}
|
|
/**
|
|
* Observes the given element by using the existing MutationObserver if available, or creating a
|
|
* new one if not.
|
|
*/
|
|
_observeElement(element) {
|
|
if (!this._observedElements.has(element)) {
|
|
const stream = new Subject();
|
|
const observer = this._mutationObserverFactory.create(mutations => stream.next(mutations));
|
|
if (observer) {
|
|
observer.observe(element, {
|
|
characterData: true,
|
|
childList: true,
|
|
subtree: true,
|
|
});
|
|
}
|
|
this._observedElements.set(element, { observer, stream, count: 1 });
|
|
}
|
|
else {
|
|
this._observedElements.get(element).count++;
|
|
}
|
|
return this._observedElements.get(element).stream;
|
|
}
|
|
/**
|
|
* Un-observes the given element and cleans up the underlying MutationObserver if nobody else is
|
|
* observing this element.
|
|
*/
|
|
_unobserveElement(element) {
|
|
if (this._observedElements.has(element)) {
|
|
this._observedElements.get(element).count--;
|
|
if (!this._observedElements.get(element).count) {
|
|
this._cleanupObserver(element);
|
|
}
|
|
}
|
|
}
|
|
/** Clean up the underlying MutationObserver for the specified element. */
|
|
_cleanupObserver(element) {
|
|
if (this._observedElements.has(element)) {
|
|
const { observer, stream } = this._observedElements.get(element);
|
|
if (observer) {
|
|
observer.disconnect();
|
|
}
|
|
stream.complete();
|
|
this._observedElements.delete(element);
|
|
}
|
|
}
|
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ContentObserver, deps: [{ token: MutationObserverFactory }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ContentObserver, providedIn: 'root' }); }
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ContentObserver, decorators: [{
|
|
type: Injectable,
|
|
args: [{ providedIn: 'root' }]
|
|
}], ctorParameters: function () { return [{ type: MutationObserverFactory }]; } });
|
|
/**
|
|
* Directive that triggers a callback whenever the content of
|
|
* its associated element has changed.
|
|
*/
|
|
class CdkObserveContent {
|
|
/**
|
|
* Whether observing content is disabled. This option can be used
|
|
* to disconnect the underlying MutationObserver until it is needed.
|
|
*/
|
|
get disabled() {
|
|
return this._disabled;
|
|
}
|
|
set disabled(value) {
|
|
this._disabled = coerceBooleanProperty(value);
|
|
this._disabled ? this._unsubscribe() : this._subscribe();
|
|
}
|
|
/** Debounce interval for emitting the changes. */
|
|
get debounce() {
|
|
return this._debounce;
|
|
}
|
|
set debounce(value) {
|
|
this._debounce = coerceNumberProperty(value);
|
|
this._subscribe();
|
|
}
|
|
constructor(_contentObserver, _elementRef, _ngZone) {
|
|
this._contentObserver = _contentObserver;
|
|
this._elementRef = _elementRef;
|
|
this._ngZone = _ngZone;
|
|
/** Event emitted for each change in the element's content. */
|
|
this.event = new EventEmitter();
|
|
this._disabled = false;
|
|
this._currentSubscription = null;
|
|
}
|
|
ngAfterContentInit() {
|
|
if (!this._currentSubscription && !this.disabled) {
|
|
this._subscribe();
|
|
}
|
|
}
|
|
ngOnDestroy() {
|
|
this._unsubscribe();
|
|
}
|
|
_subscribe() {
|
|
this._unsubscribe();
|
|
const stream = this._contentObserver.observe(this._elementRef);
|
|
// TODO(mmalerba): We shouldn't be emitting on this @Output() outside the zone.
|
|
// Consider brining it back inside the zone next time we're making breaking changes.
|
|
// Bringing it back inside can cause things like infinite change detection loops and changed
|
|
// after checked errors if people's code isn't handling it properly.
|
|
this._ngZone.runOutsideAngular(() => {
|
|
this._currentSubscription = (this.debounce ? stream.pipe(debounceTime(this.debounce)) : stream).subscribe(this.event);
|
|
});
|
|
}
|
|
_unsubscribe() {
|
|
this._currentSubscription?.unsubscribe();
|
|
}
|
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkObserveContent, deps: [{ token: ContentObserver }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.1", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: { disabled: ["cdkObserveContentDisabled", "disabled"], debounce: "debounce" }, outputs: { event: "cdkObserveContent" }, exportAs: ["cdkObserveContent"], ngImport: i0 }); }
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: CdkObserveContent, decorators: [{
|
|
type: Directive,
|
|
args: [{
|
|
selector: '[cdkObserveContent]',
|
|
exportAs: 'cdkObserveContent',
|
|
}]
|
|
}], ctorParameters: function () { return [{ type: ContentObserver }, { type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { event: [{
|
|
type: Output,
|
|
args: ['cdkObserveContent']
|
|
}], disabled: [{
|
|
type: Input,
|
|
args: ['cdkObserveContentDisabled']
|
|
}], debounce: [{
|
|
type: Input
|
|
}] } });
|
|
class ObserversModule {
|
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ObserversModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.1", ngImport: i0, type: ObserversModule, declarations: [CdkObserveContent], exports: [CdkObserveContent] }); }
|
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ObserversModule, providers: [MutationObserverFactory] }); }
|
|
}
|
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.1", ngImport: i0, type: ObserversModule, decorators: [{
|
|
type: NgModule,
|
|
args: [{
|
|
exports: [CdkObserveContent],
|
|
declarations: [CdkObserveContent],
|
|
providers: [MutationObserverFactory],
|
|
}]
|
|
}] });
|
|
|
|
/**
|
|
* Generated bundle index. Do not edit.
|
|
*/
|
|
|
|
export { CdkObserveContent, ContentObserver, MutationObserverFactory, ObserversModule };
|
|
//# sourceMappingURL=observers.mjs.map
|