From b883f212a7f1a702e244cc2b0c78a069901d5817 Mon Sep 17 00:00:00 2001
From: squidfunk <martin.donath@squidfunk.com>
Date: Fri, 14 Feb 2020 19:15:21 +0100
Subject: [PATCH] Added protoypiical implementation of header title swap

---
 src/assets/javascripts/index.ts | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/assets/javascripts/index.ts b/src/assets/javascripts/index.ts
index 0be97992c..416839d54 100644
--- a/src/assets/javascripts/index.ts
+++ b/src/assets/javascripts/index.ts
@@ -39,10 +39,12 @@ import {
   switchMap,
   tap,
   skip,
+  filter,
   take,
   bufferCount,
   startWith,
-  pluck
+  pluck,
+  withLatestFrom
 } from "rxjs/operators"
 
 import {
@@ -56,7 +58,9 @@ import {
   watchKeyboard,
   watchToggleMap,
   useToggle,
-  setViewportOffset
+  setViewportOffset,
+  watchViewportFrom,
+  getElementOrThrow
 } from "./observables"
 import { setupSearchWorker } from "./workers"
 import { renderSource } from "templates"
@@ -229,9 +233,26 @@ export function initialize(config: unknown) {
 
   const hero$ = useComponent("hero")
     .pipe(
-      mountHero({ header$, viewport$, screen$ })
+      mountHero({ header$, viewport$ })
     )
 
+  /* Create header title toggle */
+  useComponent("main")
+    .pipe(
+      map(el => getElementOrThrow("h1", el)), // catch error? just ignore?
+      switchMap(el => {
+        return watchViewportFrom(el, { header$, viewport$ })
+          .pipe(
+            map(({ offset: { y } }) => y >= el.offsetHeight),
+            withLatestFrom(useComponent("header-title")),
+            tap(([active, title]) => {
+              title.dataset.mdState = active ? "active" : ""
+            })
+          )
+      })
+    )
+      .subscribe(console.log)
+
   /* ----------------------------------------------------------------------- */
 
   // TODO: general keyboard handler...