Unified components and observable structure

src/assets/javascripts/components/shared/sidebar/index.ts

@@ -21,6 +21,5 @@
  */
 
 export * from "./_"
-export * from "./apply"
-export * from "./paint"
-export * from "./watch"
+export * from "./react"
+export * from "./set"

src/assets/javascripts/components/shared/sidebar/paint/index.ts

@@ -1,100 +0,0 @@
-/*
- * 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 {
-  MonoTypeOperatorFunction,
-  Observable,
-  animationFrameScheduler,
-  pipe
-} from "rxjs"
-import {
-  finalize,
-  map,
-  observeOn,
-  tap,
-  withLatestFrom
-} from "rxjs/operators"
-
-import { Header } from "../../../header"
-import { Sidebar } from "../_"
-import {
-  resetSidebarHeight,
-  resetSidebarLock,
-  resetSidebarOffset,
-  setSidebarHeight,
-  setSidebarLock,
-  setSidebarOffset
-} from "../apply"
-
-/* ----------------------------------------------------------------------------
- * Helper types
- * ------------------------------------------------------------------------- */
-
-/**
- * Paint options
- */
-interface PaintOptions {
-  header$: Observable<Header>          /* Header observable */
-}
-
-/* ----------------------------------------------------------------------------
- * Functions
- * ------------------------------------------------------------------------- */
-
-/**
- * Paint sidebar
- *
- * @param el - Sidebar element
- * @param options - Options
- *
- * @return Operator function
- */
-export function paintSidebar(
-  el: HTMLElement, { header$ }: PaintOptions
-): MonoTypeOperatorFunction<Sidebar> {
-  return pipe(
-
-    /* Defer repaint to next animation frame */
-    observeOn(animationFrameScheduler),
-    withLatestFrom(header$),
-    tap(([{ height, lock }, { height: offset }]) => {
-      setSidebarHeight(el, height)
-      setSidebarLock(el, lock)
-
-      /* Set offset in locked state depending on header height */
-      if (lock)
-        setSidebarOffset(el, offset)
-      else
-        resetSidebarOffset(el)
-    }),
-
-    /* Re-map to sidebar */
-    map(([sidebar]) => sidebar),
-
-    /* Reset on complete or error */
-    finalize(() => {
-      resetSidebarOffset(el)
-      resetSidebarHeight(el)
-      resetSidebarLock(el)
-    })
-  )
-}

src/assets/javascripts/components/shared/sidebar/react/index.ts

@@ -20,18 +20,36 @@
  * IN THE SOFTWARE.
  */
 
-import { Observable, combineLatest } from "rxjs"
+import {
+  MonoTypeOperatorFunction,
+  Observable,
+  animationFrameScheduler,
+  combineLatest,
+  pipe
+} from "rxjs"
 import {
   distinctUntilChanged,
   distinctUntilKeyChanged,
+  finalize,
   map,
+  observeOn,
+  tap,
   withLatestFrom
 } from "rxjs/operators"
 
-import { Viewport } from "observables"
+import { Viewport } from "browser"
 
+import { Header } from "../../../header"
 import { Main } from "../../../main"
 import { Sidebar } from "../_"
+import {
+  resetSidebarHeight,
+  resetSidebarLock,
+  resetSidebarOffset,
+  setSidebarHeight,
+  setSidebarLock,
+  setSidebarOffset
+} from "../set"
 
 /* ----------------------------------------------------------------------------
  * Helper types
@@ -45,6 +63,13 @@ interface WatchOptions {
   viewport$: Observable<Viewport>      /* Viewport observable */
 }
 
+/**
+ * Apply options
+ */
+interface ApplyOptions {
+  header$: Observable<Header>          /* Header observable */
+}
+
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
@@ -105,3 +130,44 @@ export function watchSidebar(
       map(([height, lock]) => ({ height, lock }))
     )
 }
+
+/* ------------------------------------------------------------------------- */
+
+/**
+ * Apply sidebar
+ *
+ * @param el - Sidebar element
+ * @param options - Options
+ *
+ * @return Operator function
+ */
+export function applySidebar(
+  el: HTMLElement, { header$ }: ApplyOptions
+): MonoTypeOperatorFunction<Sidebar> {
+  return pipe(
+
+    /* Defer repaint to next animation frame */
+    observeOn(animationFrameScheduler),
+    withLatestFrom(header$),
+    tap(([{ height, lock }, { height: offset }]) => {
+      setSidebarHeight(el, height)
+      setSidebarLock(el, lock)
+
+      /* Set offset in locked state depending on header height */
+      if (lock)
+        setSidebarOffset(el, offset)
+      else
+        resetSidebarOffset(el)
+    }),
+
+    /* Re-map to sidebar */
+    map(([sidebar]) => sidebar),
+
+    /* Reset on complete or error */
+    finalize(() => {
+      resetSidebarOffset(el)
+      resetSidebarHeight(el)
+      resetSidebarLock(el)
+    })
+  )
+}