@massimo-cassandro/minimo 0.6.7 → 0.7.0

package/src/components/img-viewer-dom-builder.js

@@ -1,196 +0,0 @@
-/**
- * minimo: img-viewer-dom-builder
- * Produce un array da utilizzare con domBuilder per generare un tag `picture`
- *
- * @returns Array
- */
-
-// TODO implementare getImgInfo (da ada)
-// TODO detect se amabiente local per uso avif
-
-/*
-img_viewer_dom_builder({
-  viewer_url: 'iviewer',
-  sources: [
-    {
-      src: 'xxx',
-      crop: null, // 'x,y,w,h',
-      w: 100,
-      h: 100,
-      imgWidths: [100, 200, 300],
-      mq: null, // '(max-width: xxx)'
-    },
-    ...
-  ],
-  imgClassName: null,
-  // condition: true | false,
-  add2XWidths: false, // true,
-  alt_text: '',
-  useAvif: false | true,
-  // loadingMode: null | 'lazy' | 'eager'
-})
-*/
-export function img_viewer_dom_builder({
-  /** url del viewer */
-  viewer_url,
-
-  /**
-  array dei sorgenti
-  deve contenere almeno un oggetto configurato come `source_default`
-  l'ultimo oggetto della lista è quello sulla base el quale si costruirà il tag img
-  In mancanza di uno degli elementi richiesti (fatta eccezione per `mq` e `crop`),
-  il sorgente viene ignorato
-  */
-  sources = [], // array dei sorgenti
-
-  /** se false, il markup non viene generato */
-  condition = true,
-
-  /** se true, alle dimensioni fornite, viene aggiunta la versione 2x */
-  add2XWidths = false,
-
-  /** testo alt */
-  alt_text = null,
-
-  /** classe del tag img */
-  imgClassName = null,
-
-  /** se true viene usato anche il formato avif, oltre a webp e jpg */
-  useAvif = false,
-
-  /** valore dell'attributo loading: eager o lazy */
-  loadingMode = null
-}) {
-
-  if(!viewer_url || !condition) {
-    return null;
-  }
-
-  const originalSourcesLength = (sources?? []).length,
-    source_default = {
-      id: null,   // id per immagini da db
-      src: null,  // percorso dalla root dell'immagine sorgente
-      crop: null, // eventuali coordinate per il crop dell'immagine sorgente
-      w: null,    // larghezza e altezza dell'immagine da restituire
-      h: null,
-      imgWidths: [], // dimensioni dell'immagine
-      mq: null    // media query, necessaria solo per gli oggetti prima dell'ultimo
-    };
-
-  sources = sources.map(item => {
-    item = {...source_default, ...item?? {}};
-
-    if((!item.src && !item.id) || !item.w || !item.h || !item.imgWidths?.length) {
-      return null;
-    }
-
-    return item;
-
-  }).filter(result => result != null);
-
-  if(!sources.length || sources.length !== originalSourcesLength) {
-    // eslint-disable-next-line no-console
-    console.error('`sources` array error');
-    return [];
-  }
-
-  // array per gli elementi <source>
-  const sourceTagsArray = [],
-    srcset_builder = (format, srcsetsArray) => {
-      return srcsetsArray.map(src => `${src[0]}${format? `&f=${format}` : ''} ${src[1]}`).join(',');
-    },
-    formats = (useAvif? ['avif','webp'] : ['webp']);
-
-  // sono definite fuori dal ciclo forEach perché saranno utilizzate anche dal tag img finale
-  let srcsetsArray, sizes;
-
-  // costruzione array `sourceTagsArray`
-  sources.forEach((item, sourceIdx) => {
-
-    item.imgWidths = item.imgWidths.map(w => add2XWidths? [w, w * 2] : w).flat().toSorted((a,b) => b - a);
-
-    const isLastSource = sourceIdx === sources.length - 1,
-      baseSrc = viewer_url + (item.src? `?src=${encodeURIComponent(item.src)}&` : `/${item.id}?`);
-
-    srcsetsArray = item.imgWidths.map(w =>{
-      const bbHeight = w / (item.w / item.h);
-      return [`${baseSrc}bb=${w}x${bbHeight}`,  `${w}w`];
-    });
-
-    sizes = item.imgWidths.map((w,idx) => {
-
-      // la prima dimensione va ignorata (sarà utilizzata nell'iterazione successiva)
-      if(idx === 0) {
-        return null;
-
-      } else {
-        // elemento `sizes` diverso dal primo e dall'ultimo
-        const middle_size_mq = `(${w}px < width <= ${item.imgWidths.at(idx-1)}px) ${item.imgWidths.at(idx-1)}px`;
-
-        // primo elemento dell'attributo sizes
-        if(idx === 1) {
-          return `(width > ${w}px) ${item.imgWidths.at(0)}px`;
-
-        // ultimo
-        } else if(idx === item.imgWidths.length - 1) {
-          return [
-            middle_size_mq,
-            `${w}px`
-          ];
-
-        // tutti gli altri
-        } else {
-          return middle_size_mq;
-        }
-      }
-    }).filter(s => s != null).flat().join(','); // rimuove elemento null, flat e crea stringa sizes
-
-    // il formato `null` è riferito a jpeg, che non è necessario indicare esplicitamente
-    // ed è utilizzato solo nel caso di presenza di media query per creare il tag source per il formato jpeg,
-    // non va inoltre considerato nell'ultimo elemento di source
-    // visto che, in questo caso, il formato jpeg viene gestito nel tag `img`
-    [...formats, ...(item.mq && !isLastSource? [null] : [])].forEach(format => {
-      sourceTagsArray.push({
-        tag: 'source',
-        attrs: {
-          type: format? `image/${format}` : null,
-          srcset: srcset_builder(format, srcsetsArray),
-          sizes: sizes,
-          media: item.mq,
-
-          // width e height sono necessarie solo in caso di presenza della media query
-          // presupponendo che in questi casi l'immagine abbia proporzioni diverse
-          // da quelle dell'immagine del tag `img`.
-          // In assenza di media query, vengono "ereditate" quelle indicate in `img`
-          width: item.mq? item.w : null,
-          height: item.mq? item.h : null,
-        }
-      });
-    });
-
-  });
-
-  const img_source_obj = sources.at(-1);
-
-  return {
-    tag: 'picture',
-    condition: condition,
-    children: [
-      ...sourceTagsArray,
-      {
-        tag: 'img',
-        className: imgClassName,
-        attrs: {
-          alt: alt_text,
-          width: img_source_obj.w,
-          height: img_source_obj.h,
-          srcset: srcset_builder(null, srcsetsArray),
-          sizes: sizes,
-          src: srcsetsArray.at(-1)[0],
-          loading: loadingMode,
-        }
-      }
-    ]
-  };
-
-}

