万朱浩 / Venue-Ops

Go to a project
Toggle navigation Toggle navigation pinning
戒酒的李白
ff7cef5d 1 parent ad11069b

【Bootstrap4】Bootstrap 4管理仪表板模板，用于管理面板和仪表板以及添加页面监听器

Inline Side-by-side
Showing 2 changed files with 738 additions and 0 deletions
  1 +/*
  2 +Template: Datum - Responsive Bootstrap 4 Admin Dashboard Template
  3 +Author: iqonic.design
  4 +Design and Developed by: iqonic.design
  5 +NOTE: This file contains the styling for responsive Template.
  6 +*/
  7 +
  8 +/*----------------------------------------------
  9 +Index Of Script
  10 +------------------------------------------------
  11 +
  12 +:: Tooltip
  13 +:: Fixed Nav
  14 +:: Magnific Popup
  15 +:: Ripple Effect
  16 +:: Sidebar Widget
  17 +:: FullScreen
  18 +:: Page Loader
  19 +:: Counter
  20 +:: Progress Bar
  21 +:: Page Menu
  22 +:: Close navbar Toggle
  23 +:: Mailbox
  24 +:: chatuser
  25 +:: chatuser main
  26 +:: Chat start
  27 +:: todo Page
  28 +:: user toggle
  29 +:: Data tables
  30 +:: Form Validation
  31 +:: Active Class for Pricing Table
  32 +:: Flatpicker
  33 +:: Scrollbar
  34 +:: checkout
  35 +:: Datatables
  36 +:: image-upload
  37 +:: video
  38 +:: dark mode
  39 +:: Button
  40 +:: Pricing tab
  41 +:: SVG Animation
  42 +:: Date Picker
  43 +:: Choies.js
  44 +------------------------------------------------
  45 +Index Of Script
  46 +----------------------------------------------*/
  47 +
  48 +(function(jQuery) {
  49 +
  50 +
  51 +
  52 + "use strict";
  53 +
  54 + jQuery(document).ready(function() {
  55 +
  56 + /*---------------------------------------------------------------------
  57 + Tooltip
  58 + -----------------------------------------------------------------------*/
  59 + jQuery('[data-toggle="popover"]').popover();
  60 + jQuery('[data-toggle="tooltip"]').tooltip();
  61 +
  62 + /*---------------------------------------------------------------------
  63 + Fixed Nav
  64 + -----------------------------------------------------------------------*/
  65 +
  66 + $(window).on('scroll', function () {
  67 + if ($(window).scrollTop() > 0) {
  68 + $('.iq-top-navbar').addClass('fixed');
  69 + } else {
  70 + $('.iq-top-navbar').removeClass('fixed');
  71 + }
  72 + });
  73 +
  74 + $(window).on('scroll', function () {
  75 + if ($(window).scrollTop() > 0) {
  76 + $('.white-bg-menu').addClass('sticky-menu');
  77 + } else {
  78 + $('.white-bg-menu').removeClass('sticky-menu');
  79 + }
  80 + });
  81 +
  82 +
  83 + /*---------------------------------------------------------------------
  84 + Sidebar Widget
  85 + -----------------------------------------------------------------------*/
  86 +
  87 + jQuery(document).on("click", '.side-menu > li > a', function() {
  88 + jQuery('.side-menu > li > a').parent().removeClass('active');
  89 + jQuery(this).parent().addClass('active');
  90 + });
  91 +
  92 + // Active menu
  93 + var parents = jQuery('li.active').parents('.submenu.collapse');
  94 +
  95 + parents.addClass('show');
  96 +
  97 +
  98 + parents.parents('li').addClass('active');
  99 + jQuery('li.active > a[aria-expanded="false"]').attr('aria-expanded', 'true');
  100 +
  101 + /*---------------------------------------------------------------------
  102 + FullScreen
  103 + -----------------------------------------------------------------------*/
  104 + jQuery(document).on('click', '.full-screen', function() {
  105 + let elem = jQuery(this);
  106 + elem.find('i').addClass('d-none');
  107 + elem.find('i').addClass('d-none');
  108 + if (!document.fullscreenElement &&
  109 + !document.mozFullScreenElement && // Mozilla
  110 + !document.webkitFullscreenElement && // Webkit-Browser
  111 + !document.msFullscreenElement) { // MS IE ab version 11
  112 + elem.find('.min').removeClass('d-none');
  113 + if (document.documentElement.requestFullscreen) {
  114 + document.documentElement.requestFullscreen();
  115 + } else if (document.documentElement.mozRequestFullScreen) {
  116 + document.documentElement.mozRequestFullScreen();
  117 + } else if (document.documentElement.webkitRequestFullscreen) {
  118 + document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
  119 + } else if (document.documentElement.msRequestFullscreen) {
  120 + document.documentElement.msRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
  121 + }
  122 + } else {
  123 + elem.find('.max').removeClass('d-none');
  124 + if (document.cancelFullScreen) {
  125 + document.cancelFullScreen();
  126 + } else if (document.mozCancelFullScreen) {
  127 + document.mozCancelFullScreen();
  128 + } else if (document.webkitCancelFullScreen) {
  129 + document.webkitCancelFullScreen();
  130 + } else if (document.msExitFullscreen) {
  131 + document.msExitFullscreen();
  132 + }
  133 + }
  134 + });
  135 +
  136 +
  137 + /*---------------------------------------------------------------------
  138 + Page Loader
  139 + -----------------------------------------------------------------------*/
  140 + jQuery("#load").fadeOut();
  141 + jQuery("#loading").delay().fadeOut("");
  142 +
  143 +
  144 + /*---------------------------------------------------------------------
  145 + Counter
  146 + -----------------------------------------------------------------------*/
  147 + if (window.counterUp !== undefined) {
  148 + const counterUp = window.counterUp["default"]
  149 + const $counters = $(".counter");
  150 + $counters.each(function (ignore, counter) {
  151 + var waypoint = new Waypoint( {
  152 + element: $(this),
  153 + handler: function() {
  154 + counterUp(counter, {
  155 + duration: 1000,
  156 + delay: 10
  157 + });
  158 + this.destroy();
  159 + },
  160 + offset: 'bottom-in-view',
  161 + } );
  162 + });
  163 + }
  164 +
  165 +
  166 + /*---------------------------------------------------------------------
  167 + Progress Bar
  168 + -----------------------------------------------------------------------*/
  169 + jQuery('.iq-progress-bar > span').each(function() {
  170 + let progressBar = jQuery(this);
  171 + let width = jQuery(this).data('percent');
  172 + progressBar.css({
  173 + 'transition': 'width 2s'
  174 + });
  175 + setTimeout(function() {
  176 + progressBar.css('width', width + '%');
  177 + }, 100);
  178 + });
  179 +
  180 + jQuery('.progress-bar-vertical > span').each(function () {
  181 + let progressBar = jQuery(this);
  182 + let height = jQuery(this).data('percent');
  183 + progressBar.css({
  184 + 'transition': 'height 2s'
  185 + });
  186 + setTimeout(function () {
  187 + progressBar.css('height', height + '%');
  188 + }, 100);
  189 + });
  190 +
  191 +
  192 + /*---------------------------------------------------------------------
  193 + Page Menu
  194 + -----------------------------------------------------------------------*/
  195 + jQuery(document).on('click', '.wrapper-menu', function() {
  196 + jQuery(this).toggleClass('open');
  197 + });
  198 +
  199 + jQuery(document).on('click', ".wrapper-menu", function() {
  200 + jQuery("body").toggleClass("sidebar-main");
  201 + });
  202 +
  203 +
  204 + /*---------------------------------------------------------------------
  205 + Close navbar Toggle
  206 + -----------------------------------------------------------------------*/
  207 +
  208 + jQuery('.close-toggle').on('click', function () {
  209 + jQuery('.h-collapse.navbar-collapse').collapse('hide');
  210 + });
  211 +
  212 + /*---------------------------------------------------------------------
  213 + user toggle
  214 + -----------------------------------------------------------------------*/
  215 + jQuery(document).on('click', '.user-toggle', function() {
  216 + jQuery(this).parent().addClass('show-data');
  217 + });
  218 +
  219 + jQuery(document).on('click', ".close-data", function() {
  220 + jQuery('.user-toggle').parent().removeClass('show-data');
  221 + });
  222 + jQuery(document).on("click", function(event){
  223 + var $trigger = jQuery(".user-toggle");
  224 + if($trigger !== event.target && !$trigger.has(event.target).length){
  225 + jQuery(".user-toggle").parent().removeClass('show-data');
  226 + }
  227 + });
  228 +
  229 + /*---------------------------------------------------------------------
  230 + Data tables
  231 + -----------------------------------------------------------------------*/
  232 + if($.fn.DataTable){
  233 + const table = $('.data-table').DataTable();
  234 + }
  235 +
  236 +
  237 + /*---------------------------------------------------------------------
  238 + Form Validation
  239 + -----------------------------------------------------------------------*/
  240 +
  241 + // Example starter JavaScript for disabling form submissions if there are invalid fields
  242 + window.addEventListener('load', function() {
  243 + // Fetch all the forms we want to apply custom Bootstrap validation styles to
  244 + var forms = document.getElementsByClassName('needs-validation');
  245 + // Loop over them and prevent submission
  246 + var validation = Array.prototype.filter.call(forms, function(form) {
  247 + form.addEventListener('submit', function(event) {
  248 + if (form.checkValidity() === false) {
  249 + event.preventDefault();
  250 + event.stopPropagation();
  251 + }
  252 + form.classList.add('was-validated');
  253 + }, false);
  254 + });
  255 + }, false);
  256 +
  257 + /*---------------------------------------------------------------------
  258 + Active Class for Pricing Table
  259 + -----------------------------------------------------------------------*/
  260 + jQuery("#my-table tr th").click(function () {
  261 + jQuery('#my-table tr th').children().removeClass('active');
  262 + jQuery(this).children().addClass('active');
  263 + jQuery("#my-table td").each(function () {
  264 + if (jQuery(this).hasClass('active')) {
  265 + jQuery(this).removeClass('active')
  266 + }
  267 + });
  268 + var col = jQuery(this).index();
  269 + jQuery("#my-table tr td:nth-child(" + parseInt(col + 1) + ")").addClass('active');
  270 + });
  271 +
  272 +
  273 + /*---------------------------------------------------------------------
  274 + Scrollbar
  275 + -----------------------------------------------------------------------*/
  276 +
  277 + jQuery('.data-scrollbar').each(function () {
  278 + var attr = $(this).attr('data-scroll');
  279 + if (typeof attr !== typeof undefined && attr !== false){
  280 + let Scrollbar = window.Scrollbar;
  281 + var a = jQuery(this).data('scroll');
  282 + Scrollbar.init(document.querySelector('div[data-scroll= "' + a + '"]'));
  283 + }
  284 + });
  285 +
  286 +
  287 + /*---------------------------------------------------------------------
  288 + image-upload
  289 + -----------------------------------------------------------------------*/
  290 +
  291 + $('.form_gallery-upload').on('change', function() {
  292 + var length = $(this).get(0).files.length;
  293 + var galleryLabel = $(this).attr('data-name');
  294 +
  295 + if( length > 1 ){
  296 + $(galleryLabel).text(length + " files selected");
  297 + } else {
  298 + $(galleryLabel).text($(this)[0].files[0].name);
  299 + }
  300 + });
  301 +
  302 + /*---------------------------------------------------------------------
  303 + video
  304 + -----------------------------------------------------------------------*/
  305 + $(document).ready(function(){
  306 + $('.form_video-upload input').change(function () {
  307 + $('.form_video-upload p').text(this.files.length + " file(s) selected");
  308 + });
  309 + });
  310 + /*---------------------------------------------------------------------
  311 + dark mode
  312 + -----------------------------------------------------------------------*/
  313 + const urlParams = new URLSearchParams(window.location.search);
  314 + const mode = urlParams.get('dark');
  315 + if (mode !== null) {
  316 + $('body').removeClass('sidebar-dark', 'sidebar-light')
  317 + switch (mode) {
  318 + case "true":
  319 + $('body').addClass('dark')
  320 + break;
  321 + case "false":
  322 + $('body').removeClass('sidebar-dark', 'sidebar-light')
  323 + break;
  324 + default:
  325 + $('body').removeClass('sidebar-dark').removeClass('sidebar-light')
  326 + break;
  327 + }
  328 + }
  329 +
  330 +
  331 + /*---------------------------------------------------------------------
  332 + Button
  333 + -----------------------------------------------------------------------*/
  334 +
  335 + jQuery('.qty-btn').on('click',function(){
  336 + var id = jQuery(this).attr('id');
  337 +
  338 + var val = parseInt(jQuery('#quantity').val());
  339 +
  340 + if(id == 'btn-minus')
  341 + {
  342 + if(val != 0)
  343 + {
  344 + jQuery('#quantity').val(val-1);
  345 + }
  346 + else
  347 + {
  348 + jQuery('#quantity').val(0);
  349 + }
  350 +
  351 + }
  352 + else
  353 + {
  354 + jQuery('#quantity').val(val+1);
  355 + }
  356 + });
  357 +
  358 + });
  359 +
  360 +
  361 + $(document).on('click', '[data-toggel-extra="side-nav"]', function () {
  362 + const pannel = $(this).attr('data-expand-extra')
  363 + $(pannel).addClass('active')
  364 + })
  365 +
  366 + $(document).on('click', '[data-toggel-extra="side-nav-close"]', function () {
  367 + const pannel = $(this).attr('data-expand-extra')
  368 + $(pannel).removeClass('active')
  369 + })
  370 +
  371 + $(document).on('click', '[data-toggel-extra="right-sidenav"]', function () {
  372 + const target = $(this).data('target')
  373 + $(target).addClass('active')
  374 + })
  375 +
  376 + $(document).on('click', '[data-extra-dismiss="right-sidenav"]', function () {
  377 + $(this).closest('.right-sidenav').removeClass('active')
  378 + })
  379 +
  380 + $(document).on('click', '[data-toggle="end-call"]', function(){
  381 + $(this).closest('.tab-pane').removeClass('active').removeClass('show')
  382 + $($(this).attr('data-target')).tab('show')
  383 + $('.chat-action').find('[data-toggle="tab"]').removeClass('active')
  384 + })
  385 +
  386 + $(document).on('click', '[data-toggle-extra="tab"]', function () {
  387 + const target = $(this).attr('data-target-extra')
  388 + $('[data-toggle-extra="tab-content"]').removeClass('active')
  389 + $(target).addClass('active')
  390 + $(this).parent().find('.active').removeClass('active')
  391 + $(this).addClass('active')
  392 + })
  393 +
  394 + $('emoji-picker').on('emoji-click', function(e){
  395 + $(e.target.dataset.targetInput).val($(e.target.dataset.targetInput).val()+e.detail.unicode)
  396 + })
  397 +
  398 + $('.dropdown-menu').on('click', function(event){
  399 + event.stopPropagation();
  400 + });
  401 +
  402 + var board = $('.draggable-item');
  403 +
  404 + var selector = [];
  405 + if(board.length > 0 )
  406 + {
  407 + for(var i = 0 ; i < board.length ; i++) {
  408 + selector.push(document.querySelector('#draggable-item-'+i));
  409 + selector.push(document.querySelector('#list-draggable-item-'+i));
  410 + }
  411 + }
  412 + dragula( selector ).on('drop', function(el) {
  413 + $(el).addClass(' animate__animated animate__rubberBand')
  414 + setTimeout(function () {
  415 + $(el).removeClass(' animate__animated animate__rubberBand')
  416 + }, 1000)
  417 + });
  418 +
  419 + // calender 1 js
  420 + var calendar1;
  421 + if (jQuery('#calendar1').length) {
  422 + var calendarEl = document.getElementById('calendar1');
  423 +
  424 + calendar1 = new FullCalendar.Calendar(calendarEl, {
  425 + selectable: true,
  426 + plugins: ["timeGrid", "dayGrid", "list", "interaction"],
  427 + timeZone: "UTC",
  428 + defaultView: "dayGridMonth",
  429 + contentHeight: "auto",
  430 + eventLimit: true,
  431 + dayMaxEvents: 4,
  432 + header: {
  433 + left: "prev,next today",
  434 + center: "title",
  435 + right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
  436 + },
  437 + dateClick: function (info) {
  438 + $('#schedule-start-date').val(info.dateStr)
  439 + $('#schedule-end-date').val(info.dateStr)
  440 + $('#date-event').modal('show')
  441 + },
  442 + events: [
  443 + {
  444 + title: 'Click for Google',
  445 + url: 'http://google.com/',
  446 + start: moment(new Date(), 'YYYY-MM-DD').add(-20, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
  447 + color: '#4731b6'
  448 + },
  449 + {
  450 + title: 'All Day Event',
  451 + start: moment(new Date(), 'YYYY-MM-DD').add(-18, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
  452 + color: '#465af7'
  453 + },
  454 + {
  455 + title: 'Long Event',
  456 + start: moment(new Date(), 'YYYY-MM-DD').add(-16, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
  457 + end: moment(new Date(), 'YYYY-MM-DD').add(-13, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
  458 + color: '#7858d7'
  459 + },
  460 + {
  461 + groupId: '999',
  462 + title: 'Repeating Event',
  463 + start: moment(new Date(), 'YYYY-MM-DD').add(-14, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
  464 + color: '#465af7'
  465 + },
  466 + {
  467 + groupId: '999',
  468 + title: 'Repeating Event',
  469 + start: moment(new Date(), 'YYYY-MM-DD').add(-12, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
  470 + color: '#5baa73'
  471 + },
  472 + {
  473 + groupId: '999',
  474 + title: 'Repeating Event',
  475 + start: moment(new Date(), 'YYYY-MM-DD').add(-10, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
  476 + color: '#01041b'
  477 + },
  478 + {
  479 + title: 'Birthday Party',
  480 + start: moment(new Date(), 'YYYY-MM-DD').add(-8, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
  481 + color: '#4731b6'
  482 + },
  483 + {
  484 + title: 'Meeting',
  485 + start: moment(new Date(), 'YYYY-MM-DD').add(-6, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
  486 + color: '#15ca92'
  487 + },
  488 + {
  489 + title: 'Birthday Party',
  490 + start: moment(new Date(), 'YYYY-MM-DD').add(-5, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
  491 + color: '#f4a965'
  492 + },
  493 + {
  494 + title: 'Birthday Party',
  495 + start: moment(new Date(), 'YYYY-MM-DD').add(-2, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
  496 + color: '#ea643f'
  497 + },
  498 +
  499 + {
  500 + title: 'Meeting',
  501 + start: moment(new Date(), 'YYYY-MM-DD').add(0, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
  502 + color: '#15ca92'
  503 + },
  504 + {
  505 + title: 'Click for Google',
  506 + url: 'http://google.com/',
  507 + start: moment(new Date(), 'YYYY-MM-DD').add(0, 'days').format('YYYY-MM-DD') + 'T06:30:00.000Z',
  508 + color: '#4731b6'
  509 + },
  510 + {
  511 + groupId: '999',
  512 + title: 'Repeating Event',
  513 + start: moment(new Date(), 'YYYY-MM-DD').add(0, 'days').format('YYYY-MM-DD') + 'T07:30:00.000Z',
  514 + color: '#5baa73'
  515 + },
  516 + {
  517 + title: 'Birthday Party',
  518 + start: moment(new Date(), 'YYYY-MM-DD').add(0, 'days').format('YYYY-MM-DD') + 'T08:30:00.000Z',
  519 + color: '#f4a965'
  520 + },
  521 + {
  522 + title: 'Doctor Meeting',
  523 + start: moment(new Date(), 'YYYY-MM-DD').add(0, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
  524 + color: '#f4a965'
  525 + },
  526 + {
  527 + title: 'All Day Event',
  528 + start: moment(new Date(), 'YYYY-MM-DD').add(1, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
  529 + color: '#465af7'
  530 + },
  531 + {
  532 + groupId: '999',
  533 + title: 'Repeating Event',
  534 + start: moment(new Date(), 'YYYY-MM-DD').add(8, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
  535 + color: '#465af7'
  536 + },
  537 + {
  538 + groupId: '999',
  539 + title: 'Repeating Event',
  540 + start: moment(new Date(), 'YYYY-MM-DD').add(10, 'days').format('YYYY-MM-DD') + 'T05:30:00.000Z',
  541 + color: '#5baa73'
  542 + }
  543 + ]
  544 + });
  545 + calendar1.render();
  546 +
  547 + $(document).on("submit", "#submit-schedule", function (e) {
  548 + e.preventDefault()
  549 + const title = $(this).find('#schedule-title').val()
  550 + const startDate = moment(new Date($(this).find('#schedule-start-date').val()), 'YYYY-MM-DD').format('YYYY-MM-DD') + 'T05:30:00.000Z'
  551 + const endDate = moment(new Date($(this).find('#schedule-end-date').val()), 'YYYY-MM-DD').format('YYYY-MM-DD') + 'T05:30:00.000Z'
  552 + const color = $(this).find('#schedule-color').val()
  553 + const event = {
  554 + title: title,
  555 + start: startDate || '2020-12-22T02:30:00',
  556 + end: endDate || '2020-12-12T14:30:00',
  557 + color: color || '#7858d7'
  558 + }
  559 + $(this).closest('#date-event').modal('hide')
  560 + calendar1.addEvent(event)
  561 + })
  562 + }
  563 +
  564 + const progressBar = document.getElementsByClassName('circle-progress')
  565 + Array.from(progressBar, (elem) => {
  566 + const minValue = elem.getAttribute('data-min-value')
  567 + const maxValue = elem.getAttribute('data-max-value')
  568 + const value = elem.getAttribute('data-value')
  569 + const type = elem.getAttribute('data-type')
  570 + if (elem.getAttribute('id') !== '' && elem.getAttribute('id') !== null) {
  571 + new CircleProgress('#'+elem.getAttribute('id'), {
  572 + min: minValue,
  573 + max: maxValue,
  574 + value: value,
  575 + textFormat: type,
  576 + });
  577 + }
  578 + })
  579 + /*---------------------------------------------------------------------
  580 + Vanila Datepicker
  581 + -----------------------------------------------------------------------*/
  582 + const datepickers = document.querySelectorAll('.vanila-datepicker')
  583 + Array.from(datepickers, (elem) => {
  584 + new Datepicker(elem)
  585 + })
  586 + const daterangePickers = document.querySelectorAll('.vanila-daterangepicker')
  587 + Array.from(daterangePickers, (elem) => {
  588 + new DateRangePicker(elem)
  589 + })
  590 +
  591 + /*---------------------------------------------------------------------
  592 + Choies.js
  593 + -----------------------------------------------------------------------*/
  594 + const choies = document.querySelectorAll('.choicesjs')
  595 + Array.from(choies,(elem) => {
  596 + new Choices(elem, {
  597 + removeItemButton: true,
  598 + })
  599 + })
  600 +})(jQuery);
  1 +
  2 + $(document).ready(function () {
  3 + $('#basic').on('click', function () {
  4 + Swal.fire('Hello! This is a Basic Message.')
  5 + });
  6 + $('#basic-title').on('click', function () {
  7 + Swal.fire(
  8 + 'The Internet?',
  9 + 'That thing is still around?',
  10 + 'question'
  11 + )
  12 + });
  13 + $('#success').on('click', function () {
  14 + Swal.fire({
  15 + icon: 'success',
  16 + title: 'Your work has been saved',
  17 + showConfirmButton: false,
  18 + })
  19 + });
  20 + $('#info').on('click', function () {
  21 + Swal.fire({
  22 + icon: 'info',
  23 + title: 'Good Job!',
  24 + showConfirmButton: false,
  25 + })
  26 + });
  27 + $('#warning').on('click', function () {
  28 + Swal.fire({
  29 + icon: 'warning',
  30 + title: 'Changes are not saved',
  31 + showConfirmButton: false,
  32 +
  33 + })
  34 + });
  35 + $('#danger').on('click', function () {
  36 + Swal.fire({
  37 + icon: 'error',
  38 + title: 'OOps!!',
  39 + text: 'Something went Wrong',
  40 + showConfirmButton: false,
  41 + })
  42 + });
  43 + $('#confirmation').on('click', function () {
  44 + Swal.fire({
  45 + title: "Are you sure?",
  46 + text: "Once deleted, you will not be able to recover this imaginary file!",
  47 + icon: "warning",
  48 + buttons: true,
  49 + dangerMode: true,
  50 + })
  51 + .then((willDelete) => {
  52 + if (willDelete) {
  53 + Swal.fire("Poof! Your imaginary file has been deleted!", {
  54 + icon: "success",
  55 + });
  56 + } else {
  57 + Swal.fire("Your imaginary file is safe!");
  58 + }
  59 + });
  60 + });
  61 + $('#custom-buttons').on('click', function () {
  62 + Swal.fire("A wild Pikachu appeared! What do you want to do?", {
  63 + buttons: {
  64 + cancel: "Run away!",
  65 + catch: {
  66 + text: "Throw Pokéball!",
  67 + value: "catch",
  68 + },
  69 + defeat: true,
  70 + },
  71 + })
  72 + .then((value) => {
  73 + switch (value) {
  74 +
  75 + case "defeat":
  76 + Swal.fire("Pikachu fainted! You gained 500 XP!");
  77 + break;
  78 +
  79 + case "catch":
  80 + Swal.fire("Gotcha!", "Pikachu was caught!", "success");
  81 + break;
  82 +
  83 + default:
  84 + Swal.fire("Got away safely!");
  85 + }
  86 + });
  87 + });
  88 + $('#ajax-request').on('click', function () {
  89 + Swal.fire({
  90 + text: 'Search for a movie. e.g. "La La Land".',
  91 + content: "input",
  92 + button: {
  93 + text: "Search!",
  94 + closeModal: false,
  95 + },
  96 + })
  97 + .then(name => {
  98 + if (!name) throw null;
  99 +
  100 + return fetch(`https://itunes.apple.com/search?term=${name}&entity=movie`);
  101 + })
  102 + .then(results => {
  103 + return results.json();
  104 + })
  105 + .then(json => {
  106 + const movie = json.results[0];
  107 +
  108 + if (!movie) {
  109 + return Swal.fire("No movie was found!");
  110 + }
  111 +
  112 + const name = movie.trackName;
  113 + const imageURL = movie.artworkUrl100;
  114 +
  115 + Swal.fire({
  116 + title: "Top result:",
  117 + text: name,
  118 + icon: imageURL,
  119 + });
  120 + })
  121 + .catch(err => {
  122 + if (err) {
  123 + Swal.fire("Oh noes!", "The AJAX request failed!", "error");
  124 + } else {
  125 + Swal.fire.stopLoading();
  126 + Swal.fire.close();
  127 + }
  128 + });
  129 + });
  130 + $('#form-input').on('click', function () {
  131 + Swal.fire("Write something here:", {
  132 + content: "input",
  133 + })
  134 + .then((value) => {
  135 + Swal.fire(`You typed: ${value}`);
  136 + });
  137 + });
  138 + });