Refactored header title component

src/assets/javascripts/observables/agent/document/switch/index.ts

@@ -52,7 +52,7 @@ interface WatchOptions {
  *
  * This function returns an observables that fetches a document if the provided
  * location observable emits a new value (i.e. URL). If the emitted URL points
- * to the same page, the request is effectively ignored (e.g. when only the
+ * to the same page, the request is effectively ignored (i.e. when only the
  * fragment identifier changes).
  *
  * @param options - Options

src/assets/javascripts/observables/agent/element/offset/index.ts

@@ -21,14 +21,7 @@
  */
 
 import { Observable, fromEvent, merge } from "rxjs"
-import {
-  distinctUntilKeyChanged,
-  map,
-  shareReplay,
-  startWith
-} from "rxjs/operators"
-
-import { Viewport } from "../../viewport"
+import { map, shareReplay, startWith } from "rxjs/operators"
 
 /* ----------------------------------------------------------------------------
  * Types
@@ -42,17 +35,6 @@ export interface ElementOffset {
   y: number                            /* Vertical offset */
 }
 
-/* ----------------------------------------------------------------------------
- * Helper types
- * ------------------------------------------------------------------------- */
-
-/**
- * Watch options
- */
-interface WatchOptions {
-  viewport$: Observable<Viewport>      /* Viewport observable */
-}
-
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -77,21 +59,16 @@ export function getElementOffset(el: HTMLElement): ElementOffset {
  * Watch element offset
  *
  * @param el - Element
- * @param options - Options
  *
  * @return Element offset observable
  */
 export function watchElementOffset(
-  el: HTMLElement, { viewport$ }: WatchOptions
+  el: HTMLElement
 ): Observable<ElementOffset> {
-  const scroll$ = fromEvent(el, "scroll")
-  const size$ = viewport$
-    .pipe(
-      distinctUntilKeyChanged("size")
-    )
-
-  /* Merge into a single hot observable */
-  return merge(scroll$, size$)
+  return merge(
+    fromEvent<UIEvent>(el, "scroll"),
+    fromEvent<UIEvent>(window, "resize")
+  )
     .pipe(
       map(() => getElementOffset(el)),
       startWith(getElementOffset(el)),

src/assets/javascripts/observables/agent/location/index.ts

@@ -36,8 +36,7 @@ export function watchLocation(): Subject<string> {
   const location$ = new Subject<string>()
   fromEvent<PopStateEvent>(window, "popstate")
     .pipe(
-      map(() => location.href),
-      share()
+      map(() => location.href)
     )
       .subscribe(location$)
 

src/assets/javascripts/observables/agent/viewport/_/index.ts

@@ -85,7 +85,7 @@ export function watchViewport(): Observable<Viewport> {
  *
  * @return Viewport observable
  */
-export function watchViewportFrom(
+export function watchViewportAt(
   el: HTMLElement, { header$, viewport$ }: WatchRelativeOptions
 ): Observable<Viewport> {
   return combineLatest([viewport$, header$])

src/assets/javascripts/observables/header/index.ts

@@ -22,3 +22,4 @@
 
 export * from "./_"
 export * from "./shadow"
+export * from "./title"

src/assets/javascripts/observables/header/title/index.ts

@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import { animationFrameScheduler, pipe, MonoTypeOperatorFunction } from "rxjs"
+import { finalize, observeOn, tap } from "rxjs/operators"
+
+import { resetHeaderTitleActive, setHeaderTitleActive } from "actions"
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Paint header title from source observable
+ *
+ * @param el - Header element
+ *
+ * @return Operator function
+ */
+export function paintHeaderTitle(
+  el: HTMLElement
+): MonoTypeOperatorFunction<boolean> {
+  return pipe(
+
+    /* Defer repaint to next animation frame */
+    observeOn(animationFrameScheduler),
+    tap(active => {
+      setHeaderTitleActive(el, active)
+    }),
+
+    /* Reset on complete or error */
+    finalize(() => {
+      resetHeaderTitleActive(el)
+    })
+  )
+}