@massimo-cassandro/minimo 1.13.0 → 1.14.0

package/snippets/unsplash-browser-app/unsplash-imgs-display.js

@@ -0,0 +1,195 @@
+import { domBuilder, classnames } from '@massimo-cassandro/minimo';
+import { unsplashParams, unsplashPictureTag } from './unsplash-utilities.js';
+import { unsplashGetImgs } from './unsplash-get-imgs.js';
+import * as styles from './unsplash-imgs-display.module.css';
+import imageIcon from '../icons/image.svg?inline';
+
+let displayContainer;
+
+// elemento .imgDisplayWrapper attualmente trascinato (drag and drop riordinamento)
+let draggedItem = null;
+
+
+// abilita il trascinamento di wrapperEl tramite la maniglia handleEl
+function initSortHandle(handleEl, wrapperEl){
+  handleEl.addEventListener('mousedown', () => {
+    wrapperEl.draggable = true;
+  });
+  handleEl.addEventListener('mouseup', () => {
+    wrapperEl.draggable = false;
+  });
+
+  wrapperEl.addEventListener('dragstart', e => {
+    draggedItem = wrapperEl;
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('text/plain', wrapperEl.dataset.imgId);
+    wrapperEl.classList.add(styles.dragging);
+  });
+
+  wrapperEl.addEventListener('dragend', () => {
+    wrapperEl.draggable = false;
+    wrapperEl.classList.remove(styles.dragging);
+    draggedItem = null;
+    updateHiddenFieldOrder();
+  });
+}
+
+// aggiorna il value del campo hidden in base al nuovo ordine (DOM) degli .imgDisplayWrapper
+function updateHiddenFieldOrder(){
+  const data = JSON.parse(unsplashParams.hiddenField.value || '[]');
+  const order = [...displayContainer.querySelectorAll(`.${styles.imgDisplayWrapper}`)]
+    .map(el => el.dataset.imgId);
+
+  data.sort((a, b) => order.indexOf(a.id) - order.indexOf(b.id));
+  unsplashParams.hiddenField.value = JSON.stringify(data);
+}
+
+
+// markup placeholder
+const placeHolderObjEl = {
+  className: styles.placeholder,
+  content: imageIcon
+};
+
+
+export function unsplashImgsDisplayInit(){
+
+  domBuilder([
+
+    'p.my-0.small Utilizzare il pulsante “Seleziona immagine” per inserire un termine di ricerca e quindi selezionare ' +
+      `almeno un’immagine <strong>(massimo ${unsplashParams.maxImgs})</strong>.`,
+    'p-my-0.small Se vuoi sostituire una foto, prima rimuovila dall’elenco delle immagini selezionate (qui sotto) ' +
+      'e quindi selezionane una nuova.',
+    'p.my-0.small Per pubblicare un gruppo, è necessario che sia presente almeno un’immagine; '+
+      '<strong>la prima sarà utilizzata come copertina</strong> (puoi variare l’ordinamento, se necessario, trascinando l’icona in fondo ad ogni card immagine).',
+
+    {
+      className: styles.displayContainer,
+      callback: el => displayContainer = el
+    },
+    {
+      className: 'mt-lg text-right',
+      children: [
+        {
+          tag: 'button',
+          attrs: {
+            class: 'btn btn-outline-secondary',
+            type: 'button'
+          },
+          content: 'Seleziona immagini',
+          callback: el => {
+            el.addEventListener('click', () => {
+              unsplashGetImgs();
+            });
+          }
+        }
+      ]
+    }
+
+  ], unsplashParams.hiddenField, {insertMode: 'before'});
+
+  // aggiunta displayContainer ad unsplashParams perché utilizzato anche dall'applicazione principale
+  unsplashParams.displayContainer = displayContainer;
+
+
+  // =>> listener rimozione foto
+  displayContainer.addEventListener('click', e => {
+    if(e.target.classList.contains(styles.closeBtn)) {
+      const imgId = e.target.imgId;
+
+      e.target.closest(`.${styles.imgDisplayWrapper}`).remove();
+
+      // aggiornamento value hidden
+      let data = JSON.parse(unsplashParams.hiddenField.value || '[]');
+      data = data.filter(row => row.id !== imgId);
+      unsplashParams.hiddenField.value = JSON.stringify(data);
+
+      displayContainer.insertAdjacentElement('beforeend', domBuilder([placeHolderObjEl]));
+
+    }
+  });
+
+  // riordinamento via drag and drop (maniglia: styles.sortArea > div)
+  // le card sono disposte in griglia su un'unica riga (grid-template-columns: repeat(maxImgs, 1fr)),
+  // quindi l'inserimento prima/dopo si basa sulla posizione orizzontale del cursore
+  displayContainer.addEventListener('dragover', e => {
+    if(!draggedItem) {
+      return;
+    }
+    e.preventDefault();
+
+    const targetWrapper = e.target.closest(`.${styles.imgDisplayWrapper}`);
+    if(!targetWrapper || targetWrapper === draggedItem) {
+      return;
+    }
+
+    const rect = targetWrapper.getBoundingClientRect();
+    const insertBefore = (e.clientX - rect.left) < rect.width / 2;
+
+    targetWrapper.parentNode.insertBefore(
+      draggedItem,
+      insertBefore? targetWrapper : targetWrapper.nextSibling
+    );
+  });
+}
+
+export function unsplashImgsDisplay(data = null){
+
+  if(data == null) {
+    data = JSON.parse(unsplashParams.hiddenField.value || '[]');
+  }
+
+
+  domBuilder([
+    ...data.map( row => (
+      {
+        className: styles.imgDisplayWrapper,
+        attrs: { 'data-img-id': row.id },
+        // inizializzazione trascinamento: a questo punto l'intero sotto-albero
+        // (incluso styles.sortArea) è già collegato al wrapper
+        // l'intera area sortArea (non solo l'icona al suo interno) fa da maniglia
+        callback: el => initSortHandle(el.querySelector(`.${styles.sortArea}`), el),
+        children: [
+          ...unsplashPictureTag(row, {
+            width: 300,
+            addPopover: true,
+            popoverImgWidth: 800,
+            imgExtraClass: styles.img,
+            imgExtraAttrs: {draggable: 'false'}
+          }),
+
+          {
+            className: styles.imgDisplayInfo,
+            children: [
+              {
+                tag: 'ul',
+                children: [
+                  `li ${row.description}`,
+                  {
+                    tag: 'li',
+                    children: [
+                      row.author_tag
+                    ]
+                  }
+                ]
+              },
+              {
+                tag: 'button',
+                className: classnames('btn-close', styles.closeBtn),
+                callback: el => el.imgId = row.id
+              }
+            ]
+          },
+
+          {
+            className: styles.sortArea,
+            children: [
+              'div'
+            ]
+          }
+        ]
+      }
+    )),
+    ...(Array.from({length: unsplashParams.maxImgs - data.length}, () => placeHolderObjEl ))
+  ], displayContainer, {emptyParent: true});
+}

