Dissolvenza funziona in uscita ma non in entrata

[KillerWorm]

Ogni pagina del mio sito adesso passa il controllo W3C senza errore, senza warning e senza nemmeno info!

ottimo!

Purtroppo ora non posso dedicarmi più di tanto qui, causa altri impegni, ma appena avrò un po' di tempo provo a testare il tuo esempio e vedere come può essere ottimizzato.

Chiaramente ben vengano interventi di eventuali altri utenti.
A presto

[ivanisevic82]

Grazie!

[KillerWorm]

Ciao, eccomi tornato, per il momento

Riprendendo il discorso, puoi eliminare il CSS che gestisce la dissolvenza, sia per l'apertura sia per la chiusura della finestra modal, quindi gestire il tutto tramite JavaScript.

Sostanzialmente puoi ottimizzare le due funzioni in questo modo:

function showMessage(suffix, message) {
  const messageContainer = document.createElement('div');
  const messageContent = document.createElement('div');
  const btnClose = document.createElement('input');

  messageContainer.classList.add('message-container', suffix + '-message-container');
  messageContent.classList.add(suffix + '-message');
  btnClose.classList.add('close-button');

  messageContent.innerHTML = message;

  btnClose.type = 'button';
  btnClose.value = 'Chiudi';
  btnClose.addEventListener('click', closeMessage);
  
  messageContainer.appendChild(messageContent);
  messageContainer.appendChild(btnClose);
  document.body.appendChild(messageContainer);
  
  // Fadein
  messageContainer.style = 'opacity: 0; transition: opacity .5s ease-out;';
  setTimeout(() => {messageContainer.style.opacity = '1';}, 0);
}


function closeMessage(e) {
  const messageContainer = e.target.closest('.message-container');

  // Fadeout
  messageContainer.style = 'opacity: 0';
  messageContainer.addEventListener('transitionend', () => {document.body.removeChild(messageContainer);});
}

Nota che per creare le dissolvenze ho applicato direttamente un po' di stile in linea.

Per creare il fadein ho applicato opacity:0 e transition nel momento in cui viene creata la modal, quindi ho usato setTimeout per applicare opacity:1 in differita, così che sia eseguita la transizione tra i due valori.

Per il fadeout ho semplicemente applicato opacity:0 (mentre transition è già presente perché applicato inizialmente), quindi ho impostato un evento transitionend per determinare esattamente la fine della transizione e rimuovere interamente la modal.

Qualche altro dettaglio che dovrebbe essere rivisto:

- nel tuo ultimo esempio non vedo l'elemento #myForm ma nello script lo stai "interpellando" per impostarne l'evento submit:

