rxjs#fromEvent TypeScript Examples

ngAfterViewInit() {
    this.searchSubscription = fromEvent(this.searchInput.nativeElement, 'keyup')
      .pipe(
        map((event: InputEvent) => (event.target as HTMLInputElement).value),
        debounceTime(500),
        distinctUntilChanged()
      )
      .subscribe((search) => {
        this.searchTerm = search;
        this.pageOffset = 0;
        this.fetchLHLeaderboard();
      });
  }

export function HintBox(
  this: ThemedComponentThis<CodedocTheme>,
  _: any, 
  renderer: any
) {
  const classes = this.theme.classes(HintBoxStyle);
  const target$ = this.expose.in('target', new Subject<HTMLElement | undefined>());
  const active$ = target$.pipe(map(el => !!el));
  const top$ = combineLatest(
      target$
        .pipe(
          map(el => el ? el.getBoundingClientRect().top : undefined)
        ), 
      fromEvent(document, 'mousemove')
        .pipe(
          map(e => (e as MouseEvent).clientY)
        )
    ).pipe(
      map(([top, mouseY]) => (top || mouseY) + 24)
    );
  const left$ = fromEvent(document, 'mousemove').pipe(map(e => (e as MouseEvent).clientX + 24));

  return <div 
      class={rl`${classes.hintbox} ${toggleList({'active': active$.pipe(startWith(false))})}`}
      style={rl`top: ${top$}px;left: ${left$}px`}
    >
    <span class="icon-font outline">wb_incandescent</span>
    {target$.pipe(filter(el => !!el), map(el => el?.getAttribute('data-hint')))}
  </div>;
}

/**
   * Scrolls page to query params anchor.
   */
  private scrollToAnchorItem(): void {
    setTimeout(() => {
      if (this.anchor) {
        const answerElement = this.element.nativeElement.querySelector(`#${this.anchor}`);

        if (!answerElement) {
          return;
        }

        answerElement.scrollIntoView({ behavior: 'smooth' });
        fromEvent(document, 'scroll').pipe(debounceTime(50), takeUntil(this.destroy$)).subscribe();
      }
    }, 200);
  }

ngAfterViewInit(): void {
    if (!this.theme && this.themeService && this.themeService.eventBus) {
      this.themeService.eventBus.add('themeChanged', this.themeChange);
    }
    this.initTheme();
    this.echart = (<any>echarts).init(this.elementRef.nativeElement, this.theme);
    this.updateChartData(this.options);
    this.chartReady.emit(this.echart);
    // 根据浏览器大小变化自动调整echarts
    if (this.autoResize) {
      this.resizeSub = fromEvent(window, 'resize')
        .pipe(debounceTime(100))
        .subscribe(() => {
          this.echart.resize();
        });
    }
  }

/**
 * Watch all files matching the given pattern
 *
 * @param pattern - Pattern
 * @param options - Options
 *
 * @returns File observable
 */
export function watch(
  pattern: string, options: WatchOptions
): Observable<string> {
  return fromEvent(
    chokidar.watch(pattern, options),
    "change"
  ) as Observable<string>
}

constructor(
    private el: ElementRef,
    private file: File,
    private renderer: Renderer2,
    private platform: Platform,
    private webview: WebView) {
    this.tag = this.el;
    if (!window['IonMediaCache']) {
      window['IonMediaCache'] = {};
    }
    if (this.isMobile) {
      fromEvent(document, 'deviceready').pipe(first()).subscribe(res => {
        this.initCache();
      });
    } else {
      this.initCache();
    }
  }

ngAfterViewInit(): void {
    if (!this.searchInput) {
      return;
    }

    fromEvent(this.searchInput.nativeElement, 'input')
      .pipe(
        map((event: any) => event.target.value),
        filter(res => res.length > 2 || res.length === 0),
        debounceTime(500),
        distinctUntilChanged(),
        untilDestroyed(this),
      )
      .subscribe((text: string) => {
        this.bomGlobalFilterMessageService.send(text);
      });
  }

