(function () { 'use strict'; /* for basic sweet alert */ document.getElementById('basic-alert').onclick = function () { Swal.fire('Hello this is Basic alert message') }; document.getElementById('alert-text').onclick = function () { Swal.fire( 'The Internet ?', 'That thing is still around ?', 'question' ) } document.getElementById('alert-footer').onclick = function () { Swal.fire({ icon: 'error', title: 'Oops...', text: 'Something went wrong!', footer: 'Why do I have this issue?' }) } document.getElementById('long-window').onclick = function () { Swal.fire({ imageUrl: 'https://placeholder.pics/svg/300x1500', imageHeight: 1500, imageAlt: 'A tall image' }) } document.getElementById('alert-description').onclick = function () { Swal.fire({ title: 'HTML example', icon: 'info', html: 'You can use bold text, ' + 'links ' + 'and other HTML tags', showCloseButton: true, showCancelButton: true, focusConfirm: false, confirmButtonText: ' Great!', confirmButtonAriaLabel: 'Thumbs up, great!', cancelButtonText: '', cancelButtonAriaLabel: 'Thumbs down' }) } document.getElementById('three-buttons').onclick = function () { Swal.fire({ title: 'Do you want to save the changes?', showDenyButton: true, showCancelButton: true, confirmButtonText: 'Save', denyButtonText: `Don't save`, }).then((result) => { /* Read more about isConfirmed, isDenied below */ if (result.isConfirmed) { Swal.fire('Saved!', '', 'success') } else if (result.isDenied) { Swal.fire('Changes are not saved', '', 'info') } }) } document.getElementById('alert-dialog').onclick = function () { Swal.fire({ position: 'top-end', icon: 'success', title: 'Your work has been saved', showConfirmButton: false, timer: 1500 }) } document.getElementById('alert-confirm').onclick = function () { Swal.fire({ title: 'Are you sure?', text: "You won't be able to revert this!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete it!' }).then((result) => { if (result.isConfirmed) { Swal.fire( 'Deleted!', 'Your file has been deleted.', 'success' ) } }) } document.getElementById('alert-parameter').onclick = function () { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: 'btn btn-success ms-2', cancelButton: 'btn btn-danger' }, buttonsStyling: false }) swalWithBootstrapButtons.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!', reverseButtons: true }).then((result) => { if (result.isConfirmed) { swalWithBootstrapButtons.fire( 'Deleted!', 'Your file has been deleted.', 'success' ) } else if ( /* Read more about handling dismissals below */ result.dismiss === Swal.DismissReason.cancel ) { swalWithBootstrapButtons.fire( 'Cancelled', 'Your imaginary file is safe :)', 'error' ) } }) } document.getElementById('alert-image').onclick = function () { Swal.fire({ title: 'Sweet!', text: 'Modal with a custom image.', imageUrl: '../assets/images/media/media-59.jpg', imageWidth: 400, imageHeight: 200, imageAlt: 'Custom image', }) } document.getElementById('alert-custom-bg').onclick = function () { Swal.fire({ title: 'Custom width, padding, color, background.', width: 600, padding: '3em', color: '#716add', background: 'url(../assets/images/media/media-19.jpg)', backdrop: ` rgba(0,0,0,0.3) url(../assets/images/gif's/1.gif) left top no-repeat ` }) } document.getElementById('alert-auto-close').onclick = function () { let timerInterval Swal.fire({ title: 'Auto close alert!', html: 'I will close in milliseconds.', timer: 2000, timerProgressBar: true, didOpen: () => { Swal.showLoading() const b = Swal.getHtmlContainer().querySelector('b') timerInterval = setInterval(() => { b.textContent = Swal.getTimerLeft() }, 100) }, willClose: () => { clearInterval(timerInterval) } }).then((result) => { /* Read more about handling dismissals below */ if (result.dismiss === Swal.DismissReason.timer) { console.log('I was closed by the timer') } }) } document.getElementById('alert-ajax').onclick = function () { Swal.fire({ title: 'Submit your Github username', input: 'text', inputAttributes: { autocapitalize: 'off' }, showCancelButton: true, confirmButtonText: 'Look up', showLoaderOnConfirm: true, preConfirm: (login) => { return fetch(`https://jsonplaceholder.typicode.com/posts`) .then(response => { if (!response.ok) { throw new Error(response.statusText) } return response.json() }) .catch(error => { Swal.showValidationMessage( `Request failed: ${error}` ) }) }, allowOutsideClick: () => !Swal.isLoading() }).then((result) => { if (result.isConfirmed) { Swal.fire({ title: `${result.value.login}'s avatar`, imageUrl: result.value.avatar_url }) } }) } })();