Improved observable flows

This commit is contained in:
squidfunk 2020-02-19 17:29:18 +01:00
parent 03010ddbcd
commit 297a63313d
13 changed files with 63 additions and 37 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
{
"assets/javascripts/bundle.js": "assets/javascripts/bundle.7de51c1a.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.7de51c1a.min.js.map",
"assets/javascripts/bundle.js": "assets/javascripts/bundle.24f9b6fb.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.24f9b6fb.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.926ffd9e.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.926ffd9e.min.js.map",
"assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.3f90c815.min.css",

View File

@ -190,7 +190,7 @@
{% endblock %}
</div>
{% block scripts %}
<script src="{{ 'assets/javascripts/bundle.7de51c1a.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.24f9b6fb.min.js' | url }}"></script>
<script id="__lang" type="application/json">
{%- set translations = {} -%}
{%- for key in [

View File

@ -62,12 +62,6 @@ export function mountSearch(
return pipe(
switchMap(() => {
/* Mount search reset */
const reset$ = useComponent("search-reset")
.pipe(
mountSearchReset()
)
/* Mount search query */
const query$ = useComponent<HTMLInputElement>("search-query")
.pipe(
@ -75,6 +69,12 @@ export function mountSearch(
shareReplay(1)
)
/* Mount search reset */
const reset$ = useComponent("search-reset")
.pipe(
mountSearchReset()
)
/* Mount search result */
const result$ = useComponent("search-result")
.pipe(

View File

@ -21,7 +21,13 @@
*/
import { OperatorFunction, pipe } from "rxjs"
import { mapTo, switchMap, switchMapTo, tap } from "rxjs/operators"
import {
mapTo,
startWith,
switchMap,
switchMapTo,
tap
} from "rxjs/operators"
import { setElementFocus, watchSearchReset } from "observables"
@ -44,6 +50,7 @@ export function mountSearchReset(): OperatorFunction<HTMLElement, void> {
tap(setElementFocus),
mapTo(undefined)
)
)
),
startWith(undefined)
)
}

View File

@ -83,7 +83,7 @@ export function mountTabs(
/* Mount tabs below screen breakpoint */
} else {
return of({ hidden: screen })
return of({ hidden: true })
}
})
)

View File

@ -187,12 +187,18 @@ export function initialize(config: unknown) {
/* ----------------------------------------------------------------------- */
setupKeyboard()
setupKeyboard({ keyboard$ })
// must be in another scope!
const dialog = renderDialog("Copied to Clipboard")
patchTables({ document$ })
patchDetails({ document$, hash$ })
patchSource({ document$ })
/* Force 1px scroll offset to trigger overflow scrolling */
if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g))
patchScrollfix({ document$ })
// snackbar for copy to clipboard
const dialog = renderDialog("Copied to Clipboard")
setupClipboard({ document$ })
.pipe(
switchMap(ev => {
@ -211,14 +217,6 @@ export function initialize(config: unknown) {
)
.subscribe()
patchTables({ document$ })
patchDetails({ document$, hash$ })
patchSource({ document$ })
/* Force 1px scroll offset to trigger overflow scrolling */
if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g))
patchScrollfix({ document$ })
// TODO: general keyboard handler...
// put into main!?

View File

@ -32,11 +32,21 @@ import {
setElementFocus,
setToggle,
useToggle,
watchKeyboard,
watchToggle
} from "observables"
import { not, takeIf } from "utilities"
/* ----------------------------------------------------------------------------
* Helper types
* ------------------------------------------------------------------------- */
/**
* Setup options
*/
interface SetupOptions {
keyboard$: Observable<Key> /* Keyboard observable */
}
/* ----------------------------------------------------------------------------
* Functions
* ------------------------------------------------------------------------- */
@ -46,8 +56,9 @@ import { not, takeIf } from "utilities"
*
* @return Keyboard observable
*/
export function setupKeyboard(): Observable<Key> {
const keyboard$ = watchKeyboard()
export function setupKeyboard(
{ keyboard$ }: SetupOptions
): Observable<Key> {
/* Setup keyboard handlers in search mode */
const toggle$ = useToggle("search")

View File

@ -23,7 +23,12 @@
import { Repo, User } from "github-types"
import { Observable, of } from "rxjs"
import { ajax } from "rxjs/ajax"
import { filter, pluck, shareReplay, switchMap } from "rxjs/operators"
import {
filter,
pluck,
shareReplay,
switchMap
} from "rxjs/operators"
import { round } from "utilities"

View File

@ -23,7 +23,12 @@
import { ProjectSchema } from "gitlab"
import { Observable } from "rxjs"
import { ajax } from "rxjs/ajax"
import { filter, map, pluck, shareReplay } from "rxjs/operators"
import {
filter,
map,
pluck,
shareReplay
} from "rxjs/operators"
import { round } from "utilities"

View File

@ -21,7 +21,7 @@
*/
import { NEVER, Observable } from "rxjs"
import { catchError, filter, switchMap } from "rxjs/operators"
import { catchError, map, switchMap, take } from "rxjs/operators"
import { getElementOrThrow, getElements } from "observables"
import { renderSource } from "templates"
@ -100,11 +100,11 @@ export function patchSource(
): void {
document$
.pipe(
switchMap(() => {
const el = getElementOrThrow<HTMLAnchorElement>(".md-source[href]")
return cache(`${hash(el.href)}`, () => fetchSourceFacts(el.href))
}),
filter(facts => !!facts.length),
map(() => getElementOrThrow<HTMLAnchorElement>(".md-source[href]")),
take(1),
switchMap(({ href }) => (
cache(`${hash(href)}`, () => fetchSourceFacts(href))
)),
catchError(() => NEVER)
)
.subscribe(facts => {