constructor(
    @Inject(WINDOW) private readonly window: Window,
    @Inject(MERMAID) private readonly mermaid: Mermaid,
    private readonly alert: AlertService) {

    this.initializeMermaid();
    const azEvent$ = fromEvent<Event>(this.window, 'message').pipe(
      tap(event => {
        if (event.data.status === Status.Error) {
          this.alert.showError({
            status: event.data.status,
            errors: event.data.errors,
            rawData: JSON.stringify(event.data.rawData)
          });
        }
      })
    );

    this.status$ = concat(azEvent$.pipe(
      map(e => e.data?.status),

    ));

    this.database$ = azEvent$.pipe(
      filter(event => event.data?.status === Status.Complete),
      map(event => event.data?.chart),
      switchMap(r => this.buildSvg(r))
    );



    this.databaseName$ = azEvent$.pipe(
      filter(event => event.data?.status === Status.Complete),
      map(event => event.data?.databaseName));
  }

constructor(iframe: HTMLIFrameElement) {
    // Listen for requests from embedded web content of the outlet.
    this._microfrontendRequest$ = fromEvent<MessageEvent>(window, 'message')
      .pipe(
        filter(event => event.source === iframe.contentWindow),
        filterByTransport(MessagingTransport.MicrofrontendToOutlet),
        filterByChannel<TopicMessage>(MessagingChannel.Topic),
        share(),
      );
  }

public ngAfterViewInit(): void {
    this._sessionService.myAddonsCompactVersion = !this.getLatestVersionColumnVisible();

    if (this.addonFilter?.nativeElement !== undefined) {
      const addonFilterSub = fromEvent(this.addonFilter.nativeElement as HasEventTargetAddRemove<unknown>, "keyup")
        .pipe(
          filter(Boolean),
          debounceTime(200),
          distinctUntilChanged(),
          tap(() => {
            const val: string = this.addonFilter.nativeElement.value.toString();
            console.debug(val);
            this._filterInputSrc.next(val);
          })
        )
        .subscribe();

      this._subscriptions.push(addonFilterSub);
    }

    this._sessionService.autoUpdateComplete$
      .pipe(
        tap(() => console.log("Checking for addon updates...")),
        switchMap(() => from(this.loadAddons()))
      )
      .subscribe(() => {
        this._cdRef.markForCheck();
      });
  }

adaptAnchorPosition(containerEl: HTMLElement, anchorEl: HTMLElement) {
    const pageContentEl = containerEl.closest('.aui-page__content');
    const anchorContentEl = anchorEl.querySelector('.aui-anchor');

    merge(observeResizeOn(containerEl), fromEvent(window, 'scroll'))
      .pipe(startWith(null as void), takeUntil(this.destroy$$))
      .subscribe(() => {
        const containerRect = containerEl.getBoundingClientRect();
        Object.assign(anchorEl.style, {
          display: !containerRect.width || !containerRect.height ? 'none' : '',
          left:
            containerRect.right -
            anchorContentEl.getBoundingClientRect().width +
            'px',
          top:
            Math.max(
              containerRect.top,
              (this.minTop ??
                (pageContentEl &&
                  +getComputedStyle(pageContentEl).paddingTop.slice(0, -2))) ||
                0,
            ) + 'px',
        });
      });

    if (this.adaptPosition) {
      observeResizeOn(anchorContentEl)
        .pipe(takeUntil(this.destroy$$))
        .subscribe(el => {
          const width = el.getBoundingClientRect().width;
          const padding = width + this.padding;
          containerEl.style.paddingRight = padding + 'px';
        });
    }
  }

function fromResizeEvent(element: HTMLElement | Window): Observable<Event | ResizeObserverEntry[]> {
  if (isWindow(element)) {
    return fromEvent<Event>(element, 'resize', { passive: true })
  }

  return new Observable((subscriber) => {
    const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
      subscriber.next(entries)
    })
    resizeObserver.observe(element as HTMLElement)

    return () => {
      resizeObserver.disconnect()
    }
  })
}

