-
+
{% block site_nav %} {% if nav %}
diff --git a/material/partials/social.html b/material/partials/social.html index 7609e434c..58394be78 100644 --- a/material/partials/social.html +++ b/material/partials/social.html @@ -3,7 +3,6 @@ -#} {% if config.extra.social %}
- {% for social in config.extra.social %} {% endfor %} diff --git a/src/assets/javascripts/component/_/index.ts b/src/assets/javascripts/component/_/index.ts index e3d04f2e7..580bbffee 100644 --- a/src/assets/javascripts/component/_/index.ts +++ b/src/assets/javascripts/component/_/index.ts @@ -21,8 +21,15 @@ */ import { keys } from "ramda" -import { MonoTypeOperatorFunction, Observable, of, pipe } from "rxjs" -import { scan, shareReplay } from "rxjs/operators" +import { + MonoTypeOperatorFunction, + NEVER, + Observable, + OperatorFunction, + of, + pipe +} from "rxjs" +import { scan, shareReplay, switchMap } from "rxjs/operators" import { getElement } from "../../ui" @@ -137,3 +144,24 @@ export function paintComponentMap( }) ) } + +/** + * Pluck a component from the component map + * + * @template T - Element type + * + * @param name - Component + * + * @return Operator function + */ +export function pluckComponent( + name: Component +): OperatorFunction { + return pipe( + switchMap(map => { + return typeof map[name] !== "undefined" + ? of(map[name]!) + : NEVER + }) + ) +} diff --git a/src/assets/javascripts/index.ts b/src/assets/javascripts/index.ts index 79cd59baa..55d37898c 100644 --- a/src/assets/javascripts/index.ts +++ b/src/assets/javascripts/index.ts @@ -20,43 +20,67 @@ * IN THE SOFTWARE. */ -import { difference } from "ramda" +import { findLast } from "ramda" import { - distinctUntilKeyChanged, - finalize, + NEVER, + animationFrameScheduler, + fromEvent, + merge, + of +} from "rxjs" +import { AjaxRequest, ajax } from "rxjs/ajax" +import { + delay, + filter, map, - pairwise, - startWith + mapTo, + observeOn, + scan, + shareReplay, + switchMap, + tap } from "rxjs/operators" +import "./polyfill" + import { - resetAnchor, - resetSidebar, - setAnchorActive, - setAnchorBlur, - setHeaderShadow, - setSidebarHeight, - setSidebarLock, - watchAnchors, - watchContainer, + paintAnchorList, + paintComponentMap, + paintHeaderShadow, + paintSidebar, + pluckComponent, + setNavigationOverflowScrolling, + watchAnchorList, + watchComponentMap, + watchHeader, + watchMain, + watchNavigationIndex, watchSidebar } from "./component" import { getElement, getElements, + watchLocation, + watchLocationHash, watchMedia, watchViewportOffset, - watchViewportSize + watchViewportSize, + withElement } from "./ui" import { toggle } from "./utilities" +// ---------------------------------------------------------------------------- +// Disclaimer: this file is currently heavy WIP // ---------------------------------------------------------------------------- const offset$ = watchViewportOffset() const size$ = watchViewportSize() -const screen$ = watchMedia("(min-width: 1220px)") -const tablet$ = watchMedia("(min-width: 960px)") +const aboveScreen$ = watchMedia("(min-width: 1220px)") +const belowScreen$ = watchMedia("(max-width: 1219px)") + +const aboveTablet$ = watchMedia("(min-width: 960px)") +const belowTablet$ = watchMedia("(max-width: 959px)") // ---------------------------------------------------------------------------- @@ -65,119 +89,343 @@ document.documentElement.classList.remove("no-js") document.documentElement.classList.add("js") // ---------------------------------------------------------------------------- -// sidebar lock + height + +// Observable that resolves with document when loaded +const init$ = fromEvent(document, "DOMContentLoaded") + .pipe( + mapTo(document), + shareReplay({ bufferSize: 1, refCount: true }) + ) + +// Location subject +const location$ = watchLocation() + +// Observable that resolves with document on XHR load +const reload$ = location$ + .pipe( + switchMap(url => load(url)) + ) + +// Extract and (re-)paint components +const components$ = merge(init$, reload$) + .pipe( + switchMap(watchComponentMap), + paintComponentMap(), + shareReplay({ bufferSize: 1, refCount: true }) + ) + // ---------------------------------------------------------------------------- -const container = getElement("[data-md-component=container]")! -const header = getElement("[data-md-component=header]")! -const container$ = watchContainer(container, header, { size$, offset$ }) +const header$ = components$ + .pipe( + pluckComponent("header"), + switchMap(watchHeader) + ) -// Optimize anchor list candidates -const anchors = getElements("[data-md-component=toc] .md-nav__link") -if (anchors.length) - tablet$ - .pipe( - toggle(() => watchAnchors(anchors, header, { offset$ }) - .pipe( - startWith({ done: [], next: [] }), - pairwise(), - map(([a, b]) => { - const begin = Math.max(0, Math.min(b.done.length, a.done.length) - 1) - const end = Math.max(b.done.length, a.done.length) - return { - done: b.done.slice(begin, end + 1), - next: difference(b.next, a.next) - } - }), - finalize(() => { - for (const anchor of anchors) - resetAnchor(anchor) - }) - ) - ) - ) - .subscribe(({ done, next }) => { +const main$ = components$ + .pipe( + pluckComponent("main"), + switchMap(el => watchMain(el, { size$, offset$, header$ })), + shareReplay({ bufferSize: 1, refCount: true}) + ) - /* Look backward */ - for (const [i, [anchor]] of done.entries()) { - setAnchorBlur(anchor, true) - setAnchorActive(anchor, i === done.length - 1) - } - - /* Look forward */ - for (const [anchor] of next) { - setAnchorBlur(anchor, false) - setAnchorActive(anchor, false) - } - }) - -// TODO: this should be subscribed to a subject! -// const toggle = getElement("[data-md-toggle=search]")! -// fromEvent(toggle, "change") -// .subscribe(x2 => { -// console.log("toggle changed", x2) -// }) - -// const query = getElement("[data-md-component=query]") -// if (typeof query !== "undefined") { -// fromEvent(query, "focus") -// .pipe( - -// ) -// .subscribe(console.log) -// } - -/* Component: header shadow toggle */ // - TODO: put this into a separate component -if (typeof header !== "undefined") { - container$ - .pipe( - distinctUntilKeyChanged("active") - ) - .subscribe(({ active }) => { - setHeaderShadow(header, active) - }) -} +// ---------------------------------------------------------------------------- /* Component: sidebar with navigation */ -const nav = getElement("[data-md-component=navigation") -if (typeof nav !== "undefined") { - screen$ - .pipe( - toggle(() => watchSidebar(nav, { container$, offset$ }) - .pipe( - finalize(() => { - resetSidebar(nav) - }) +components$ + .pipe( + pluckComponent("navigation"), + switchMap(el => aboveScreen$ + .pipe( + toggle(() => watchSidebar(el, { offset$, main$ }) + .pipe( + paintSidebar(el) + ) ) - ) - ) - .subscribe(({ height, lock }) => { - setSidebarHeight(nav, height) - setSidebarLock(nav, lock) - }) -} + )) + ) + .subscribe() /* Component: sidebar with table of contents (missing on 404 page) */ -const toc = getElement("[data-md-component=toc") -if (typeof toc !== "undefined") { - tablet$ - .pipe( - toggle(() => watchSidebar(toc, { container$, offset$ }) - .pipe( - finalize(() => { - resetSidebar(toc) - }) +components$ + .pipe( + pluckComponent("toc"), + switchMap(el => aboveTablet$ + .pipe( + toggle(() => watchSidebar(el, { offset$, main$ }) + .pipe( + paintSidebar(el) + ) + ) + )) + ) + .subscribe() + +/* Component: link blurring for table of contents */ +components$ + .pipe( + pluckComponent("toc"), + map(el => getElements(".md-nav__link", el)), + switchMap(els => aboveTablet$ + .pipe( + toggle(() => watchAnchorList(els, { size$, offset$, header$ }) + .pipe( + paintAnchorList(els) + ) ) ) ) - .subscribe(({ height, lock }) => { - setSidebarHeight(toc, height) - setSidebarLock(toc, lock) - }) + ) + .subscribe() + +/* Component: header shadow toggle */ +components$ + .pipe( + pluckComponent("header"), + switchMap(el => main$.pipe( + paintHeaderShadow(el) + )) + ) + .subscribe() + +// ---------------------------------------------------------------------------- +// Refactor: +// ---------------------------------------------------------------------------- + +// Observable that catches all internal links without the necessity of rebinding +// as events are bubbled up through the DOM. +init$ + .pipe( + switchMap(({ body }) => fromEvent(body, "click")), + switchMap(ev => { + + /* Walk up as long as we're not in a details tag */ + let parent = ev.target as Node | undefined + while (parent && !(parent instanceof HTMLAnchorElement)) + parent = parent.parentNode // TODO: fix errors... + + if (parent) { // this one OR (!) one of + // its parents... + if (!/(:\/\/|^#[^\/]+$)/.test(parent.getAttribute("href")!)) { + ev.preventDefault() + console.log("> ", parent.href) + + // Extract URL; push to state, then emit new URL + const href = parent.href + history.pushState({}, "", href) // move this somewhere else!??? + return of(href) + } + } + return NEVER + }), + shareReplay({ bufferSize: 1, refCount: true }) + ) + .subscribe(location$) + +// ---------------------------------------------------------------------------- + +const nav2 = getElement("[data-md-component=navigation]")! +const index$ = watchNavigationIndex(nav2) // TODO: maybe rename into setup!? merge with sidebar? +belowScreen$ + .pipe( + toggle(() => index$ + .pipe( + switchMap(index => merge(...[...index.keys()] + .map(input => fromEvent(input, "change")) + ) + .pipe( + mapTo(index) + ) + ), + map(index => getElement("ul", index.get( + findLast(input => input.checked, [...index.keys()])!) + )!), // find the TOP MOST! <-- this is the actively displayed on mobile + + // this is the paint job... + + // dispatch action - TODO: document why this crap is even necessary + scan((prev, next) => { + if (prev) + setNavigationOverflowScrolling(prev, false) // TODO: resetOverflowScrolling .... + return next + }), + delay(250), + tap(next => { + setNavigationOverflowScrolling(next, true) // setNavigationScrollfix + }) + ) + ) + ) + .subscribe() + +// ---------------------------------------------------------------------------- + +function isNavigationCollapsible(el: HTMLElement): boolean { + return el.getAttribute("data-md-component") === "collapsible" // TODO: maybe better remove again +} + +aboveScreen$ + .pipe( + toggle(() => index$ + .pipe( + // map(index => ) + // filter shit from index... + switchMap(index => [...index.keys()] + .filter(input => isNavigationCollapsible(index.get(input)!)) + .map(input => { + const el = index.get(input)! + // this doesnt work... + el.setAttribute("data-md-height", `${el.offsetHeight}`) // TODO: this is a hack + return input + }) + .map(input => fromEvent(input, "change") + .pipe( + map(() => { + const el = index.get(input)! + let height = parseInt(el.getAttribute("data-md-height")!, 10) + // always goes from data-md-height... wrong... + if (!input.checked) { + el.style.maxHeight = `${height}px` + + /* Set target height */ + height = 0 + + } else { + el.style.maxHeight = "initial" // 100%!? + el.style.transitionDuration = "initial" + + /* Retrieve target height */ + height = el.offsetHeight + console.log("expand to height") + + /* Reset state and set start height */ + // el.removeAttribute("data-md-state") + el.style.maxHeight = "0px" + } + + /* Force style recalculation */ + el.offsetHeight // tslint:disable-line + el.style.transitionDuration = "" + return height + }), // max height is set... just read it. + observeOn(animationFrameScheduler), + tap(height => { + const el = index.get(input)! + // el.setAttribute("data-md-state", "animate") + el.style.maxHeight = `${height}px` + console.log("setting shit...") + + el.setAttribute("data-md-height", `${height}`) + }), + delay(250), + tap(() => { + const el = index.get(input)! + console.log("DONE") + // el.removeAttribute("data-md-state") + el.style.maxHeight = "" + }) + ) + .subscribe() // merge shit and return it... + ) + ) + ) + ) + ) + .subscribe() + +// ---------------------------------------------------------------------------- + +/* Open details after anchor jump */ +const hash$ = watchLocationHash() +hash$ + .pipe( + withElement(), // TODO: somehow ugly... not so nice and cool + tap(el => { + let parent = el.parentNode + while (parent && !(parent instanceof HTMLDetailsElement)) // TODO: put this into a FUNCTION! + parent = parent.parentNode + + /* If there's a details tag, open it */ + if (parent && !parent.open) { + parent.open = true + + /* Hack: force reload for repositioning */ // TODO. what happens here!? + const hash = location.hash + location.hash = " " + location.hash = hash // tslint:disable-line + // TODO: setLocationHash() + forceLocationHashChange + } + }) + ) + .subscribe() + +// ---------------------------------------------------------------------------- + +// setupAnchorToggle? +const drawerToggle = getElement("[data-md-toggle=drawer]")! +const searchToggle = getElement("[data-md-toggle=search]")! + +/* Listener: close drawer when anchor links are clicked */ +hash$ + .pipe( + tap(() => setToggle(drawerToggle, false)) + ) + .subscribe() + +/* Listener: open search on focus */ +const query = getElement("[data-md-component=query]")! +if (query) { + fromEvent(query, "focus") + .pipe( + tap(() => setToggle(searchToggle, true)) + ) + .subscribe() +} + +/* Listener: focus input after opening search */ +fromEvent(searchToggle, "change") + .pipe( + filter(() => searchToggle.checked), + delay(400), + tap(() => query.focus()) + ) + .subscribe() + +// data-md-toggle! +function setToggle(toggle: HTMLInputElement, active: boolean): void { + if (toggle.checked !== active) { + toggle.checked = active + toggle.dispatchEvent(new CustomEvent("change")) + } } // ---------------------------------------------------------------------------- -export function app(config: any) { - console.log("called app") +// Asynchronously load a document +function load(url: string) { + + const options: AjaxRequest = { + responseType: "document", + withCredentials: true + } // TODO: remove favicon from source!? patch... + + return ajax({ url, ...options }) + .pipe( + map(({ response }) => { + if (!(response instanceof Document)) // TODO: what to do in case of error? + throw Error("Unknown error...") + + return response + }) + ) +} + +// ---------------------------------------------------------------------------- + +// function isLocal(el: HTMLAnchorElement): boolean { +// return /(:\/\/|^#[^\/]+$)/.test(el.getAttribute("href")!) +// } + +export function app(config: any) { + console.log("called app with", config) } diff --git a/src/assets/javascripts/utilities/index.ts b/src/assets/javascripts/utilities/index.ts index 1bc6f9039..c587c7fa9 100644 --- a/src/assets/javascripts/utilities/index.ts +++ b/src/assets/javascripts/utilities/index.ts @@ -1,64 +1 @@ -/* - * Copyright (c) 2016-2019 Martin Donath - * - * 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, OperatorFunction, pipe } from "rxjs" -import { switchMap } from "rxjs/operators" - -/* ---------------------------------------------------------------------------- - * Functions - * ------------------------------------------------------------------------- */ - -/** - * Convert a collection to an array - * - * @template T - Element type - * - * @param collection - Collection or node list - * - * @return Array of elements - */ -export function toArray< - T extends HTMLElement ->(collection: HTMLCollection | NodeListOf): T[] { - return Array.from(collection) as T[] -} - -/* ---------------------------------------------------------------------------- - * Operators - * ------------------------------------------------------------------------- */ - -/** - * Switch to another observable, if toggle is active - * - * @template T - Observable value type - * - * @param project - Project function - * - * @return Observable, if toggle is active - */ -export function toggle( - project: () => Observable -): OperatorFunction { - return pipe( - switchMap(active => active ? project() : NEVER) - ) -} +export * from "./other" diff --git a/src/assets/javascripts/utilities/other/index.ts b/src/assets/javascripts/utilities/other/index.ts new file mode 100644 index 000000000..1bc6f9039 --- /dev/null +++ b/src/assets/javascripts/utilities/other/index.ts @@ -0,0 +1,64 @@ +/* + * Copyright (c) 2016-2019 Martin Donath + * + * 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, OperatorFunction, pipe } from "rxjs" +import { switchMap } from "rxjs/operators" + +/* ---------------------------------------------------------------------------- + * Functions + * ------------------------------------------------------------------------- */ + +/** + * Convert a collection to an array + * + * @template T - Element type + * + * @param collection - Collection or node list + * + * @return Array of elements + */ +export function toArray< + T extends HTMLElement +>(collection: HTMLCollection | NodeListOf): T[] { + return Array.from(collection) as T[] +} + +/* ---------------------------------------------------------------------------- + * Operators + * ------------------------------------------------------------------------- */ + +/** + * Switch to another observable, if toggle is active + * + * @template T - Observable value type + * + * @param project - Project function + * + * @return Observable, if toggle is active + */ +export function toggle( + project: () => Observable +): OperatorFunction { + return pipe( + switchMap(active => active ? project() : NEVER) + ) +} diff --git a/src/assets/stylesheets/layout/_header.scss b/src/assets/stylesheets/layout/_header.scss index 4dfadbf09..e0f050cc4 100644 --- a/src/assets/stylesheets/layout/_header.scss +++ b/src/assets/stylesheets/layout/_header.scss @@ -133,7 +133,7 @@ // Page title & + & { - transform: translateX(px2rem(25px)); + transform: translateY(px2rem(25px)); transition: transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1), opacity 0.15s; @@ -143,7 +143,7 @@ // Adjust for RTL languages [dir="rtl"] & { - transform: translateX(px2rem(-25px)); + transform: translateY(px2rem(-25px)); } } @@ -166,7 +166,7 @@ // Show page title &[data-md-state="active"] .md-header-nav__topic { - transform: translateX(px2rem(-25px)); + transform: translateY(px2rem(-25px)); transition: transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1), opacity 0.15s; @@ -176,12 +176,12 @@ // Adjust for RTL languages [dir="rtl"] & { - transform: translateX(px2rem(25px)); + transform: translateY(px2rem(25px)); } // Page title & + .md-header-nav__topic { - transform: translateX(0); + transform: translateY(0); transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.15s; diff --git a/src/assets/stylesheets/layout/_nav.scss b/src/assets/stylesheets/layout/_nav.scss index ed9fb9614..84d5c1065 100644 --- a/src/assets/stylesheets/layout/_nav.scss +++ b/src/assets/stylesheets/layout/_nav.scss @@ -467,9 +467,7 @@ // Animation is only possible if JavaScript is available, as the max-height // property must be calculated before transitioning - &[data-md-state="animate"] { - transition: max-height 0.25s cubic-bezier(0.86, 0, 0.07, 1); - } + transition: max-height 0.25s cubic-bezier(0.86, 0, 0.07, 1); // Hide nested navigation by default .md-nav__toggle ~ & { @@ -483,14 +481,8 @@ } // Expand nested navigation, if toggle is checked - .md-nav__toggle:checked ~ &, - &[data-md-state="expand"] { + .md-nav__toggle:checked ~ & { max-height: 100%; - - // Just show for accessibility links if JavaScript is not available - .no-js & { - display: block; - } } // Hide titles for nested navigation