@massimo-cassandro/minimo 0.6.6 → 0.7.0

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);
-
-  }
-}

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 };