Migrated tabs and hero and renamed refactored components

material/assets/manifest.json

@@ -1,10 +1,10 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.d443780c.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.d443780c.min.js.map",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.da70863b.min.js",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.da70863b.min.js.map",
   "assets/javascripts/worker/packer.js": "assets/javascripts/worker/packer.c14659e8.min.js",
   "assets/javascripts/worker/packer.js.map": "assets/javascripts/worker/packer.c14659e8.min.js.map",
-  "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.07456dbc.min.js",
-  "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.07456dbc.min.js.map",
+  "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.d5bb06df.min.js",
+  "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.d5bb06df.min.js.map",
   "assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.8c25017f.min.css",
   "assets/stylesheets/app.scss": "assets/stylesheets/app.82c13014.min.css"
 }

material/base.html

@@ -190,7 +190,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.d443780c.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.da70863b.min.js' | url }}"></script>
       <script id="__lang" type="application/json">
         {%- set translations = {} -%}
         {%- for key in [
@@ -209,7 +209,7 @@
         {%- endfor -%}
         {{ translations | tojson }}
       </script>
-      <script>app=initialize({base:"{{ base_url }}",worker:{search:"{{ 'assets/javascripts/worker/search.07456dbc.min.js' | url }}",packer:"{{ 'assets/javascripts/worker/packer.c14659e8.min.js' | url }}"}})</script>
+      <script>app=initialize({base:"{{ base_url }}",worker:{search:"{{ 'assets/javascripts/worker/search.d5bb06df.min.js' | url }}",packer:"{{ 'assets/javascripts/worker/packer.c14659e8.min.js' | url }}"}})</script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

src/assets/javascripts/components/hero/index.ts

@@ -35,9 +35,9 @@ import {
  * ------------------------------------------------------------------------- */
 
 /**
- * Hero state
+ * Hero
  */
-export interface HeroState {
+export interface Hero {
   hidden: boolean                      /* Whether the hero is hidden */
 }
 
@@ -46,59 +46,34 @@ export interface HeroState {
  * ------------------------------------------------------------------------- */
 
 /**
- * Options
+ * Mount options
  */
-interface Options {
-  header$: Observable<Header>     /* Header observable */
-  viewport$: Observable<Viewport>
-  screen$: Observable<boolean>         /* Media screen observable */
+interface MountOptions {
+  header$: Observable<Header>          /* Header observable */
+  viewport$: Observable<Viewport>      /* Viewport observable */
 }
 
 /* ----------------------------------------------------------------------------
  * Functions
  * ------------------------------------------------------------------------- */
 
-/**
- * Watch hero
- *
- * @param el - Hero element
- * @param agent - Agent
- * @param options - Options
- *
- * @return Hero state
- */
-export function watchHero(
-  el: HTMLElement, options: Options
-): Observable<HeroState> {
-
-  /* Watch and paint visibility */
-  const hidden$ = watchViewportFrom(el, options)
-    .pipe(
-      paintHideable(el, 20)
-    )
-
-  /* Combine into a single hot observable */
-  return hidden$
-    .pipe(
-      map(hidden => ({ hidden }))
-    )
-}
-
-/* ------------------------------------------------------------------------- */
-
 /**
  * Mount hero from source observable
  *
- * @param agent - Agent
  * @param options - Options
  *
- * @return Operator function
+ * @return Hero observable
  */
 export function mountHero(
-  options: Options
-): OperatorFunction<HTMLElement, HeroState> {
+  { header$, viewport$ }: MountOptions
+): OperatorFunction<HTMLElement, Hero> {
   return pipe(
-    switchMap(el => watchHero(el, options)),
+    switchMap(el => watchViewportFrom(el, { header$, viewport$ })
+      .pipe(
+        paintHideable(el, 20),
+        map(hidden => ({ hidden }))
+      )
+    ),
     shareReplay(1)
   )
 }

src/assets/javascripts/components/index.ts

@@ -20,5 +20,11 @@
  * IN THE SOFTWARE.
  */
 
+export * from "./_"
+export * from "./header"
 export * from "./hero"
+export * from "./main"
+export * from "./navigation"
+export * from "./search"
 export * from "./tabs"
+export * from "./toc"

src/assets/javascripts/components/tabs/index.ts

@@ -20,8 +20,8 @@
  * IN THE SOFTWARE.
  */
 
-import { Observable, OperatorFunction, pipe } from "rxjs"
-import { map, shareReplay } from "rxjs/operators"
+import { Observable, OperatorFunction, of, pipe } from "rxjs"
+import { map, shareReplay, switchMap } from "rxjs/operators"
 
 import {
   Header,
@@ -29,16 +29,15 @@ import {
   paintHideable,
   watchViewportFrom
 } from "observables"
-import { switchMapIf } from "utilities"
 
 /* ----------------------------------------------------------------------------
  * Types
  * ------------------------------------------------------------------------- */
 
 /**
- * Tabs state
+ * Tabs
  */
-export interface TabsState {
+export interface Tabs {
   hidden: boolean                      /* Whether the tabs are hidden */
 }
 
@@ -47,11 +46,11 @@ export interface TabsState {
  * ------------------------------------------------------------------------- */
 
 /**
- * Options
+ * Mount options
  */
-interface Options {
-  header$: Observable<Header>     /* Header state observable */
-  viewport$: Observable<Viewport>
+interface MountOptions {
+  header$: Observable<Header>          /* Header observable */
+  viewport$: Observable<Viewport>      /* Viewport observable */
   screen$: Observable<boolean>         /* Media screen observable */
 }
 
@@ -59,50 +58,36 @@ interface Options {
  * Functions
  * ------------------------------------------------------------------------- */
 
-/**
- * Watch tabs
- *
- * This function returns an observable that computes the visual parameters of
- * the tabs, currently only denoting whether the tabs are hidden or not.
- *
- * @param el - Tabs element
- * @param options - Options
- *
- * @return Tabs state
- */
-export function watchTabs(
-  el: HTMLElement, options: Options
-): Observable<TabsState> {
-
-  /* Watch and paint visibility */
-  const hidden$ = watchViewportFrom(el, options)
-    .pipe(
-      paintHideable(el, 8)
-    )
-
-  /* Combine into a single hot observable */
-  return hidden$
-    .pipe(
-      map(hidden => ({ hidden }))
-    )
-}
-// TODO: generalize into watchHideable !!! or mountHideable...
-
-/* ------------------------------------------------------------------------- */
-
 /**
  * Mount tabs from source observable
  *
- * @param agent - Agent
  * @param options - Options
  *
- * @return Operator function
+ * @return Tabs observable
  */
 export function mountTabs(
-  options: Options
-): OperatorFunction<HTMLElement, TabsState> {
+  { header$, viewport$, screen$ }: MountOptions
+): OperatorFunction<HTMLElement, Tabs> {
   return pipe(
-    switchMapIf(options.screen$, el => watchTabs(el, options)),
+    switchMap(el => screen$
+      .pipe(
+        switchMap(screen => {
+
+          /* Mount tabs above screen breakpoint */
+          if (screen) {
+            return watchViewportFrom(el, { header$, viewport$ })
+              .pipe(
+                paintHideable(el, 20),
+                map(hidden => ({ hidden }))
+              )
+
+          /* Mount tabs below screen breakpoint */
+          } else {
+            return of({ hidden: screen })
+          }
+        })
+      )
+    ),
     shareReplay(1)
   )
 }

src/assets/javascripts/components2/index.ts

@@ -1,28 +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.
- */
-
-export * from "./_"
-export * from "./header"
-export * from "./main"
-export * from "./navigation"
-export * from "./search"
-export * from "./toc"

src/assets/javascripts/index.ts

@@ -45,10 +45,6 @@ import {
   pluck
 } from "rxjs/operators"
 
-import {
-  mountHero,
-  mountTabs,
-} from "./components"
 import {
   getElement,
   watchToggle,
@@ -69,13 +65,15 @@ import { setToggle } from "actions"
 import {
   Component,
   mountHeader,
+  mountHero,
   mountMain,
   mountNavigation,
   mountSearch,
   mountTableOfContents,
+  mountTabs,
   useComponent,
   watchComponentMap
-} from "components2"
+} from "components"
 import { mountClipboard } from "./integrations/clipboard"
 import { patchTables, patchDetails } from "patches"
 import { takeIf, not, isConfig } from "utilities"