From 66ec13da2448ce68783e40f05af1ffedc01141cb Mon Sep 17 00:00:00 2001
From: squidfunk <martin.donath@squidfunk.com>
Date: Sat, 10 Mar 2018 11:03:01 +0100
Subject: [PATCH] Fixed handling of missing targets for navigation blur
---
src/assets/javascripts/components/nav-blur.ts | 20 ++++++++++++-------
1 file changed, 13 insertions(+), 7 deletions(-)
diff --git a/src/assets/javascripts/components/nav-blur.ts b/src/assets/javascripts/components/nav-blur.ts
index 5164c3f8..b0b8491d 100644
--- a/src/assets/javascripts/components/nav-blur.ts
+++ b/src/assets/javascripts/components/nav-blur.ts
@@ -43,7 +43,7 @@ import * as viewport from "../device/viewport"
*/
export interface NavBlurState extends ComponentState {
anchors: HTMLAnchorElement[] /* Anchor elements */
- targets: HTMLElement[] /* Target elements */
+ targets: Array<HTMLElement | null> /* Target elements */
index: number /* Current index */
offset: number /* Current offset */
direction: boolean /* Current scroll direction */
@@ -54,7 +54,7 @@ export interface NavBlurState extends ComponentState {
*/
export interface NavBlur {
anchor: HTMLAnchorElement /* Active anchor */
- target: HTMLElement /* Active target */
+ target: HTMLElement | null /* Active target */
}
/* ----------------------------------------------------------------------------
@@ -105,7 +105,8 @@ export function update(state: NavBlurState) {
/* Scroll direction is down */
if (state.offset <= y) {
for (let i = state.index + 1; i < anchors.length; i++) {
- if (targets[i].offsetTop - (56 + 24) <= y) { // TODO: Refactor value determination
+ const target = targets[i]
+ if (target && target.offsetTop - (48 + 12) <= y) {
if (i > 0)
anchors[i - 1].dataset.mdState = "blur"
state.index = i
@@ -117,7 +118,8 @@ export function update(state: NavBlurState) {
/* Scroll direction is up */
} else {
for (let i = state.index; i >= 0; i--) {
- if (targets[i].offsetTop - (56 + 24) > y) {
+ const target = targets[i]
+ if (target && target.offsetTop - (48 + 12) > y) {
if (i > 0)
anchors[i - 1].dataset.mdState = ""
} else {
@@ -141,6 +143,10 @@ export function update(state: NavBlurState) {
})
}
+/* ----------------------------------------------------------------------------
+ * Functions
+ * ------------------------------------------------------------------------- */
+
/**
* Component factory method
*
@@ -152,9 +158,9 @@ export function factory(
els: ArrayLike<HTMLAnchorElement>
): Component<NavBlurState, NavBlur> {
const anchors = Array.from(els)
- const targets: HTMLElement[] = anchors.reduce((result, anchor) => [
- ...result, document.getElementById(anchor.hash.substring(1)) || []
- ], [])
+ const targets = anchors.map(anchor => {
+ return document.getElementById(anchor.hash.substring(1))
+ })
return {
initial: { ...initial, anchors, targets }, create, destroy, update
}
--
GitLab