@schukai/monster 4.144.0 → 4.145.0

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.144.0"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.145.0"}

package/source/components/form/control-bar.mjs

@@ -193,6 +193,19 @@ const ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT =
 const ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT_CONTAINER =
 	"data-monster-option-layout-stacked-breakpoint-container";
 
+/**
+ * @private
+ * @type {string}
+ */
+const ATTRIBUTE_OPTION_LAYOUT_HIDE_WHEN_EMPTY =
+	"data-monster-option-layout-hide-when-empty";
+
+/**
+ * @private
+ * @type {string}
+ */
+const ATTRIBUTE_AUTO_HIDDEN_EMPTY = "data-monster-empty-hidden";
+
 /**
  * @private
  * @type {string}
@@ -250,6 +263,7 @@ class ControlBar extends CustomElement {
 				stackedAlignment: undefined,
 				stackedBreakpoint: undefined,
 				stackedBreakpointContainer: undefined,
+				hideWhenEmpty: false,
 			},
 			popper: {
 				placement: "left",
@@ -309,7 +323,8 @@ class ControlBar extends CustomElement {
 			path === "layout.alignment" ||
 			path === "layout.stackedAlignment" ||
 			path === "layout.stackedBreakpoint" ||
-			path === "layout.stackedBreakpointContainer"
+			path === "layout.stackedBreakpointContainer" ||
+			path === "layout.hideWhenEmpty"
 		) {
 			syncLayoutState.call(this, {
 				observe: path === "layout.stackedBreakpointContainer",
@@ -366,6 +381,7 @@ class ControlBar extends CustomElement {
 		attributes.push(ATTRIBUTE_OPTION_LAYOUT_STACKED_ALIGNMENT);
 		attributes.push(ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT);
 		attributes.push(ATTRIBUTE_OPTION_LAYOUT_STACKED_BREAKPOINT_CONTAINER);
+		attributes.push(ATTRIBUTE_OPTION_LAYOUT_HIDE_WHEN_EMPTY);
 		return attributes;
 	}
 
@@ -572,6 +588,11 @@ function initEventHandler() {
 		syncLayoutState.call(self, { observe: true });
 	};
 
+	self[attributeObserverSymbol][ATTRIBUTE_OPTION_LAYOUT_HIDE_WHEN_EMPTY] =
+		() => {
+			syncLayoutState.call(self);
+		};
+
 	self[resizeObserverSymbol] = new ResizeObserver((entries) => {
 		if (self[layoutStateSymbol]?.suppressResize) {
 			return;
@@ -655,6 +676,8 @@ function runLayout() {
 	state.running = true;
 
 	new Processing(() => {
+		syncEmptyVisibility.call(this);
+
 		if (needsObserve) {
 			updateResizeObserverObservation.call(this);
 		}
@@ -845,6 +868,97 @@ function rearrangeItems() {
 	if (!shouldShowSwitch) {
 		hide.call(this);
 	}
+	syncEmptyVisibility.call(this);
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function syncEmptyVisibility() {
+	if (this.getOption("layout.hideWhenEmpty", false) !== true) {
+		clearEmptyVisibilityState.call(this);
+		return;
+	}
+
+	if (hasVisibleControlItem.call(this)) {
+		clearEmptyVisibilityState.call(this);
+		return;
+	}
+
+	if (this.hasAttribute(ATTRIBUTE_AUTO_HIDDEN_EMPTY)) {
+		return;
+	}
+
+	if (this.hasAttribute("hidden")) {
+		return;
+	}
+
+	this.setAttribute("hidden", "");
+	this.setAttribute(ATTRIBUTE_AUTO_HIDDEN_EMPTY, "");
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function clearEmptyVisibilityState() {
+	if (this.hasAttribute(ATTRIBUTE_AUTO_HIDDEN_EMPTY)) {
+		this.removeAttribute(ATTRIBUTE_AUTO_HIDDEN_EMPTY);
+		if (this.hasAttribute("hidden")) {
+			this.removeAttribute("hidden");
+		}
+	}
+}
+
+/**
+ * @private
+ * @return {boolean}
+ */
+function hasVisibleControlItem() {
+	return getControlItems.call(this).some((item) => {
+		return isControlItemVisible.call(this, item);
+	});
+}
+
+/**
+ * @private
+ * @return {HTMLElement[]}
+ */
+function getControlItems() {
+	return Array.from(this.children).filter((item) => {
+		if (!(item instanceof HTMLElement)) {
+			return false;
+		}
+		return item.slot === "" || item.slot === "popper";
+	});
+}
+
+/**
+ * @private
+ * @param {HTMLElement} item
+ * @return {boolean}
+ */
+function isControlItemVisible(item) {
+	if (isControlBarSpacerElement(item) || isElementSelfHidden(item)) {
+		return false;
+	}
+
+	const computedStyle = getComputedStyle(item);
+	if (computedStyle.opacity === "0") {
+		return false;
+	}
+
+	const containedControls = getContainedControlElements(item);
+	if (containedControls.length === 0) {
+		return true;
+	}
+
+	return containedControls.some((control) => {
+		return (
+			!isElementSelfHidden(control) && getComputedStyle(control).opacity !== "0"
+		);
+	});
 }
 
 /**

package/test/cases/components/form/button-bar.mjs

@@ -6,6 +6,8 @@ import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
 let expect = chai.expect;
 chai.use(chaiDom);
 
+const waitForLayout = () => new Promise((resolve) => setTimeout(resolve, 120));
+
 const html = `
   <div id="test1">
     <monster-button-bar id="bar"></monster-button-bar>
@@ -80,6 +82,112 @@ describe("ButtonBar", function () {
     }, 50);
   });
 
+  it("should hide an empty button bar when configured to hide empty bars", async function () {
+    const mocks = document.getElementById("mocks");
+    mocks.innerHTML = `
+      <monster-button-bar
+        id="empty-auto-hidden-button-bar"
+        data-monster-option-layout-hide-when-empty="true"
+      ></monster-button-bar>
+    `;
+    const bar = document.getElementById("empty-auto-hidden-button-bar");
+
+    await waitForLayout();
+
+    expect(bar.getOption("layout.hideWhenEmpty")).to.equal(true);
+    expect(bar.hasAttribute("hidden")).to.be.true;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.true;
+  });
+
+  it("should reveal an auto-hidden button bar when a button becomes visible", async function () {
+    const mocks = document.getElementById("mocks");
+    mocks.innerHTML = `
+      <monster-button-bar
+        id="dynamic-auto-hidden-button-bar"
+        data-monster-option-layout-hide-when-empty="true"
+      >
+        <button id="dynamic-auto-hidden-button" hidden>Run</button>
+      </monster-button-bar>
+    `;
+    const bar = document.getElementById("dynamic-auto-hidden-button-bar");
+    const button = document.getElementById("dynamic-auto-hidden-button");
+
+    await waitForLayout();
+
+    expect(bar.hasAttribute("hidden")).to.be.true;
+
+    button.removeAttribute("hidden");
+    await waitForLayout();
+
+    expect(bar.hasAttribute("hidden")).to.be.false;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.false;
+  });
+
+  it("should keep an auto-hidden button bar visible when buttons overflow into the popper", async function () {
+    const mocks = document.getElementById("mocks");
+    mocks.innerHTML = `
+      <div id="overflow-auto-hidden-wrapper">
+        <monster-button-bar
+          id="overflow-auto-hidden-button-bar"
+          data-monster-option-layout-hide-when-empty="true"
+        >
+          <button id="overflow-auto-hidden-a" type="button">One</button>
+          <button id="overflow-auto-hidden-b" type="button">Two</button>
+        </monster-button-bar>
+      </div>
+    `;
+    const wrapper = document.getElementById("overflow-auto-hidden-wrapper");
+    const bar = document.getElementById("overflow-auto-hidden-button-bar");
+    const buttons = [
+      document.getElementById("overflow-auto-hidden-a"),
+      document.getElementById("overflow-auto-hidden-b"),
+    ];
+    const switchButton = bar.shadowRoot.querySelector(
+      '[data-monster-role="switch"]',
+    );
+
+    wrapper.style.boxSizing = "border-box";
+    wrapper.style.width = "30px";
+    Object.defineProperty(wrapper, "clientWidth", {
+      configurable: true,
+      value: 30,
+    });
+    Object.defineProperty(switchButton, "offsetWidth", {
+      configurable: true,
+      value: 20,
+    });
+
+    for (const button of buttons) {
+      Object.defineProperty(button, "offsetWidth", {
+        configurable: true,
+        value: 48,
+      });
+      Object.defineProperty(button, "offsetHeight", {
+        configurable: true,
+        value: 30,
+      });
+      button.getBoundingClientRect = () => ({
+        width: 48,
+        height: 30,
+        top: 0,
+        right: 48,
+        bottom: 30,
+        left: 0,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
+    }
+
+    await waitForLayout();
+
+    expect(buttons.every((button) => button.getAttribute("slot") === "popper"))
+      .to.be.true;
+    expect(switchButton.hasAttribute("hidden")).to.be.false;
+    expect(bar.hasAttribute("hidden")).to.be.false;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.false;
+  });
+
   it("should default the button bar layout alignment to left", function () {
     const bar = document.getElementById("bar");
     const buttonBar = bar.shadowRoot.querySelector(

package/test/cases/components/form/control-bar.mjs

@@ -6,6 +6,8 @@ import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
 const expect = chai.expect;
 chai.use(chaiDom);
 
+const waitForLayout = () => new Promise((resolve) => setTimeout(resolve, 120));
+
 const html = `
   <div id="test1">
     <monster-control-bar id="bar">
@@ -97,6 +99,119 @@ describe("ControlBar", function () {
     expect(controlBar.style.opacity).to.not.equal("0");
   });
 
+  it("should keep an empty control bar visible by default", async function () {
+    const bar = document.getElementById("bar-right");
+
+    await waitForLayout();
+
+    expect(bar.hasAttribute("hidden")).to.be.false;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.false;
+  });
+
+  it("should hide an empty control bar when the empty option is enabled at runtime", async function () {
+    const bar = document.getElementById("bar-right");
+
+    await waitForLayout();
+
+    bar.setOption("layout.hideWhenEmpty", true);
+    await waitForLayout();
+
+    expect(bar.hasAttribute("hidden")).to.be.true;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.true;
+  });
+
+  it("should hide an empty control bar when configured to hide empty bars", async function () {
+    const mocks = document.getElementById("mocks");
+    mocks.innerHTML = `
+      <monster-control-bar
+        id="empty-auto-hidden-bar"
+        data-monster-option-layout-hide-when-empty="true"
+      ></monster-control-bar>
+    `;
+    const bar = document.getElementById("empty-auto-hidden-bar");
+
+    await waitForLayout();
+
+    expect(bar.getOption("layout.hideWhenEmpty")).to.equal(true);
+    expect(bar.hasAttribute("hidden")).to.be.true;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.true;
+  });
+
+  it("should update empty control bar visibility when child controls become visible", async function () {
+    const mocks = document.getElementById("mocks");
+    mocks.innerHTML = `
+      <monster-control-bar
+        id="dynamic-auto-hidden-bar"
+        data-monster-option-layout-hide-when-empty="true"
+      >
+        <button id="dynamic-auto-hidden-button" hidden>Run</button>
+      </monster-control-bar>
+    `;
+    const bar = document.getElementById("dynamic-auto-hidden-bar");
+    const button = document.getElementById("dynamic-auto-hidden-button");
+
+    await waitForLayout();
+
+    expect(bar.hasAttribute("hidden")).to.be.true;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.true;
+
+    button.removeAttribute("hidden");
+    await waitForLayout();
+
+    expect(bar.hasAttribute("hidden")).to.be.false;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.false;
+
+    button.style.display = "none";
+    await waitForLayout();
+
+    expect(bar.hasAttribute("hidden")).to.be.true;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.true;
+  });
+
+  it("should release empty auto-hidden state when the option is disabled", async function () {
+    const mocks = document.getElementById("mocks");
+    mocks.innerHTML = `
+      <monster-control-bar
+        id="option-auto-hidden-bar"
+        data-monster-option-layout-hide-when-empty="true"
+      ></monster-control-bar>
+    `;
+    const bar = document.getElementById("option-auto-hidden-bar");
+
+    await waitForLayout();
+
+    expect(bar.hasAttribute("hidden")).to.be.true;
+
+    bar.setOption("layout.hideWhenEmpty", false);
+    await waitForLayout();
+
+    expect(bar.hasAttribute("hidden")).to.be.false;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.false;
+  });
+
+  it("should preserve a manual hidden attribute when empty hiding is disabled", async function () {
+    const mocks = document.getElementById("mocks");
+    mocks.innerHTML = `
+      <monster-control-bar
+        id="manual-hidden-bar"
+        hidden
+        data-monster-option-layout-hide-when-empty="true"
+      ></monster-control-bar>
+    `;
+    const bar = document.getElementById("manual-hidden-bar");
+
+    await waitForLayout();
+
+    expect(bar.hasAttribute("hidden")).to.be.true;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.false;
+
+    bar.setOption("layout.hideWhenEmpty", false);
+    await waitForLayout();
+
+    expect(bar.hasAttribute("hidden")).to.be.true;
+    expect(bar.hasAttribute("data-monster-empty-hidden")).to.be.false;
+  });
+
   it("should allow configuring the control bar layout alignment to right", function (done) {
     const bar = document.getElementById("bar-right");