ngAfterViewInit() {
    this.keyupSubscription = fromEvent(this.filter.nativeElement, "keyup")
      .pipe(
        debounceTime(1000),
        map((event: Event) => (<HTMLInputElement>event.target).value),
        distinctUntilChanged(),
        tap(() => (this.isLoading = true)),
        switchMap((value) =>
          this.expensesService.filterExpenses(this.period, value)
        )
      )
      .subscribe((data) => {
        this.isLoading = false;
        this.dataSource.data = data;
      });
  }

private _listenForScrollEvents(): void {
        this._setScrollEl();
        this._resizeOnModeChange();
        this._stopListeningForScrollEvents();
        this.viewInit = true;
        if (this.scrollEl) {
            this.scrollListener = fromEvent(this.scrollEl, 'scroll')
                .pipe(throttle(() => interval(10)))
                .subscribe(() => {
                    this._resizeEl();
                });

            this.resizeListener = fromEvent(window, 'resize')
                .pipe(throttle(() => interval(10)))
                .subscribe(() => {
                    this._resizeEl();
                });
        }
    }

ngAfterViewInit() {
        // search input listener
        fromEvent(this.search.nativeElement, 'keyup').pipe(
            filter(Boolean),
            debounceTime(250),
            distinctUntilChanged(),
            tap(_ => { this.parseNotes(); })
        ).subscribe();
    }

ngAfterViewInit(): void {
    this.filteredCurrencies$ = fromEvent(this.searchBarRef.nativeElement, 'keyup').pipe(
      map((event: any) => event.srcElement.value),
      startWith(''),
      distinctUntilChanged(),
      switchMap((searchText) =>
        this.currencies$.pipe(
          map((currencies) =>
            currencies.filter(
              (currency) =>
                currency.shortCode.toLowerCase().includes(searchText.toLowerCase()) ||
                currency.longName.toLowerCase().includes(searchText.toLowerCase())
            )
          )
        )
      )
    );
  }

ngAfterViewInit() {
    this.scrollSub = fromEvent(this.scrollableParent, 'scroll', {
      passive: true,
    })
      .pipe(
        throttleTime(0, animationFrameScheduler, {
          leading: true,
          trailing: true,
        })
      )
      .subscribe(this.updateSize.bind(this))
  }

copy: Epic = (action$, { store }) => {
	return fromEvent<ClipboardEvent>(window, 'copy').pipe(
		filter(() => store.editor.selection.size > 0),
		tap(() => {
			store.editor.copy();
		}),
		ignoreElements(),
	);
}

private subscribeToWindowResizeEvent() {
        const resizeObservable$ = fromEvent(window, 'resize');
        this.windowResizeSubscription$ = resizeObservable$
            .pipe(
                debounce(() => interval(10))
            )
            .subscribe(
                () => {
                    this.setBackdropElStyles();
                    ScrollingUtil.ensureVisible(this.targetHtmlElement);
                }
            );
    }

constructor() {
    fromEvent(window, 'beforeinstallprompt').subscribe(($event) => {
      $event.preventDefault();
      this.installPrompt = $event;
      this.platforms = this.installPrompt.platforms || [];
      this.prompts = [];
      for (const platform of this.platforms) {
        this.prompts.push(() => this.installPrompt.prompt());
      }
    });
  }

ngAfterViewInit(): void {
    this.lazyServiceService.adHost = this.adHost;
    this.zone.runOutsideAngular(() => {
      fromEvent(window, 'scroll', <AddEventListenerOptions>passiveEventListenerOptions).pipe(
        debounceTime(50),
        filter(() => {
          return window.scrollY >= 200;
        }),
        take(1),
        takeUntil(this.destroyService$)
      ).subscribe(() => {
        this.lazyServiceService.create().then(()=>{
          this.cdr.detectChanges();
        })
      })
    })
  }

proxyOutputs = (instance: any, el: any, events: string[]) => {
  events.forEach(eventName => instance[eventName] = fromEvent(el, eventName));
}

