mostro al centro mailgo

This commit is contained in:
Matteo Manzinello 2019-05-03 09:08:25 +02:00
parent a9b0b7d675
commit 4da60fd1c5
2 changed files with 48 additions and 24 deletions

36
dist/mailgo.js vendored
View File

@ -2,12 +2,22 @@
let mailgos = document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo)'); let mailgos = document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo)');
let styles = ` let styles = `
.mailgo-modal-container { .mailgo-modal {
background: white; position:fixed;
color:red; top:0;
right:0;
bottom:0;
left:0;
display:none;
}
.mailgo-modal.is-active {
display:flex;
justify-content:center;
align-items:center;
} }
`; `;
// CSS
let styleSheet = document.createElement("style"); let styleSheet = document.createElement("style");
styleSheet.type = "text/css"; styleSheet.type = "text/css";
styleSheet.innerText = styles; styleSheet.innerText = styles;
@ -16,27 +26,29 @@ document.head.appendChild(styleSheet);
console.log("mailgo is WIP!"); console.log("mailgo is WIP!");
// attivo mailgo su tutti gli elementi // attivo mailgo su tutti gli elementi
mailgos.forEach(mailgo => { mailgos.forEach((mailgo, index) => {
let modalContainer = document.createElement("div");
modalContainer.className = "mailgo-modal-container";
let modal = document.createElement("div"); let modal = document.createElement("div");
modal.className = "mailgo-modal"; modal.className = "mailgo-modal";
modal.id = "mailgo-modal-" + index;
modalContainer.appendChild(modal); let modalContent = document.createElement("div");
modalContent.className = "mailgo-modal-content";
let modalContent = document.createTextNode("mailgo");
modal.appendChild(modalContent); modal.appendChild(modalContent);
modalContainer.style.display = "none"; let text = document.createTextNode("mailgo");
mailgo.parentNode.insertBefore(modalContainer, mailgo.nextSibling); modalContent.appendChild(text);
mailgo.parentNode.insertBefore(modal, mailgo.nextSibling);
mailgo.addEventListener( mailgo.addEventListener(
"click", "click",
event => { event => {
// blocco l'esecuzione normale del mailto: // blocco l'esecuzione normale del mailto:
event.preventDefault(); event.preventDefault();
mailgo.nextElementSibling.style.display = "block";
// setto il modal come attivo
mailgo.nextElementSibling.classList.add("is-active");
}, },
false false
); );

View File

@ -2,12 +2,22 @@
let mailgos = document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo)'); let mailgos = document.querySelectorAll('a[href^="mailto:"]:not(.no-mailgo)');
let styles = ` let styles = `
.mailgo-modal-container { .mailgo-modal {
background: white; position:fixed;
color:red; top:0;
right:0;
bottom:0;
left:0;
display:none;
}
.mailgo-modal.is-active {
display:flex;
justify-content:center;
align-items:center;
} }
`; `;
// CSS
let styleSheet = document.createElement("style"); let styleSheet = document.createElement("style");
styleSheet.type = "text/css"; styleSheet.type = "text/css";
styleSheet.innerText = styles; styleSheet.innerText = styles;
@ -16,27 +26,29 @@ document.head.appendChild(styleSheet);
console.log("mailgo is WIP!"); console.log("mailgo is WIP!");
// attivo mailgo su tutti gli elementi // attivo mailgo su tutti gli elementi
mailgos.forEach(mailgo => { mailgos.forEach((mailgo, index) => {
let modalContainer = document.createElement("div");
modalContainer.className = "mailgo-modal-container";
let modal = document.createElement("div"); let modal = document.createElement("div");
modal.className = "mailgo-modal"; modal.className = "mailgo-modal";
modal.id = "mailgo-modal-" + index;
modalContainer.appendChild(modal); let modalContent = document.createElement("div");
modalContent.className = "mailgo-modal-content";
let modalContent = document.createTextNode("mailgo");
modal.appendChild(modalContent); modal.appendChild(modalContent);
modalContainer.style.display = "none"; let text = document.createTextNode("mailgo");
mailgo.parentNode.insertBefore(modalContainer, mailgo.nextSibling); modalContent.appendChild(text);
mailgo.parentNode.insertBefore(modal, mailgo.nextSibling);
mailgo.addEventListener( mailgo.addEventListener(
"click", "click",
event => { event => {
// blocco l'esecuzione normale del mailto: // blocco l'esecuzione normale del mailto:
event.preventDefault(); event.preventDefault();
mailgo.nextElementSibling.style.display = "block";
// setto il modal come attivo
mailgo.nextElementSibling.classList.add("is-active");
}, },
false false
); );