@massimo-cassandro/minimo 0.6.7 → 0.7.1

package/src/components/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/components/recaptcha/recaptcha.css

@@ -1,73 +0,0 @@
-/*
-
-{%- set chiave_recaptcha_client = '6Le75-AZAAAAAO1sEV1JChhNg3nYw1HBn9AjaVSN' -%}
-<div class="recaptcha-form-wrapper disabled" data-key="{{ chiave_recaptcha_client }}">
-
-  <form id="form-xxx" action="" method="post">
-    ..
-  </form>
-
-
-  <div class="recaptcha-alert">Per abilitare questo form è necessario attivare
-    i cookie per le funzionalità aggiuntive modificando le tue
-    <button class="btn btn-link" type="button" data-cc="show-preferencesModal" aria-haspopup="dialog">preferenze per i cookie</button></div>
-
-  <p class="text-xs">Questo modulo è protetto da Google reCAPTCHA.
-    Per info consulta la <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</a> di Google
-    e i <a href="https://policies.google.com/terms" target="_blank" rel="noopener noreferrer">termini di servizio</a>.</p>
-</div>
-
-*/
-
-.recaptcha-form-wrapper {
-
-  .recaptcha-alert {
-    display: none;
-  }
-
-  &.disabled {
-    position: relative;
-
-    .recaptcha-form-inner-wrapper {
-      filter: blur(2px);
-
-      &::after {
-        position: absolute;
-        inset: 0;
-        display: block;
-        content: '';
-        background-color: var(--recaptcha-alert-overlay-color, rgb(0 0 0 / .5));
-      }
-    }
-    input, select, textarea {
-      pointer-events: none;
-      user-select: none;
-    }
-
-    .recaptcha-alert {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      display: block;
-      padding: var(--size-xs);
-      color: var(--recaptcha-alert-fg, #fff);
-      background-color: var(--recaptcha-alert-background-color, #000);
-      border: .5px solid currentColor;
-      border-radius: var(--radius-xs);
-      transform-origin: center;
-      translate: -50% -50%;
-    }
-  }
-}
-
-.grecaptcha-badge {
-  visibility: hidden;
-}
-
-.grecaptcha-info {
-  margin: 1rem 0 0;
-  font-size: .6rem;
-  font-style: italic;
-  font-weight: 300;
-  opacity: 75%;
-}

package/src/components/spinner/TODO spinner-circle.css

@@ -1,54 +0,0 @@
-/*
-https://lukehaas.me/projects/css-spinners/ (#2)
-
-<div class="spinner-wrapper"><div class="spinner">Loading...</div></div>
-*/
-
-
-.spinner {
-  position: relative;
-  width: 10em;
-  height: 10em;
-  margin: 55px auto;
-  font-size: .7rem;
-  color: var(--_spinner-color);
-  text-indent: -99999em;
-  box-shadow: inset 0 0 0 1em;
-  transform: translateZ(0);
-
-  &, &::before, &::after {
-    border-radius: 50%;
-  }
-
-  &::before, &::after {
-    position: absolute;
-    content: '';
-  }
-}
-
-.spinner::before {
-  top: -.1em;
-  left: -.1em;
-  width: 5.2em;
-  height: 10.2em;
-  border-radius: 10.2em 0 0 10.2em;
-  transform-origin: 5.1em 5.1em;
-  animation: spinner-load 2s infinite ease 1.5s;
-}
-.spinner::after {
-  top: -.1em;
-  left: 4.9em;
-  width: 5.2em;
-  height: 10.2em;
-  border-radius: 0 10.2em 10.2em 0;
-  transform-origin: 0.1em 5.1em;
-  animation: spinner-load 2s infinite ease;
-}
-@keyframes spinner-load {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

package/src/components/spinner/TODO spinner-three-dots.css

@@ -1,14 +0,0 @@
-/* HTML: <div class="loader"></div> */
-/* https://css-loaders.com/dots/  #1 */
-.spinner {
-  width: 80px;
-  aspect-ratio: 6;
-  margin-top: 2rem;
-  clip-path: inset(0 100% 0 0);
-  background: radial-gradient(circle closest-side, var(--text-color) 90%, transparent) 0 / calc(100% / 3) 100% space;
-  animation: l1 1s steps(4) infinite;
-}
-
-@keyframes l1 { to { clip-path: inset(0 -34% 0 0); } }
-
-

package/src/components/spinner/readme.md

@@ -1 +0,0 @@
-Gli spinner hanno tutti la stessa classe, presumendo che se ne usi solo una per volta...

package/src/components/spinner/spinner-trailing-dots.css

@@ -1,51 +0,0 @@
-/*
-https://projects.lukehaas.me/css-loaders/ (#6)
-
-<div class="spinner-wrapper"><div class="spinner">Loading...</div></div>
-*/
-
-.spinner {
-  position: relative;
-  width: 1em;
-  height: 1em;
-  /* margin: 2rem auto; */
-  overflow: hidden;
-  font-size: 3.5rem;
-  color: var(--text-color);
-  text-indent: -9999em;
-  border-radius: 50%;
-  transform: translateZ(0);
-  animation: loader 1.7s infinite ease, round 1.7s infinite ease;
-}
-
-@keyframes loader {
-  0% {
-    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
-  }
-  5%,
-  95% {
-    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
-  }
-  10%,
-  59% {
-    box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
-  }
-  20% {
-    box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
-  }
-  38% {
-    box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
-  }
-  100% {
-    box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
-  }
-}
-
-@keyframes round {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

package/src/components/spinner/spinner-wrapper.css

@@ -1,20 +0,0 @@
-.spinner-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: var(--z-index-overlay);
-  display: grid;
-  place-content: center;
-  pointer-events: none;
-  background-color: var(--overlay-color);
-}
-
-.spinner-wrapper {
-  position: absolute;
-  top: 1rem;
-  left: 50%;
-  display: grid;
-  place-content: center;
-  width: 4rem;
-  aspect-ratio: 1;
-  translate: -50%;
-}

package/src/components/spinner/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());
-
-}

package/src/components/toast/toast.js

@@ -1,77 +0,0 @@
-// forked from https://github.com/argyleink/gui-challenges/tree/main/toast
-// https://web.dev/articles/building/a-toast-component?hl=en
-
-// TODO rivedere
-
-import * as styles from './toast.module.css';
-
-
-const init = () => {
-  const toastWrapper = document.createElement('section');
-  toastWrapper.classList.add(styles.toastWrapper);
-
-  // document.firstElementChild.insertBefore(toastWrapper, document.body);
-  document.body.append(toastWrapper);
-  return toastWrapper;
-};
-
-const createToast = text => {
-  const thisToast = document.createElement('output');
-
-  thisToast.innerHTML = text;
-  thisToast.classList.add(styles.toast);
-  thisToast.setAttribute('role', 'status');
-  thisToast.setAttribute('aria-live', 'polite');
-
-  return thisToast;
-};
-
-const addToast = toast => {
-  const { matches:motionOK } = window.matchMedia(
-    '(prefers-reduced-motion: no-preference)'
-  );
-
-  toastWrapper.children.length && motionOK
-    ? flipToast(toast)
-    : toastWrapper.appendChild(toast);
-};
-
-const Toast = text => {
-  let toast = createToast(text);
-  addToast(toast);
-
-  return Promise.allSettled(
-    toast.getAnimations().map( animation => animation.finished )
-  ).then(() => {
-    toastWrapper.removeChild(toast);
-  });
-};
-
-// https://aerotwist.com/blog/flip-your-animations/
-const flipToast = toast => {
-  // FIRST
-  const first = toastWrapper.offsetHeight;
-
-  // add new child to change container size
-  toastWrapper.appendChild(toast);
-
-  // LAST
-  const last = toastWrapper.offsetHeight;
-
-  // INVERT
-  const invert = last - first;
-
-  // PLAY
-  const animation = toastWrapper.animate([
-    { transform: `translateY(${invert}px)` },
-    { transform: 'translateY(0)' }
-  ], {
-    duration: 150,
-    easing: 'ease-out',
-  });
-
-  animation.startTime = document.timeline.currentTime;
-};
-
-const toastWrapper = init();
-export { Toast };

package/src/components/toast/toast.module.css

@@ -1,59 +0,0 @@
-/* purgecss start ignore */
-.toastWrapper {
-  position: fixed;
-  inset-block-end: 0;
-  inset-inline: 0;
-  z-index: 1;
-
-  display: grid;
-  gap: 1vh;
-  justify-content: center;
-  justify-items: stretch;
-  padding-block-end: 5vh;
-
-  /* optimizations */
-  pointer-events: none;
-}
-
-.toast {
-  --_bg-lightness: 90%;
-  --_travel-distance: 0;
-
-  max-inline-size: min(25ch, 90vw);
-  padding-block: .5ch;
-  padding-inline: 1ch;
-
-  /* font-family: system-ui, sans-serif; */
-  font-size: var(--toast-font-size);
-  color: var(--toast-text-color);
-  background: hsl(0 0% var(--_bg-lightness) / 90%);
-  border-radius: var(--toast-border-radius);
-  animation:
-    fade-in .3s ease,
-    slide-in .3s ease,
-    fade-out .3s ease var(--toast-duration);
-
-  will-change: transform;
-
-  @media (--dark) {
-    /* color: white; */
-    --_bg-lightness: 20%;
-  }
-
-  @media (--motionOK) {
-    --_travel-distance: 5vh;
-  }
-}
-
-@keyframes fade-in {
-  from { opacity: 0; }
-}
-
-@keyframes fade-out {
-  to { opacity: 0; }
-}
-
-@keyframes slide-in {
-  from { transform: translateY(var(--_travel-distance, 10px)); }
-}
-/* purgecss end ignore */

package/src/components/vanilla-cookie-consent/cookie-consent.css

@@ -1,20 +0,0 @@
-/* stylelint-disable selector-max-id */
-@import 'vanilla-cookieconsent/dist/cookieconsent.css';
-
-/* stylelint-disable declaration-no-important */
-#cc-main {
-  h2 {
-    line-height: 1.3 !important;
-  }
-
-  .btn-link {
-    font-weight: var(--font-weight-semibold);
-
-    @media (hover: hover) {
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-}
-/* stylelint-enable declaration-no-important */

package/src/components/vanilla-cookie-consent/cookie-consent.js

@@ -1,76 +0,0 @@
-import './cookie-consent.css';
-import * as CookieConsent from 'vanilla-cookieconsent';
-import { it_translation } from './src/it-translation.js';
-// import { run_analytics } from './src/run-analytics.js';
-import { run_recaptcha, disableRecaptcha } from './src/run-recaptcha.js';
-
-
-// https://cookieconsent.orestbida.com/essential/getting-started.html
-CookieConsent.run({
-  hideFromBots: !(new URLSearchParams(document.location.search).get('cc-list-parser') !== null), // abilita il parsing dei cookie da cookies-list
-  categories: {
-    necessary: {
-      enabled: true,
-      readOnly: true
-    },
-    functionality: {
-      enabled: true,
-    },
-    analytics: {
-      enabled: true,
-    }
-  },
-  guiOptions: {
-    consentModal: {
-      layout: 'box',
-      position: 'bottom right',
-      flipButtons: false,
-      equalWeightButtons: false
-    },
-    preferencesModal: {
-      layout: 'box',
-      // position: 'left right',
-      flipButtons: false,
-      equalWeightButtons: true
-    },
-  },
-  language: {
-    default: 'it',
-    translations: it_translation
-  },
-  onConsent: ({cookie}) => {
-    // if(cookie.categories.indexOf('analytics') !== -1) {
-    //   run_analytics();
-    // }
-    if(cookie.categories.indexOf('functionality') !== -1) {
-      run_recaptcha();
-    }
-  },
-  // https://cookieconsent.orestbida.com/reference/configuration-reference.html#onchange
-  onChange: ({/* cookie,  */changedCategories/* , changedServices */}) => {
-    if(changedCategories.includes('functionality')){
-
-      // caso in cui si cambia l'intera categoria
-      if(CookieConsent.acceptedCategory('functionality')){
-        run_recaptcha();
-      } else {
-        disableRecaptcha();
-      }
-
-      // TODO caso in cui si cambia il solo recaptcha (se ce ne fossero anche altri)
-      // console.log(cookie);
-      // console.log(changedServices);
-      // console.log(CookieConsent.acceptedService('_GRECAPTCHA', 'functionality'));
-
-      // if(changedServices['functionality'].includes('Google Analytics')){
-      //   if(CookieConsent.acceptedService('Google Analytics', 'analytics')){
-      //     // Google Analytics was just enabled
-      //   }else{
-      //     // Google Analytics was just disabled
-      //   }
-      // }
-
-    }
-  }
-});
-

package/src/components/vanilla-cookie-consent/render-cookie-list.js

@@ -1,32 +0,0 @@
-// lista dei cookie per visualizzazione nella pagina della privacy policy
-// questo file è importato direttamente nella pagina privacy policy
-
-import { cookie_list } from './src/cookie-list';
-
-
-export function render_cookie_list(target) {
-
-  const list = document.createDocumentFragment()
-    .appendChild(document.createElement('ul'));
-
-  cookie_list
-    .filter(i => i.cookieTable !== undefined)
-    .forEach(tab => {
-      const section = list.appendChild(document.createElement('li'));
-      section.appendChild(document.createElement('span'));
-      section.querySelector(':scope > span').classList.add('cookie-list-section');
-      section.querySelector(':scope > span').appendChild(document.createTextNode(tab.title));
-      const sublist = section.appendChild(document.createElement('ul'));
-
-      tab.cookieTable.body.forEach(cookie => {
-        const li = sublist.appendChild(document.createElement('li'));
-        li.appendChild(document.createElement('strong'))
-          .appendChild(document.createTextNode(cookie.name + ': '));
-        li.appendChild(document.createTextNode(`${cookie.description} (dur. ${cookie.expiration})`));
-
-      });
-    });
-
-  // console.log(list);
-  target.appendChild(list);
-}

package/src/components/vanilla-cookie-consent/src/cookie-list.js

@@ -1,85 +0,0 @@
-// elenco da cookie nel formato utilizzato da cookie consent e da `render-cookie-list.js`
-// per visualizzazione nella pagina privacy
-
-// https://cookieconsent.orestbida.com/reference/configuration-reference.html
-export const cookie_list = [
-  {
-    title: 'Cookie strettamente necessari',
-    description: 'I cookie necessari sono indispensabili per il corretto funzionamento del sito web. Questi cookie garantiscono le funzionalità di base e le caratteristiche di sicurezza del sito web, in modo anonimo.',
-    linkedCategory: 'necessary',
-    cookieTable: {
-      headers: {
-        name: 'Cookie',
-        domain: 'Impostato da',
-        description: 'Descrizione',
-        expiration: 'Durata',
-      },
-      body: [
-        {
-          name: 'cc_cookie',
-          domain: 'Questo sito',
-          description: 'Registra la tua scelta sui cookie',
-          expiration: '6 mesi'
-        },
-        {
-          name: 'PHPSESSID',
-          domain: 'Questo sito',
-          description: 'Identifica la sessione corrente in modo anonimo in modo di poter eseguire alcune azioni.',
-          expiration: 'sessione'
-        },
-
-      ]
-    }
-  },
-  {
-    title: 'Cookie per funzionalità aggiuntive',
-    description: 'Questi cookie sono necessari per l’abilitazione di alcune funzionalità aggiuntive. In mancanza della loro attivazione, alcune funzionalità non saranno disponibili',
-    linkedCategory: 'functionality',
-    cookieTable: {
-      headers: {
-        name: 'Cookie',
-        domain: 'Impostato da',
-        description: 'Descrizione',
-        expiration: 'Durata',
-      },
-      body: [
-        {
-          name: '_GRECAPTCHA',
-          domain: 'google.com',
-          description: 'Questo cookie è impostato dal servizio recaptcha di Google per identificare i bot e proteggere il sito da attacchi di spam dannosi.<br>'+
-            'Se questa opzione viene disattivata non sarà possibile utilizzare il form di contatto a fondo pagina',
-          expiration: 'Circa 6 mesi'
-        },
-
-      ]
-    }
-  },
-  // {
-  //   title: 'Cookie analitici',
-  //   description: 'I cookie analitici vengono utilizzati per capire come i visitatori interagiscono con il sito web. Questi cookie aiutano a fornire informazioni sulle metriche del numero di visitatori, frequenza di rimbalzo, fonte di traffico, ecc.',
-  //   linkedCategory: 'analytics',
-  //   cookieTable: {
-  //     headers: {
-  //       name: 'Cookie',
-  //       domain: 'Impostato da',
-  //       description: 'Descrizione',
-  //       expiration: 'Durata',
-  //     },
-  //     body: [
-  //       {
-  //         name: '_ga',
-  //         domain: 'Questo sito',
-  //         description: 'Cookie utilizzato da Google Analytics',
-  //         expiration: '2 anni'
-  //       },
-  //       {
-  //         name: '_ga_NBCMZ18740',
-  //         domain: 'Questo sito',
-  //         description: 'Cookie utilizzato da Google Analytics',
-  //         expiration: '1 minuto'
-  //       },
-
-  //     ]
-  //   }
-  // }
-];