@massimo-cassandro/minimo 0.1.2 → 0.1.3

package/src/index-template.css

@@ -1,49 +0,0 @@
-/*
-  CSS globali
-  i fogli stile delle singole parti sono importate direttamente nel file js relativo
-  o (se non necessario), direttamente nel file js principale
- */
-
-@import '@src/config/fonts.css';
-/* @import '../node_modules/open-props/open-props.min.css'; */
-/* @import '@src/config/custom-properties-figma.css'; */
-@import '@src/config/custom-media.css';
-@import '@src/config/custom-properties.css';
-
-@import '@minimo/reset.css';
-@import '@minimo/layout-base.css';
-@import '@minimo/container.css';
-
-/* @import '@minimo/forms/forms.css'; */
-/* @import '@minimo/forms/form-edit-info.css'; */
-@import '@minimo/buttons/buttons.css';
-/* @import '@minimo/buttons/status-buttons.css'; */
-/* @import '@minimo/buttons/btn-close.css'; */
-@import '@minimo/text.css';
-@import '@minimo/anchors.css';
-/* @import '@minimo/headings.css'; */
-/* @import '@minimo/alerts.css'; */
-/* @import '@minimo/icons.css'; */
-@import '@minimo/svg.css';
-@import '@minimo/overlay.css';
-/* @import '@minimo/inner-nav.css'; */
-/* @import '@minimo/table.css'; */
-/* @import '@minimo/flex.css'; */
-/* @import '@minimo/grid.css'; */
-/* @import '@minimo/details.css'; */
-
-/* spinner attivarne uno solo + spinner-wrapper */
-@import '@minimo/spinners/spinner-wrapper.css';
-/* @import '@minimo/spinners/spinner-trailing-dots.css'; */
-/* @import '@minimo/spinners/spinner-three-dots.css'; */
-/* @import '@minimo/spinners/spinner-circle.css'; */
-@import '@minimo/spinners/spinner-circle-basic.css';
-
-/* @import '@minimo/utilities.css'; */
-
-
-/* componenti */
-/* @import '@src/components/modal-alert/modal-alert.css'; */
-
-/* file progetto */
-/* @import '@src/layout/layout.css'; */

package/src/js/alert-autoclose.js

@@ -1,9 +0,0 @@
-// alert autoclose
-let flash_alert = document.querySelector('.alert-success.autoclose');
-if (flash_alert) {
-  window.setTimeout(function () {
-    slideUp(flash_alert, 500, () => {
-      flash_alert.remove();
-    });
-  }, 4000);
-}

package/src/js/create-blurhash-canvas.js

@@ -1,47 +0,0 @@
-import { decodeBlurHash } from 'fast-blurhash';
-
-// https://github.com/mad-gooze/fast-blurhash
-// https://github.com/woltapp/blurhash/tree/master/TypeScript
-// https://blurha.sh/
-
-/**
- * restituisce un elemento canvas della stringa blurhash indicata
- *
- * @param {string} str - blurhash string
- * @param {number} width
- * @param {number} height
- * @returns HTMLElement
- */
-
-export function createBlurhashCanvas({str, width, height, className = null}) {
-
-  try {
-
-    if(str && width && height) {
-      // decode blurHash image
-      const pixels = decodeBlurHash(str, width, height),
-
-        // draw it on canvas
-        canvas = document.createElement('canvas'),
-        ctx = canvas.getContext('2d'),
-        imageData = ctx.createImageData(width, height);
-
-      if(className) {
-        canvas.className = className;
-      }
-
-      canvas.width = width;
-      canvas.height = height;
-      imageData.data.set(pixels);
-      ctx.putImageData(imageData, 0, 0);
-
-      return canvas;
-    }
-
-  } catch(e) {
-    /* eslint-disable no-console */
-    console.error( e );
-    /* eslint-enable no-console */
-  }
-
-}

package/src/js/dialog-content.js

@@ -1,82 +0,0 @@
-import './dialog-content.css';
-import x_icon from '@icone/x.svg?inline';
-import { spinner } from './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">${x_icon}</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);
-
-  }
-}

package/src/js/dismiss-alerts.js

@@ -1,6 +0,0 @@
-// dismiss alerts
-document.querySelectorAll('[data-dismiss]').forEach(item => {
-  item.addEventListener('click', () => {
-    item.closest('.' + item.dataset.dismiss).remove();
-  }, false);
-});

package/src/js/forms.js