package/snippets/unsplash-browser-app/unsplash-imgs-display.module.css

@@ -0,0 +1,119 @@
+.displayContainer {
+
+  display: grid;
+  grid-template-rows: auto auto auto;
+  grid-template-columns: repeat(4, 1fr);
+  /* grid-auto-rows: 1fr; */ /* al posto di grid-template-rows */
+  /* grid-template: row / col; */
+  grid-auto-flow: row;
+  gap: 1.5rem;
+  /* align-items: center; */
+  /* justify-items: start; */
+  min-height: 0;
+  padding: .3rem;
+
+  margin-block: 1.5rem;
+}
+
+.imgDisplayWrapper, .placeholder {
+  grid-row: span 3;
+  border-radius: var(--ada-border-radius);
+}
+.placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 10rem;
+  background-color: var(--ada-grigio-1);
+  border: 1px solid var(--ada-grigio-3);
+  opacity: .7;
+  svg {
+    width: 3rem;
+    fill: var(--ada-grigio-3);
+  }
+}
+
+.imgDisplayWrapper {
+  position: relative;
+  display: grid;
+  grid-template-rows: subgrid;
+  gap: .3rem;
+  padding: 0;
+  overflow: hidden;
+  background-color: var(--ada-body-bg);
+  border: 1px solid var(--ada-grigio-2);
+  box-shadow: var(--ada-box-shadow);
+}
+
+.img {
+  display: block;
+  width: 100%;
+  height: 200px;
+  /* padding: .3rem; */
+  object-fit: cover;
+  object-position: center;
+}
+.imgDisplayInfo {
+  padding: .5rem;
+
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+}
+.closeBtn {
+  position: absolute;
+  top: .5rem;
+  right: .5rem;
+  padding: .4rem;
+  background-color: var(--ada-body-bg);
+  border: 1px solid var(--ada-grigio-4);
+  border-radius: 50%;
+}
+
+.sortArea {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: .4rem;
+  margin: .2rem;
+  cursor: grab;
+  border-radius: var(--ada-border-radius);
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--ada-grigio-1);
+    }
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  > div {
+    position: relative;
+
+    &, &::after, &::before {
+      width: 2px;
+      height: 20px;
+      background-color: var(--ada-grigio-4);
+    }
+    &::after, &::before {
+      position: absolute;
+      top: 0;
+      content: '';
+    }
+    &::before {
+      left: -6px;
+    }
+    &::after {
+      right: -6px;
+    }
+  }
+}
+
+.dragging {
+  cursor: grabbing;
+  opacity: .4;
+}

