Skip to content
Snippets Groups Projects
Verified Commit 711b178d authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

fix: new algorithm for calculating the position of the toc control. #231

parent 52dc4142
Branches
Tags
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 644 additions and 354 deletions
CHANGELOG.md
+ 1
− 4
View file @ 711b178d
# Changelog # Changelog
## [3.73.6] - 2024-07-31 ## [3.73.6] - 2024-07-31
### Bug Fixes ### Bug Fixes
...@@ -9,12 +7,11 @@ ...@@ -9,12 +7,11 @@
- repair url in tests [#230](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/230) - repair url in tests [#230](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/230)
- improvement of the tree menu to avoid recursion. [#230](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/230) - improvement of the tree menu to avoid recursion. [#230](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/230)
## [3.73.5] - 2024-07-02 ## [3.73.5] - 2024-07-02
### Bug Fixes ### Bug Fixes
- originValues in the save button is now reset. - originValues in the save button control is now reset.
## [3.73.4] - 2024-07-02 ## [3.73.4] - 2024-07-02
......
development/issues/open/231.html 0 → 100644
+ 266
− 0
View file @ 711b178d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The content control table of contents does not scroll with the content. #231</title>
<script src="./231.mjs" type="module"></script>
</head>
<body>
<h1>The content control table of contents does not scroll with the content. #231</h1>
<p>you can see it on monsterjs.org. you click on a point and the page scrolls down. so far so good. but the control should scroll with it.</p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/231">Issue #231</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
<main style="display:block;height:500px">
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
<div style="display:flex;height:400px;overflow:auto">
<monster-table-of-content>
<div style="padding:45px">
<h1>Headline 1</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h2>Hedline 2-1</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h2>Hedline 2-2</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h2>Hedline 2-3</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h3>Hedline 3-1</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<ul>
<li>This is a css test list</li>
<li>This is a css test list</li>
<li>This is a css test list</li>
</ul>
<h3>Hedline 3-2</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<h2>Hedline 2-4</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<hr>
<p><strong>ENDE</strong></p>
</div>
</monster-table-of-content>
</div>
<div style="display: block;clear: both;">sdfasdf
<hr>
</div>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br> sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
sdfaasdf<br>
</body>
</html>
development/issues/open/231.mjs 0 → 100644
+ 17
− 0
View file @ 711b178d
/**
* @file development/issues/open/231.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/231
* @description The content control table of contents does not scroll with the content.
* @issue 231
*/
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/link.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/theme.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/navigation/table-of-content.mjs";
import "../../../source/components/layout/panel.mjs";
import "../../../source/components/layout/split-panel.mjs";
source/components/layout/popper.mjs
+ 317
− 318
View file @ 711b178d
...@@ -28,7 +28,6 @@ import { getDocument } from "../../dom/util.mjs"; ...@@ -28,7 +28,6 @@ import { getDocument } from "../../dom/util.mjs";
import {DeadMansSwitch} from "../../util/deadmansswitch.mjs"; import {DeadMansSwitch} from "../../util/deadmansswitch.mjs";
import {STYLE_DISPLAY_MODE_BLOCK} from "../form/constants.mjs"; import {STYLE_DISPLAY_MODE_BLOCK} from "../form/constants.mjs";
import {positionPopper} from "../form/util/floating-ui.mjs"; import {positionPopper} from "../form/util/floating-ui.mjs";
import { CustomControl } from "../../dom/customcontrol.mjs";
import {PopperStyleSheet} from "./stylesheet/popper.mjs"; import {PopperStyleSheet} from "./stylesheet/popper.mjs";
import {isArray} from "../../types/is.mjs"; import {isArray} from "../../types/is.mjs";
...@@ -130,7 +129,7 @@ class Popper extends CustomElement { ...@@ -130,7 +129,7 @@ class Popper extends CustomElement {
content: "<slot></slot>", content: "<slot></slot>",
popper: { popper: {
placement: "top", placement: "top",
middleware: ["autoPlacement", "offset:10", "arrow"], middleware: ["autoPlacement", "shift", "offset:15", "arrow"],
}, },
features: { features: {
preventOpenEventSent: false, preventOpenEventSent: false,
......
source/components/navigation/style/table-of-content.pcss
+ 5
− 0
View file @ 711b178d
...@@ -6,6 +6,11 @@ ...@@ -6,6 +6,11 @@
:host { :host {
box-sizing: border-box; box-sizing: border-box;
height: fit-content;
}
[data-monster-role="control"] {
} }
.navigation { .navigation {
......
source/components/navigation/table-of-content.mjs
+ 31
− 18
View file @ 711b178d
...@@ -160,12 +160,22 @@ class TableOfContent extends CustomElement { ...@@ -160,12 +160,22 @@ class TableOfContent extends CustomElement {
this[scrollableParentSymbol] = findScrollableParent(this); this[scrollableParentSymbol] = findScrollableParent(this);
if (this[scrollableParentSymbol] === getWindow()) { if (this[scrollableParentSymbol] === getWindow()) {
if(["absolute", "relative", "fixed", "sticky"].indexOf(this[scrollableParentSymbol].style.position) === -1) {
this.style.position = "relative";
}
this[scrollableParentSymbol].addEventListener( this[scrollableParentSymbol].addEventListener(
"scroll", "scroll",
this[windowEventHandlerSymbol], this[windowEventHandlerSymbol],
); );
calcAndSetNavigationTopWindowContext.call(this); calcAndSetNavigationTopWindowContext.call(this);
} else { } else {
if(["absolute", "relative", "fixed", "sticky"].indexOf(this[scrollableParentSymbol].style.position) === -1) {
this[scrollableParentSymbol].style.position = "relative";
}
this[scrollableParentSymbol].addEventListener( this[scrollableParentSymbol].addEventListener(
"scroll", "scroll",
this[scrollableEventHandlerSymbol], this[scrollableEventHandlerSymbol],
...@@ -219,15 +229,23 @@ class TableOfContent extends CustomElement { ...@@ -219,15 +229,23 @@ class TableOfContent extends CustomElement {
* @fires new-top - The new top position * @fires new-top - The new top position
*/ */
function calcAndSetNavigationTopWindowContext() { function calcAndSetNavigationTopWindowContext() {
const thisTop = this.getBoundingClientRect().top; const rect = this.getBoundingClientRect();
const topViewport = window.scrollY; const thisTop = rect.top;
let top = Math.max(topViewport, thisTop); const thisBottom = rect.bottom;
let top = 0;
if (thisTop < 0) {
top = + (-1*thisTop);
}
const offset = this.getOption("offset"); const offset = this.getOption("offset");
if (offset > 0) { if (offset > 0) {
top += offset; top += offset;
} }
if (thisBottom<0) {
return;
}
fireCustomEvent(this, "new-top", { top: top }); fireCustomEvent(this, "new-top", { top: top });
this[navigationElementSymbol].style.top = top + "px"; this[navigationElementSymbol].style.top = top + "px";
...@@ -239,29 +257,24 @@ function calcAndSetNavigationTopWindowContext() { ...@@ -239,29 +257,24 @@ function calcAndSetNavigationTopWindowContext() {
* @fires new-top - The new top position * @fires new-top - The new top position
*/ */
function calcAndSetNavigationTopScrollableParentContext() { function calcAndSetNavigationTopScrollableParentContext() {
if (!this[scrollableParentSymbol]) { if (!this[scrollableParentSymbol]) {
return; return;
} }
const windowTop = getWindow().scrollY;
const thisRect = this.getBoundingClientRect();
const thisTop = thisRect.top;
const thisBottom = thisRect.bottom;
const scrollTop = this[scrollableParentSymbol].scrollTop; const scrollTop = this[scrollableParentSymbol].scrollTop;
let top = windowTop + thisTop + scrollTop; const thisTop = scrollTop;
let top = 0;
top+=scrollTop;
console.log(thisTop,scrollTop)
const offset = this.getOption("offset"); const offset = this.getOption("offset");
if (offset > 0) { if (offset > 0) {
top += offset; top += offset;
} }
if (thisBottom + 50 < top || top < thisTop + 50) {
this[navigationElementSymbol].style.visibility = "hidden";
} else {
this[navigationElementSymbol].style.visibility = "visible";
}
fireCustomEvent(this, "new-top", { top: top }); fireCustomEvent(this, "new-top", { top: top });
this[navigationElementSymbol].style.top = top + "px"; this[navigationElementSymbol].style.top = top + "px";
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment