@appius-fr/apx 2.7.0 → 2.8.0

package/modules/tools/CHANGELOG.md

@@ -0,0 +1,29 @@
+# Changelog – APX Tools Module
+
+All notable changes to the tools module are documented here.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
+
+**Prior versions:** Tools-related changes for 2.6.0 (form-packer, `packFormToJSON`, `.pack()`) and 2.6.2 (`numericKeysAlwaysArray`, numeric-key heuristic) are documented in the main [CHANGELOG.md](../../CHANGELOG.md) at the project root.
+
+## [2.8.0] - 2026-02-19
+
+### Added
+- **`getScrollbarSize(orientation?)`** — returns the scrollbar size in pixels for the current environment.
+  - Optional `orientation`: `"vertical"` (default) or `"horizontal"`.
+  - Result is cached after the first call (both orientations measured in one DOM pass).
+  - Uses off-screen absolute positioning and `offsetWidth - clientWidth` / `offsetHeight - clientHeight` (no inner div).
+  - Exposed as `APX.tools.getScrollbarSize()`.
+- **`loadCss`** in the tools module (moved from `modules/common.mjs`) with an upgraded implementation:
+  - **Idempotent:** same URL returns the same Promise; in-memory cache avoids duplicate loads.
+  - **Promise rejection:** rejects on fetch failure or non-ok response (callers can `.catch()`); failed URLs are removed from cache so retries work.
+  - **Return value:** resolves with the injected `<style>` element.
+  - **Options:** `loadCss(url, { id?, media?, before? })` for style `id`, `media` attribute, and insertion point (`before` = node to insert before).
+  - Omitted redundant `type="text/css"` on the style element (HTML5 default).
+  - Exposed as `APX.tools.loadCss()` and `APX.loadCss()` for backward compatibility.
+
+### Removed
+- **`modules/common.mjs`** — deleted; it only exported `loadCss`, which now lives in `modules/tools/loadCss.mjs`.
+
+### Changed
+- **`APX.loadCss`** now delegates to the tools implementation; existing `APX.loadCss(url)` calls remain valid and gain the new behaviour (idempotency, rejection on failure, optional second argument).

package/modules/tools/README.md

@@ -1,6 +1,8 @@
 # APX Tools Module
 
-The `tools` module provides utility functions for common web development tasks. Currently, it includes form handling utilities, with more tools planned for future releases.
+The `tools` module provides utility functions for common web development tasks. It includes form handling (form-packer), dynamic CSS loading (loadCss), scrollbar measurement (getScrollbarSize), and more tools planned for future releases.
+
+**Changelog:** [CHANGELOG.md](./CHANGELOG.md) (module history; 2.8.0: loadCss moved/upgraded, getScrollbarSize added).
 
 ---
 
@@ -40,6 +42,26 @@ const data = APX('form#myForm').pack();
 
 **Documentation:** See [`form-packer/README.md`](./form-packer/README.md) for complete documentation.
 
+### loadCss (since 2.8.0 in tools)
+
+Loads CSS from a URL and injects it into the document. Idempotent (same URL returns the same Promise); rejects on fetch failure. Also available as `APX.loadCss` for backward compatibility.
+
+```javascript
+// Basic usage
+await APX.tools.loadCss('/path/to/styles.css');
+// With options: id, media, before (insertion node)
+await APX.tools.loadCss('/print.css', { media: 'print', id: 'print-styles' });
+```
+
+### getScrollbarSize (since 2.8.0)
+
+Returns the scrollbar size in pixels for the current environment (cached after first call).
+
+```javascript
+const vWidth = APX.tools.getScrollbarSize();           // vertical (default)
+const hHeight = APX.tools.getScrollbarSize('horizontal');
+```
+
 ---
 
 ## API Reference
@@ -76,6 +98,25 @@ const data = APX('form#myForm').pack();
 console.log(data);
 ```
 
+### `APX.tools.loadCss(url, options?)`
+
+Loads CSS from a URL and injects it. Idempotent; rejects on fetch failure. Also available as `APX.loadCss(url, options?)`.
+
+**Parameters:**
+- `url` (string): URL of the CSS file
+- `options` (object, optional): `{ id?: string, media?: string, before?: Node }`
+
+**Returns:** (Promise<HTMLStyleElement>) Resolves with the injected style element
+
+### `APX.tools.getScrollbarSize(orientation?)`
+
+Returns the scrollbar size in pixels. Cached after first call.
+
+**Parameters:**
+- `orientation` (string, optional): `"vertical"` (default) or `"horizontal"`
+
+**Returns:** (number) Scrollbar size in pixels
+
 ---
 
 ## Examples
@@ -132,6 +173,8 @@ modules/tools/
 │   ├── packToJson.mjs      # Core conversion function
 │   ├── augment-apx.mjs    # APX object augmentation (.pack() method)
 │   └── README.md           # Detailed documentation
+├── getScrollbarSize.mjs    # Scrollbar size measurement (cached)
+├── loadCss.mjs             # Dynamic CSS loading (idempotent)
 ├── exports.mjs             # Centralized exports
 └── README.md               # This file
 ```
@@ -158,6 +201,12 @@ See the interactive demo at `demo/modules/tools/index.html` for:
 
 ---
 
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md) for version history (e.g. 2.8.0: getScrollbarSize, loadCss moved and upgraded).
+
+---
+
 ## License
 
 Author : Thibault SAELEN  

