var soft = { showSwal: function(type) { if (type == 'basic') { Swal.fire('Any fool can use a computer') } else if (type == 'title-and-text') { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: 'inline-block px-6 py-3 mb-4 font-bold text-center uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs bg-gradient-to-tl from-green-600 to-lime-400 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 text-white', cancelButton: 'ml-2 inline-block px-6 py-3 mb-4 font-bold text-center uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs bg-gradient-to-tl from-red-600 to-rose-400 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 text-white' } }); swalWithBootstrapButtons.fire({ title: 'Sweet!', text: 'Modal with a custom image.', imageUrl: 'https://unsplash.it/400/200', imageWidth: 400, imageAlt: 'Custom image', }) } else if (type == 'success-message') { Swal.fire( 'Good job!', 'You clicked the button!', 'success' ) } else if (type == 'warning-message-and-confirmation') { const swalWithBootstrapButtons = Swal.mixin({ customClass: { cancelButton: 'inline-block px-6 py-3 mb-4 font-bold text-center uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs bg-gradient-to-tl from-red-600 to-rose-400 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 text-white', confirmButton: 'ml-2 inline-block px-6 py-3 mb-4 font-bold text-center uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs bg-gradient-to-tl from-green-600 to-lime-400 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 text-white' }, buttonsStyling: false }) swalWithBootstrapButtons.fire({ title: 'Are you sure?', text: "You won't be able to revert this!", type: 'warning', showCancelButton: true, confirmButtonText: 'Yes, delete it!', cancelButtonText: 'No, cancel!', reverseButtons: true }).then((result) => { if (result.value) { 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' ) } }) } else if (type == 'warning-message-and-cancel') { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: 'inline-block px-6 py-3 mb-4 font-bold text-center uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs bg-gradient-to-tl from-green-600 to-lime-400 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 text-white', cancelButton: 'ml-2 inline-block px-6 py-3 mb-4 font-bold text-center uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs bg-gradient-to-tl from-red-600 to-rose-400 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 text-white' }, 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!' }).then((result) => { if (result.isConfirmed) { Swal.fire( 'Deleted!', 'Your file has been deleted.', 'success' ) } }) } else if (type == 'custom-html') { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: 'inline-block px-6 py-3 mb-4 font-bold text-center uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs bg-gradient-to-tl from-green-600 to-lime-400 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 text-white', cancelButton: 'ml-2 inline-block px-6 py-3 mb-4 font-bold text-center uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs bg-gradient-to-tl from-red-600 to-rose-400 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 text-white' }, buttonsStyling: false }) swalWithBootstrapButtons.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' }) } else if (type == 'rtl-language') { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: 'inline-block px-6 py-3 mb-4 font-bold text-center uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs bg-gradient-to-tl from-green-600 to-lime-400 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 text-white', cancelButton: 'ml-2 inline-block px-6 py-3 mb-4 font-bold text-center uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs bg-gradient-to-tl from-red-600 to-rose-400 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 text-white' }, buttonsStyling: false }) swalWithBootstrapButtons.fire({ title: 'هل تريد الاستمرار؟', icon: 'question', iconHtml: '؟', confirmButtonText: 'نعم', cancelButtonText: 'لا', showCancelButton: true, showCloseButton: true }) } else if (type == 'auto-close') { let timerInterval Swal.fire({ title: 'Auto close alert!', html: 'I will close in milliseconds.', timer: 2000, timerProgressBar: true, didOpen: () => { Swal.showLoading() timerInterval = setInterval(() => { const content = Swal.getHtmlContainer() if (content) { const b = content.querySelector('b') if (b) { b.textContent = Swal.getTimerLeft() } } }, 100) }, willClose: () => { clearInterval(timerInterval) } }).then((result) => { /* Read more about handling dismissals below */ if (result.dismiss === Swal.DismissReason.timer) {} }) } else if (type == 'input-field') { const swalWithBootstrapButtons = Swal.mixin({ customClass: { confirmButton: 'inline-block px-6 py-3 mb-4 font-bold text-center uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs bg-gradient-to-tl from-green-600 to-lime-400 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 text-white', cancelButton: 'ml-2 inline-block px-6 py-3 mb-4 font-bold text-center uppercase align-middle transition-all border-0 rounded-lg cursor-pointer hover:scale-102 active:opacity-85 hover:shadow-soft-xs bg-gradient-to-tl from-red-600 to-rose-400 leading-pro text-xs ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 text-white' }, buttonsStyling: false }) swalWithBootstrapButtons.fire({ title: 'Submit your Github username', input: 'text', inputAttributes: { autocapitalize: 'off' }, showCancelButton: true, confirmButtonText: 'Look up', showLoaderOnConfirm: true, preConfirm: (login) => { return fetch(`//api.github.com/users/${login}`) .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 }) } }) } } }