469 lines
12 KiB
JavaScript
469 lines
12 KiB
JavaScript
'use strict';
|
|
(function () {
|
|
document.querySelector('.bs-message').addEventListener('click', function () {
|
|
Swal.fire('Any fool can use a computer');
|
|
});
|
|
|
|
document.querySelector('.bs-tit-txt').addEventListener('click', function () {
|
|
Swal.fire('The Internet?', 'That thing is still around?', 'question');
|
|
});
|
|
|
|
document.querySelector('.bs-error-icon').addEventListener('click', function () {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Oops...',
|
|
text: 'Something went wrong!',
|
|
footer: '<a href>Why do I have this issue?</a>'
|
|
});
|
|
});
|
|
|
|
document.querySelector('.bs-long-content').addEventListener('click', function () {
|
|
Swal.fire({
|
|
imageUrl: 'https://placeholder.pics/svg/300x1500',
|
|
imageHeight: 1500,
|
|
imageAlt: 'A tall image'
|
|
});
|
|
});
|
|
|
|
document.querySelector('.bs-cust-html').addEventListener('click', function () {
|
|
Swal.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'
|
|
});
|
|
});
|
|
|
|
document.querySelector('.bs-tre-button').addEventListener('click', function () {
|
|
Swal.fire({
|
|
title: 'Do you want to save the changes?',
|
|
showDenyButton: true,
|
|
showCancelButton: true,
|
|
confirmButtonText: `Save`,
|
|
denyButtonText: `Don't save`
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
Swal.fire('Saved!', '', 'success');
|
|
} else if (result.isDenied) {
|
|
Swal.fire('Changes are not saved', '', 'info');
|
|
}
|
|
});
|
|
});
|
|
|
|
document.querySelector('.bs-cust-position').addEventListener('click', function () {
|
|
Swal.fire({
|
|
position: 'top-end',
|
|
icon: 'success',
|
|
title: 'Your work has been saved',
|
|
showConfirmButton: false,
|
|
timer: 1500
|
|
});
|
|
});
|
|
|
|
document.querySelector('.bs-cust-anim').addEventListener('click', function () {
|
|
Swal.fire({
|
|
title: 'Custom animation with Animate.css',
|
|
showClass: {
|
|
popup: 'animate__animated animate__fadeInDown'
|
|
},
|
|
hideClass: {
|
|
popup: 'animate__animated animate__fadeOutUp'
|
|
}
|
|
});
|
|
});
|
|
|
|
document.querySelector('.bs-pass-para').addEventListener('click', function () {
|
|
const swalWithBootstrapButtons = Swal.mixin({
|
|
customClass: {
|
|
confirmButton: 'btn btn-success',
|
|
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 (result.dismiss === Swal.DismissReason.cancel) {
|
|
swalWithBootstrapButtons.fire('Cancelled', 'Your imaginary file is safe :)', 'error');
|
|
}
|
|
});
|
|
});
|
|
|
|
document.querySelector('.bs-cust-img').addEventListener('click', function () {
|
|
Swal.fire({
|
|
title: 'Sweet!',
|
|
text: 'Modal with a custom image.',
|
|
imageUrl: 'https://unsplash.it/400/200',
|
|
imageWidth: 400,
|
|
imageHeight: 200,
|
|
imageAlt: 'Custom image'
|
|
});
|
|
});
|
|
|
|
|
|
document.querySelector('.bs-auto-close').addEventListener('click', function () {
|
|
let timerInterval;
|
|
Swal.fire({
|
|
title: 'Auto close alert!',
|
|
html: 'I will close in <b></b> milliseconds.',
|
|
timer: 2000,
|
|
timerProgressBar: true,
|
|
willOpen: () => {
|
|
Swal.showLoading();
|
|
timerInterval = setInterval(() => {
|
|
const content = Swal.getContent();
|
|
if (content) {
|
|
const b = content.querySelector('b');
|
|
if (b) {
|
|
b.textContent = Swal.getTimerLeft();
|
|
}
|
|
}
|
|
}, 100);
|
|
},
|
|
onClose: () => {
|
|
clearInterval(timerInterval);
|
|
}
|
|
}).then((result) => {
|
|
if (result.dismiss === Swal.DismissReason.timer) {
|
|
}
|
|
});
|
|
});
|
|
|
|
document.querySelector('.bs-rtl-lang').addEventListener('click', function () {
|
|
Swal.fire({
|
|
title: 'هل تريد الاستمرار؟',
|
|
icon: 'question',
|
|
iconHtml: '؟',
|
|
confirmButtonText: 'نعم',
|
|
cancelButtonText: 'لا',
|
|
showCancelButton: true,
|
|
showCloseButton: true
|
|
});
|
|
});
|
|
|
|
document.querySelector('.bs-ajex-req').addEventListener('click', function () {
|
|
Swal.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
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
document.querySelector('.bs-mixin-exp').addEventListener('click', function () {
|
|
const Toast = Swal.mixin({
|
|
toast: true,
|
|
position: 'top-end',
|
|
showConfirmButton: false,
|
|
timer: 3000,
|
|
timerProgressBar: true,
|
|
didOpen: (toast) => {
|
|
toast.addEventListener('mouseenter', Swal.stopTimer);
|
|
toast.addEventListener('mouseleave', Swal.resumeTimer);
|
|
}
|
|
});
|
|
Toast.fire({
|
|
icon: 'success',
|
|
title: 'Signed in successfully'
|
|
});
|
|
});
|
|
|
|
document.querySelector('.bs-success-ico').addEventListener('click', function () {
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Success modal'
|
|
});
|
|
});
|
|
|
|
document.querySelector('.bs-error-ico').addEventListener('click', function () {
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Error modal'
|
|
});
|
|
});
|
|
|
|
document.querySelector('.bs-warning-ico').addEventListener('click', function () {
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'warning modal'
|
|
});
|
|
});
|
|
|
|
document.querySelector('.bs-info-ico').addEventListener('click', function () {
|
|
Swal.fire({
|
|
icon: 'info',
|
|
title: 'info modal'
|
|
});
|
|
});
|
|
|
|
document.querySelector('.bs-question-ico').addEventListener('click', function () {
|
|
Swal.fire({
|
|
icon: 'question',
|
|
title: 'question modal'
|
|
});
|
|
});
|
|
|
|
document.querySelector('.bs-text-input').addEventListener('click', function () {
|
|
(async () => {
|
|
const ipAPI = '//api.ipify.org?format=json';
|
|
const inputValue = fetch(ipAPI)
|
|
.then((response) => response.json())
|
|
.then((data) => data.ip);
|
|
const { value: ipAddress } = await Swal.fire({
|
|
title: 'Enter your IP address',
|
|
input: 'text',
|
|
inputValue: inputValue,
|
|
showCancelButton: true,
|
|
inputValidator: (value) => {
|
|
if (!value) {
|
|
return 'You need to write something!';
|
|
}
|
|
}
|
|
});
|
|
if (ipAddress) {
|
|
Swal.fire(`Your IP address is ` + ipAddress);
|
|
}
|
|
})();
|
|
});
|
|
|
|
document.querySelector('.bs-email-input').addEventListener('click', function () {
|
|
(async () => {
|
|
const { value: email } = await Swal.fire({
|
|
title: 'Input email address',
|
|
input: 'email',
|
|
inputPlaceholder: 'Enter your email address'
|
|
});
|
|
|
|
if (email) {
|
|
Swal.fire(`Entered email: ` + email);
|
|
}
|
|
})();
|
|
});
|
|
|
|
document.querySelector('.bs-url-input').addEventListener('click', function () {
|
|
(async () => {
|
|
const { value: url } = await Swal.fire({
|
|
input: 'url',
|
|
inputPlaceholder: 'Enter the URL'
|
|
});
|
|
if (url) {
|
|
Swal.fire(`Entered URL: ` + url);
|
|
}
|
|
})();
|
|
});
|
|
|
|
document.querySelector('.bs-password-input').addEventListener('click', function () {
|
|
(async () => {
|
|
const { value: password } = await Swal.fire({
|
|
title: 'Enter your password',
|
|
input: 'password',
|
|
inputPlaceholder: 'Enter your password',
|
|
inputAttributes: {
|
|
maxlength: 10,
|
|
autocapitalize: 'off',
|
|
autocorrect: 'off'
|
|
}
|
|
});
|
|
if (password) {
|
|
Swal.fire(`Entered password: ` + password);
|
|
}
|
|
})();
|
|
});
|
|
|
|
document.querySelector('.bs-textarea-input').addEventListener('click', function () {
|
|
(async () => {
|
|
const { value: text } = await Swal.fire({
|
|
input: 'textarea',
|
|
inputPlaceholder: 'Type your message here...',
|
|
inputAttributes: {
|
|
'aria-label': 'Type your message here'
|
|
},
|
|
showCancelButton: true
|
|
});
|
|
if (text) {
|
|
Swal.fire(text);
|
|
}
|
|
})();
|
|
});
|
|
|
|
document.querySelector('.bs-select-input').addEventListener('click', function () {
|
|
(async () => {
|
|
const { value: fruit } = await Swal.fire({
|
|
title: 'Select field validation',
|
|
input: 'select',
|
|
inputOptions: {
|
|
Fruits: {
|
|
apples: 'Apples',
|
|
bananas: 'Bananas',
|
|
grapes: 'Grapes',
|
|
oranges: 'Oranges'
|
|
},
|
|
Vegetables: {
|
|
potato: 'Potato',
|
|
broccoli: 'Broccoli',
|
|
carrot: 'Carrot'
|
|
},
|
|
icecream: 'Ice cream'
|
|
},
|
|
inputPlaceholder: 'Select a fruit',
|
|
showCancelButton: true,
|
|
inputValidator: (value) => {
|
|
return new Promise((resolve) => {
|
|
if (value === 'oranges') {
|
|
resolve();
|
|
} else {
|
|
resolve('You need to select oranges :)');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
if (fruit) {
|
|
Swal.fire(`You selected: ` + fruit);
|
|
}
|
|
})();
|
|
});
|
|
|
|
document.querySelector('.bs-radio-input').addEventListener('click', function () {
|
|
(async () => {
|
|
const inputOptions = new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
resolve({
|
|
'#ff0000': 'Red',
|
|
'#00ff00': 'Green',
|
|
'#0000ff': 'Blue'
|
|
});
|
|
}, 1000);
|
|
});
|
|
const { value: color } = await Swal.fire({
|
|
title: 'Select color',
|
|
input: 'radio',
|
|
inputOptions: inputOptions,
|
|
inputValidator: (value) => {
|
|
if (!value) {
|
|
return 'You need to choose something!';
|
|
}
|
|
}
|
|
});
|
|
if (color) {
|
|
Swal.fire({
|
|
html: `You selected: ` + color
|
|
});
|
|
}
|
|
})();
|
|
});
|
|
|
|
document.querySelector('.bs-checkbox-input').addEventListener('click', function () {
|
|
(async () => {
|
|
const { value: accept } = await Swal.fire({
|
|
title: 'Terms and conditions',
|
|
input: 'checkbox',
|
|
inputValue: 1,
|
|
inputPlaceholder: 'I agree with the terms and conditions',
|
|
confirmButtonText: 'Continue<i class="fa fa-arrow-right"></i>',
|
|
inputValidator: (result) => {
|
|
return !result && 'You need to agree with T&C';
|
|
}
|
|
});
|
|
if (accept) {
|
|
Swal.fire('You agreed with T&C :)');
|
|
}
|
|
})();
|
|
});
|
|
|
|
document.querySelector('.bs-file-input').addEventListener('click', function () {
|
|
(async () => {
|
|
const { value: file } = await Swal.fire({
|
|
title: 'Select image',
|
|
input: 'file',
|
|
inputAttributes: {
|
|
accept: 'image/*',
|
|
'aria-label': 'Upload your profile picture'
|
|
}
|
|
});
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
Swal.fire({
|
|
title: 'Your uploaded picture',
|
|
imageUrl: e.target.result,
|
|
imageAlt: 'The uploaded picture'
|
|
});
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
})();
|
|
});
|
|
|
|
document.querySelector('.bs-range-input').addEventListener('click', function () {
|
|
(async () => {
|
|
Swal.fire({
|
|
title: 'How old are you?',
|
|
icon: 'question',
|
|
input: 'range',
|
|
inputAttributes: {
|
|
min: 8,
|
|
max: 120,
|
|
step: 1
|
|
},
|
|
inputValue: 25
|
|
});
|
|
})();
|
|
});
|
|
|
|
document.querySelector('.bs-multiple-input').addEventListener('click', function () {
|
|
(async () => {
|
|
const { value: formValues } = await Swal.fire({
|
|
title: 'Multiple inputs',
|
|
html: '<input id="swal-input1" class="swal2-input">' + '<input id="swal-input2" class="swal2-input">',
|
|
focusConfirm: false,
|
|
preConfirm: () => {
|
|
return [document.getElementById('swal-input1').value, document.getElementById('swal-input2').value];
|
|
}
|
|
});
|
|
if (formValues) {
|
|
Swal.fire(JSON.stringify(formValues));
|
|
}
|
|
})();
|
|
});
|
|
})();
|