package/modules/tools/exports.mjs

@@ -1,16 +1,22 @@
 // Import des fonctions et modules des sous-modules
 import augmentWithPack from './form-packer/augment-apx.mjs';
 import { packFormToJSON } from './form-packer/packToJson.mjs';
+import { getScrollbarSize } from './getScrollbarSize.mjs';
+import { loadCss } from './loadCss.mjs';
 
 // Export de la fonction d'augmentation
 export { augmentWithPack };
 
 // Export des fonctions utilitaires
 export { packFormToJSON };
+export { getScrollbarSize };
+export { loadCss };
 
 // Export d'un objet tools pour faciliter l'utilisation
 export const tools = {
-    packFormToJSON: packFormToJSON
+    packFormToJSON: packFormToJSON,
+    getScrollbarSize: getScrollbarSize,
+    loadCss: loadCss
 };
 
 

package/modules/tools/getScrollbarSize.mjs

@@ -0,0 +1,24 @@
+export function getScrollbarSize(orientation = "vertical") {
+    if (!getScrollbarSize._cache) {
+        const outer = document.createElement("div");
+        Object.assign(outer.style, {
+            position: "absolute",
+            top: "-9999px",
+            left: "-9999px",
+            width: "100px",
+            height: "100px",
+            overflow: "scroll",
+        });
+
+        document.body.appendChild(outer);
+
+        getScrollbarSize._cache = {
+            vertical: outer.offsetWidth - outer.clientWidth,
+            horizontal: outer.offsetHeight - outer.clientHeight,
+        };
+
+        outer.remove();
+    }
+
+    return getScrollbarSize._cache[orientation] ?? 0;
+}

package/modules/tools/loadCss.mjs

@@ -0,0 +1,46 @@
+const loadCssCache = new Map();
+
+/**
+ * Loads CSS from a URL and injects it into the document.
+ * Idempotent: same URL returns the same Promise; duplicate loads are avoided.
+ * @param {string} url - URL of the CSS file to load
+ * @param {{ id?: string, media?: string, before?: Node }} [options] - Optional: id and media for the style element, before for insertion point
+ * @returns {Promise<HTMLStyleElement>} Resolves with the injected style element; rejects on fetch failure or non-ok response
+ */
+export function loadCss(url, options = {}) {
+    const cached = loadCssCache.get(url);
+    if (cached) {
+        return cached;
+    }
+
+    const promise = fetch(url)
+        .then((response) => {
+            if (!response.ok) {
+                throw new Error(`Failed to load CSS: ${response.status} ${response.statusText}`);
+            }
+            return response.text();
+        })
+        .then((css) => {
+            const styleSheet = document.createElement("style");
+            if (options.id) styleSheet.id = options.id;
+            if (options.media) styleSheet.media = options.media;
+            styleSheet.textContent = css;
+
+            const insertBefore = options.before;
+            if (insertBefore && insertBefore.parentNode) {
+                insertBefore.parentNode.insertBefore(styleSheet, insertBefore);
+            } else {
+                document.head.appendChild(styleSheet);
+            }
+
+            return styleSheet;
+        })
+        .catch((error) => {
+            loadCssCache.delete(url);
+            console.error("Failed to load CSS:", error);
+            throw error;
+        });
+
+    loadCssCache.set(url, promise);
+    return promise;
+}

package/modules/tristate/CHANGELOG.md

@@ -2,7 +2,9 @@
 
 This changelog tracks updates for `modules/tristate` between APX releases.
 
-## TBA (next release)
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
+
+## [2.7.0] - 2025-02-16
 
 ### Added
 - **Chainable API**: `tristate(options)` now returns an object with `setChildren(childrenApx)`. Use it to link a parent tristate to its child checkboxes.
@@ -29,6 +31,6 @@ This changelog tracks updates for `modules/tristate` between APX releases.
 - Demo `demo/modules/tristate/index.html`: Parameters (size + colors), Live preview, States preview, Interactive cycle, **Parent + sub-checkboxes** real-world section using `APX('#policyParent').tristate(opts).setChildren(APX('#policyEmail, #policySms, #policyPush'))`. Removed manual uncheckedAppearance/indeterminateDisplay controls and the separate “Unchecked appearance” preview section.
 - README: documented `setChildren(childrenApx)`, automatic indeterminate when mixed, and removed `uncheckedAppearance` / `indeterminateDisplay` from the options list.
 
-## 2.6.2 (current)
+## Prior to 2.7.0
 
-Baseline for this changelog. Tristate visuals and options prior to the theming improvements above.
+Baseline for this changelog. Tristate visuals and options prior to the theming and setChildren improvements in 2.7.0.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appius-fr/apx",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "description": "Appius Extended JS - A powerful JavaScript extension library",
   "main": "dist/APX.prod.mjs",
   "module": "dist/APX.prod.mjs",

package/modules/common.mjs

@@ -1,18 +0,0 @@
-// Function to load the CSS from a given URL
-function loadCss(url) {
-    return fetch(url)
-        .then(response => response.text())
-        .then(css => {
-            const styleSheet = document.createElement("style");
-            styleSheet.type = "text/css";
-            styleSheet.textContent = css;  // Use textContent instead of innerText
-            document.head.appendChild(styleSheet);
-        })
-        .catch(error => {
-            console.error("Failed to load CSS:", error);
-        });
-}
-
-export {
-    loadCss
-}