Replaced getComputedStyle with bounding box values

This commit is contained in:
squidfunk 2020-03-15 16:19:36 +01:00
parent 9f069ad47e
commit 825eeae70c
14 changed files with 28 additions and 40 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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,10 +1,10 @@
{
"assets/javascripts/bundle.js": "assets/javascripts/bundle.94ba1295.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.94ba1295.min.js.map",
"assets/javascripts/vendor.js": "assets/javascripts/vendor.f33cd904.min.js",
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.f33cd904.min.js.map",
"assets/javascripts/bundle.js": "assets/javascripts/bundle.7a912663.min.js",
"assets/javascripts/bundle.js.map": "assets/javascripts/bundle.7a912663.min.js.map",
"assets/javascripts/vendor.js": "assets/javascripts/vendor.daf35bb7.min.js",
"assets/javascripts/vendor.js.map": "assets/javascripts/vendor.daf35bb7.min.js.map",
"assets/javascripts/worker/search.js": "assets/javascripts/worker/search.784c5235.min.js",
"assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.784c5235.min.js.map",
"assets/stylesheets/main.css": "assets/stylesheets/main.4e5ff6db.min.css",
"assets/stylesheets/main.css": "assets/stylesheets/main.4b1ae2ca.min.css",
"assets/stylesheets/palette.css": "assets/stylesheets/palette.31180ff2.min.css"
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -41,7 +41,7 @@
{% endif %}
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.4e5ff6db.min.css' | url }}">
<link rel="stylesheet" href="{{ 'assets/stylesheets/main.4b1ae2ca.min.css' | url }}">
{% if palette.primary or palette.accent %}
<link rel="stylesheet" href="{{ 'assets/stylesheets/palette.31180ff2.min.css' | url }}">
{% endif %}
@ -177,8 +177,8 @@
<script>var __config={}</script>
{% endblock %}
{% block scripts %}
<script src="{{ 'assets/javascripts/vendor.f33cd904.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.94ba1295.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/vendor.daf35bb7.min.js' | url }}"></script>
<script src="{{ 'assets/javascripts/bundle.7a912663.min.js' | url }}"></script>
{%- set translations = {} -%}
{%- for key in [
"clipboard.copy",

View File

@ -87,10 +87,10 @@ export function watchMain(
/* Compute the main area's top and bottom markers */
const marker$ = watchElementSize(el)
.pipe(
map(({ height }) => [
el.offsetTop,
el.offsetTop + height
]),
map(({ height }) => ({
top: el.offsetTop,
bottom: el.offsetTop + height
})),
distinctUntilChanged(),
shareReplay(1)
)
@ -98,7 +98,7 @@ export function watchMain(
/* Compute the main area's visible height */
const height$ = combineLatest([adjust$, marker$, viewport$])
.pipe(
map(([header, [top, bottom], { offset: { y }, size: { height } }]) => {
map(([header, { top, bottom }, { offset: { y }, size: { height } }]) => {
return height
- Math.max(0, top - y, header)
- Math.max(0, height + y - bottom)
@ -110,14 +110,14 @@ export function watchMain(
/* Compute whether the viewport offset is past the main area's top */
const active$ = combineLatest([adjust$, marker$, viewport$])
.pipe(
map(([header, [top], { offset: { y } }]) => y >= top - header),
map(([header, { top }, { offset: { y } }]) => y >= top - header),
distinctUntilChanged()
)
/* Combine into a single observable */
return combineLatest([adjust$, marker$, height$, active$])
.pipe(
map(([header, [top], height, active]) => ({
map(([header, { top }, height, active]) => ({
offset: top - header,
height,
active

View File

@ -25,11 +25,11 @@ import {
Observable,
animationFrameScheduler,
combineLatest,
of,
pipe
} from "rxjs"
import {
distinctUntilChanged,
distinctUntilKeyChanged,
finalize,
map,
observeOn,
@ -90,19 +90,11 @@ interface ApplyOptions {
export function watchSidebar(
el: HTMLElement, { main$, viewport$ }: WatchOptions
): Observable<Sidebar> {
/* Adjust for internal main area offset */
const adjust$ = viewport$
.pipe(
distinctUntilKeyChanged("size"),
map(() => parseFloat(
getComputedStyle(el.parentElement!)
.getPropertyValue("padding-top")
)),
distinctUntilChanged()
)
const inner = el.parentElement!
const outer = inner.parentElement!
/* Compute the sidebar's available height */
const adjust$ = of(inner.offsetTop - outer.offsetTop)
const height$ = viewport$
.pipe(
withLatestFrom(adjust$, main$),

View File

@ -111,11 +111,7 @@ hr {
// Increase top spacing of content area to give typography more room
&__inner {
height: 100%;
padding-top: px2rem(24px + 6px);
// Hack: induce margin-collapse, because otherwise the sidebar height is
// not calculated correctly and the overflow property on this element must
// be left in initial state for targetted link offsets to work properly
padding-bottom: px2rem(1px);
margin-top: px2rem(24px + 6px);
}
}