Fixed header shadow appearing after document switch

This commit is contained in:
squidfunk 2020-02-21 11:36:32 +01:00
parent ff627c69e0
commit 1020953fa5
13 changed files with 52 additions and 46 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.d3f83a35.min.js", "assets/javascripts/bundle.js": "assets/javascripts/bundle.71def461.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.d3f83a35.min.js.map", "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.71def461.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.926ffd9e.min.js", "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/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", "assets/stylesheets/app-palette.scss": "assets/stylesheets/app-palette.3f90c815.min.css",

View File

@ -190,7 +190,7 @@
{% endblock %} {% endblock %}
</div> </div>
{% block scripts %} {% block scripts %}
<script src="{{ 'assets/javascripts/bundle.d3f83a35.min.js' | url }}"></script> <script src="{{ 'assets/javascripts/bundle.71def461.min.js' | url }}"></script>
{%- set translations = {} -%} {%- set translations = {} -%}
{%- for key in [ {%- for key in [
"clipboard.copy", "clipboard.copy",

View File

@ -85,7 +85,7 @@ let components$: Observable<ComponentMap>
* ------------------------------------------------------------------------- */ * ------------------------------------------------------------------------- */
/** /**
* Setup bindings to elements with given names * Setup bindings to components with given names
* *
* This function will maintain bindings to the elements identified by the given * This function will maintain bindings to the elements identified by the given
* names in-between document switches and update the elements in-place. * names in-between document switches and update the elements in-place.

View File

@ -45,7 +45,7 @@ interface MountOptions {
* *
* @param options - Options * @param options - Options
* *
* @return Header observable * @return Operator function
*/ */
export function mountHeader( export function mountHeader(
{ viewport$ }: MountOptions { viewport$ }: MountOptions

View File

@ -54,7 +54,7 @@ interface MountOptions {
* *
* @param options - Options * @param options - Options
* *
* @return Header title observable * @return Operator function
*/ */
export function mountHeaderTitle( export function mountHeaderTitle(
{ header$, viewport$ }: MountOptions { header$, viewport$ }: MountOptions

View File

@ -62,7 +62,7 @@ interface MountOptions {
* *
* @param options - Options * @param options - Options
* *
* @return Hero observable * @return Operator function
*/ */
export function mountHero( export function mountHero(
{ header$, viewport$ }: MountOptions { header$, viewport$ }: MountOptions

View File

@ -20,8 +20,8 @@
* IN THE SOFTWARE. * IN THE SOFTWARE.
*/ */
import { Observable, OperatorFunction, pipe } from "rxjs" import { Observable, OperatorFunction, Subject, pipe } from "rxjs"
import { distinctUntilKeyChanged, switchMap } from "rxjs/operators" import { distinctUntilKeyChanged, switchMap, tap } from "rxjs/operators"
import { import {
Header, Header,
@ -52,31 +52,35 @@ interface MountOptions {
/** /**
* Mount main area from source observable * Mount main area from source observable
* *
* The header must be connected to the main area observable outside of the
* operator function, as the header will persist in-between document switches
* while the main area is replaced. However, the header observable must be
* passed to this function, so we connect both via a long-living subject.
*
* @param options - Options * @param options - Options
* *
* @return Main area observable * @return Operator function
*/ */
export function mountMain( export function mountMain(
{ header$, viewport$ }: MountOptions { header$, viewport$ }: MountOptions
): OperatorFunction<HTMLElement, Main> { ): OperatorFunction<HTMLElement, Main> {
return pipe( const main$ = new Subject<Main>()
switchMap(el => useComponent("header")
.pipe(
switchMap(header => {
const main$ = watchMain(el, { header$, viewport$ })
/* Paint header shadow */ /* Connect to main area observable via long-living subject */
main$ useComponent("header")
.pipe( .pipe(
distinctUntilKeyChanged("active"), switchMap(header => main$
paintHeaderShadow(header) .pipe(
) distinctUntilKeyChanged("active"),
.subscribe() paintHeaderShadow(header)
)
/* Return main area */
return main$
})
) )
) )
.subscribe()
/* Return operator */
return pipe(
switchMap(el => watchMain(el, { header$, viewport$ })),
tap(main => main$.next(main))
) )
} }

View File

@ -60,7 +60,7 @@ interface MountOptions {
* *
* @param options - Options * @param options - Options
* *
* @return Search observable * @return Operator function
*/ */
export function mountSearch( export function mountSearch(
{ query$, reset$, result$ }: MountOptions { query$, reset$, result$ }: MountOptions
@ -69,6 +69,7 @@ export function mountSearch(
switchMap(() => combineLatest([query$, result$, reset$]) switchMap(() => combineLatest([query$, result$, reset$])
.pipe( .pipe(
map(([query, result]) => ({ query, result })) map(([query, result]) => ({ query, result }))
)) )
)
) )
} }

View File

@ -63,7 +63,7 @@ interface MountOptions {
* *
* @param options - Options * @param options - Options
* *
* @return Tabs observable * @return Operator function
*/ */
export function mountTabs( export function mountTabs(
{ header$, viewport$, screen$ }: MountOptions { header$, viewport$, screen$ }: MountOptions

View File

@ -114,22 +114,17 @@ export function initialize(config: unknown) {
if (!isConfig(config)) if (!isConfig(config))
throw new SyntaxError(`Invalid configuration: ${JSON.stringify(config)}`) throw new SyntaxError(`Invalid configuration: ${JSON.stringify(config)}`)
/* Setup user interface observables */
const location$ = watchLocation() const location$ = watchLocation()
const document$ = watchDocument( const hash$ = watchLocationHash()
config.feature.instant ? { location$ } : {}
)
const hash$ = watchLocationHash()
const viewport$ = watchViewport() const viewport$ = watchViewport()
const tablet$ = watchMedia("(min-width: 960px)") const tablet$ = watchMedia("(min-width: 960px)")
const screen$ = watchMedia("(min-width: 1220px)") const screen$ = watchMedia("(min-width: 1220px)")
/* ----------------------------------------------------------------------- */ /* Setup document observable */
const document$ = config.feature.instant
const worker = setupSearchWorker(config.worker.search, { ? watchDocument({ location$ })
base: config.base : watchDocument()
})
/* ----------------------------------------------------------------------- */
/* Setup toggle bindings */ /* Setup toggle bindings */
setupToggles([ setupToggles([
@ -137,7 +132,7 @@ export function initialize(config: unknown) {
"search" /* Toggle for search */ "search" /* Toggle for search */
], { document$ }) ], { document$ })
/* Setup components bindings */ /* Setup component bindings */
setupComponents([ setupComponents([
"container", /* Container */ "container", /* Container */
"header", /* Header */ "header", /* Header */
@ -155,6 +150,12 @@ export function initialize(config: unknown) {
/* ----------------------------------------------------------------------- */ /* ----------------------------------------------------------------------- */
const worker = setupSearchWorker(config.worker.search, {
base: config.base
})
/* ----------------------------------------------------------------------- */
/* Create header observable */ /* Create header observable */
const header$ = useComponent("header") const header$ = useComponent("header")
.pipe( .pipe(