@massimo-cassandro/minimo 0.1.0

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

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

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

@@ -0,0 +1,85 @@
+// 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'
+  //       },
+
+  //     ]
+  //   }
+  // }
+];

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

@@ -0,0 +1,38 @@
+import { cookie_list } from './cookie-list.js';
+
+export const it_translation = {
+  'it': {
+    consentModal: {
+      title: 'Utilizziamo i cookie per offrirti la migliore esperienza di navigazione ricordando le tue preferenze.',
+      description: 'Scegliendo l’opzione <strong>“Accetta tutti i cookie”</strong>, acconsenti all’uso di <strong>tutti</strong> i cookie.<br>' +
+        'Il pulsante <strong>“Gestisci le tue preferenze”</strong>, permette di selezionare singole categorie di cookies ed avere informazioni più dettagliate.<br>' +
+        'Tieni presente che alcune funzionalità potrebbero non essere disponibili se si accettano solo i cookie essenziali.<br>' +
+        'Per ulteriori informazioni vai alla pagina sulla <a href="/privacy-policy">Privacy e Cookie Policy</a>',
+      acceptAllBtn: 'Accetta tutti i cookie',
+      acceptNecessaryBtn: 'Accetta solo quelli essenziali',
+      showPreferencesBtn: 'Gestisci le tue preferenze'
+    },
+    preferencesModal: {
+      title: 'Gestici le tue preferenze sui cookie',
+      acceptAllBtn: 'Accetta tutti i cookie',
+      acceptNecessaryBtn: 'Accetta solo i cookie essenziali',
+      savePreferencesBtn: 'Salva le tue preferenze',
+      closeIconLabel: 'Chiudi',
+      sections: [
+        {
+          title: 'Utilizzo dei cookie',
+          description: 'Questo sito web utilizza i cookie per migliorare la tua esperienza di navigazione.<br>' +
+            'I cookie classificati come <em>strettamente necessari</em> vengono memorizzati nel browser in quanto sono essenziali per il funzionamento del sito.<br>' +
+            'Utilizziamo anche cookie di terze parti che ci aiutano ad analizzare e capire come utilizzi il portale. Questi cookie verranno memorizzati nel tuo browser solo con il tuo consenso. '+
+            'Hai la possibilità di disattivare questi cookie, tuttavia, la loro disattivazione potrebbe influire sulla tua esperienza di navigazione.'
+        },
+        ...cookie_list,
+        {
+          title: 'Altre informazioni',
+          // description: 'Per ulteriori informazioni, consulta la pagina relativa a Privacy e Cookie Policy'
+          description: 'Per ulteriori informazioni, consulta la pagina relativa a <button class="btn-link" data-content="privacy" type="button" aria-haspopup="dialog">Privacy e Cookie Policy</button>'
+        }
+      ]
+    }
+  }
+};

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

@@ -0,0 +1,54 @@
+// imposta lo script analytics GA4 (se l'utente ha dato il consenso)
+
+
+export function run_analytics() {
+
+  const analytics_id = 'G-NBCMZ18740';
+
+  // purchase_data_element = document.getElementById('ga-purchase-data'); // deinito in landing-acquisti
+  // let purchase_obj = null;
+  // if(purchase_data_element) {
+  //   purchase_obj = JSON.parse(purchase_data_element.dataset.d);
+  // }
+
+  let script = document.createElement('script');
+
+  //   <script async src="https://www.googletagmanager.com/gtag/js?id={{ GA_id }}"></script>
+  //   <script>
+  //     window.dataLayer = window.dataLayer || [];
+  //     function gtag(){dataLayer.push(arguments);}
+  //     gtag('js', new Date());
+  //     gtag('config', '{{ GA_id }}');
+  // </script>
+
+  script.onload = function() {
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      window.dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+    gtag('config', analytics_id);
+
+    // if(purchase_obj) {
+    //   gtag('event', 'purchase', purchase_obj);
+    // }
+
+    // console.log('GA4 onLoad');
+  };
+
+  script.classList.add('ga');
+  script.src = `https://www.googletagmanager.com/gtag/js?id=${analytics_id}`;
+  document.head.appendChild(script);
+
+  // console.log('Google Analytics ON');
+  // console.log(document.head.querySelector('script.ga'));
+  // console.groupCollapsed('Impostazioni analytics');
+  // console.log(`analytics_id: ${analytics_id}`);
+  // // if(purchase_obj) {
+  // //   console.log('purchase:');
+  // //   console.log(purchase_obj);
+  // // }
+  // console.log($wt.cookie.get('cck1'));
+  // console.groupEnd();
+
+}

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

@@ -0,0 +1,71 @@
+// TODO rivedere, uso anche al di fuori di cookie consent?
+// TODO spostare nella dir recaptcha
+
+
+import { recaptcha_key } from '@src/pages/recaptcha-params.js';
+
+const form_wrapper = document.querySelector('.recaptcha-form-wrapper');
+
+export function addRecaptchaScript(callback) {
+
+  if (!document.head.querySelector('script.recaptcha')) {
+    const script = document.createElement('script');
+
+    if(callback != null && typeof callback === 'function') {
+      script.onload = callback;
+    }
+
+    script.async = true;
+    script.defer = true;
+    script.className = 'recaptcha';
+    script.src = `https://www.google.com/recaptcha/api.js?render=${recaptcha_key}`;
+    document.head.appendChild(script);
+  }
+
+}
+
+// imposta lo script analytics GA4 (se l'utente ha dato il consenso)
+export function run_recaptcha() {
+
+  if(recaptcha_key) {
+    addRecaptchaScript(() => form_wrapper.classList.remove('disabled'));
+  }
+
+}
+
+export function disableRecaptcha() {
+  document.head.querySelector('script.recaptcha')?.remove();
+  form_wrapper?.classList.add('disabled');
+}
+
+// funzione da richiamare al submit del form con recaptcha
+/*
+
+loadRecaptchaAsync('TUO_SITE_KEY', () => {
+
+  grecaptcha.ready(function() {
+    grecaptcha.execute('TUO_SITE_KEY', {action: 'submit'}).then(function(token) {
+      // Usa il token
+    });
+  });
+});
+*/
+
+export function loadRecaptchaAsync(siteKey, callback) {
+
+  function waitForGrecaptcha(cb) {
+
+    if (window.grecaptcha && typeof window.grecaptcha.execute === 'function') {
+      window.grecaptcha.ready(cb);
+    } else {
+      setTimeout(() => waitForGrecaptcha(cb), 100);
+    }
+  }
+
+  if (document.querySelector('script.recaptcha')) {
+    waitForGrecaptcha(callback);
+    return;
+  }
+
+  addRecaptchaScript(() => waitForGrecaptcha(callback));
+}