You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2025/05/26 11:59:28 UTC
(myfaces-tobago) branch main updated (174102e378 -> 76191c5fbd)
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a change to branch main
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
from 174102e378 build(deps): bump org.jboss.weld.servlet:weld-servlet-shaded
new a3ab7a6507 feature(demo): sidebar navigation
new 76191c5fbd build(theme): rebuild
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.../src/main/scss/demo-sidebar.scss | 7 ++-
.../src/main/ts/demo-sidebar.ts | 51 ++++++++++++++--------
.../src/main/webapp/css/demo.css | 7 ++-
.../src/main/webapp/css/demo.css.map | 2 +-
.../src/main/webapp/css/demo.min.css | 2 +-
.../src/main/webapp/css/demo.min.css.map | 2 +-
.../src/main/webapp/js/demo-sidebar.js | 44 +++++++++++--------
.../src/main/webapp/js/demo-sidebar.js.map | 2 +-
.../tobago-example-demo/src/main/webapp/js/demo.js | 44 +++++++++++--------
.../src/main/webapp/js/demo.js.map | 2 +-
10 files changed, 97 insertions(+), 66 deletions(-)
(myfaces-tobago) 02/02: build(theme): rebuild
Posted by hn...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit 76191c5fbd35ab9e2102596f86cd09fd68bb4a9c
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Mon May 26 13:48:02 2025 +0200
build(theme): rebuild
---
.../src/main/webapp/css/demo.css | 7 ++--
.../src/main/webapp/css/demo.css.map | 2 +-
.../src/main/webapp/css/demo.min.css | 2 +-
.../src/main/webapp/css/demo.min.css.map | 2 +-
.../src/main/webapp/js/demo-sidebar.js | 44 +++++++++++++---------
.../src/main/webapp/js/demo-sidebar.js.map | 2 +-
.../tobago-example-demo/src/main/webapp/js/demo.js | 44 +++++++++++++---------
.../src/main/webapp/js/demo.js.map | 2 +-
8 files changed, 62 insertions(+), 43 deletions(-)
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css b/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css
index 463d003062..350b161a8a 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css
+++ b/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css
@@ -47,15 +47,14 @@ demo-sidebar nav a {
color: var(--bs-secondary);
text-decoration: none;
padding-left: 0.5rem;
+ border-left: 2px solid transparent;
}
demo-sidebar nav a:hover {
- color: var(--bs-primary);
- border-left: 2px solid var(--bs-primary);
+ font-weight: 600;
}
demo-sidebar nav a.active {
color: var(--bs-primary);
- border-left: 2px solid var(--bs-primary);
- font-weight: 600;
+ border-left-color: var(--bs-primary);
}
demo-sidebar nav ul, demo-sidebar nav li {
list-style: none;
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css.map b/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css.map
index 8e73b8dbe4..3e3994de52 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css.map
+++ b/tobago-example/tobago-example-demo/src/main/webapp/css/demo.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/demo.scss","../../scss/demo-sidebar.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;;;ADhCN;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EA [...]
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../scss/demo.scss","../../scss/demo-sidebar.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBA;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;;AD/BN;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EA [...]
\ No newline at end of file
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/css/demo.min.css b/tobago-example/tobago-example-demo/src/main/webapp/css/demo.min.css
index 0206f31034..ec781fc06f 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/css/demo.min.css
+++ b/tobago-example/tobago-example-demo/src/main/webapp/css/demo.min.css
@@ -1,2 +1,2 @@
-demo-sidebar{display:block;position:fixed;overflow-y:auto;padding:1rem;margin-right:.5rem}demo-sidebar nav>ul{padding-left:0}demo-sidebar nav ul ul{padding-left:1rem}demo-sidebar nav a{color:var(--bs-secondary);text-decoration:none;padding-left:.5rem}demo-sidebar nav a:hover{color:var(--bs-primary);border-left:2px solid var(--bs-primary)}demo-sidebar nav a.active{color:var(--bs-primary);border-left:2px solid var(--bs-primary);font-weight:600}demo-sidebar nav li,demo-sidebar nav ul{list-s [...]
+demo-sidebar{display:block;position:fixed;overflow-y:auto;padding:1rem;margin-right:.5rem}demo-sidebar nav>ul{padding-left:0}demo-sidebar nav ul ul{padding-left:1rem}demo-sidebar nav a{color:var(--bs-secondary);text-decoration:none;padding-left:.5rem;border-left:2px solid transparent}demo-sidebar nav a:hover{font-weight:600}demo-sidebar nav a.active{color:var(--bs-primary);border-left-color:var(--bs-primary)}demo-sidebar nav li,demo-sidebar nav ul{list-style:none}.hide-navigation{display [...]
/*# sourceMappingURL=demo.min.css.map */
\ No newline at end of file
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/css/demo.min.css.map b/tobago-example/tobago-example-demo/src/main/webapp/css/demo.min.css.map
index 5023f04270..b50b00d27a 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/css/demo.min.css.map
+++ b/tobago-example/tobago-example-demo/src/main/webapp/css/demo.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["src/main/webapp/css/demo.css"],"names":[],"mappings":"AAgCA,aACE,QAAS,MACT,SAAU,MACV,WAAY,KACZ,QAAS,KACT,aAAc,MAEhB,oBACE,aAAc,EAEhB,uBACE,aAAc,KAEhB,mBACE,MAAO,oBACP,gBAAiB,KACjB,aAAc,MAEhB,yBACE,MAAO,kBACP,YAAa,IAAI,MAAM,kBAEzB,0BACE,MAAO,kBACP,YAAa,IAAI,MAAM,kBACvB,YAAa,IAEM,oBAArB,oBACE,WAAY,KAGd,iBACE,QAAS,KAGX,gBACE,wBAAyB,EACzB,OAAQ,KAGV,YACE,WAAY,EAAE,EAAE,IAAI,IAAI,qBAG1B,eACE,iBAAkB,KAGpB,iCACE,OAAQ,IAAI,MAAM,KAGpB,MACE,iBAAkB,QAGpB,qBACE,OAAQ,MACR,OAAQ [...]
\ No newline at end of file
+{"version":3,"sources":["src/main/webapp/css/demo.css"],"names":[],"mappings":"AAgCA,aACE,QAAS,MACT,SAAU,MACV,WAAY,KACZ,QAAS,KACT,aAAc,MAEhB,oBACE,aAAc,EAEhB,uBACE,aAAc,KAEhB,mBACE,MAAO,oBACP,gBAAiB,KACjB,aAAc,MACd,YAAa,IAAI,MAAM,YAEzB,yBACE,YAAa,IAEf,0BACE,MAAO,kBACP,kBAAmB,kBAEA,oBAArB,oBACE,WAAY,KAGd,iBACE,QAAS,KAGX,gBACE,wBAAyB,EACzB,OAAQ,KAGV,YACE,WAAY,EAAE,EAAE,IAAI,IAAI,qBAG1B,eACE,iBAAkB,KAGpB,iCACE,OAAQ,IAAI,MAAM,KAGpB,MACE,iBAAkB,QAGpB,qBACE,OAAQ,MACR,OAAQ,IAAI,MAAM,KAClB,cAAe, [...]
\ No newline at end of file
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/js/demo-sidebar.js b/tobago-example/tobago-example-demo/src/main/webapp/js/demo-sidebar.js
index 6639864172..4378454beb 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/js/demo-sidebar.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/js/demo-sidebar.js
@@ -38,13 +38,15 @@ export class Sidebar extends HTMLElement {
};
this.buildSectionTree(this.rootSection, this.sectionTree);
this.renderTableOfContent(this.sectionTree, this.tableOfContentsNav);
- this.updateActiveNavLink();
+ this.updateActiveNavLinks();
this.scrollEventListener = this.scrollEvent.bind(this);
window.addEventListener("scroll", this.scrollEventListener);
+ this.resizeEventListener = this.resizeEvent.bind(this);
+ window.addEventListener("resize", this.resizeEventListener);
}
disconnectedCallback() {
window.removeEventListener("scroll", this.scrollEventListener);
- window.clearTimeout(this.scrollTimeout);
+ window.removeEventListener("resize", this.resizeEventListener);
}
buildSectionTree(element, parent) {
for (const child of element.children) {
@@ -88,28 +90,36 @@ export class Sidebar extends HTMLElement {
return div.innerText;
}
scrollEvent(event) {
- window.clearTimeout(this.scrollTimeout);
- this.scrollTimeout = window.setTimeout(() => this.updateActiveNavLink(), 10);
+ requestAnimationFrame(() => this.updateActiveNavLinks());
}
- updateActiveNavLink() {
+ resizeEvent(event) {
+ requestAnimationFrame(() => this.updateActiveNavLinks());
+ }
+ updateActiveNavLinks() {
const scrollPaddingTop = parseFloat(this.rootHtml.style.scrollPaddingTop) + 1;
- let activeSectionId = this.rootSection.id;
- let activeSectionTop = this.rootSection.getBoundingClientRect().top;
+ const footerMarginTop = parseFloat(getComputedStyle(this.fixedFooter).marginTop);
+ const bottomBorder = this.fixedFooter.getBoundingClientRect().top - footerMarginTop;
+ const sectionIds = [this.rootSection.id];
+ const sectionTops = [this.rootSection.getBoundingClientRect().top];
+ const sectionBottoms = [this.rootSection.getBoundingClientRect().bottom];
this.rootSection.querySelectorAll("tobago-section").forEach((section) => {
- const sectionTop = section.getBoundingClientRect().top;
- if (sectionTop > activeSectionTop && sectionTop <= scrollPaddingTop) {
- activeSectionId = section.id;
- activeSectionTop = sectionTop;
- }
+ sectionIds.push(section.id);
+ const sectionRect = section.getBoundingClientRect();
+ sectionTops.push(sectionRect.top);
+ sectionBottoms.push(sectionRect.bottom);
});
- this.navLinks.forEach((navLink) => {
- if (navLink.href.endsWith("#" + activeSectionId)) {
- navLink.classList.add("active");
+ for (let i = 0; i < sectionIds.length; i++) {
+ const lastIndex = i >= sectionIds.length - 1;
+ const top = sectionTops[i];
+ const bottom = lastIndex ? sectionBottoms[i] : sectionTops[i + 1];
+ const navLink = this.tableOfContentsNav.querySelector("a[href='#" + sectionIds[i] + "']");
+ if (top > bottomBorder || bottom < scrollPaddingTop) {
+ navLink.classList.remove("active");
}
else {
- navLink.classList.remove("active");
+ navLink.classList.add("active");
}
- });
+ }
}
get rootHtml() {
const rootNode = this.getRootNode();
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/js/demo-sidebar.js.map b/tobago-example/tobago-example-demo/src/main/webapp/js/demo-sidebar.js.map
index 736c0d7603..b0b6e6bc39 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/js/demo-sidebar.js.map
+++ b/tobago-example/tobago-example-demo/src/main/webapp/js/demo-sidebar.js.map
@@ -1 +1 @@
-{"version":3,"file":"demo-sidebar.js","sourceRoot":"","sources":["../../ts/demo-sidebar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AASH,MAAM,OAAO,OAAQ,SAAQ,WAAW;IAMtC,iBAAiB;QACf,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBAC7C,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC;gBACnD,MAAM,kBAAkB,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC,CAAC;gBACvF,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,gBAAgB,GAAG,YAAY,GAAG,kBAAkB,GAAG,IAAI,CAAC;gBAChF,IA [...]
\ No newline at end of file
+{"version":3,"file":"demo-sidebar.js","sourceRoot":"","sources":["../../ts/demo-sidebar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AASH,MAAM,OAAO,OAAQ,SAAQ,WAAW;IAKtC,iBAAiB;QACf,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;gBAC7C,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC;gBACnD,MAAM,kBAAkB,GAAG,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC,CAAC;gBACvF,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,gBAAgB,GAAG,YAAY,GAAG,kBAAkB,GAAG,IAAI,CAAC;gBAChF,IA [...]
\ No newline at end of file
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/js/demo.js b/tobago-example/tobago-example-demo/src/main/webapp/js/demo.js
index 37fb373732..a393dc3c80 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/js/demo.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/js/demo.js
@@ -372,13 +372,15 @@
};
this.buildSectionTree(this.rootSection, this.sectionTree);
this.renderTableOfContent(this.sectionTree, this.tableOfContentsNav);
- this.updateActiveNavLink();
+ this.updateActiveNavLinks();
this.scrollEventListener = this.scrollEvent.bind(this);
window.addEventListener("scroll", this.scrollEventListener);
+ this.resizeEventListener = this.resizeEvent.bind(this);
+ window.addEventListener("resize", this.resizeEventListener);
}
disconnectedCallback() {
window.removeEventListener("scroll", this.scrollEventListener);
- window.clearTimeout(this.scrollTimeout);
+ window.removeEventListener("resize", this.resizeEventListener);
}
buildSectionTree(element, parent) {
for (const child of element.children) {
@@ -422,28 +424,36 @@
return div.innerText;
}
scrollEvent(event) {
- window.clearTimeout(this.scrollTimeout);
- this.scrollTimeout = window.setTimeout(() => this.updateActiveNavLink(), 10);
+ requestAnimationFrame(() => this.updateActiveNavLinks());
}
- updateActiveNavLink() {
+ resizeEvent(event) {
+ requestAnimationFrame(() => this.updateActiveNavLinks());
+ }
+ updateActiveNavLinks() {
const scrollPaddingTop = parseFloat(this.rootHtml.style.scrollPaddingTop) + 1;
- let activeSectionId = this.rootSection.id;
- let activeSectionTop = this.rootSection.getBoundingClientRect().top;
+ const footerMarginTop = parseFloat(getComputedStyle(this.fixedFooter).marginTop);
+ const bottomBorder = this.fixedFooter.getBoundingClientRect().top - footerMarginTop;
+ const sectionIds = [this.rootSection.id];
+ const sectionTops = [this.rootSection.getBoundingClientRect().top];
+ const sectionBottoms = [this.rootSection.getBoundingClientRect().bottom];
this.rootSection.querySelectorAll("tobago-section").forEach((section) => {
- const sectionTop = section.getBoundingClientRect().top;
- if (sectionTop > activeSectionTop && sectionTop <= scrollPaddingTop) {
- activeSectionId = section.id;
- activeSectionTop = sectionTop;
- }
+ sectionIds.push(section.id);
+ const sectionRect = section.getBoundingClientRect();
+ sectionTops.push(sectionRect.top);
+ sectionBottoms.push(sectionRect.bottom);
});
- this.navLinks.forEach((navLink) => {
- if (navLink.href.endsWith("#" + activeSectionId)) {
- navLink.classList.add("active");
+ for (let i = 0; i < sectionIds.length; i++) {
+ const lastIndex = i >= sectionIds.length - 1;
+ const top = sectionTops[i];
+ const bottom = lastIndex ? sectionBottoms[i] : sectionTops[i + 1];
+ const navLink = this.tableOfContentsNav.querySelector("a[href='#" + sectionIds[i] + "']");
+ if (top > bottomBorder || bottom < scrollPaddingTop) {
+ navLink.classList.remove("active");
}
else {
- navLink.classList.remove("active");
+ navLink.classList.add("active");
}
- });
+ }
}
get rootHtml() {
const rootNode = this.getRootNode();
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/js/demo.js.map b/tobago-example/tobago-example-demo/src/main/webapp/js/demo.js.map
index abb447a409..887ea389f1 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/js/demo.js.map
+++ b/tobago-example/tobago-example-demo/src/main/webapp/js/demo.js.map
@@ -1 +1 @@
-{"version":3,"file":"demo.js","sources":["demo-alert.js","demo-copy-to-clipboard.js","demo-date.js","demo-highlight.js","demo-inspect.js","demo-login.js","demo-sidebar.js","demo-test.js"],"sourcesContent":["/*\n * Licensed to the Apache Software Foundation (ASF) under one or more\n * contributor license agreements. See the NOTICE file distributed with\n * this work for additional information regarding copyright ownership.\n * The ASF licenses this file to You under the Apache License, V [...]
\ No newline at end of file
+{"version":3,"file":"demo.js","sources":["demo-alert.js","demo-copy-to-clipboard.js","demo-date.js","demo-highlight.js","demo-inspect.js","demo-login.js","demo-sidebar.js","demo-test.js"],"sourcesContent":["/*\n * Licensed to the Apache Software Foundation (ASF) under one or more\n * contributor license agreements. See the NOTICE file distributed with\n * this work for additional information regarding copyright ownership.\n * The ASF licenses this file to You under the Apache License, V [...]
\ No newline at end of file
(myfaces-tobago) 01/02: feature(demo): sidebar navigation
Posted by hn...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit a3ab7a6507fd0a1b02aae5ce24c13f9977418306
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Mon May 26 13:42:34 2025 +0200
feature(demo): sidebar navigation
Every section visible should be highlighted.
---
.../src/main/scss/demo-sidebar.scss | 7 ++-
.../src/main/ts/demo-sidebar.ts | 51 ++++++++++++++--------
2 files changed, 35 insertions(+), 23 deletions(-)
diff --git a/tobago-example/tobago-example-demo/src/main/scss/demo-sidebar.scss b/tobago-example/tobago-example-demo/src/main/scss/demo-sidebar.scss
index 96b890a091..ba8bfbb764 100644
--- a/tobago-example/tobago-example-demo/src/main/scss/demo-sidebar.scss
+++ b/tobago-example/tobago-example-demo/src/main/scss/demo-sidebar.scss
@@ -35,16 +35,15 @@ demo-sidebar {
color: var(--bs-secondary);
text-decoration: none;
padding-left: 0.5rem;
+ border-left: 2px solid transparent;
&:hover {
- color: var(--bs-primary);
- border-left: 2px solid var(--bs-primary);
+ font-weight: 600;
}
&.active {
color: var(--bs-primary);
- border-left: 2px solid var(--bs-primary);
- font-weight: 600;
+ border-left-color: var(--bs-primary);
}
}
diff --git a/tobago-example/tobago-example-demo/src/main/ts/demo-sidebar.ts b/tobago-example/tobago-example-demo/src/main/ts/demo-sidebar.ts
index 83bdb3bff9..8f697099b0 100644
--- a/tobago-example/tobago-example-demo/src/main/ts/demo-sidebar.ts
+++ b/tobago-example/tobago-example-demo/src/main/ts/demo-sidebar.ts
@@ -24,9 +24,8 @@ interface SectionNode {
export class Sidebar extends HTMLElement {
private sectionTree: SectionNode;
- private scrollThrottleTimeout?: number;
private scrollEventListener;
- private scrollTimeout: number;
+ private resizeEventListener;
connectedCallback(): void {
if (this.fixedHeader) {
@@ -53,15 +52,18 @@ export class Sidebar extends HTMLElement {
};
this.buildSectionTree(this.rootSection, this.sectionTree);
this.renderTableOfContent(this.sectionTree, this.tableOfContentsNav);
- this.updateActiveNavLink();
+ this.updateActiveNavLinks();
this.scrollEventListener = this.scrollEvent.bind(this);
window.addEventListener("scroll", this.scrollEventListener);
+
+ this.resizeEventListener = this.resizeEvent.bind(this);
+ window.addEventListener("resize", this.resizeEventListener);
}
disconnectedCallback(): void {
window.removeEventListener("scroll", this.scrollEventListener);
- window.clearTimeout(this.scrollTimeout);
+ window.removeEventListener("resize", this.resizeEventListener);
}
private buildSectionTree(element: HTMLElement, parent: SectionNode): void {
@@ -111,30 +113,41 @@ export class Sidebar extends HTMLElement {
}
private scrollEvent(event: Event): void {
- window.clearTimeout(this.scrollTimeout);
- this.scrollTimeout = window.setTimeout(() => this.updateActiveNavLink(), 10);
+ requestAnimationFrame(() => this.updateActiveNavLinks());
+ }
+
+ private resizeEvent(event: Event): void {
+ requestAnimationFrame(() => this.updateActiveNavLinks());
}
- private updateActiveNavLink(): void {
+ private updateActiveNavLinks(): void {
const scrollPaddingTop = parseFloat(this.rootHtml.style.scrollPaddingTop) + 1;
- let activeSectionId = this.rootSection.id;
- let activeSectionTop = this.rootSection.getBoundingClientRect().top;
+ const footerMarginTop = parseFloat(getComputedStyle(this.fixedFooter).marginTop);
+ const bottomBorder = this.fixedFooter.getBoundingClientRect().top - footerMarginTop;
+ const sectionIds = [this.rootSection.id];
+ const sectionTops = [this.rootSection.getBoundingClientRect().top];
+ const sectionBottoms = [this.rootSection.getBoundingClientRect().bottom];
this.rootSection.querySelectorAll("tobago-section").forEach((section: HTMLElement) => {
- const sectionTop = section.getBoundingClientRect().top;
- if (sectionTop > activeSectionTop && sectionTop <= scrollPaddingTop) {
- activeSectionId = section.id;
- activeSectionTop = sectionTop;
- }
+ sectionIds.push(section.id);
+ const sectionRect = section.getBoundingClientRect();
+ sectionTops.push(sectionRect.top);
+ sectionBottoms.push(sectionRect.bottom);
});
- this.navLinks.forEach((navLink: HTMLAnchorElement) => {
- if (navLink.href.endsWith("#" + activeSectionId)) {
- navLink.classList.add("active");
- } else {
+ for (let i = 0; i < sectionIds.length; i++) {
+ const lastIndex = i >= sectionIds.length - 1;
+
+ const top = sectionTops[i];
+ const bottom = lastIndex ? sectionBottoms[i] : sectionTops[i + 1];
+
+ const navLink = this.tableOfContentsNav.querySelector("a[href='#" + sectionIds[i] + "']");
+ if (top > bottomBorder || bottom < scrollPaddingTop) {
navLink.classList.remove("active");
+ } else {
+ navLink.classList.add("active");
}
- });
+ }
}
get rootHtml(): HTMLElement {