package/src/components/modal-alert/flash-alerts.js

@@ -1,32 +0,0 @@
-import { mAlert } from './modal-alert.js';
-
-
-/*
-twig message labels:
-  - success
-  - notice
-  - error
-  - warning
-*/
-document.querySelectorAll('.flash-alert').forEach(item => {
-
-  mAlert({
-    // test
-    // type  : 'confirm',
-    // timer: null,
-
-    type  : item.dataset.label === 'notice'? 'warning' : item.dataset.label,
-    // title : item.message,
-    mes   : item.dataset.message
-    // use_warning_icon: true, // solo confirm
-    // ok_btn_text: 'OK',
-    // cancel_btn_text: 'Annulla',
-    // callback: function(esito) {}, // confirm: console.log( esito? 'Confermato' : 'Annullato')
-    // timer: 4000 // ms
-    // extra_btn: '<button type="button" data-confirm-result="annulla" class="stop-btn btn btn-confirm">Annulla</button>',
-    // extra_btn_selector: '.stop-btn',
-    // extra_btn_focus: true,
-
-  });
-
-});

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

@@ -1,152 +0,0 @@
-import { domBuilder, classnames } from '@node_modules/@massimo-cassandro/js-utilities/index.js';
-import { spinner } from '@minimo/spinner.js';
-import * as styles from './modal-content.module.css?inline';
-
-
-
-
-// https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement
-
-export function modalContent({
-
-  /** iframe | content */
-  mode = 'iframe',
-
-  /** dialog extra class */
-  dialogClassName = null,
-
-  /** iframe url */
-  iframeUrl = null,
-
-  /** content string (markup) o array */
-  content = null,
-
-  /** content extra classname */
-  contentClassName = null,
-
-  /** dimensione modal: full, large, medium o small */
-  size = 'large',
-
-  /** padding: std (var(--size-md) 0) o none */
-  padding = 'std'
-}) {
-
-  if(!['content', 'iframe'].includes(mode)) {
-    throw `modalContent: parametro 'mode' non corretto (${mode})`;
-  }
-  if(!iframeUrl && mode === 'iframe') {
-    throw 'modalContent: parametro `iframeUrl` mancante';
-  }
-  if(content == null && mode === 'content') {
-    throw 'modalContent: parametro `content` mancante';
-  }
-  if(!['full', 'large', 'medium', 'small'].includes(size)) {
-    throw `modalContent: parametro 'size' non corretto (${size})`;
-  }
-  if(!['std', 'none'].includes(padding)) {
-    throw `modalContent: parametro 'padding' non corretto (${padding})`;
-  }
-
-  let dialog_element, dialog_inner, iframe_element = null, content_element = null;
-  const iframeLoadEventHandler = () => {
-    dialog_element.classList.add(styles.on);
-  };
-
-  if(!dialog_element) {
-
-    domBuilder([
-      {
-        tag: 'dialog',
-        className: styles.dialog,
-        attrs: {
-          'closedby': 'any'
-        },
-        children: [
-          {
-            tag: 'button',
-            className: styles.closeButton, // TODO standardizzare close btn
-            attrs: {
-              'aria-label': 'Chiudi'
-            }
-          },
-          {
-            className: styles.dialogInner,
-            children: [
-              {
-                className: styles.modalSpinner,
-                content: spinner({container: null, withOverlay: false })
-              }
-
-            ]
-          }
-        ]
-      }
-    ], document.body);
-
-
-    dialog_element = document.querySelector(`.${styles.dialog}`);
-    dialog_inner = dialog_element.querySelector(`.${styles.dialogInner}`);
-
-    dialog_element.querySelector(`.${styles.closeButton}`).addEventListener('click', () => {
-      dialog_element.close();
-    }, false);
-
-    // listener chiusura
-    dialog_element.addEventListener('close', () => {
-
-      iframe_element?.removeEventListener('load', iframeLoadEventHandler, false);
-      iframe_element?.remove();
-      content_element?.remove();
-
-      document.body.classList.remove('overflow-hidden');
-      dialog_element.classList.remove(styles.on);
-    }, false);
-
-  }
-
-
-  // aggiunta classi extra
-  dialog_element.className = classnames(
-    styles.dialog,
-    dialogClassName,
-    styles[`size-${size}`],
-    styles[`padding-${padding}`]
-  );
-
-  domBuilder([
-    {
-      condition: mode === 'iframe',
-      className: styles.iframeEl,
-      tag: 'iframe',
-      attrs: {
-        src: ''
-      }
-    },
-    {
-      condition: mode === 'content',
-      className: classnames(styles.contentEl, contentClassName),
-      content: (content && !Array.isArray(content))? content : null,
-      children: (content && Array.isArray(content))? content : null
-    }
-  ], dialog_inner);
-
-
-  document.body.classList.add('overflow-hidden');
-  dialog_element.showModal();
-  dialog_element.focus();
-
-
-  if(mode === 'iframe') {
-    iframe_element = dialog_element.querySelector(`.${styles.iframeEl}`);
-    iframe_element.src = iframeUrl;
-
-    // listener load per i frame
-    iframe_element?.addEventListener('load', iframeLoadEventHandler, false);
-
-
-  } else if (mode === 'content') {
-    content_element = dialog_element.querySelector(`.${styles.contentEl}`);
-    dialog_element.classList.add(styles.on);
-  }
-
-}

