/*========================================================================================= File Name: ext-component-sweet-alerts.js Description: A beautiful replacement for javascript alerts ---------------------------------------------------------------------------------------- Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template Author: Pixinvent Author URL: hhttp://www.themeforest.net/user/pixinvent ==========================================================================================*/ $(function () { 'use strict'; var basicAlert = $('#basic-alert'); var withTitle = $('#with-title'); var withFooter = $('#footer-alert'); var htmlAlert = $('#html-alert'); var positionTopStart = $('#position-top-start'); var positionTopEnd = $('#position-top-end'); var positionBottomStart = $('#position-bottom-start'); var positionBottomEnd = $('#position-bottom-end'); var bounceIn = $('#bounce-in-animation'); var fadeIn = $('#fade-in-animation'); var flipX = $('#flip-x-animation'); var tada = $('#tada-animation'); var shake = $('#shake-animation'); var success = $('#type-success'); var error = $('#type-error'); var warning = $('#type-warning'); var info = $('#type-info'); var customImage = $('#custom-image'); var autoClose = $('#auto-close'); var outsideClick = $('#outside-click'); var question = $('#prompt-function'); var ajax = $('#ajax-request'); var confirmText = $('#confirm-text'); var confirmColor = $('#confirm-color'); var assetPath = '../../../app-assets/'; if ($('body').attr('data-framework') === 'laravel') { assetPath = $('body').attr('data-asset-path'); } //--------------- Basic Examples --------------- // Basic if (basicAlert.length) { basicAlert.on('click', function () { Swal.fire({ title: 'Any fool can use a computer', customClass: { confirmButton: 'btn btn-primary' }, buttonsStyling: false }); }); } // With Title if (withTitle.length) { withTitle.on('click', function () { Swal.fire({ title: 'The Internet?,', text: 'That thing is still around?', customClass: { confirmButton: 'btn btn-primary' }, buttonsStyling: false }); }); } // With Footer if (withFooter.length) { withFooter.on('click', function () { Swal.fire({ icon: 'error', title: 'Oops...', text: 'Something went wrong!', footer: '<a href>Why do I have this issue?</a>', customClass: { confirmButton: 'btn btn-primary' }, buttonsStyling: false }); }); } // HTML Alert if (htmlAlert.length) { htmlAlert.on('click', function () { Swal.fire({ title: '<strong>HTML <u>example</u></strong>', icon: 'info', html: 'You can use <b>bold text</b>, ' + '<a href="https://pixinvent.com/" target="_blank">links</a> ' + 'and other HTML tags', showCloseButton: true, showCancelButton: true, focusConfirm: false, confirmButtonText: feather.icons['thumbs-up'].toSvg({ class: 'font-medium-1 me-50' }) + 'Great!', confirmButtonAriaLabel: 'Thumbs up, great!', cancelButtonText: feather.icons['thumbs-down'].toSvg({ class: 'font-medium-1' }), cancelButtonAriaLabel: 'Thumbs down', customClass: { confirmButton: 'btn btn-primary', cancelButton: 'btn btn-outline-danger ms-1' }, buttonsStyling: false }); }); } //--------------- Position --------------- // Top Start if (positionTopStart.length) { positionTopStart.on('click', function () { Swal.fire({ position: 'top-start', icon: 'success', title: 'Your work has been saved', showConfirmButton: false, timer: 1500, customClass: { confirmButton: 'btn btn-primary' }, buttonsStyling: false }); }); } // Top End if (positionTopEnd.length) { positionTopEnd.on('click', function () { Swal.fire({ position: 'top-end', icon: 'success', title: 'Your work has been saved', showConfirmButton: false, timer: 1500, customClass: { confirmButton: 'btn btn-primary' }, buttonsStyling: false }); }); } // Bottom Start if (positionBottomStart.length) { positionBottomStart.on('click', function () { Swal.fire({ position: 'bottom-start', icon: 'success', title: 'Your work has been saved', showConfirmButton: false, timer: 1500, customClass: { confirmButton: 'btn btn-primary' }, buttonsStyling: false }); }); } // Bottom End if (positionBottomEnd.length) { positionBottomEnd.on('click', function () { Swal.fire({ position: 'bottom-end', icon: 'success', title: 'Your work has been saved', showConfirmButton: false, timer: 1500, customClass: { confirmButton: 'btn btn-primary' }, buttonsStyling: false }); }); } //--------------- Animations --------------- // Bounce In if (bounceIn.length) { bounceIn.on('click', function () { Swal.fire({ title: 'Bounce In Animation', customClass: { confirmButton: 'btn btn-primary' }, showClass: { popup: 'animate__animated animate__bounceIn' }, buttonsStyling: false }); }); } // Fade In if (fadeIn.length) { fadeIn.on('click', function () { Swal.fire({ title: 'Fade In Animation', customClass: { confirmButton: 'btn btn-primary' }, showClass: { popup: 'animate__animated animate__fadeIn' }, buttonsStyling: false }); }); } // FlipX if (flipX.length) { flipX.on('click', function () { Swal.fire({ title: 'Flip In Animation', customClass: { confirmButton: 'btn btn-primary' }, showClass: { popup: 'animate__animated animate__flipInX' }, buttonsStyling: false }); }); } // Tada if (tada.length) { tada.on('click', function () { Swal.fire({ title: 'Tada Animation', customClass: { confirmButton: 'btn btn-primary' }, showClass: { popup: 'animate__animated animate__tada' }, buttonsStyling: false }); }); } // Shake if (shake.length) { shake.on('click', function () { Swal.fire({ title: 'Shake Animation', customClass: { confirmButton: 'btn btn-primary' }, showClass: { popup: 'animate__animated animate__shakeX' }, buttonsStyling: false }); }); } //--------------- Types --------------- // Success if (success.length) { success.on('click', function () { Swal.fire({ title: 'Good job!', text: 'You clicked the button!', icon: 'success', customClass: { confirmButton: 'btn btn-primary' }, buttonsStyling: false }); }); } // Error if (error.length) { error.on('click', function () { Swal.fire({ title: 'Error!', text: ' You clicked the button!', icon: 'error', customClass: { confirmButton: 'btn btn-primary' }, buttonsStyling: false }); }); } // Warning if (warning.length) { warning.on('click', function () { Swal.fire({ title: 'Warning!', text: ' You clicked the button!', icon: 'warning', customClass: { confirmButton: 'btn btn-primary' }, buttonsStyling: false }); }); } // Info if (info.length) { info.on('click', function () { Swal.fire({ title: 'Info!', text: 'You clicked the button!', icon: 'info', customClass: { confirmButton: 'btn btn-primary' }, buttonsStyling: false }); }); } //--------------- Options --------------- // Custom Image if (customImage.length) { customImage.on('click', function () { Swal.fire({ title: 'Sweet!', text: 'Modal with a custom image.', imageUrl: assetPath + 'images/slider/04.jpg', imageWidth: 400, imageHeight: 200, imageAlt: 'Custom image', customClass: { confirmButton: 'btn btn-primary' }, buttonsStyling: false }); }); } // Auto Close if (autoClose.length) { autoClose.on('click', function () { var 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) { console.log('I was closed by the timer'); } }); }); } // Click Outside if (outsideClick.length) { outsideClick.on('click', function () { Swal.fire({ title: 'Click outside to close!', text: 'This is a cool message!', customClass: { confirmButton: 'btn btn-primary' }, buttonsStyling: false }); }); } // Question if (question.length) { question.on('click', function () { /* global Swal */ const steps = ['1', '2', '3']; const swalQueueStep = Swal.mixin({ confirmButtonText: 'Forward', cancelButtonText: 'Back', progressSteps: steps, input: 'text', inputAttributes: { required: true }, validationMessage: 'This field is required' }); async function backAndForth() { const values = []; let currentStep; for (currentStep = 0; currentStep < steps.length; ) { const result = await new swalQueueStep({ title: 'Question ' + steps[currentStep], showCancelButton: currentStep > 0, currentProgressStep: currentStep }); if (result.value) { values[currentStep] = result.value; currentStep++; } else if (result.dismiss === 'cancel') { currentStep--; } } Swal.fire(JSON.stringify(values)); } backAndForth(); }); } // Ajax if (ajax.length) { ajax.on('click', function () { Swal.fire({ title: 'Search for a GitHub user', input: 'text', customClass: { confirmButton: 'btn btn-primary', cancelButton: 'btn btn-outline-danger ms-1' }, buttonsStyling: false, 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}`); }); } }).then(result => { if (result.isConfirmed) { Swal.fire({ title: '' + result.value.login + "'s avatar", imageUrl: result.value.avatar_url, customClass: { confirmButton: 'btn btn-primary' } }); } }); }); } //--------------- Confirm Options --------------- // Confirm Text if (confirmText.length) { confirmText.on('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!', customClass: { confirmButton: 'btn btn-primary', cancelButton: 'btn btn-outline-danger ms-1' }, buttonsStyling: false }).then(function (result) { if (result.value) { Swal.fire({ icon: 'success', title: 'Deleted!', text: 'Your file has been deleted.', customClass: { confirmButton: 'btn btn-success' } }); } }); }); } // Confirm Color if (confirmColor.length) { confirmColor.on('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!', customClass: { confirmButton: 'btn btn-primary', cancelButton: 'btn btn-outline-danger ms-1' }, buttonsStyling: false }).then(function (result) { if (result.value) { Swal.fire({ icon: 'success', title: 'Deleted!', text: 'Your file has been deleted.', customClass: { confirmButton: 'btn btn-success' } }); } else if (result.dismiss === Swal.DismissReason.cancel) { Swal.fire({ title: 'Cancelled', text: 'Your imaginary file is safe :)', icon: 'error', customClass: { confirmButton: 'btn btn-success' } }); } }); }); } });