@@ -1,36 +0,0 @@
-// import './form.css'; //incorporato nel css principale
-
-import { enableSubmitBtns } from '@massimo-cassandro/js-utilities';
-
-document.querySelectorAll('form').forEach( form => {
-
-  // form.querySelectorAll('[type="submit"]').forEach(btn =>{
-  //   btn.addEventListener('click', () => {
-  //     form.classList.add('was-validated');
-  //   }, false);
-  // });
-
-  form.querySelectorAll('.is-invalid, .is-valid').forEach(item => {
-    item.classList.remove('is-invalid', 'is-valid');
-  });
-
-  form.addEventListener('submit', e => {
-
-    if(!form.hasAttribute('data-no-was-validated')) {
-      form.classList.add('was-validated');
-    }
-
-    if(!form.checkValidity()) {
-      e.preventDefault();
-      enableSubmitBtns();
-
-    } else {
-      if(!form.hasAttribute('data-no-disabling') && !form.hasAttribute('data-disable-submit')) { /* 'data-disable-submit' per compatibilitò con verioni precedenti */
-        form.querySelectorAll('[type="submit"]').forEach(btn => {
-          btn.disabled = true;
-        });
-      }
-    }
-  }, false);
-});
-

package/src/js/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/js/inner-nav.js

@@ -1,11 +0,0 @@
-// navigazione scheda / elenco
-let nav_primary = document.querySelector('.inner-nav-main');
-if (nav_primary) {
-  // nav_primary.classList.add('text-right', 'd-print-none');
-  let nav = nav_primary.innerHTML;
-
-  document.querySelectorAll('.inner-nav').forEach(item => {
-    item.innerHTML = nav;
-    // item.classList.add('text-right', 'd-print-none');
-  });
-}

package/src/js/overlay.js

@@ -1,12 +0,0 @@
-// import './overlay.css'; incorporato nel css principale
-
-export function overlay(context = document.body, scroll_lock = false) {
-  context.insertAdjacentHTML('beforeend', '<div class="overlay"/>');
-  if(scroll_lock) {
-    document.body.classList.add('overflow-hidden');
-  }
-}
-export function removeOverlay(context = document.body) {
-  context.querySelector(':scope > .overlay')?.remove();
-  document.body.classList.remove('overflow-hidden');
-}

package/src/js/print-icon.js

@@ -1,51 +0,0 @@
-import { domBuilder } from '@massimo-cassandro/js-utilities/index.js';
-
-const icon_file = document.body.dataset.icons;
-
-export function printIcon({iconId, className='icon', title= null, output = 'html'}) {
-
-  if(!['html', 'element', 'builderArray'].includes(output)) {
-    // eslint-disable-next-line no-console
-    console.error(`'printIcon': parametro output non corretto (${output}). `+
-      'Deve essere `html`, `element` o `builderArray`');
-  }
-
-  // accetta anche un solo argomento stringa (= iconId)
-  if(arguments.length === 1 && typeof arguments[0] === 'string') {
-    iconId = arguments[0];
-  }
-
-
-  const iconArray = [
-    {
-      tag: 'svg',
-      className: className,
-      children: [
-        {
-          tag: 'title',
-          content: title,
-          condition: title !=  null
-        },
-        {
-          tag: 'use',
-          attrs: {
-            href: `${icon_file}#${iconId}`
-          }
-        }
-      ]
-    }
-  ];
-
-  if(output === 'builderArray') {
-    return iconArray;
-  } else {
-
-    const iconElement = domBuilder(iconArray);
-    if(output === 'element') {
-      return iconElement;
-    } else {
-      return iconElement.outerHTML;
-    }
-  }
-
-}

package/src/js/spinner.js

@@ -1,30 +0,0 @@
-// import './spinner.css'; // incorporato nel css principale
-
-/*
-uso
-
-import { spinner } from  '@minimo/spinner.js';
-
-spinner({container: xxxx, withOverlay: false|true });
-
-*/
-
-// TODO rifare con domBuilder
-
-export function spinner({container, withOverlay = false }) {
-  const spinnerMarkup =
-    `<div class="${withOverlay? 'spinner-overlay' : 'spinner-wrapper'}"><div class="spinner">Loading...</div></div>`;
-
-
-  if(container != null) {
-    container.insertAdjacentHTML('beforeend', spinnerMarkup);
-  } else {
-    return spinnerMarkup;
-  }
-}
-
-export function removeSpinner(container) {
-  container.querySelectorAll('.spinner-overlay, .spinner-wrapper')
-    .forEach(item => item.remove());
-
-}