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

fix: new getscrollparent function #297

parent 1fced597
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 242 additions and 46 deletions
development/issues/closed/297.html 0 → 100644
+ 182
− 0
View file @ eaad4aec
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>repair table-of-contents buttons for up and down #297</title>
<script src="./297.mjs" type="module"></script>
</head>
<body>
<h1>repair table-of-contents buttons for up and down #297</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/297">Issue #297</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<monster-panel style="border: 10px solid green" id="inner2" data-monster-option-heightadjustment="5">
sdfsdfsdf<br>asfdasdfasd<br>
<monster-panel style="border: 7px solid black" id="inner3" data-monster-option-heightadjustment="5">
sdfsdfsdf<br>asfdasdfasd<br>
<monster-split-panel data-monster-option-splittype="vertical">
<monster-panel style="border: 10px solid green" id="inner2" data-monster-option-heightadjustment="5" slot="start">
<h1>Start Panel</h1>
<p>Some content</p>
<p>Some content</p>
</monster-panel>
<monster-panel style="border: 10px solid green" id="inner2" data-monster-option-heightadjustment="5" slot="end">
<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>
</monster-panel>
</monster-split-panel>
</monster-panel>
</monster-panel>
</main>
</body>
</html>
development/issues/closed/297.mjs 0 → 100644
+ 18
− 0
View file @ eaad4aec
/**
* @file development/issues/open/297.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/297
* @description repair table-of-contents buttons for up and down
* @issue 297
*/
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/style/panel.pcss
+ 0
− 7
View file @ eaad4aec
......@@ -35,11 +35,4 @@
height: -moz-available;
height: stretch;
//position: fixed;
//top: 0;
//left: 0;
//right: 0;
//bottom: 0;
//overflow: auto;
//box-sizing: border-box;
}
source/components/layout/stylesheet/panel.mjs
+ 7
− 14
View file @ eaad4aec
This diff is collapsed.
source/components/navigation/style/table-of-content.pcss
+ 3
− 2
View file @ eaad4aec
@import "../../style/control.pcss";
@import "../../style/property.pcss";
@import "../../style/color.pcss";
@import "../../style/border.pcss";
......@@ -10,7 +11,7 @@
}
[data-monster-role="control"] {
box-sizing: border-box;
}
.navigation {
......@@ -30,7 +31,7 @@
cursor: pointer;
width: 20px;
transition: top 0.2s ease, visibility 0.3s ease;
transition: top 0.2s ease, right 0.3s ease, bottom 0.3s ease, left 0.3s ease, visibility 0.3s ease, opacity 0.3s ease, width 0.3s ease;
& [data-monster-role="navigation-list"] {
......
source/components/navigation/table-of-content.mjs
+ 25
− 9
View file @ eaad4aec
......@@ -188,7 +188,7 @@ class TableOfContent extends CustomElement {
);
calcAndSetNavigationTopScrollableParentContext.call(this);
}
}, 0);
}, 10);
}
/**
......@@ -339,7 +339,7 @@ function initNavigation() {
if (!this[scrollableParentSymbol]) {
return;
}
console.log(this[scrollableParentSymbol]);
this[scrollableParentSymbol].scrollTo(0, 0);
});
footer.appendChild(scrollToTop);
......@@ -518,22 +518,38 @@ function initEventHandler() {
}
/**
* Finds the nearest scrollable parent, including within Shadow DOMs.
*
* @param {HTMLElement} element
* @return {HTMLElement|Window}
* @param {HTMLElement} element - The starting element for the search.
* @return {HTMLElement|Window} - The found scrollable parent or the Window object.
*/
function findScrollableParent(element) {
let parent = element.parentElement;
// Helper function to find the next parent element, checking for Shadow DOM
function getNextParent(elem) {
// If the element is in a Shadow DOM, attempt to climb up to the host
if (elem.parentNode && elem.parentNode.host) {
return elem.parentNode.host;
} else if (elem.assignedSlot) {
// If the element is assigned to a slot, move to the slot's parent
return elem.assignedSlot.parentNode;
}
// Otherwise, climb up the regular DOM
return elem.parentElement;
}
let parent = getNextParent(element);
while (parent) {
const overflowY = getWindow().getComputedStyle(parent).overflowY;
if (overflowY === "scroll" || overflowY === "auto") {
// Check the scroll properties of the element
const overflowY = window.getComputedStyle(parent).overflowY;
if (overflowY === 'scroll' || overflowY === 'auto') {
return parent;
}
parent = parent.parentElement;
parent = getNextParent(parent); // Move to the next parent element
}
return getWindow();
return window; // Fallback if no scrollable element is found
}
/**
* @private
* @return {void}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment