From 06636fea6597808d3f0bc7e14842f632711d4c8d Mon Sep 17 00:00:00 2001
From: Volker Schukai <volker.schukai@schukai.com>
Date: Mon, 23 Dec 2024 18:17:29 +0100
Subject: [PATCH] fix: check rendering #271
---
development/issues/closed/271.html | 39 ++++++++++++++++++++
development/issues/closed/271.mjs | 15 ++++++++
source/components/layout/tabs.mjs | 58 ++++++++++++++++++------------
3 files changed, 89 insertions(+), 23 deletions(-)
create mode 100644 development/issues/closed/271.html
create mode 100644 development/issues/closed/271.mjs
diff --git a/development/issues/closed/271.html b/development/issues/closed/271.html
new file mode 100644
index 000000000..b0d011ddd
--- /dev/null
+++ b/development/issues/closed/271.html
@@ -0,0 +1,39 @@
+<!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>
diff --git a/development/issues/closed/271.mjs b/development/issues/closed/271.mjs
new file mode 100644
index 000000000..b608598af
--- /dev/null
+++ b/development/issues/closed/271.mjs
@@ -0,0 +1,15 @@
+/**
+* @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";
+
diff --git a/source/components/layout/tabs.mjs b/source/components/layout/tabs.mjs
index 27f39d44c..6ecd9ef2f 100644
--- a/source/components/layout/tabs.mjs
+++ b/source/components/layout/tabs.mjs
@@ -36,7 +36,7 @@ import {
findTargetElementFromEvent,
fireCustomEvent,
} from "../../dom/events.mjs";
-import {getDocument} from "../../dom/util.mjs";
+import {getDocument, getWindow} from "../../dom/util.mjs";
import {random} from "../../math/random.mjs";
import {getGlobal} from "../../types/global.mjs";
import {ID} from "../../types/id.mjs";
@@ -150,6 +150,7 @@ const resizeObserverSymbol = Symbol("resizeObserver");
* @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/271.html
*
* @since 3.74.0
* @copyright schukai GmbH
@@ -1027,35 +1028,43 @@ function calcBoxWidth(node) {
* @return {Object}
*/
function rearrangeButtons() {
- const standardButtons = [];
- const popperButtons = [];
- let sum = 0;
- const space = this[dimensionsSymbol].getVia("data.space");
+ getWindow().requestAnimationFrame(() => {
- const buttons = this.getOption("buttons.standard");
- for (const [, button] of buttons.entries()) {
- const ref = button?.reference;
+ const standardButtons = [];
+ const popperButtons = [];
+ 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) {
- popperButtons.push(clone(button));
- } else {
- standardButtons.push(clone(button));
+ sum += this[dimensionsSymbol].getVia(`data.button.${ref}`);
+
+ if (sum > space) {
+ popperButtons.push(clone(button));
+ } else {
+ standardButtons.push(clone(button));
+ }
}
- }
- this.setOption("buttons.standard", standardButtons);
- this.setOption("buttons.popper", popperButtons);
+ this.setOption("buttons.standard", standardButtons);
+ this.setOption("buttons.popper", popperButtons);
- if (this[switchElementSymbol]) {
- if (popperButtons.length > 0) {
- this[switchElementSymbol].classList.remove("hidden");
- } else {
- this[switchElementSymbol].classList.add("hidden");
+ if (this[switchElementSymbol]) {
+ if (popperButtons.length > 0) {
+ this[switchElementSymbol].classList.remove("hidden");
+ } else {
+ this[switchElementSymbol].classList.add("hidden");
+ }
}
- }
+
+ });
}
/**
@@ -1105,8 +1114,11 @@ function calculateNavigationButtonsDimensions() {
slot.classList.remove("invisible");
}
- this[dimensionsSymbol].setVia("data.calculated", true);
this.setOption("buttons.standard", clone(buttons));
+
+ getWindow().requestAnimationFrame(() => {
+ this[dimensionsSymbol].setVia("data.calculated", true);
+ });
}
/**
--
GitLab