Refactored temporary tabbed code into separate component

material/base.html

@@ -225,7 +225,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.e3d8df37.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.2248a2bd.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

src/assets/javascripts/bundle.ts

@@ -256,20 +256,3 @@ window.screen$    = screen$            /* Screen observable */
 window.print$     = print$             /* Print mode observable */
 window.alert$     = alert$             /* Alert subject */
 window.component$ = component$         /* Component observable */
-
-/* ----------------------------------------------------------------------------
- * Temporary, before we integrate this into master
- * ------------------------------------------------------------------------- */
-
-document$
-  .pipe(
-    switchMap(() => of(...getElements(".tabbed-alternate > input"))
-      .pipe(
-        mergeMap(el => fromEvent(el, "change").pipe(mapTo(el))),
-        map(el => getElementOrThrow(`label[for=${el.id}]`))
-      )
-    )
-  )
-    .subscribe(el => {
-      el.scrollIntoView({ behavior: "smooth",  block: "nearest" })
-    })

src/assets/javascripts/components/content/_/index.ts

@@ -28,6 +28,7 @@ import { Component } from "../../_"
 import { CodeBlock, mountCodeBlock } from "../code"
 import { Details, mountDetails } from "../details"
 import { DataTable, mountDataTable } from "../table"
+import { ContentTabs, mountContentTabs } from "../tabs"
 
 /* ----------------------------------------------------------------------------
  * Types
@@ -37,6 +38,7 @@ import { DataTable, mountDataTable } from "../table"
  * Content
  */
 export type Content =
+  | ContentTabs
   | CodeBlock
   | DataTable
   | Details
@@ -84,6 +86,10 @@ export function mountContent(
 
     /* Details */
     ...getElements("details", el)
-      .map(child => mountDetails(child, { target$, print$ }))
+      .map(child => mountDetails(child, { target$, print$ })),
+
+    /* Content tabs */
+    ...getElements("[data-tabs]", el)
+      .map(child => mountContentTabs(child))
   )
 }

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

@@ -24,3 +24,4 @@ export * from "./_"
 export * from "./code"
 export * from "./details"
 export * from "./table"
+export * from "./tabs"

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

@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) 2016-2021 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 { NEVER, Observable, Subject, fromEvent, merge } from "rxjs"
+import { finalize, map, mapTo, tap } from "rxjs/operators"
+
+import { getElementOrThrow, getElements } from "~/browser"
+
+import { Component } from "../../_"
+
+/* ----------------------------------------------------------------------------
+ * Types
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Content tabs
+ */
+export interface ContentTabs {
+  active: HTMLLabelElement             /* Active tab label */
+}
+
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
+/**
+ * Watch content tabs
+ *
+ * @param el - Content tabs element
+ *
+ * @returns Content tabs observable
+ */
+export function watchContentTabs(
+  el: HTMLElement
+): Observable<ContentTabs> {
+  if (!el.classList.contains(".tabbed-alternate"))
+    return NEVER
+  else
+    return merge(...getElements(":scope > input", el)
+      .map(input => fromEvent(input, "change").pipe(mapTo(input.id)))
+    )
+      .pipe(
+        map(id => ({
+          active: getElementOrThrow<HTMLLabelElement>(`label[for=${id}]`)
+        }))
+      )
+}
+
+/**
+ * Mount content tabs
+ *
+ * @param el - Content tabs element
+ *
+ * @returns Content tabs component observable
+ */
+export function mountContentTabs(
+  el: HTMLElement
+): Observable<Component<ContentTabs>> {
+  const internal$ = new Subject<ContentTabs>()
+  internal$.subscribe(({ active }) => {
+    active.scrollIntoView({ behavior: "smooth",  block: "nearest" })
+  })
+
+  /* Create and return component */
+  return watchContentTabs(el)
+    .pipe(
+      tap(state => internal$.next(state)),
+      finalize(() => internal$.complete()),
+      map(state => ({ ref: el, ...state }))
+    )
+}