package/snippets/unsplash-browser-app/unsplash-utilities.js

@@ -0,0 +1,344 @@
+// estrae da un oggetto result di una singola riga, le informazioni necessarie
+// all'applicazione e dove necessario esegue piccole post-eleborazioni
+
+/*
+raw data:
+
+{
+    "id": "uNvgvo2cs7k",
+    "alternative_slugs": {...},
+    "created_at": "2018-04-10T13:00:44Z",
+    "updated_at": "2026-07-06T07:30:35Z",
+    "promoted_at": "2018-04-11T07:34:53Z",
+    "width": 3840,
+    "height": 2565,
+    "color": "#26260c",
+    "blur_hash": "LoGuj:IVaKWX~XIqWBf6x]NeWDo0",
+    "description": null,
+    "breadcrumbs": [],
+    "urls": {
+        "raw"      : "https://images.unsplash.com/photo-1523365154888-8a758819b722?ixid=M3w5OTA3Mjh8MHwxfHNlYXJjaHwxfHxTaWNpbGlhfGl0fDF8MHx8fDE3ODMzMzA5NTN8MA&ixlib=rb-4.1.0",
+        "full"     : "...",
+        "regular"  : "...",
+        "small"    : "...",
+        "thumb"    : "...",
+        "small_s3" : "..."
+    },
+    "likes": 1001,
+    "liked_by_user": false,
+    "bookmarked": false,
+    "current_user_collections": [],
+    "sponsorship": null,
+    "topic_submissions": {...},
+    "asset_type": "photo",
+    "slug": "photo-of-house-near-cliff-and-body-of-water-uNvgvo2cs7k",
+    "alt_description": "photo of house near cliff and body of water",
+    "links": {
+        "html": "https://unsplash.com/photos/photo-of-house-near-cliff-and-body-of-water-uNvgvo2cs7k",
+        "self": "...",
+        "download": "...",
+        "download_location": "..."
+    },
+    "user": {
+        ...
+        "links": {
+            "html": "https://unsplash.com/@samferrara"
+            "self": "...",
+            "photos": "...",
+            "likes": "...",
+        },
+        "profile_image": {..},
+        ...
+        "social": {...}
+    }
+}
+
+*/
+
+import { getAppData } from '@src/index.js';
+import { randomId, classnames } from '@massimo-cassandro/minimo';
+
+import * as styles from './unsplash-get-imgs.module.css';
+
+export const unsplashParams = {
+  maxImgs: 4, // numero massimo di immagini totali
+  hiddenField : document.getElementById('infoImmagini')
+};
+
+
+
+// Default query parameters for the Unsplash /search/photos endpoint.
+// All params are optional except `query` (passed at call time).
+const defaultUnsplashParams = {
+    per_page: 18,           // results per page — max: 30
+    // order_by: 'relevant',   // "relevant" | "latest"
+    content_filter: 'high', // "low" | "high" — filters explicit content
+    orientation: 'landscape', // "landscape" | "portrait" | "squarish"
+    lang: 'it',
+
+    // Other available params (not set by default):
+    // page        : (int)    — page number, default 1
+    // color       : (string) — "black_and_white" | "black" | "white" | "yellow" |
+    //                          "orange" | "red" | "purple" | "magenta" |
+    //                          "green" | "teal" | "blue"
+    // collections : (string) — comma-separated collection IDs to narrow results
+  }
+
+  ,app_data = getAppData()
+  ,SEARCH_API = app_data.apps + '/unsplash-browser'
+;
+
+export function setRequestUrl(query, page = null) {
+  const searchParams = new URLSearchParams({
+    query,
+    ...defaultUnsplashParams,
+    ...(page? {page} : {})
+  });
+  return `${SEARCH_API}?${searchParams}`;
+}
+
+
+export function parseUnsplashResult(data){
+
+  const img_data = {
+    id                  : data.id,
+    color               : data.color,
+    width               : data.width,
+    height              : data.height,
+    // description        : data.description,
+    // location           : data.location.name,
+    alt_description     : data.alt_description,
+    // created_at       : data.created_at,
+    raw_url             : data.urls?.raw,
+    unsplash_url        : data.links.html,
+    author              : data.user?.name?? data.user?.username,
+    author_profile_url  : data.user?.links?.html,
+    blur_hash           : data.blur_hash,
+    description  : (() => {
+      let location      = data.location?.name?? data.location?.city,
+        description     = data.description?? data.alt_description;
+      if(data.description && location) {
+        location        = (new RegExp(location, 'i')).test(description)? null : location;
+      }
+      return [description, location]
+        .filter(i       => i != null).join (' / ');
+    })()
+  };
+
+  const author_profile_url = new URL(img_data.author_profile_url);
+  author_profile_url.search = new URLSearchParams({ utm_source: 'xxxxxx', utm_medium: 'referral' });
+  img_data.author_profile_full_url = author_profile_url.toString();
+
+  img_data.author_tag = {
+    tag: 'a',
+    attrs: {
+      href: img_data.author_profile_full_url,
+      target: '_blank',
+      rel: 'noopener noreferrer'
+    },
+    content: `${img_data.author} / Unsplash`,
+  };
+
+
+  return img_data;
+}
+
+
+// restituisce l'array domBuilder per la costruizione di un tag picture da un'immagine unsplah
+// NB con dati preelaborati da parseUnsplashResult
+// https://unsplash.com/documentation#supported-parameters
+// https://docs.imgix.com/apis/rendering/size/w
+// https://docs.imgix.com/apis/rendering/size/h
+// https://docs.imgix.com/apis/rendering/size/ar
+// https://docs.imgix.com/apis/rendering/size/fit
+// https://docs.imgix.com/apis/rendering/size/crop
+// https://docs.imgix.com/apis/rendering/format/q
+// https://docs.imgix.com/en-US/apis/rendering/device-pixel-ratio
+
+export function unsplashPictureTag(img_data, options = {}){
+
+  options = {
+    fixedRatio: true, // utilizza l'aspect ratio originale della foto
+    width: 300,
+    pictureExtraClass: null,
+    pictureExtraAttrs: {},
+    imgExtraClass: null,
+    imgExtraAttrs: null,
+    addPopover: true,
+    popoverImgWidth: 600,
+
+    ...options
+  };
+
+  const formats = ['avif', 'webp', 'pjpg'] // `fmt` parameter, in order of use
+    ,base_url = new URL(img_data.raw_url)
+    ,searchParams = new URLSearchParams(base_url.search)
+    ,img_params = [['q', '60']]
+  ;
+
+
+  if(options.fixedRatio) {
+    img_params.push(
+      ['w', options.width],
+      // ['fit', 'crop'],
+      // ['crop', 'faces,entropy,edges']
+    );
+    img_params.forEach(param => searchParams.set(...param));
+
+    // nome univoco per l'associazione anchor (Anchor Positioning API) tra thumb e popover di ingrandimento
+    const zoomAnchorName = `--unsplash-zoom-${randomId()}`;
+
+    // riferimento al popover di ingrandimento, valorizzato dalla sua callback domBuilder
+    // (usato nel listener click della thumb, eseguito solo dopo che l'intera figure è stata costruita)
+    let zoomPopoverEl;
+
+    return [
+      {
+        tag: 'picture',
+        className: options.pictureExtraClass,
+        attrs: {
+          style: options.addPopover? `anchor-name: ${zoomAnchorName};` : null,
+          ...options.pictureExtraAttrs
+        },
+        children: formats.map(fmt => {
+          const is_default_fmt = fmt === formats.at(-1);
+          const srcsetArray= [];
+
+          searchParams.set('fm', fmt);
+
+          [1,2,3].forEach(dpr => {
+            searchParams.set('dpr', dpr);
+            base_url.search = searchParams.toString();
+            srcsetArray.push(base_url.toString() +` ${dpr}x`);
+          });
+
+          if(is_default_fmt) {
+
+            return {
+              tag: 'img',
+              className: classnames(options.imgExtraClass, options.addPopover && styles.hasPopover),
+              attrs: {
+                alt: img_data.alt_description?? `${img_data.author} / Unsplash`,
+                src: srcsetArray[0],
+                srcset: srcsetArray.join(','),
+                width: options.width,
+                // height:
+                ...options.imgExtraAttrs
+              },
+              callback: options.addPopover
+                ? el => el.addEventListener('click', () => zoomPopoverEl.togglePopover())
+                : null
+            };
+
+          } else {
+            return {
+              tag: 'source',
+              attrs: {
+                srcset: srcsetArray.join(','),
+                type: `image/${fmt}`,
+                // width:
+                // height:
+              }
+            };
+          }
+
+        })
+      },
+      // popover di ingrandimento (Popover API + Anchor Positioning API)
+      ...(options.addPopover
+        ? [{
+          tag: 'div',
+          className: styles.zoomPopover,
+          attrs: {
+            popover: 'auto',
+            style: `position-anchor: ${zoomAnchorName};`
+          },
+          callback: el => zoomPopoverEl = el,
+          children: unsplashPictureTag(img_data, {width: options.popoverImgWidth, imgExtraClass: styles.popoverImg, addPopover: false})
+        }]
+        : []
+      )
+    ];
+
+  } else {
+
+    // img_params.push(
+    //   ['fit', 'crop'],
+    //   ['crop', 'faces,entropy,edges'], // top, bottom, left, right, faces, focalpoint, edges, and entropy
+    // );
+    // const sizes = [
+    //   {w: 2560, ratio: 16/9},
+    //   {w: 1920, ratio: 16/9},
+    //   {w: 1400, ratio: 16/9},
+    //   {w: 1280, ratio: 16/9},
+    //   {w: 1024, ratio: 4/3},
+    //   {w: 760, ratio: 4/3},
+    //   {w: 400, ratio: 9/21},
+    // ].map(size => ({...size, h: Math.ceil(size.w / size.ratio)}) );
+
+    // console.log(sizes);
+
+    // const sizesAttr = sizes.map(s => `(width <= ${s.w}px and min-aspect-ratio: ${s.ratio.toFixed(3)}) ${s.w}px`).join(',');
+    // img_params.forEach(param => searchParams.set(...param));
+
+    // return [
+    //   {
+    //     tag: 'picture',
+    //     children: formats.map(fmt => {
+    //       const is_default_fmt = fmt === formats.at(-1);
+
+    //       const srcsetArray = [];
+    //       searchParams.set('fmt', fmt);
+
+    //       sizes.forEach(size => {
+    //         searchParams.set('w', size.w);
+    //         searchParams.set('h', size.h);
+    //         base_url.search = searchParams.toString();
+    //         srcsetArray.push({url: base_url.toString(), size: size.w});
+    //       });
+
+    //       const srcsetAttr = srcsetArray.map(item => `${item.url} ${item.size}w`).join(',');
+
+    //       if(is_default_fmt) {
+
+    //         return {
+    //           tag: 'img',
+    //           className: 'up-img',
+    //           attrs: {
+    //             srcset: srcsetAttr,
+    //             sizes: sizesAttr,
+    //             alt: img_data.alt_description?? `${img_data.author} / Unsplash`,
+    //             src: srcsetArray[Math.floor(srcsetArray.length / 2)].url,
+
+    //             // width e height non necessari (e scorretti visto le differenti proporzioni delle varie foto)
+    //             // le dimesnioni sono gestite  nel css
+    //             // width:
+    //             // height:
+    //           }
+    //         };
+
+    //       } else {
+    //         return {
+    //           tag: 'source',
+    //           attrs: {
+    //             srcset: srcsetAttr,
+    //             sizes: sizesAttr,
+    //             type: `image/${fmt}`,
+    //             // width:
+    //             // height:
+    //           }
+    //         };
+    //       }
+
+    //     })
+    //   }
+    // ];
+  }
+
+}
+
+
+// helper testo pulsante aggiuni/rimuovi img
+export function setImgBtnText(imgIsSelected) {
+  return imgIsSelected? 'Rimuovi' : 'Seleziona';
+}

package/src/components/modal-popup/modal-popup.js

@@ -52,6 +52,9 @@ function closeDialog(el) {
  * @param {string | any[] | null} [params.footerContent=null] - Footer content: plain text, HTML, or a domBuilder array.
  * @returns {HTMLDialogElement} The dialog element.
  */
+
+// TODO attributi arua anche sul triggerm vedi ada-frontend/src/modal-dialog/modal-dialog.js
+
 export function modalPopup({
 
   /** dialog extra class */