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

fix: check rendering #271

parent 6bbfdd6a
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
development/issues/closed/271.html 0 → 100644
+ 39
− 0
View file @ 06636fea
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>check size calc of tabs #271</title>
<script src="271.mjs" type="module"></script>
</head>
<body>
<h1>check size calc of tabs #271</h1>
<p>When the tab is resized, it first becomes small and then large again. This causes the display to jump.</p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/271">Issue #271</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main style="width: 990px; border:1px solid red">
<monster-tabs>
<div>tab 1</div>
<div>tab 2</div>
<div data-monster-button-label="22">
<monster-tabs>
<div>tab 11</div>
<div>tab 12</div>
<div>tab 13</div>
<div>tab 14</div>
<div>tab 15</div>
</monster-tabs>
</div>
<div>tab 4</div>
<div>tab 5</div>
</monster-tabs>
</main>
</body>
</html>
development/issues/closed/271.mjs 0 → 100644
+ 15
− 0
View file @ 06636fea
/**
* @file development/issues/open/271.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/271
* @description check size calc of tabs
* @issue 271
*/
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/layout/tabs.mjs";
source/components/layout/tabs.mjs
+ 35
− 23
View file @ 06636fea
...@@ -36,7 +36,7 @@ import { ...@@ -36,7 +36,7 @@ import {
findTargetElementFromEvent, findTargetElementFromEvent,
fireCustomEvent, fireCustomEvent,
} from "../../dom/events.mjs"; } from "../../dom/events.mjs";
import {getDocument} from "../../dom/util.mjs"; import {getDocument, getWindow} from "../../dom/util.mjs";
import {random} from "../../math/random.mjs"; import {random} from "../../math/random.mjs";
import {getGlobal} from "../../types/global.mjs"; import {getGlobal} from "../../types/global.mjs";
import {ID} from "../../types/id.mjs"; import {ID} from "../../types/id.mjs";
...@@ -150,6 +150,7 @@ const resizeObserverSymbol = Symbol("resizeObserver"); ...@@ -150,6 +150,7 @@ const resizeObserverSymbol = Symbol("resizeObserver");
* @example /examples/components/layout/tabs-removable * @example /examples/components/layout/tabs-removable
* *
* @issue https://localhost.alvine.dev:8443/development/issues/closed/268.html * @issue https://localhost.alvine.dev:8443/development/issues/closed/268.html
* @issue https://localhost.alvine.dev:8443/development/issues/closed/271.html
* *
* @since 3.74.0 * @since 3.74.0
* @copyright schukai GmbH * @copyright schukai GmbH
...@@ -1027,35 +1028,43 @@ function calcBoxWidth(node) { ...@@ -1027,35 +1028,43 @@ function calcBoxWidth(node) {
* @return {Object} * @return {Object}
*/ */
function rearrangeButtons() { function rearrangeButtons() {
const standardButtons = [];
const popperButtons = [];
let sum = 0; getWindow().requestAnimationFrame(() => {
const space = this[dimensionsSymbol].getVia("data.space");
const buttons = this.getOption("buttons.standard"); const standardButtons = [];
for (const [, button] of buttons.entries()) { const popperButtons = [];
const ref = button?.reference; let sum = 0;
const space = this[dimensionsSymbol].getVia("data.space");
if (space <= 0) {
return;
}
sum += this[dimensionsSymbol].getVia(`data.button.${ref}`); const buttons = this.getOption("buttons.standard");
for (const [, button] of buttons.entries()) {
const ref = button?.reference;
if (sum > space) { sum += this[dimensionsSymbol].getVia(`data.button.${ref}`);
popperButtons.push(clone(button));
} else { if (sum > space) {
standardButtons.push(clone(button)); popperButtons.push(clone(button));
} else {
standardButtons.push(clone(button));
}
} }
}
this.setOption("buttons.standard", standardButtons); this.setOption("buttons.standard", standardButtons);
this.setOption("buttons.popper", popperButtons); this.setOption("buttons.popper", popperButtons);
if (this[switchElementSymbol]) { if (this[switchElementSymbol]) {
if (popperButtons.length > 0) { if (popperButtons.length > 0) {
this[switchElementSymbol].classList.remove("hidden"); this[switchElementSymbol].classList.remove("hidden");
} else { } else {
this[switchElementSymbol].classList.add("hidden"); this[switchElementSymbol].classList.add("hidden");
}
} }
}
});
} }
/** /**
...@@ -1105,8 +1114,11 @@ function calculateNavigationButtonsDimensions() { ...@@ -1105,8 +1114,11 @@ function calculateNavigationButtonsDimensions() {
slot.classList.remove("invisible"); slot.classList.remove("invisible");
} }
this[dimensionsSymbol].setVia("data.calculated", true);
this.setOption("buttons.standard", clone(buttons)); this.setOption("buttons.standard", clone(buttons));
getWindow().requestAnimationFrame(() => {
this[dimensionsSymbol].setVia("data.calculated", true);
});
} }
/** /**
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment