sweet-alerts.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390
  1. /*=========================================================================================
  2. File Name: sweet-alerts.js
  3. Description: A beautiful replacement for javascript alerts
  4. ----------------------------------------------------------------------------------------
  5. Item name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
  6. Author: Pixinvent
  7. Author URL: hhttp://www.themeforest.net/user/pixinvent
  8. ==========================================================================================*/
  9. $(document).ready(function () {
  10. // Basic
  11. $('#basic-alert').on('click', function () {
  12. Swal.fire({
  13. title: 'Any fool can use a computer',
  14. confirmButtonClass: 'btn btn-primary',
  15. buttonsStyling: false,
  16. })
  17. });
  18. $('#with-title').on('click', function () {
  19. Swal.fire({
  20. title: 'The Internet?,',
  21. text: "That thing is still around?",
  22. confirmButtonClass: 'btn btn-primary',
  23. buttonsStyling: false,
  24. }
  25. )
  26. });
  27. $('#footer-alert').on('click', function () {
  28. Swal.fire({
  29. type: 'error',
  30. title: 'Oops...',
  31. text: 'Something went wrong!',
  32. footer: '<a href>Why do I have this issue?</a>',
  33. confirmButtonClass: 'btn btn-primary',
  34. buttonsStyling: false,
  35. })
  36. });
  37. $('#html-alert').on('click', function () {
  38. Swal.fire({
  39. title: '<strong>HTML <u>example</u></strong>',
  40. type: 'info',
  41. html:
  42. 'You can use <b>bold text</b>, ' +
  43. '<a href="https://pixinvent.com/" target="_blank">links</a> ' +
  44. 'and other HTML tags',
  45. showCloseButton: true,
  46. showCancelButton: true,
  47. focusConfirm: false,
  48. confirmButtonText:
  49. '<i class="fa fa-thumbs-up"></i> Great!',
  50. confirmButtonAriaLabel: 'Thumbs up, great!',
  51. cancelButtonText:
  52. '<i class="fa fa-thumbs-down"></i>',
  53. cancelButtonAriaLabel: 'Thumbs down',
  54. confirmButtonClass: 'btn btn-primary',
  55. buttonsStyling: false,
  56. cancelButtonClass: 'btn btn-danger ml-1',
  57. })
  58. });
  59. // Position
  60. $('#position-top-start').on('click', function () {
  61. Swal.fire({
  62. position: 'top-start',
  63. type: 'success',
  64. title: 'Your work has been saved',
  65. showConfirmButton: false,
  66. timer: 1500,
  67. confirmButtonClass: 'btn btn-primary',
  68. buttonsStyling: false,
  69. })
  70. })
  71. $('#position-top-end').on('click', function () {
  72. Swal.fire({
  73. position: 'top-end',
  74. type: 'success',
  75. title: 'Your work has been saved',
  76. showConfirmButton: false,
  77. timer: 1500,
  78. confirmButtonClass: 'btn btn-primary',
  79. buttonsStyling: false,
  80. })
  81. })
  82. $('#position-bottom-start').on('click', function () {
  83. Swal.fire({
  84. position: 'bottom-start',
  85. type: 'success',
  86. title: 'Your work has been saved',
  87. showConfirmButton: false,
  88. timer: 1500,
  89. confirmButtonClass: 'btn btn-primary',
  90. buttonsStyling: false,
  91. })
  92. })
  93. $('#position-bottom-end').on('click', function () {
  94. Swal.fire({
  95. position: 'bottom-end',
  96. type: 'success',
  97. title: 'Your work has been saved',
  98. showConfirmButton: false,
  99. timer: 1500,
  100. confirmButtonClass: 'btn btn-primary',
  101. buttonsStyling: false,
  102. })
  103. })
  104. // Animations
  105. $("#bounce-in-animation").on('click', function () {
  106. Swal.fire({
  107. title: 'Bounce In Animation',
  108. animation: false,
  109. customClass: 'animated bounceIn',
  110. confirmButtonClass: 'btn btn-primary',
  111. buttonsStyling: false,
  112. })
  113. })
  114. $("#fade-in-animation").on('click', function () {
  115. Swal.fire({
  116. title: 'Fade In Animation',
  117. animation: false,
  118. customClass: 'animated fadeIn',
  119. confirmButtonClass: 'btn btn-primary',
  120. buttonsStyling: false,
  121. })
  122. })
  123. $("#flip-x-animation").on('click', function () {
  124. Swal.fire({
  125. title: 'Flip In Animation',
  126. animation: false,
  127. customClass: 'animated flipInX',
  128. confirmButtonClass: 'btn btn-primary',
  129. buttonsStyling: false,
  130. })
  131. })
  132. $("#tada-animation").on('click', function () {
  133. Swal.fire({
  134. title: 'Tada Animation',
  135. animation: false,
  136. customClass: 'animated tada',
  137. confirmButtonClass: 'btn btn-primary',
  138. buttonsStyling: false,
  139. })
  140. })
  141. $("#shake-animation").on('click', function () {
  142. Swal.fire({
  143. title: 'Shake Animation',
  144. animation: false,
  145. customClass: 'animated shake',
  146. confirmButtonClass: 'btn btn-primary',
  147. buttonsStyling: false,
  148. })
  149. })
  150. // type
  151. $('#type-success').on('click', function () {
  152. Swal.fire({
  153. title: "Good job!",
  154. text: "You clicked the button!",
  155. type: "success",
  156. confirmButtonClass: 'btn btn-primary',
  157. buttonsStyling: false,
  158. });
  159. });
  160. $('#type-info').on('click', function () {
  161. Swal.fire({
  162. title: "Info!",
  163. text: "You clicked the button!",
  164. type: "info",
  165. confirmButtonClass: 'btn btn-primary',
  166. buttonsStyling: false,
  167. });
  168. });
  169. $('#type-warning').on('click', function () {
  170. Swal.fire({
  171. title: "Warning!",
  172. text: " You clicked the button!",
  173. type: "warning",
  174. confirmButtonClass: 'btn btn-primary',
  175. buttonsStyling: false,
  176. });
  177. });
  178. $('#type-error').on('click', function () {
  179. Swal.fire({
  180. title: "Error!",
  181. text: " You clicked the button!",
  182. type: "error",
  183. confirmButtonClass: 'btn btn-primary',
  184. buttonsStyling: false,
  185. });
  186. });
  187. // options
  188. $('#custom-icon').on('click', function () {
  189. Swal.fire({
  190. title: 'Sweet!',
  191. text: 'Modal with a custom image.',
  192. imageUrl: 'images/slider/04.jpg',
  193. imageWidth: 400,
  194. imageHeight: 200,
  195. imageAlt: 'Custom image',
  196. animation: false,
  197. confirmButtonClass: 'btn btn-primary',
  198. buttonsStyling: false,
  199. })
  200. });
  201. $('#auto-close').on('click', function () {
  202. var timerInterval
  203. Swal.fire({
  204. title: 'Auto close alert!',
  205. html: 'I will close in <strong></strong> seconds.',
  206. timer: 2000,
  207. confirmButtonClass: 'btn btn-primary',
  208. buttonsStyling: false,
  209. onBeforeOpen: function () {
  210. Swal.showLoading()
  211. timerInterval = setInterval(function () {
  212. Swal.getContent().querySelector('strong')
  213. .textContent = Swal.getTimerLeft()
  214. }, 100)
  215. },
  216. onClose: function () {
  217. clearInterval(timerInterval)
  218. }
  219. }).then(function (result) {
  220. if (
  221. // Read more about handling dismissals
  222. result.dismiss === Swal.DismissReason.timer
  223. ) {
  224. console.log('I was closed by the timer')
  225. }
  226. })
  227. });
  228. $('#outside-click').on('click', function () {
  229. Swal.fire({
  230. title: 'Click outside to close!',
  231. text: 'This is a cool message!',
  232. allowOutsideClick: true,
  233. confirmButtonClass: 'btn btn-primary',
  234. buttonsStyling: false,
  235. });
  236. });
  237. $('#prompt-function').on('click', function () {
  238. Swal.mixin({
  239. input: 'text',
  240. confirmButtonText: 'Next &rarr;',
  241. showCancelButton: true,
  242. progressSteps: ['1', '2', '3'],
  243. confirmButtonClass: 'btn btn-primary',
  244. buttonsStyling: false,
  245. cancelButtonClass: "btn btn-danger ml-1"
  246. }).queue([
  247. {
  248. title: 'Question 1',
  249. text: 'Chaining swal2 modals is easy'
  250. },
  251. 'Question 2',
  252. 'Question 3'
  253. ]).then(function (result) {
  254. if (result.value) {
  255. Swal.fire({
  256. title: 'All done!',
  257. html:
  258. 'Your answers: <pre><code>' +
  259. JSON.stringify(result.value) +
  260. '</code></pre>',
  261. confirmButtonText: 'Lovely!'
  262. })
  263. }
  264. })
  265. });
  266. $('#ajax-request').on('click', function () {
  267. Swal.fire({
  268. title: 'Search for a user',
  269. input: 'text',
  270. confirmButtonClass: 'btn btn-primary',
  271. buttonsStyling: false,
  272. inputAttributes: {
  273. autocapitalize: 'off'
  274. },
  275. showCancelButton: true,
  276. confirmButtonText: 'Look up',
  277. showLoaderOnConfirm: true,
  278. cancelButtonClass: "btn btn-danger ml-1",
  279. preConfirm: function (login) {
  280. return fetch("//api.github.com/users/" + login + "")
  281. .then(function (response) {
  282. if (!response.ok) {
  283. console.log(response)
  284. throw new Error(response.statusText)
  285. }
  286. return response.json()
  287. })
  288. .catch(function (error) {
  289. Swal.showValidationMessage(
  290. "Request failed: " + error + ""
  291. )
  292. })
  293. },
  294. allowOutsideClick: function () {
  295. !Swal.isLoading()
  296. }
  297. }).then(function (result) {
  298. if (result.value) {
  299. Swal.fire({
  300. title: "" + result.value.login + "'s avatar",
  301. imageUrl: result.value.avatar_url
  302. })
  303. }
  304. })
  305. });
  306. // confirm options
  307. $('#confirm-text').on('click', function () {
  308. Swal.fire({
  309. title: 'Are you sure?',
  310. text: "You won't be able to revert this!",
  311. type: 'warning',
  312. showCancelButton: true,
  313. confirmButtonColor: '#3085d6',
  314. cancelButtonColor: '#d33',
  315. confirmButtonText: 'Yes, delete it!',
  316. confirmButtonClass: 'btn btn-primary',
  317. cancelButtonClass: 'btn btn-danger ml-1',
  318. buttonsStyling: false,
  319. }).then(function (result) {
  320. if (result.value) {
  321. Swal.fire(
  322. {
  323. type: "success",
  324. title: 'Deleted!',
  325. text: 'Your file has been deleted.',
  326. confirmButtonClass: 'btn btn-success',
  327. }
  328. )
  329. }
  330. })
  331. });
  332. $('#confirm-color').on('click', function () {
  333. Swal.fire({
  334. title: 'Are you sure?',
  335. text: "You won't be able to revert this!",
  336. type: 'warning',
  337. showCancelButton: true,
  338. confirmButtonColor: '#3085d6',
  339. cancelButtonColor: '#d33',
  340. confirmButtonText: 'Yes, delete it!',
  341. confirmButtonClass: 'btn btn-primary',
  342. cancelButtonClass: 'btn btn-danger ml-1',
  343. buttonsStyling: false,
  344. }).then(function (result) {
  345. if (result.value) {
  346. Swal.fire({
  347. type: "success",
  348. title: 'Deleted!',
  349. text: 'Your file has been deleted.',
  350. confirmButtonClass: 'btn btn-success',
  351. })
  352. }
  353. else if (result.dismiss === Swal.DismissReason.cancel) {
  354. Swal.fire({
  355. title: 'Cancelled',
  356. text: 'Your imaginary file is safe :)',
  357. type: 'error',
  358. confirmButtonClass: 'btn btn-success',
  359. })
  360. }
  361. })
  362. });
  363. });