package/src/components/modal-content/modal-content.module.css

@@ -1,142 +0,0 @@
-/* TODO custom props nel file generale */
-/* TODO prevedere opzione con bordo del pulsante di chiusura (NB: si disallinea) */
-/* TODO cambiare icona chiusura con svg? */
-/* TODO aggiungere wrapper intorno a dialogInner (a filo con il dialog) per la scroll bar */
-
-.dialog { /* dialog */
-  --modal-border-radius: var(--radius-md, 1.2rem);
-  position: fixed;
-  max-width: 80dvw;
-  max-height: 90dvh;
-  padding: 0;
-  margin: auto;
-  overflow: visible;
-  background-color: var(--body-bg-color, #fff);
-  border: none;
-  border-radius: var(--modal-border-radius);
-  box-shadow: 0 0 2rem .5rem rgb(0 0 0 / .5);
-  transition: scale .2s ease-out;
-  scale: 0;
-
-  /* stylelint-disable selector-class-pattern */
-  &.size-full {
-    width: 80dvw;
-    height: 90dvh;
-  }
-  /* dimensioni std -> size == 'large' */
-  &.size-large {
-    width: 50rem; /* 800px */
-    height: auto;
-  }
-  &.size-medium {
-    width: 37.5rem; /* 600px */
-    height: 37.5rem;
-  }
-  &.size-small {
-    width: 32rem; /* ~500 x 400 */
-    height: 25rem;
-  }
-  /* stylelint-enable selector-class-pattern */
-
-  &.on {
-    scale: 1;
-  }
-
-  &::backdrop {
-    overscroll-behavior: contain;
-    background-color: rgb(0 0 0 / .7);
-  }
-
-}
-
-.dialogInner {
-  width: 100%;
-  height: 100%;
-  padding-inline-end: var(--size-md);
-  overflow-x: hidden;
-  overflow-y: auto;
-  /* scrollbar-gutter: stable; */
-  border-radius: var(--modal-border-radius);
-
-  /* stylelint-disable selector-class-pattern */
-  .padding-std & {
-    padding: var(--size-md) 0;
-  }
-  .padding-none & {
-    padding: 0;
-  }
-  /* stylelint-enable selector-class-pattern */
-}
-
-.modalSpinner {
-  position: relative;
-  padding-block-start: var(--size-2xl);
-
-  .dialog.on & {
-    display: none;
-  }
-}
-
-.iframeEl, .contentEl {
-  width: 100%;
-  overscroll-behavior: contain;
-}
-
-.iframeEl {
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  border: none;
-}
-
-.contentEl {
-  min-height: 100%;
-}
-
-.closeButton  {
-  --btn-color: var(--secondary-fg, #000);
-  --btn-bg-color: var(--secondary, #fff);
-  --btn-hover-color: var(--secondary, #fff);
-  --btn-hover-bg-color: var(--secondary-fg, #000);
-  --icon-size: 2.5rem;
-  --btn-padding: var(--size-xs, .5rem);
-  --icon-bars-thickness: 3px;
-
-  position: absolute;
-  top: calc(-1 * var(--icon-size) / 3);
-  right: calc(-1 * var(--icon-size) / 3);
-  display: block;
-  width: var(--icon-size);
-  height: var(--icon-size);
-  padding: var(--btn-padding);
-  color: var(--btn-color);
-  cursor: pointer;
-  background-color: var(--btn-bg-color);
-  /* border: var(--icon-bars-thickness) solid currentColor; */
-  border: none;
-  border-radius: 50%;
-
-
-  &:hover {
-    --btn-color: var(--btn-hover-color);
-    --btn-bg-color: var(--btn-hover-bg-color);
-  }
-
-  &::before, &::after {
-    position: absolute;
-    top: 50%;
-    left: var(--btn-padding);
-    display: block;
-    width: calc(var(--icon-size) - (var(--btn-padding) * 2));
-    height: var(--icon-bars-thickness);
-    content: '';
-    background: currentColor;
-  }
-  &::before {
-    transform: translateY(-50%) rotate(45deg);
-  }
-  &::after {
-    transform: translateY(-50%) rotate(-45deg);
-  }
-}
-

package/src/components/popup-page/popup-page.css

@@ -1,72 +0,0 @@
-.content-dialog {
-  display: none;
-  width: 90dvw;
-  max-width: 900px;
-  height: 90dvh;
-  padding: 1rem;
-  margin: auto;
-  background-color: var(--body-background-color);
-  border: none;
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-4);
-  transform: translateY(-200vh);
-  animation: dialog-in .3s ease-out;
-
-
-  &[open] {
-    display: block;
-    transform: none;
-  }
-
-  &::backdrop {
-    overscroll-behavior: contain;
-    background-color: color-mix(in srgb, #000 40%, transparent);
-  }
-}
-
-.content-dialog-close {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  align-self: flex-end;
-
-  button {
-    top: -.5rem;
-    right: -.5rem;
-    width: 2rem;
-    aspect-ratio: 1;
-    padding: 4px;
-    background-color: var(--body-background-color);
-    border: 1px solid var(--neutral-100);
-    border-radius: 50%;
-    box-shadow: var(--shadow-3);
-
-    @media (hover: hover) { /* @media (any-hover: hover) { */
-      &:hover {
-        background-color: color-mix(in srgb, var(--text-color) 10%, transparent);
-      }
-    }
-
-  }
-
-  svg {
-    width: 1.5rem;
-    aspect-ratio: 1;
-  }
-}
-
-.content-dialog-inner {
-  position: relative;
-  z-index: 0;
-  display: flex;
-  flex-flow: column nowrap;
-  gap: .4rem;
-  align-items: stretch;
-  justify-content: flex-start;
-  isolation: isolate;
-}
-.content-dialog-body {
-  position: relative;
-  flex: 1;
-  overflow: auto;
-}

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

@@ -1,84 +0,0 @@
-// TODO completare
-
-import './popup-page.css';
-import xIcon from '@icone/x.svg?inline';
-import { spinner } from '../spinner/spinner';
-/**
-  `indicator_class`: classe da aggiungere al wrapper per indicare in modo univoco il dialog
- */
-export function content_dialog_markup(indicator_class) {
-
-  return `<dialog class="${indicator_class} content-dialog">` +
-    '<div class="content-dialog-inner">' +
-      '<div class="content-dialog-close">' +
-        `<button type="button" class="btn-reset content-dialog-close-btn" aria-label="Chiudi finestra">${xIcon}</button>` +
-      '</div>' +
-      '<div class="content-dialog-body"></div>' +
-    '</div>'+
-  '</dialog>';
-}
-
-
-/**
-  `content_url`    : url del file contenente il contenuto da caricare via ajax
-  `indicator_class`: classe da aggiungere al wrapper per indicare in modo univoco il dialog
-  `once_callback`  : callback da invocare solo la prima volta,  alla creazione del dialog
- */
-let dialog_list = {};
-export async function show_ajax_content_dialog({content_url, class_identifier, once_callback = null}){
-
-  const close_dialog = (class_identifier) => {
-      dialog_list[class_identifier].close();
-      document.body.classList.remove('overflow-hidden');
-    }
-    ,open_dialog = (class_identifier) => {
-      dialog_list[class_identifier].showModal();
-      document.body.classList.add('overflow-hidden');
-    }
-  ;
-
-
-  if(!Object.keys(dialog_list).includes(class_identifier)) {
-    document.body.insertAdjacentHTML('beforeend',
-      content_dialog_markup(class_identifier)
-    );
-
-    const dialog = document.querySelector(`.content-dialog.${class_identifier}`);
-    dialog_list[class_identifier] = dialog;
-    dialog.querySelector('.content-dialog-close-btn').addEventListener('click', () => {
-      close_dialog(class_identifier);
-    }, false);
-
-
-    const dialog_body = dialog.querySelector('.content-dialog-body');
-    dialog_body.innerHTML = spinner();
-    open_dialog(class_identifier);
-
-    const url = content_url;
-    (async () => {
-      const response = await fetch(url),
-        content = await response.text();
-      return content;
-    })()
-      .then(content => {
-        dialog_body.innerHTML = content;
-
-        if(once_callback && typeof once_callback === 'function') {
-          once_callback(dialog_body);
-        }
-      })
-      .catch(err => {
-        /* eslint-disable no-console */
-        console.error(url);
-        console.error(err);
-        /* eslint-enable no-console */
-
-        alert('Si è verificato un errore.\n'+
-          'Ricarica la pagina e ripeti l’operazione');
-      });
-
-  } else {
-    open_dialog(class_identifier);
-
-  }
-}