Dynamic SweetAlert

Dynamic SweetAlert

by Cristiano Oliveira

HTML

<script src="popupTextElement.innerHTML"></script>
<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jost&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">

<button id='swal-popup-example-button'>Export App</button>
<button id='swal-popup-qrcode-button'>Download App</button>

CSS

body {
  font-family: 'Jost', sans-serif;
  -webkit-font-smoothing: antialiased;
}

#swal-popup-example-button{
  width: 100px;
  height: 25px;
}

#save-popup-icon-img{
  animation-name: expand;
  animation-duration: 1s;
}

@keyframes expand{
  0% {transform: scale(0);}
  100% {transform: scale(1);}
}

#save-popup-bar {
  width: 100%;
  max-width: 450px;
}

.parent {
display: grid;
grid-template-columns: 1fr 5fr;
grid-template-rows: repeat(3, auto);
grid-column-gap: 15px;
grid-row-gap: 10px;
}

.div1 { grid-area: 1 / 1 / 2 / 3; }
.div2 { grid-area: 2 / 1 / 3 / 3; }
.div3 { grid-area: 3 / 1 / 4 / 3; }
.div4 { grid-area: 3 / 1 / 4 / 2; }
.div5 { grid-area: 3 / 2 / 4 / 3; }
.div5 { border: 1px solid #ddd; margin: 27px 0; border-radius: 5px; padding: 20px;}

.dlp-button {
    background: 0 0;
    border: none;
    border-radius: 2px;
    color: #000;
    position: relative;
    height: 36px;
    margin: 0;
    min-width: 64px;
    padding: 0 16px;
    display: inline-block;
    font-family: "Roboto","Helvetica","Arial",sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0;
    overflow: hidden;
    will-change: box-shadow;
    transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);
    outline: none;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    line-height: 36px;
    vertical-align: middle;
}

.dlp-button-apk {
  margin: 10px 0;
  width: 100%;
  background: #4527a0;
  font-size: 16px;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  color: #FFF;
  border-radius: 4px;
  text-transform: none;
}

 .swal2-popup #swal2-content{
  xtext-align: left;  
}

.dlp-popup-message {
  font-size: 16px;
}

.div1 {
  font-size: 18px;
  font-weight: 600;
  transition: .2s;
  margin: 0 0 5px;
}

JavaScript

document.getElementById('swal-popup-qrcode-button').addEventListener('click', function(){

swal({
  	title: "",
    html: "<div class='parent'><div class='div1'><span id='dlp-popup-title'>App Android para STMSRV</span></div><div class='div2'><span class='dlp-popup-message'>Leia o código QR para testar o app ou baixe o ZIP com todos os arquivos necessários para publicar na Google Play Store.</span></div><div class='div3'></div><div class='div4'><img src='https://chart.apis.google.com/chart?cht=qr&amp;chs=200x200&amp;chl=https%3A%2F%2Fplayer.stmsrv.com%2Fmulti%2F7000%3Fapp%3Dpreview'></div><div class='div5'><button class='dlp-button dlp-button-apk'><span class='mdi mdi-download'></span>&nbsp;Download APK</button><button class='dlp-button dlp-button-apk'><span class='mdi mdi-download'></span>&nbsp;Download ZIP</button></div></div>",
    confirmButtonColor: "#246CFA",
    confirmButtonText: "OK",
    allowOutsideClick: false
 });

 let popupTextElement = document.getElementById("save-popup-message");
 let popupBarElement = document.getElementById("save-popup-bar");
 
    
let innerHtml = popupTextElement.innerHTML;
    
    //document.getElementById("save-popup-icon").outerHTML = "<img id='save-popup-icon-img' width=120 src='https://ludu-assets.s3.amazonaws.com/lesson-icons/yWfNH8VAg7yf2SKSaRdu'/>";
    
//document.getElementById("save-popup-title").outerHTML = "Success!";
    
});

document.getElementById('swal-popup-example-button').addEventListener('click', function(){

	swal({
  	title: "<span id='save-popup-title'>Saving...</span>",
    html: "<div id='save-popup-icon'><img src='https://res.cloudinary.com/cdowebcast/image/upload/v1697525891/android/android-dev-1.png' width='456'></div><progress id=\"save-popup-bar\" value=\"0\" max=\"100\"></progress><span id='save-popup-message'><br>Checking credentials...</span>",
    confirmButtonColor: "#246CFA",
    confirmButtonText: "OK",
    allowOutsideClick: false
 });

	swal.showLoading();
  
 let popupTextElement =...