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 21:27:28 UTC
(myfaces-tobago) branch main updated (3d7e4ec1bd -> 78db21fe02)
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 3d7e4ec1bd build(theme): rebuild
new 570b2da7ba feature(demo): sidebar navigation
new 78db21fe02 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:
.../tobago-example-demo/src/main/scss/demo-sidebar.scss | 1 +
.../tobago-example-demo/src/main/ts/demo-sidebar.ts | 15 ++++++++++++---
.../tobago-example-demo/src/main/webapp/css/demo.css | 1 +
.../tobago-example-demo/src/main/webapp/css/demo.css.map | 2 +-
.../tobago-example-demo/src/main/webapp/css/demo.min.css | 2 +-
.../src/main/webapp/css/demo.min.css.map | 2 +-
.../src/main/webapp/js/demo-sidebar.js | 14 +++++++++++---
.../src/main/webapp/js/demo-sidebar.js.map | 2 +-
.../tobago-example-demo/src/main/webapp/js/demo.js | 14 +++++++++++---
.../tobago-example-demo/src/main/webapp/js/demo.js.map | 2 +-
10 files changed, 41 insertions(+), 14 deletions(-)
(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 570b2da7ba918d61399ee3fdf4e21a236393c2d5
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Mon May 26 22:27:35 2025 +0200
feature(demo): sidebar navigation
The content of the sidebar should scroll with the main content.
The browser window should not scroll, if the user scrolls inside the sidebar.
---
.../tobago-example-demo/src/main/scss/demo-sidebar.scss | 1 +
.../tobago-example-demo/src/main/ts/demo-sidebar.ts | 15 ++++++++++++---
2 files changed, 13 insertions(+), 3 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 ba8bfbb764..377b7d1960 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
@@ -21,6 +21,7 @@ demo-sidebar {
overflow-y: auto;
padding: 1rem;
margin-right: 0.5rem;
+ overscroll-behavior: none;
nav {
> ul {
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 8f697099b0..134f5ce6d1 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
@@ -113,7 +113,10 @@ export class Sidebar extends HTMLElement {
}
private scrollEvent(event: Event): void {
- requestAnimationFrame(() => this.updateActiveNavLinks());
+ requestAnimationFrame(() => {
+ this.updateActiveNavLinks();
+ this.updateTableOfContentsScrollPosition();
+ });
}
private resizeEvent(event: Event): void {
@@ -150,6 +153,12 @@ export class Sidebar extends HTMLElement {
}
}
+ private updateTableOfContentsScrollPosition(): void {
+ const activeNavLinks = this.activeNavLinks;
+ const centerIndex = Math.floor(activeNavLinks.length / 2);
+ activeNavLinks.item(centerIndex).scrollIntoView({block: "center", behavior: "smooth"});
+ }
+
get rootHtml(): HTMLElement {
const rootNode = this.getRootNode() as ShadowRoot | Document;
return rootNode.querySelector<HTMLElement>("html");
@@ -170,8 +179,8 @@ export class Sidebar extends HTMLElement {
return rootNode.getElementById("tableOfContents");
}
- get navLinks(): NodeListOf<HTMLAnchorElement> {
- return this.tableOfContentsNav.querySelectorAll("a");
+ get activeNavLinks(): NodeListOf<HTMLAnchorElement> {
+ return this.tableOfContentsNav.querySelectorAll("a.active");
}
get fixedFooter(): HTMLElement | null {
(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 78db21fe022e433acea22961b21b329bb7ad5d78
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Mon May 26 22:57:50 2025 +0200
build(theme): rebuild
---
.../tobago-example-demo/src/main/webapp/css/demo.css | 1 +
.../tobago-example-demo/src/main/webapp/css/demo.css.map | 2 +-
.../tobago-example-demo/src/main/webapp/css/demo.min.css | 2 +-
.../src/main/webapp/css/demo.min.css.map | 2 +-
.../tobago-example-demo/src/main/webapp/js/demo-sidebar.js | 14 +++++++++++---
.../src/main/webapp/js/demo-sidebar.js.map | 2 +-
.../tobago-example-demo/src/main/webapp/js/demo.js | 14 +++++++++++---
.../tobago-example-demo/src/main/webapp/js/demo.js.map | 2 +-
8 files changed, 28 insertions(+), 11 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 350b161a8a..8ac0a86ee5 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
@@ -36,6 +36,7 @@ demo-sidebar {
overflow-y: auto;
padding: 1rem;
margin-right: 0.5rem;
+ overscroll-behavior: none;
}
demo-sidebar nav > ul {
padding-left: 0;
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 3e3994de52..921b2b9f7b 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;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
+{"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;EACA;;AAGE;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;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
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 ec781fc06f..7ac42a7aec 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;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 [...]
+demo-sidebar{display:block;position:fixed;overflow-y:auto;padding:1rem;margin-right:.5rem;overscroll-behavior:none}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 [...]
/*# 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 b50b00d27a..e3de79c1a8 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,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
+{"version":3,"sources":["src/main/webapp/css/demo.css"],"names":[],"mappings":"AAgCA,aACE,QAAS,MACT,SAAU,MACV,WAAY,KACZ,QAAS,KACT,aAAc,MACd,oBAAqB,KAEvB,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 [...]
\ 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 4378454beb..819aebd6da 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
@@ -90,7 +90,10 @@ export class Sidebar extends HTMLElement {
return div.innerText;
}
scrollEvent(event) {
- requestAnimationFrame(() => this.updateActiveNavLinks());
+ requestAnimationFrame(() => {
+ this.updateActiveNavLinks();
+ this.updateTableOfContentsScrollPosition();
+ });
}
resizeEvent(event) {
requestAnimationFrame(() => this.updateActiveNavLinks());
@@ -121,6 +124,11 @@ export class Sidebar extends HTMLElement {
}
}
}
+ updateTableOfContentsScrollPosition() {
+ const activeNavLinks = this.activeNavLinks;
+ const centerIndex = Math.floor(activeNavLinks.length / 2);
+ activeNavLinks.item(centerIndex).scrollIntoView({ block: "center", behavior: "smooth" });
+ }
get rootHtml() {
const rootNode = this.getRootNode();
return rootNode.querySelector("html");
@@ -137,8 +145,8 @@ export class Sidebar extends HTMLElement {
const rootNode = this.getRootNode();
return rootNode.getElementById("tableOfContents");
}
- get navLinks() {
- return this.tableOfContentsNav.querySelectorAll("a");
+ get activeNavLinks() {
+ return this.tableOfContentsNav.querySelectorAll("a.active");
}
get fixedFooter() {
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 b0b6e6bc39..c1b06bb5cd 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;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
+{"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 a393dc3c80..0514dbafc5 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
@@ -424,7 +424,10 @@
return div.innerText;
}
scrollEvent(event) {
- requestAnimationFrame(() => this.updateActiveNavLinks());
+ requestAnimationFrame(() => {
+ this.updateActiveNavLinks();
+ this.updateTableOfContentsScrollPosition();
+ });
}
resizeEvent(event) {
requestAnimationFrame(() => this.updateActiveNavLinks());
@@ -455,6 +458,11 @@
}
}
}
+ updateTableOfContentsScrollPosition() {
+ const activeNavLinks = this.activeNavLinks;
+ const centerIndex = Math.floor(activeNavLinks.length / 2);
+ activeNavLinks.item(centerIndex).scrollIntoView({ block: "center", behavior: "smooth" });
+ }
get rootHtml() {
const rootNode = this.getRootNode();
return rootNode.querySelector("html");
@@ -471,8 +479,8 @@
const rootNode = this.getRootNode();
return rootNode.getElementById("tableOfContents");
}
- get navLinks() {
- return this.tableOfContentsNav.querySelectorAll("a");
+ get activeNavLinks() {
+ return this.tableOfContentsNav.querySelectorAll("a.active");
}
get fixedFooter() {
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 887ea389f1..9a5f4697ae 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