/* Template Name: Ubold - Responsive Bootstrap 4 Admin Dashboard Author: CoderThemes Website: https://coderthemes.com/ Contact: support@coderthemes.com File: Sweet Alerts init js */ //Basic document.getElementById("sa-basic").addEventListener("click", function() { Swal.fire( { title: 'Any fool can use a computer!', } ) }); //A title with a text under document.getElementById("sa-title").addEventListener("click", function() { Swal.fire( { title: "The Internet?", text: 'That thing is still around?', icon: 'question' } ) }); //Success Message document.getElementById("sa-success").addEventListener("click", function() { Swal.fire( { title: 'Good job!', text: 'You clicked the button!', icon: 'success' } ) }); //Success Message document.getElementById("sa-long-content").addEventListener("click", function() { Swal.fire( { imageUrl: 'https://placeholder.pics/svg/300x1500', imageHeight: 1500, imageAlt: 'A tall image' } ) }); //custom position document.getElementById("sa-custom-position").addEventListener("click", function() { Swal.fire({ position: 'top-end', icon: 'success', title: 'Your work has been saved', showConfirmButton: false, timer: 1500 }) }); //sa-error document.getElementById("sa-error").addEventListener("click", function() { Swal.fire({ icon: 'error', title: 'Oops...', text: 'Something went wrong!', footer: 'Why do I have this issue?' }) }); //Warning Message document.getElementById("sa-warning").addEventListener("click", function() { Swal.fire({ title: "Are you sure?", text: "You won't be able to revert this!", icon: "warning", showCancelButton: true, confirmButtonColor: "#28bb4b", cancelButtonColor: "#f34e4e", confirmButtonText: "Yes, delete it!" }).then(function (result) { if (result.value) { Swal.fire("Deleted!", "Your file has been deleted.", "success" ); } }); }); //Parameter document.getElementById("sa-params").addEventListener("click", function() { Swal.fire({ title: 'Are you sure?', text: "You won't be able to revert this!", icon: 'warning', showCancelButton: true, confirmButtonText: 'Yes, delete it!', cancelButtonText: 'No, cancel!', confirmButtonClass: 'btn btn-success mt-2', cancelButtonClass: 'btn btn-danger ms-2 mt-2', buttonsStyling: false }).then(function (result) { if (result.value) { Swal.fire({ title: 'Deleted!', text: 'Your file has been deleted.', icon: 'success', confirmButtonColor: '#4a4fea', }) } else if ( // Read more about handling dismissals result.dismiss === Swal.DismissReason.cancel ) { Swal.fire({ title: 'Cancelled', text: 'Your imaginary file is safe :)', icon: 'error', confirmButtonColor: '#4a4fea', }) } }); }); //Custom Image document.getElementById("sa-image").addEventListener("click", function() { Swal.fire({ title: 'UBold', text: 'Responsive Bootstrap 4 Admin Dashboard', imageUrl: '../assets/images/logo-sm.png', imageHeight: 50, confirmButtonColor: "#4a4fea", animation: false }) }); //Auto Close Timer document.getElementById("sa-close").addEventListener("click", function() { var timerInterval; Swal.fire({ title: 'Auto close alert!', html: 'I will close in seconds.', timer: 2000, onBeforeOpen:function () { Swal.showLoading() timerInterval = setInterval(function() { Swal.getContent().querySelector('strong') .textContent = Swal.getTimerLeft() }, 100) }, onClose: function () { clearInterval(timerInterval) } }).then(function (result) { if ( // Read more about handling dismissals result.dismiss === Swal.DismissReason.timer ) { console.log('I was closed by the timer') } }) }); //custom html alert document.getElementById("custom-html-alert").addEventListener("click", function() { Swal.fire({ title: 'HTML example', icon: 'info', html: 'You can use bold text, ' + 'links ' + 'and other HTML tags', showCloseButton: true, showCancelButton: true, confirmButtonClass: 'btn btn-confirm', cancelButtonClass: 'btn btn-cancel ml-1', confirmButtonText: ' Great!', cancelButtonText: '' }) }); //Custom width padding document.getElementById("custom-padding-width-alert").addEventListener("click", function() { Swal.fire({ title: 'Custom width, padding, background.', width: 600, padding: 100, background: '#fff url(//subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/geometry.png)' }) }); //Ajax document.getElementById("ajax-alert").addEventListener("click", function() { Swal.fire({ title: 'Submit email to run ajax request', input: 'email', showCancelButton: true, confirmButtonText: 'Submit', showLoaderOnConfirm: true, confirmButtonColor: "#4a4fea", cancelButtonColor: "#f34e4e", preConfirm: function (email) { return new Promise(function (resolve, reject) { setTimeout(function () { if (email === 'taken@example.com') { reject('This email is already taken.') } else { resolve() } }, 2000) }) }, allowOutsideClick: false }).then(function (email) { Swal.fire({ icon: 'success', title: 'Ajax request finished!', confirmButtonColor: "#4a4fea", html: 'Submitted email: ' + email }) }) }); //chaining modal alert document.getElementById("chaining-alert").addEventListener("click", function() { Swal.mixin({ input: 'text', confirmButtonText: 'Next →', showCancelButton: true, confirmButtonColor: "#4a4fea", cancelButtonColor: "#74788d", progressSteps: ['1', '2', '3'] }).queue([ { title: 'Question 1', text: 'Chaining swal2 modals is easy' }, 'Question 2', 'Question 3' ]).then( function (result) { if (result.value) { Swal.fire({ title: 'All done!', confirmButtonColor: "#4a4fea", html: 'Your answers:
' +
JSON.stringify(result.value) +
'',
confirmButtonText: 'Lovely!'
})
}
})
});
//Danger
document.getElementById("dynamic-alert").addEventListener("click", function() {
swal.queue([{
title: 'Your public IP',
confirmButtonColor: "#4a4fea",
confirmButtonText: 'Show my public IP',
text: 'Your public IP will be received ' +
'via AJAX request',
showLoaderOnConfirm: true,
preConfirm: function () {
return new Promise(function (resolve) {
$.get('https://api.ipify.org?format=json')
.done(function (data) {
swal.insertQueueStep(data.ip)
resolve()
})
})
}
}]).catch(swal.noop)
});