Приостановить поток уведомлений при наведении курсора и возобновить при наведении курсора - PullRequest
Новая
       7

Приостановить поток уведомлений при наведении курсора и возобновить при наведении курсора

0 голосов
/ 25 февраля 2019

У меня есть этот поток, который показывает / скрывает уведомления: 

this.subscription = this.notificationsApi.notifications$.pipe(
  concatMap((event) => {

    return of(event).pipe(
      delay(450),
      tap(() => {
        this.notification = event;
        this.isActive = true;
        this.cd.markForCheck();
      }),
      delay(isDefined(event.showFor) ? event.showFor : this.hideAfter),
      /// Pause here if you hover over the notification ///
      tap(() => {
        this.isActive = false;
        this.cd.markForCheck();
      }),
      delay(450)
    );
  })
).subscribe(() => {});

Что я хотел бы сделать, это приостановить поток, когда вы наводите курсор мыши на уведомление, и продолжать, когда вы больше не зависаете над ним.это: 

<div (mouseover)="pause()" (mouseout)="continue()"></div>

Здесь я не могу найти решение, которое работает в этом случае.Я предполагаю, что мне нужно использовать еще 1-2 Subject с, а затем использовать switchMap в зависимости от того, приостановите ли вы или продолжите, но, как я уже сказал, я не могу понять, как именно.

Я пыталсяглядя на этот StackBlitz для функции паузы / возобновления switchMap , но когда я попробовал этот подход, он вообще не показывал никаких уведомлений.

Есть ли какие-либо указатели?

1 Ответ

0 голосов
/ 25 февраля 2019

Проверьте этот интерактивный стек и этот статический пример, а именно

Основной трюк состоял в том, чтобы подождать хотя бы

  • уведомление показывает задержку
  • и следующее сообщение в потоке

и позволяет входам и выходам мыши увеличивать задержку.

Магия внутриconcatMap делает это (по крайней мере, я так думаю ...)

Чтобы начать , мы берем notifications$ и concatMap с задержкой.Поэтому каждое сообщение будет отображаться как минимум DELAY время

ПРИМЕЧАНИЕ: псевдокод 

notifications$.concatMap(msg => 
  timer(DELAY)
    .ignoreElements()
    .startWith(msg)
)

Затем мы хотим, чтобы мышь задерживалазадержка 

notifications$
  .concatMap(msg =>
    mouse$
      .switchMap(isOver => { // < We re-delay on mouse state change
        if (isOver) {
          return empty() // < Do nothing when user hovers
        }

        return timer(DELAY); // < after DELAY -- take in next msgs
      })
      // we need only one completion event from this mouse$+ stream
      .take(1)
      // existing logic to turn delay stream into msg stream with delay
      .ignoreElements()
      .startWith(msg)
  )

Наконец , если следующее сообщение приходит после ЗАДЕРЖКИ - нам все равно нужно прослушивать зависания мыши и задерживать их 

// store current msg index
let currentMsgIndex = -1;

notifications$

  // store current msg index
  .map((msg,i) => {
    currentMsgIndex = i;
    return msg;
  })

  .concatMap((msg, i) => {
    // we listen to events from the mouse
    return memMouse$
      // if mouse pos changed -- reeval timeout
      .switchMap(value => {

        // do nothing on mouse in
        if (value) {
          return empty();
        }

        // until next msg comes in -- we're tracking mouse in/out
        let nextMsgAwait$;
        if (i == currentMsgIndex) {
          // current msg is latest
          nextMsgAwait$ = notifications$.pipe(take(1));
        } else {
          // we already have next msgs to show
          nextMsgAwait$ = of(void 0);
        }

        // if mouse is away -- wait for
        // - timer for TIMEOUT
        // - and till new msg arrives

        // until then -- user can mouse in/out
        // to delay the next msg display

        return forkJoin(
          timer(TIMEOUT)
          , nextMsgAwait$
        );

      }),
      // we need only one completion event from this mouse$+ stream
      .take(1)
      // existing logic to turn delay stream into msg stream with delay
      .ignoreElements()
      .startWith(msg)
  })

Для лучшегопонимание, пожалуйста, смотрите вышеупомянутые примеры - я добавил туда несколько комментариев.

...