@massimo-cassandro/minimo 1.14.3 → 1.14.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.14.3",
+  "version": "1.14.5",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",

package/src/utilities/build-picture-tag.js

@@ -4,7 +4,7 @@ import { classnames } from './classnames.js';
 
 /**
  * @typedef {Object} PictureSizeEntry
- * @property {number} [from] - `min-width` breakpoint (px) the size applies from; omitted in the (single) mobile-first default entry.
+ * @property {number} [from] - Breakpoint (px) the size applies from (`width >=` media condition); omitted in the (single) mobile-first default entry.
  * @property {number | [number, number]} size - Rendered width (px, height computed with `ratio`) or explicit `[width, height]` pair (px).
  */
 
@@ -17,7 +17,7 @@ import { classnames } from './classnames.js';
  * of `sizes`, a candidate is generated for every integer density from 1 to `dpr`.
  * The `sizes` attribute is built mobile-first: the entry without `from` is the
  * default, and every other entry applies from its `from` breakpoint up, as a
- * `(min-width: …)` media condition.
+ * `(width >= …)` media condition (range syntax).
  *
  * @example
  * // fixed-width thumb (250px, 16:9 ratio, 1x and 2x candidates)
@@ -32,7 +32,7 @@ import { classnames } from './classnames.js';
  *   baseSrc,
  *   sizes: [250, { from: 576, size: 500 }, { from: 992, size: 800 }],
  * });
- * // sizes="(min-width: 992px) 800px, (min-width: 576px) 500px, 250px"
+ * // sizes="(width >= 992px) 800px, (width >= 576px) 500px, 250px"
  *
  * @example
  * // custom ratio for numeric sizes and candidates up to 3x
@@ -64,7 +64,9 @@ import { classnames } from './classnames.js';
  * @param {string[]} [args.formats=['avif','webp','pjpg']] - Image formats: the last one is used for the `img` fallback element, the others for the `source` elements.
  * @param {boolean} [args.devMode=false] - When true, `avif` is excluded from `formats` (not supported by the local dev environment).
  * @param {boolean} [args.lazy=true] - When true, the `img` element gets `loading="lazy"`.
+ * @param {((img: HTMLImageElement) => void) | null} [args.onLoad=null] - Called once the image has finished loading, receiving the `img` element (called immediately if the image is already complete).
  * @param {boolean} [args.condition=true] - When false, the function returns `null` without building anything.
+ * @param {boolean} [args.legacyMediaSyntax=false] - When true, the `sizes` media conditions use `(min-width: …)` instead of the range syntax `(width >= …)`, for older browsers (pre Chrome/Edge 104, Firefox 102, Safari 16.4).
  * @param {string|null} [args.pictureExtraClass=null] - Extra class(es) for the `picture` element.
  * @param {Object<string, *>} [args.pictureExtraAttrs={}] - Extra attributes for the `picture` element.
  * @param {string|null} [args.imgExtraClass=null] - Extra class(es) for the `img` element.
@@ -81,7 +83,9 @@ export function buildPictureTag({
   formats = ['avif', 'webp', 'pjpg'],
   devMode = false,
   lazy = true,
+  onLoad = null,
   condition = true,
+  legacyMediaSyntax = false,
   pictureExtraClass = null,
   pictureExtraAttrs = {},
   imgExtraClass = null,
@@ -138,7 +142,10 @@ export function buildPictureTag({
     // attributo `sizes` (mobile-first): le entry con breakpoint in ordine decrescente
     // (vince la prima condizione che matcha), il default per ultimo
     ,sizesAttr = brkEntries
-      .map(({from, width}) => `(min-width: ${from}px) ${width}px`)
+      .map(({from, width}) => legacyMediaSyntax
+        ? `(min-width: ${from}px) ${width}px`
+        : `(width >= ${from}px) ${width}px`
+      )
       .reverse()
       .concat(`${defaultEntry.width}px`)
       .join(', ')
@@ -199,6 +206,14 @@ export function buildPictureTag({
             loading: lazy? 'lazy' : null,
             ...imgExtraAttrs
           },
+          callback: onLoad == null? undefined : el => {
+            const img = /** @type {HTMLImageElement} */ (el);
+            if(img.complete) {
+              onLoad(img);
+            } else {
+              img.addEventListener('load', () => onLoad(img), {once: true});
+            }
+          },
           // TODO classe popover, se attivato
           // callback: options.addPopover
           //   ? el => el.addEventListener('click', () => zoomPopoverEl.togglePopover())