protected registerResize(): this {
    this.cleanResize();
    this._resize$ = fromEvent(window, 'resize')
      .pipe(debounceTime(100))
      .subscribe(() => {
        this._editor!.layout();
        this.notifyEvent('resize');
      });
    return this;
  }

PAGE_VISIBILITY = new InjectionToken<Observable<boolean>>(
    'Shared Observable based on `document visibility changed`',
    {
        factory: () => {
            const documentRef = inject(DOCUMENT);

            return fromEvent(documentRef, 'visibilitychange').pipe(
                startWith(0),
                map(() => documentRef.visibilityState !== 'hidden'),
                distinctUntilChanged(),
                share(),
            );
        },
    },
)

private handleViewMode(): void {
    this.viewHandler = fromEvent(this.element, this.openBindingEvent)
      .pipe(
        filter(() => this.enabled),
        withLatestFrom(this.editMode$),
        filter(([_, editMode]) => !editMode),
        takeUntil(this.destroy$)
      )
      .subscribe(() => this.displayEditMode());
  }

ngAfterViewInit() {
    this.ionContent.getScrollElement().then((element: HTMLElement) => {
      this.contentElement = element;
      this.contentClientHeight = element.clientHeight;
    });

    const drawerContainerElement = this.drawerContainer.nativeElement;

    fromEvent(drawerContainerElement, 'transitionend').pipe(
      takeUntil(this.destroyer),
      filter(({ target, propertyName }: TransitionEvent) => (
        target === drawerContainerElement && propertyName === 'height'
      ))
    ).subscribe(({ target }: TransitionEvent) => {
      const { clientHeight } = target as HTMLElement;

      // 如果抽屉打开了
      if (clientHeight > 0) {
        this.drawerClientHeight = clientHeight;
        this.ionContent.scrollByPoint(0, clientHeight, 50);
      } else {
        const { scrollHeight, scrollTop, clientHeight } = this.contentElement;
        // scrollHeight - scrollTop - clientHeight 得到距离底部的高度
        const canScroll = scrollHeight - scrollTop - clientHeight > this.drawerClientHeight;

        canScroll && this.ionContent.scrollByPoint(0, -this.drawerClientHeight, 50);
      }
    });
  }

constructor(@Inject(DOCUMENT) public document: Document) {
    this.windowWidth$ = fromEvent(window, 'resize').pipe(
      map(() => {
        const documentElement = document.documentElement;
        const bodyElement =
          document.body || document.getElementsByTagName('body')[0];
        return (
          window.innerWidth ||
          documentElement.clientWidth ||
          bodyElement.clientWidth
        );
      })
    );

    this.scroll$ = fromEvent(window, 'scroll').pipe(
      map(() => window.scrollY || this.document.documentElement.scrollTop)
    );
  }

ngOnInit() {
    this.resizeSub = fromEvent(window, 'resize').pipe(debounceTime(50)).subscribe(() => {
      if ((this.autoResize && window.innerWidth !== this.currentWindowWidth) || this.forceResize) {
        this.currentWindowWidth = window.innerWidth
        this.currentOffsetWidth = this.el.nativeElement.offsetWidth
        this.currentOffsetHeight = this.el.nativeElement.offsetHeight
        this.resize()
      }
    })
  }

/**
 * Subscribe to the returned observable to acquire a [wake lock]{@link https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API}. The wake lock will be re-acquired whenever the page is visible automatically. Unsubscribe to release it.
 *
 * There are no guarantees about what or when the returned observable emits.
 */
export function keepWakeLock$(): Observable<unknown> {
  let sentinel: WakeLockSentinel | undefined;
  const nav = navigator as ExtendedNavigator;
  return fromEvent(document, 'visibilitychange').pipe(
    startWith(0),
    filter(() => document.visibilityState === 'visible'),
    switchMap(async () => {
      try {
        sentinel = await nav.wakeLock?.request('screen');
      } catch {
        // can happen when e.g. the battery is low
      }
    }),
    finalize(() => {
      sentinel?.release();
    }),
  );
}