@massimo-cassandro/minimo 1.14.0 → 1.14.2

package/package.json

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

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

@@ -54,7 +54,7 @@ import { classnames } from './classnames.js';
  *
  * @param {Object} args
  * @param {string} args.baseSrc - Image base URL (viewer endpoint); its query params are preserved.
- * @param {(number | [number, number])[]} [args.sizes=[250]] - Rendered image sizes, in ascending width order, one per breakpoint plus the default. Each entry is a width (px, height computed with `ratio`) or an explicit `[width, height]` pair (px), allowing a different aspect ratio per breakpoint.
+ * @param {(number | [number, number])[]} [args.sizes=[250]] - Rendered image sizes, in ascending width order, one per breakpoint plus the default (entries beyond `breakpoints.length + 1` are ignored in the `sizes` attribute). Each entry is a width (px, height computed with `ratio`) or an explicit `[width, height]` pair (px), allowing a different aspect ratio per breakpoint.
  * @param {number} [args.ratio=16/9] - Default aspect ratio (width / height, as in the CSS `aspect-ratio` property) used to compute the height of numeric `sizes` entries.
  * @param {number} [args.dpr=2] - Maximum pixel density (integer): `srcset` candidates are generated for every density from 1 to `dpr`.
  * @param {number[]} [args.breakpoints=[]] - `max-width` breakpoints (px) paired with `sizes` (one element less than `sizes`).
@@ -62,12 +62,13 @@ 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 {boolean} [args.condition=true] - When false, the function returns `null` without building anything.
  * @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.
  * @param {Object<string, *>} [args.imgExtraAttrs={}] - Extra attributes for the `img` element.
  * @param {string} [args.alt=''] - `alt` text for the `img` element.
- * @returns {DomBuilderItem|null} The `picture` domBuilder item, or `null` when `baseSrc` is missing.
+ * @returns {DomBuilderItem|null} The `picture` domBuilder item, or `null` when `baseSrc` is missing or `condition` is false.
  */
 export function buildPictureTag({
   baseSrc,
@@ -79,6 +80,7 @@ export function buildPictureTag({
   formats = ['avif', 'webp', 'pjpg'],
   devMode = false,
   lazy = true,
+  condition = true,
   pictureExtraClass = null,
   pictureExtraAttrs = {},
   imgExtraClass = null,
@@ -89,7 +91,7 @@ export function buildPictureTag({
 
 }){
 
-  if(baseSrc == null) {
+  if(baseSrc == null || !condition) {
     return null;
   }
 
@@ -98,6 +100,11 @@ export function buildPictureTag({
     formats = formats.filter(fmt => fmt !== 'avif');
   }
 
+  if(sizes.length > breakpoints.length + 1) {
+    // eslint-disable-next-line no-console
+    console.warn('[buildPictureTag] `sizes` should have one entry more than `breakpoints`: extra entries are ignored in the `sizes` attribute');
+  }
+
   // densità generate: da 1 a `dpr`
   const dprList = Array.from({length: dpr}, (_, i) => i + 1);
 
@@ -119,17 +126,23 @@ export function buildPictureTag({
       .sort((a, b) => a[0] - b[0])
 
     // attributo `sizes`: ogni size è abbinata al breakpoint corrispondente (max-width),
-    // l'ultima (senza breakpoint) è il valore di default
+    // quella successiva all'ultimo breakpoint è il valore di default
+    // (le eventuali entry oltre `breakpoints.length + 1` vengono ignorate)
     ,sizesAttr = sizePairs
+      .slice(0, breakpoints.length + 1)
       .map(([w], i) => i < breakpoints.length? `(max-width: ${breakpoints[i]}px) ${w}px` : `${w}px`)
       .join(', ')
 
-    // dimensioni intrinseche dell'elemento img (la size più grande)
-    ,[imgWidth, imgHeight] = sizePairs[sizePairs.length - 1]
+    // dimensioni intrinseche dell'elemento img: la size più grande,
+    // indipendentemente dall'ordine delle entry
+    ,[imgWidth, imgHeight] = sizePairs.reduce((max, pair) => pair[0] > max[0]? pair : max)
+
+    // larghezza 1x della size mediana (mediana inferiore se le size sono pari),
+    // indipendentemente dall'ordine delle entry
+    ,medianWidth = sizePairs.map(([w]) => w).sort((a, b) => a - b)[Math.floor((sizePairs.length - 1) / 2)]
 
-    // indice del candidato srcset usato come src di default dell'img:
-    // il candidato 1x della size mediana (mediana inferiore se le size sono pari)
-    ,defaultSrcIdx = srcsetSizes.findIndex(([w]) => w === sizePairs[Math.floor((sizePairs.length - 1) / 2)][0])
+    // indice del candidato srcset usato come src di default dell'img
+    ,defaultSrcIdx = srcsetSizes.findIndex(([w]) => w === medianWidth)
   ;
 
   img_params.forEach(([name, value]) => searchParams.set(name, String(value)));