197 lines
9.3 KiB
JavaScript
197 lines
9.3 KiB
JavaScript
|
|
||
|
|
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: '<strong>HTML <u>example</u></strong>',
|
||
|
|
icon: 'info',
|
||
|
|
html: 'You can use <b>bold text</b>, ' +
|
||
|
|
'<a href="//sweetalert2.github.io">links</a> ' +
|
||
|
|
'and other HTML tags',
|
||
|
|
showCloseButton: true,
|
||
|
|
showCancelButton: true,
|
||
|
|
focusConfirm: false,
|
||
|
|
confirmButtonText: '<i class="fa fa-thumbs-up"></i> Great!',
|
||
|
|
confirmButtonAriaLabel: 'Thumbs up, great!',
|
||
|
|
cancelButtonText: '<i class="fa fa-thumbs-down"></i>',
|
||
|
|
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 <b></b> 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
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|