@massimo-cassandro/minimo 0.1.3 → 0.1.5

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

@@ -0,0 +1,85 @@
+// import './modal-alert.css'; // importato direttamente dal css principale per ottimizzarne l'uso
+
+import modalAlert from '@massimo-cassandro/modal-alert';
+
+import checkIcon from './svg/check-circle-duotone.svg?inline';
+import infoIcon from './svg/info-duotone.svg?inline';
+import confirmIcon from './svg/question-duotone.svg?inline';
+import warningIcon from './svg/warning-duotone.svg?inline';
+import errorIcon from './svg/x-circle-duotone.svg?inline';
+
+const custom_defaults = {
+
+  globals: {
+    onOpen: () => {
+      document.body.classList.add('overflow-hidden');
+    },
+    onClose: () => {
+      document.body.classList.remove('overflow-hidden');
+    },
+    cssFile: null,
+    animation: true,
+    showMarks: true,
+  },
+
+  success: {
+    title: 'Operazione completata',
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: null,
+    ok_btn_class: 'btn btn-success',
+    timer: 4000, // ms
+  },
+  error: {
+    title: 'Si è verificato un errore',
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: null,
+    text_class: null,
+    ok_btn_class: 'btn btn-danger',
+    timer: null,
+  },
+  warning: {
+    title: 'Attenzione!',
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: null,
+    text_class: null,
+    ok_btn_class: 'btn btn-warning',
+    timer: null,
+  },
+  info: {
+    title: null,
+    mes: null,
+    ok_btn_text: 'OK',
+    heading_class: null,
+    text_class: null,
+    ok_btn_class: 'btn btn-info',
+    timer: null,
+  },
+  confirm: {
+    title: 'Confermi?',
+    mes: null,
+    ok_btn_text: 'OK',
+    cancel_btn_text: 'Cancel',
+    cancel_focus: true, // false to give focus to the ok button
+    heading_class: null,
+    text_class: null,
+    ok_btn_class: 'btn btn-warning',
+    cancel_btn_class: 'btn btn-outline-secondary',
+    callback: null,
+    timer: null
+  }
+};
+
+const marks = {
+  success: checkIcon,
+  error: errorIcon,
+  warning: warningIcon,
+  info: infoIcon,
+  confirm: confirmIcon
+};
+
+export function mAlert(params) {
+  modalAlert(params, custom_defaults, marks);
+}

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