document.getElementById('myForm').addEventListener('submit', function (event) ...

Tra l'altro il submit del form lo hai già impostato sopra:

form.addEventListener('submit', function (event) { ...

Suppongo sia da rimuovere.

- vedo delle altre ridondanze che potrebbero essere snellite. La funzione toggleNomeCognomeRequired è una "ripetizione" dei controlli che avvengono per il submit. Inoltre le stesse stringhe testuali vengono ripetute più volte per i vari setCustomValidity.

Sicuramente si può ottimizzare il tutto impostando magari delle funzioni secondarie per i diversi controlli e delle variabili per gestire i vari messaggi (ad esempio puoi usare un array o un oggetto in cui inserire tutti i messaggi che possono essere usati).

Per il momento è tutto. Prova ad apportare le modifiche come consigliato e fai sapere

[ivanisevic82]

Grazie mille Killer, visto adesso! Testo e ti faccio sapere, a presto!

[ivanisevic82]

Killer, funziona perfettamente (ne ero certo!), ti ringrazio infinitamente!

Avrei un'ultima modifica da apportare.

Vorrei aggiungere un div ulteriormente contenitore, che abbia altezza e larghezza 100% e sfondo nero con una leggera trasparenza e sfocatura, in modo sostanzialmente da oscurare il resto del sito e far si che l'attenzione si concentri solo sul pannello che riporta il messaggio (che ovviamente avrà z-index superiore rispetto allo sfondo scuro).

E' possibile aggiungere questo div via JS?
Ovviamente ti chiedo solo questo, la parte CSS poi la curerei io.

Grazie ancora!!!

[KillerWorm]

tutto è possibile. L'effetto che vuoi ottenere è il "classico" overlay.
Non vorrei però che la minestra pronta diventi un'abitudine. Ti invito a provare da te e nel caso ti si può aiutare a correggere il tiro. Guarda come ho creata gli elementi via script, puoi operare allo stesso modo per creare un "contenitore nonno" a cui dare uno sfondo semitrasparente e dimensioni 100%. Qui dentro ci appenderai quindi il tutto mentre questo contenitore lo appenderai al body.

Per applicare l'effetto sfocatura puoi usare il filtro blur CSS (applicando la funzione blur() alla proprietà filter), ma questo va applicato ai contenuti della pagina e non direttamente al tuo overlay, che infatti non dovrà subire questo effetto.
Dovrai quindi applicare il blur ad un eventuale contenitore principale della pagina.
Volendo, potresti usare una classe da applicare al body, così che sia facile definire l'effetto nel CSS per poi gestirne l'applicazione via script.

In alternativa esiste la proprietà backdrop-filter con cui puoi invece applicare il blur (o qualsiasi altro filtro) direttamente sul tuo elemento overlay. In questo caso il filtro avrà effetto su ciò che si vedrà sotto tale elemento. Essendo però una specifica relativamente nuova allo stato attuale, potrebbe non essere supportata da browser non troppo aggiornati.

Ti invito a fare qualche ricerca e qualche prova su quanto indicato. Si potrà poi ragionare sulla base dei tuoi elaborati.

[ivanisevic82]

In realtà, proprio per farti vedere che non cercavo la "minestra pronta", avevo altre due cose da scriverti ma le ho dimenticate quando ho inviato l'ultimo post.

La prima è che ho migliorato il codice secondo le tue indicazioni ed ho razionalizzato i breakpoint in modo da ottenere un significativo risparmio di codice anche nella parte html (dove prima avevo contenuti duplicati per soddisfare esigenze responsive).

Questo è il codice modificato:

var nomeInput = document.getElementById('nome');var cognomeInput = document.getElementById('cognome');
var emailInput = document.getElementById('email');
var telefonoInput = document.getElementById('telefono');
var form = document.querySelector('form');


const ERROR_MESSAGE_NOME_COGNOME = "Compila almeno uno dei campi nome / cognome";
const ERROR_MESSAGE_EMAIL_TELEFONO = "Compila almeno uno dei campi email / telefono";


nomeInput.addEventListener('input', toggleNomeCognomeRequired);
cognomeInput.addEventListener('input', toggleNomeCognomeRequired);
emailInput.addEventListener('input', toggleEmailTelefonoRequired);
telefonoInput.addEventListener('input', toggleEmailTelefonoRequired);


function toggleNomeCognomeRequired() {
  var nomeValue = nomeInput.value.trim();
  var cognomeValue = cognomeInput.value.trim();


  if (!nomeValue && !cognomeValue) {
    nomeInput.setCustomValidity(ERROR_MESSAGE_NOME_COGNOME);
    cognomeInput.setCustomValidity(ERROR_MESSAGE_NOME_COGNOME);
  } else {
    nomeInput.setCustomValidity('');
    cognomeInput.setCustomValidity('');
  }
}


function toggleEmailTelefonoRequired() {
  var emailValue = emailInput.value.trim();
  var telefonoValue = telefonoInput.value.trim();


  if (!emailValue && !telefonoValue) {
    emailInput.setCustomValidity(ERROR_MESSAGE_EMAIL_TELEFONO);
    telefonoInput.setCustomValidity(ERROR_MESSAGE_EMAIL_TELEFONO);
  } else {
    emailInput.setCustomValidity('');
    telefonoInput.setCustomValidity('');
  }
}


form.addEventListener('submit', function (event) {
  event.preventDefault();


  // Utilizzo le funzioni per controllare la validità
  toggleNomeCognomeRequired();
  toggleEmailTelefonoRequired();


  var isValid = !nomeInput.validity.customError && !cognomeInput.validity.customError && 
                !emailInput.validity.customError && !telefonoInput.validity.customError;


  if (isValid) {
    var formData = new FormData(form);


    fetch(form.action, {
      method: 'POST',
      body: formData,
    })
      .then(function (response) {
        if (response.ok) {
          form.reset();
          showMessage('success', 'Grazie per averci contattato. Vi risponderemo nel più breve tempo possibile.');
        } else {
          showMessage('error', 'Si è verificato un errore durante l\'invio del messaggio. Riprova più tardi.');
        }
      })
      .catch(function (error) {
        console.error('Error:', error);
      });
  }
});


function showMessage(suffix, message) {
  const messageContainer = document.createElement('div');
  const messageContent = document.createElement('div');
  const btnClose = document.createElement('input');


  messageContainer.classList.add('message-container', suffix + '-message-container');
  messageContent.classList.add(suffix + '-message');
  btnClose.classList.add('close-button');


  messageContent.innerHTML = message;


  btnClose.type = 'button';
  btnClose.value = 'Chiudi';
  btnClose.addEventListener('click', closeMessage);
  
  messageContainer.appendChild(messageContent);
  messageContainer.appendChild(btnClose);
  document.body.appendChild(messageContainer);
  
  // Fadein
  messageContainer.style = 'opacity: 0; transition: opacity .5s ease-out;';
  setTimeout(() => {messageContainer.style.opacity = '1';}, 0);
}




function closeMessage(e) {
  const messageContainer = e.target.closest('.message-container');


  // Fadeout
  messageContainer.style = 'opacity: 0';
  messageContainer.addEventListener('transitionend', () => {document.body.removeChild(messageContainer);});


}

Per quanto riguardo la modifica al codice JS, essendo un linguaggio che non conosco assolutamente, non ho potuto far altro che chiedere lumi al mio amico ChatGPT (che per tante cose mi ha aiutato egregiamente).

Purtroppo però in questa occasione non è stato all'altezza.

Ho provato anche io con il fai da te, pur senza comprendere a fondo cosa facessi, in via deduttiva: ho provato a creare un nuovo DIV come hai fatto tu. Tuttavia ho visto che tu hai creato regole diverse per il primo e per il secondo...alla fine dopo alcuni tentativi ho desistito!

In ogni caso, continuerò a provare e a cercare soluzioni, grazie!

[KillerWorm]

avevo altre due cose da scriverti ma le ho dimenticate quando ho inviato l'ultimo post.

Come diceva mia nonna: "se lo hai dimenticato vuol dire che non era così importante"

La prima è che ho migliorato il codice

Ottimo!

Ho provato anche io con il fai da te, pur senza comprendere a fondo cosa facessi, in via deduttiva: ho provato a creare un nuovo DIV come hai fatto tu. Tuttavia ho visto che tu hai creato regole diverse per il primo e per il secondo...alla fine dopo alcuni tentativi ho desistito!

Chiaro, ogni elemento va impostato in modo specifico per ciò che serve.

Se vuoi posso guidarti passo passo cercando di analizzare per ordine cosa va modificato.
Consideriamo come modificare la funzione showMessage:

- hai creato un nuovo DIV, direi che questo puoi usarlo come contenitore principale. Definiamolo ad esempio come "overlay"

const overlay = document.createElement('div');

- ora la variabile overlay, quando usata nell'ambito della funzione showMessage, fa riferimento a quell'elemento;

- questo elemento deve essere "appeso" al <body> per renderlo disponibile nel DOM della tua pagina. Sostanzialmente dovrai appenderlo così come ho fatto per messageContainer, anzi direi che deve prenderne proprio il suo posto. Di conseguenza messageContainer non andrà più appeso al body ma andrà appeso appunto dentro overlay.

Per ora prova ad applicare questi punti e postane lo script modificato (giusto quello della funzione showMessage).
Vediamo poi come proseguire

[ivanisevic82]

Riporto direttamente il codice aggiornato:

document.addEventListener('DOMContentLoaded', function() {

  var nomeInput = document.getElementById('nome');
  var cognomeInput = document.getElementById('cognome');
  var emailInput = document.getElementById('email');
  var telefonoInput = document.getElementById('telefono');
  var form = document.querySelector('form');


  const ERROR_MESSAGE_NOME_COGNOME = "Compila almeno uno dei campi nome / cognome";
  const ERROR_MESSAGE_EMAIL_TELEFONO = "Compila almeno uno dei campi email / telefono";


  nomeInput.addEventListener('input', toggleNomeCognomeRequired);
  cognomeInput.addEventListener('input', toggleNomeCognomeRequired);
  emailInput.addEventListener('input', toggleEmailTelefonoRequired);
  telefonoInput.addEventListener('input', toggleEmailTelefonoRequired);


  function toggleNomeCognomeRequired() {
    var nomeValue = nomeInput.value.trim();
    var cognomeValue = cognomeInput.value.trim();


    if (!nomeValue && !cognomeValue) {
      nomeInput.setCustomValidity(ERROR_MESSAGE_NOME_COGNOME);
      cognomeInput.setCustomValidity(ERROR_MESSAGE_NOME_COGNOME);
    } else {
      nomeInput.setCustomValidity('');
      cognomeInput.setCustomValidity('');
    }
  }


  function toggleEmailTelefonoRequired() {
    var emailValue = emailInput.value.trim();
    var telefonoValue = telefonoInput.value.trim();


    if (!emailValue && !telefonoValue) {
      emailInput.setCustomValidity(ERROR_MESSAGE_EMAIL_TELEFONO);
      telefonoInput.setCustomValidity(ERROR_MESSAGE_EMAIL_TELEFONO);
    } else {
      emailInput.setCustomValidity('');
      telefonoInput.setCustomValidity('');
    }
  }


  form.addEventListener('submit', function (event) {
    event.preventDefault();


    toggleNomeCognomeRequired();
    toggleEmailTelefonoRequired();


    var isValid = !nomeInput.validity.customError && !cognomeInput.validity.customError && 
                  !emailInput.validity.customError && !telefonoInput.validity.customError;


    if (isValid) {
      var formData = new FormData(form);


      fetch(form.action, {
        method: 'POST',
        body: formData,
      })
        .then(function (response) {
          if (response.ok) {
            form.reset();
            showMessage('success', 'Grazie per averci contattato. Vi risponderemo nel più breve tempo possibile.');
          } else {
            showMessage('error', 'Si è verificato un errore durante l\'invio del messaggio. Riprova più tardi.');
          }
        })
        .catch(function (error) {
          console.error('Error:', error);
        });
    }
  });


  function showMessage(suffix, message) {
    const overlay = document.createElement('div');
    const messageContainer = document.createElement('div');
    const messageContent = document.createElement('div');
    const btnClose = document.createElement('input');


    overlay.classList.add('overlay');
    messageContainer.classList.add('message-container', suffix + '-message-container');
    messageContent.classList.add(suffix + '-message');
    btnClose.classList.add('close-button');


    messageContent.innerHTML = message;


    btnClose.type = 'button';
    btnClose.value = 'Chiudi';
    btnClose.addEventListener('click', closeMessage);


    messageContainer.appendChild(messageContent);
    messageContainer.appendChild(btnClose);
    overlay.appendChild(messageContainer);
    document.body.appendChild(overlay);
    
    // Fadein
    overlay.style = 'opacity: 0; transition: opacity .5s ease-out;';
    setTimeout(() => {overlay.style.opacity = '1';}, 0);
  }


  function closeMessage(e) {
    const overlay = e.target.closest('.overlay');


    // Fadeout
    overlay.style.opacity = '0';
    overlay.addEventListener('transitionend', () => {document.body.removeChild(overlay);});
  }


});

.overlay {position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(3, 3, 3, 0.6);  
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
opacity: 1;
transition: opacity 0.5s;
}

Funziona tutto bene...sarei disonesto che non ammettessi che mi hai aiutato il mio solito amico Chat Gpt.

Devo dire che la versione 4, che sto usando da qualche tempo, non solo è molto più performante e precisa, ma anche didattica.

Ogni cosa che chiedo non si limita a darmi una risposta ma si sofferma in spiegazioni dettagliate...

Mi sa che alla fine ci lascerà tutti a casa

[KillerWorm]

Funziona tutto bene...
Mi sa che alla fine ci lascerà tutti a casa

Ottimo avremo più tempo libero