@@ -0,0 +1,152 @@
+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(--spacing-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

@@ -0,0 +1,142 @@
+/* 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(--spacing-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(--spacing-md) 0;
+  }
+  .padding-none & {
+    padding: 0;
+  }
+  /* stylelint-enable selector-class-pattern */
+}
+
+.modalSpinner {
+  position: relative;
+  padding-block-start: var(--spacing-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(--spacing-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/recaptcha/recaptcha.css

@@ -0,0 +1,74 @@
+/*
+
+{%- 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-mix(in srgb, #000 50%, transparent));
+      }
+    }
+    input, select, textarea {
+      pointer-events: none;
+      user-select: none;
+    }
+
+    .recaptcha-alert {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      display: block;
+      padding: var(--spacing-xs);
+      color: var(--recaptcha-alert-fg, #fff);
+      background-color: var(--recaptcha-alert-bg, #000);
+      border: .5px solid currentColor;
+      border-radius: var(--radius-xs);
+      box-shadow: var(--box-shadow-base);
+      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/sf-macro/sf-macro.css

@@ -0,0 +1,104 @@
+
+.sf-macro-wrapper {
+  --sf-macro-rows-padding: .5rem;
+  --sf-macro-rows-margin-bottom: 1rem;
+  --sf-macro-rows-border-radius: .4rem;
+  --sf-macro-rows-hover-bg-color: color-mix(in srgb, var(--body-bg-color) 95%, #000);
+  --sf-macro-even-rows-bg-color: var(--body-bg-color); /* rgb(0 0 0 / .05); */
+  --sf-macro-rows-border: 1px solid var(--stone-5);
+  --sf-macro-close-btn-size: 2rem;
+
+
+  /* etichette campi righe successive alla prima */
+  @media (--desktop-up) {
+    &:not(.always-show-labels) {
+      .sf-macro-riga {
+        &:not(:first-child) {
+          .form-label, label {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  /*
+  // forza la visualizzazione delle etichette in tutte le righe
+  // a partire dal breakpont successivo a quello indicato
+  @each $brk in (xs, sm, md, lg, xl) {
+    &.sf-macro-show-label-down-#{$brk} {
+      @include media-breakpoint-down($brk) {
+        .form-label, label {
+          display: inline-block !important;
+        }
+      } // end @media
+    }
+  } // end @each
+  */
+
+}
+
+.sf-macro-riga {
+  position: relative;
+  padding: var(--sf-macro-rows-padding);
+  margin-bottom: var(--sf-macro-rows-margin-bottom);
+  border: var(--sf-macro-rows-border);
+  border-radius: var(--sf-macro-rows-border-radius);
+
+  &:nth-child(even) {
+    background-color: var(--sf-macro-even-rows-bg-color);
+  }
+
+
+  &:hover {
+    background-color: var(--sf-macro-rows-hover-bg-color);
+  }
+
+  .form-group {
+    margin-bottom: 0;
+
+    &:has([type='checkbox']) {
+      align-self: center;
+    }
+  }
+
+  .grid {
+    row-gap: .8rem;
+  }
+
+} /* end .sf-macro-riga */
+
+
+.sf-macro-close-btn { /* button */
+  position: absolute;
+  top: -.5rem;
+  right: -.5rem;
+  z-index: 1;
+  display: block;
+  width: var(--sf-macro-close-btn-size);
+  height: var(--sf-macro-close-btn-size);
+  padding: 1px;
+  color: currentColor;
+  background-color: var(--body-content-bg);
+  border-radius: 50%;
+
+
+  &[disabled], [disabled] & {
+    cursor: not-allowed;
+    opacity: .4;
+    transform: skew(-15deg);
+  }
+
+  svg {
+    width: 100%;
+    aspect-ratio: 1;
+  }
+}
+
+.sf-macro-riga:has(.sf-macro-close-btn:not(:disabled):hover) {
+
+  outline: 2px dashed var(--status-danger-color);
+  .sf-macro-close-btn {
+    color: var(--status-danger-color);
+  }
+}

package/src/components/sf-macro/sf-macro.js

@@ -0,0 +1,44 @@
+import './sf-macro.css';
+
+export function sf_macro({
+  wrapper_selector = '.sf-macro-wrapper',
+  row_selector = '.sf-macro-riga',
+  add_callback = null,
+  del_callback = null
+}={}) {
+
+  document.querySelectorAll(wrapper_selector).forEach(fset => {
+    const macro_container = fset.querySelector('.sf-macro-container')
+      ,macro_template = macro_container.dataset.template
+    ;
+
+    // listeners
+    fset.addEventListener('click', e => {
+
+      if(e.target.closest('.sf-macro-riga-add')) {
+
+        const righe_macro = macro_container.querySelectorAll(row_selector).length;
+
+        macro_container.insertAdjacentHTML('beforeend',
+          macro_template.replace(/__indice\d?__/g, righe_macro + 1)
+        );
+
+        if(add_callback && typeof add_callback === 'function') {
+          add_callback(
+            macro_container.querySelector('.sf-macro-riga:last-child'),
+            e.target.closest('.sf-macro-riga-add')
+          );
+        }
+
+
+      } else if(e.target.closest('.sf-macro-close-btn')) {
+        e.target.closest(row_selector).remove();
+
+        if(del_callback && typeof del_callback === 'function') {
+          del_callback();
+        }
+      }
+
+    }, false);
+  }); // end foreach wrapper_selector
+}

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

@@ -0,0 +1,20 @@
+/* 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

@@ -0,0 +1,76 @@
+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
+      //   }
+      // }
+
+    }
+  }
+});
+