1/* 2 3========================================================= 4* Volt Pro - Premium Bootstrap 5 Dashboard 5========================================================= 6 7* Product Page: https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard 8* Copyright 2021 Themesberg (https://www.themesberg.com) 9 10* Designed and coded by https://themesberg.com 11 12========================================================= 13 14* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. Please contact us to request a removal. Contact us if you want to remove it. 15 16*/ 17 18"use strict"; 19const d = document; 20d.addEventListener("DOMContentLoaded", function (event) { 21 22 const swalWithBootstrapButtons = Swal.mixin({ 23 customClass: { 24 confirmButton: 'btn btn-primary me-3', 25 cancelButton: 'btn btn-gray' 26 }, 27 buttonsStyling: false 28 }); 29 30 // options 31 const breakpoints = { 32 sm: 540, 33 md: 720, 34 lg: 960, 35 xl: 1140 36 }; 37 38 var preloader = d.querySelector('.preloader'); 39 if (preloader) { 40 setTimeout(function () { 41 preloader.classList.add('show'); 42 43 setTimeout(function () { 44 d.querySelector('.loader-element').classList.add('hide'); 45 }, 200); 46 }, 1000); 47 } 48 49 var sidebar = document.getElementById('sidebarMenu'); 50 var content = document.getElementsByClassName('content')[0]; 51 if (sidebar && d.body.clientWidth < breakpoints.lg) { 52 sidebar.addEventListener('shown.bs.collapse', function () { 53 document.querySelector('body').style.position = 'fixed'; 54 }); 55 sidebar.addEventListener('hidden.bs.collapse', function () { 56 document.querySelector('body').style.position = 'relative'; 57 }); 58 } 59 60 var iconNotifications = d.querySelector('.notification-bell'); 61 if (iconNotifications) { 62 iconNotifications.addEventListener('shown.bs.dropdown', function () { 63 iconNotifications.classList.remove('unread'); 64 }); 65 } 66 67 [].slice.call(d.querySelectorAll('[data-background]')).map(function (el) { 68 el.style.background = 'url(' + el.getAttribute('data-background') + ')'; 69 }); 70 71 [].slice.call(d.querySelectorAll('[data-background-lg]')).map(function (el) { 72 if (document.body.clientWidth > breakpoints.lg) { 73 el.style.background = 'url(' + el.getAttribute('data-background-lg') + ')'; 74 } 75 }); 76 77 [].slice.call(d.querySelectorAll('[data-background-color]')).map(function (el) { 78 el.style.background = 'url(' + el.getAttribute('data-background-color') + ')'; 79 }); 80 81 [].slice.call(d.querySelectorAll('[data-color]')).map(function (el) { 82 el.style.color = 'url(' + el.getAttribute('data-color') + ')'; 83 }); 84 85 //Tooltips 86 var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) 87 var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { 88 return new bootstrap.Tooltip(tooltipTriggerEl) 89 }) 90 91 // Popovers 92 var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) 93 var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { 94 return new bootstrap.Popover(popoverTriggerEl) 95 }) 96 97 98 // Datepicker 99 var datepickers = [].slice.call(d.querySelectorAll('[data-datepicker]')) 100 var datepickersList = datepickers.map(function (el) { 101 return new Datepicker(el, { 102 buttonClass: 'btn' 103 }); 104 }) 105 106 // DataTables 107 var dataTableEl = d.getElementById('datatable'); 108 if (dataTableEl) { 109 const dataTable = new simpleDatatables.DataTable(dataTableEl); 110 } 111 112 if (d.querySelector('.input-slider-container')) { 113 [].slice.call(d.querySelectorAll('.input-slider-container')).map(function (el) { 114 var slider = el.querySelector(':scope .input-slider'); 115 var sliderId = slider.getAttribute('id'); 116 var minValue = slider.getAttribute('data-range-value-min'); 117 var maxValue = slider.getAttribute('data-range-value-max'); 118 119 var sliderValue = el.querySelector(':scope .range-slider-value'); 120 var sliderValueId = sliderValue.getAttribute('id'); 121 var startValue = sliderValue.getAttribute('data-range-value-low'); 122 123 var c = d.getElementById(sliderId), 124 id = d.getElementById(sliderValueId); 125 126 noUiSlider.create(c, { 127 start: [parseInt(startValue)], 128 connect: [true, false], 129 //step: 1000, 130 range: { 131 'min': [parseInt(minValue)], 132 'max': [parseInt(maxValue)] 133 } 134 }); 135 }); 136 } 137 138 if (d.getElementById('input-slider-range')) { 139 var c = d.getElementById("input-slider-range"), 140 low = d.getElementById("input-slider-range-value-low"), 141 e = d.getElementById("input-slider-range-value-high"), 142 f = [d, e]; 143 144 noUiSlider.create(c, { 145 start: [parseInt(low.getAttribute('data-range-value-low')), parseInt(e.getAttribute('data-range-value-high'))], 146 connect: !0, 147 tooltips: true, 148 range: { 149 min: parseInt(c.getAttribute('data-range-value-min')), 150 max: parseInt(c.getAttribute('data-range-value-max')) 151 } 152 }), c.noUiSlider.on("update", function (a, b) { 153 f[b].textContent = a[b] 154 }); 155 } 156 157 // Apex Charts 158 159 160 161 // Weekly Sales Chart 162 var optionsWeeklySalesChart = { 163 series: [{ 164 name: 'Sales', 165 data: [32, 44, 37, 47, 42, 55, 47, 65] 166 }], 167 chart: { 168 type: 'bar', 169 width: "100%", 170 height: 260, 171 sparkline: { 172 enabled: true 173 } 174 }, 175 theme: { 176 monochrome: { 177 enabled: true, 178 color: '#31316A', 179 } 180 }, 181 plotOptions: { 182 bar: { 183 columnWidth: '20%', 184 borderRadius: 5, 185 radiusOnLastStackedBar: true, 186 horizontal: false, 187 distributed: false, 188 endindShape: 'rounded', 189 colors: { 190 backgroundBarColors: ['#F2F4F6', '#F2F4F6', '#F2F4F6', '#F2F4F6'], 191 backgroundBarRadius: 5, 192 }, 193 } 194 }, 195 labels: [1, 2, 3, 4, 5, 6, 7, 8], 196 xaxis: { 197 categories: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5', 'Week 6', 'Week 7', 'Week 8'], 198 crosshairs: { 199 width: 1 200 }, 201 }, 202 tooltip: { 203 fillSeriesColor: false, 204 onDatasetHover: { 205 highlightDataSeries: false, 206 }, 207 theme: 'light', 208 style: { 209 fontSize: '12px', 210 fontFamily: 'Inter', 211 }, 212 y: { 213 formatter: function (val) { 214 return "$ " + val + "k" 215 } 216 } 217 }, 218 }; 219 220 var weeklySalesChartEl = document.getElementById('chart-weekly-sales'); 221 if (weeklySalesChartEl) { 222 var weeklySalesChart = new ApexCharts(weeklySalesChartEl, optionsWeeklySalesChart); 223 weeklySalesChart.render(); 224 } 225 226 //Customers Chart 227 var optionsCustomersChart = { 228 series: [{ 229 name: 'Clients', 230 data: [120, 160, 200, 470, 420, 150, 470, 750, 650, 190, 140] 231 }], 232 labels: ['01 Feb', '02 Feb', '03 Feb', '04 Feb', '05 Feb', '06 Feb', '07 Feb', '08 Feb', '09 Feb', '10 Feb', '11 Feb'], 233 chart: { 234 type: 'area', 235 width: "100%", 236 height: 140, 237 sparkline: { 238 enabled: true 239 } 240 }, 241 theme: { 242 monochrome: { 243 enabled: true, 244 color: '#31316A', 245 } 246 }, 247 tooltip: { 248 fillSeriesColor: false, 249 onDatasetHover: { 250 highlightDataSeries: false, 251 }, 252 theme: 'light', 253 style: { 254 fontSize: '12px', 255 fontFamily: 'Inter', 256 }, 257 }, 258 }; 259 260 var customersChartEl = document.getElementById('chart-customers'); 261 if (customersChartEl) { 262 var customersChart = new ApexCharts(customersChartEl, optionsCustomersChart); 263 customersChart.render(); 264 } 265 266 //Today Users Chart 267 var optionsUsersChart = { 268 series: [{ 269 name: 'Users', 270 data: [520, 560, 500, 570, 520, 550, 570, 550, 550, 590, 540] 271 }], 272 labels: ['06PM', '02 Feb', '03 Feb', '04 Feb', '05 Feb', '06 Feb', '07 Feb', '08 Feb', '09 Feb', '10 Feb', '11 Feb'], 273 chart: { 274 type: 'area', 275 width: "100%", 276 height: 140, 277 sparkline: { 278 enabled: true 279 } 280 }, 281 theme: { 282 monochrome: { 283 enabled: true, 284 color: '#31316A', 285 } 286 }, 287 tooltip: { 288 fillSeriesColor: false, 289 onDatasetHover: { 290 highlightDataSeries: false, 291 }, 292 theme: 'light', 293 style: { 294 fontSize: '12px', 295 fontFamily: 'Inter', 296 }, 297 }, 298 }; 299 300 var usersChartEl = document.getElementById('chart-users'); 301 if (usersChartEl) { 302 var usersChart = new ApexCharts(usersChartEl, optionsUsersChart); 303 usersChart.render(); 304 } 305 306 307 // Revenue Chart 308 var optionsRevenueChart = { 309 series: [{ 310 name: 'Sales', 311 data: [34, 29, 32, 38, 39, 35, 36] 312 }], 313 chart: { 314 type: 'bar', 315 width: "100%", 316 height: 140, 317 sparkline: { 318 enabled: true 319 } 320 }, 321 theme: { 322 monochrome: { 323 enabled: true, 324 color: '#31316A', 325 } 326 }, 327 plotOptions: { 328 bar: { 329 columnWidth: '25%', 330 borderRadius: 5, 331 radiusOnLastStackedBar: true, 332 colors: { 333 backgroundBarColors: ['#F2F4F6', '#F2F4F6', '#F2F4F6', '#F2F4F6'], 334 backgroundBarRadius: 5, 335 }, 336 } 337 }, 338 labels: [1, 2, 3, 4, 5, 6, 7], 339 xaxis: { 340 categories: ['01 Feb', '02 Feb', '03 Feb', '04 Feb', '05 Feb', '06 Feb', '07 Feb'], 341 crosshairs: { 342 width: 1 343 }, 344 }, 345 tooltip: { 346 fillSeriesColor: false, 347 onDatasetHover: { 348 highlightDataSeries: false, 349 }, 350 theme: 'light', 351 style: { 352 fontSize: '12px', 353 fontFamily: 'Inter', 354 }, 355 y: { 356 formatter: function (val) { 357 return "$ " + val + "k" 358 } 359 } 360 }, 361 }; 362 363 var revenueChartEl = document.getElementById('chart-revenue'); 364 if (revenueChartEl) { 365 var revenueChart = new ApexCharts(revenueChartEl, optionsRevenueChart); 366 revenueChart.render(); 367 } 368 369 //Traffic volumes 370 var optionsTrafficVolumesChart = { 371 series: [{ 372 name: 'Direct', 373 data: [7100, 9600, 10000, 8700, 12000, 15400, 19000] 374 }, { 375 name: 'Refferals', 376 data: [4100, 6800, 7000, 6700, 7200, 14000, 12000] 377 }, { 378 name: 'Organic', 379 data: [1100, 3200, 4500, 3200, 3400, 5200, 4100] 380 }], 381 colors: ['#4D4AE8', '#FD8E7A', '#06A77D', '#51449E'], 382 chart: { 383 height: 420, 384 type: "line", 385 fontFamily: 'Inter', 386 foreColor: '#4B5563', 387 toolbar: { 388 show: true, 389 offsetX: 0, 390 offsetY: 0, 391 tools: { 392 download: false, 393 selection: false, 394 zoom: false, 395 zoomin: true, 396 zoomout: true, 397 pan: false, 398 reset: false | '<img src="/static/icons/reset.png" width="20">', 399 customIcons: [] 400 }, 401 export: { 402 csv: { 403 filename: undefined, 404 columnDelimiter: ',', 405 headerCategory: 'category', 406 headerValue: 'value', 407 dateFormatter(timestamp) { 408 return new Date(timestamp).toDateString() 409 } 410 } 411 }, 412 autoSelected: 'zoom' 413 }, 414 }, 415 dataLabels: { 416 enabled: false 417 }, 418 stroke: { 419 curve: 'smooth' 420 }, 421 grid: { 422 show: true, 423 borderColor: '#f2f2f2', 424 strokeDashArray: 1, 425 }, 426 xaxis: { 427 categories: ['01 Feb', '02 Feb', '03 Feb', '04 Feb', '05 Feb', '06 Feb', '07 Feb'], 428 labels: { 429 style: { 430 fontSize: '12px', 431 fontWeight: 500, 432 }, 433 }, 434 axisBorder: { 435 color: '#ffffff', 436 }, 437 axisTicks: { 438 color: '#ffffff', 439 } 440 }, 441 yaxis: { 442 labels: { 443 style: { 444 colors: ['#4B5563'], 445 fontSize: '12px', 446 fontWeight: 500, 447 }, 448 }, 449 }, 450 legend: { 451 show: true, 452 fontSize: '14px', 453 fontFamily: 'Inter', 454 fontWeight: 400, 455 height: 60, 456 tooltipHoverFormatter: undefined, 457 offsetY: 20, 458 markers: { 459 width: 14, 460 height: 14, 461 strokeWidth: 1, 462 strokeColor: '#fff', 463 radius: 50, 464 }, 465 }, 466 responsive: [ 467 { 468 breakpoint: 768, 469 options: { 470 yaxis: { 471 show: false, 472 } 473 } 474 } 475 ] 476 }; 477 478 var trafficVolumesChartEl = document.getElementById('traffic-volumes-chart'); 479 if (trafficVolumesChartEl) { 480 var trafficVolumesChart = new ApexCharts(trafficVolumesChartEl, optionsTrafficVolumesChart); 481 trafficVolumesChart.render(); 482 } 483 484 // Sales by Product 485 var optionsTrafficShareChart = { 486 series: [{ 487 name: 'Visits', 488 data: [4, 7, 9, 29, 51] 489 }], 490 chart: { 491 type: 'bar', 492 height: 500, 493 foreColor: '#4B5563', 494 fontFamily: 'Inter', 495 }, 496 plotOptions: { 497 bar: { 498 horizontal: true, 499 distributed: false, 500 barHeight: '90%', 501 borderRadius: 10, 502 colors: { 503 backgroundBarColors: ['#fff'], 504 backgroundBarOpacity: .2, 505 backgroundBarRadius: 10, 506 }, 507 } 508 }, 509 colors: ['#4D4AE8'], 510 dataLabels: { 511 enabled: true, 512 textAnchor: 'middle', 513 formatter: function (val, opt) { 514 return opt.w.globals.labels[opt.dataPointIndex] 515 }, 516 offsetY: -1, 517 dropShadow: { 518 enabled: false, 519 }, 520 style: { 521 fontSize: '12px', 522 fontFamily: 'Inter', 523 fontWeight: '500', 524 } 525 }, 526 grid: { 527 show: false, 528 borderColor: '#f2f2f2', 529 strokeDashArray: 1, 530 }, 531 legend: { 532 show: false, 533 }, 534 yaxis: { 535 labels: { 536 show: false 537 }, 538 }, 539 tooltip: { 540 fillSeriesColor: false, 541 onDatasetHover: { 542 hig
542hlightDataSeries: false, 543 }, 544 theme: 'light', 545 style: { 546 fontSize: '12px', 547 fontFamily: 'Inter', 548 }, 549 y: { 550 formatter: function (val) { 551 return val + "%" 552 } 553 }, 554 }, 555 xaxis: { 556 categories: ['Mail', 'Social', 'Organic', 'Referrals', 'Direct'], 557 labels: { 558 style: { 559 fontSize: '12px', 560 fontWeight: 500, 561 }, 562 offsetY: 5 563 }, 564 axisBorder: { 565 color: '#ffffff', 566 }, 567 axisTicks: { 568 color: '#ffffff', 569 offsetY: 5 570 }, 571 } 572 }; 573 574 var trafficShareChartEl = document.getElementById('traffic-share-chart'); 575 if (trafficShareChartEl) { 576 var trafficShareChart = new ApexCharts(trafficShareChartEl, optionsTrafficShareChart); 577 trafficShareChart.render(); 578 } 579 580 // Total Orders Chart 581 var optionsAppRankingChart = { 582 series: [{ 583 name: 'Travel & Local', 584 data: [44, 55, 57, 56, 61, 58, 63, 60, 66] 585 }, { 586 name: 'Widgets', 587 data: [76, 85, 101, 98, 87, 105, 91, 114, 94] 588 }], 589 chart: { 590 type: 'bar', 591 height: '400px', 592 fontFamily: 'Inter', 593 foreColor: '#4B5563', 594 }, 595 colors: ['#f0bc74', '#31316A'], 596 plotOptions: { 597 bar: { 598 horizontal: false, 599 columnWidth: '40%', 600 borderRadius: 10, 601 colors: { 602 backgroundBarColors: ['#fff'], 603 backgroundBarOpacity: .2, 604 backgroundBarRadius: 10, 605 }, 606 }, 607 }, 608 grid: { 609 show: false, 610 }, 611 dataLabels: { 612 enabled: false 613 }, 614 legend: { 615 show: true, 616 fontSize: '14px', 617 fontFamily: 'Inter', 618 fontWeight: 500, 619 height: 40, 620 tooltipHoverFormatter: undefined, 621 offsetY: 10, 622 markers: { 623 width: 14, 624 height: 14, 625 strokeWidth: 1, 626 strokeColor: '#ffffff', 627 radius: 50, 628 }, 629 }, 630 stroke: { 631 show: true, 632 width: 2, 633 colors: ['transparent'] 634 }, 635 xaxis: { 636 categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'], 637 labels: { 638 style: { 639 fontSize: '12px', 640 fontWeight: 500, 641 }, 642 }, 643 axisBorder: { 644 color: '#EBE3EE', 645 }, 646 axisTicks: { 647 color: '#f1f1f1', 648 } 649 }, 650 yaxis: { 651 show: false, 652 }, 653 fill: { 654 opacity: 1 655 }, 656 responsive: [{ 657 breakpoint: 1499, 658 options: { 659 chart: { 660 height: '400px', 661 }, 662 }, 663 }] 664 }; 665 666 var appRankingChartEl = document.getElementById('chart-app-ranking'); 667 if (appRankingChartEl) { 668 var appRankingChart = new ApexCharts(appRankingChartEl, optionsAppRankingChart); 669 appRankingChart.render(); 670 } 671 672 if (d.getElementById('loadOnClick')) { 673 d.getElementById('loadOnClick').addEventListener('click', function () { 674 var button = this; 675 var loadContent = d.getElementById('extraContent'); 676 var allLoaded = d.getElementById('allLoadedText'); 677 678 button.classList.add('btn-loading'); 679 button.setAttribute('disabled', 'true'); 680 681 setTimeout(function () { 682 loadContent.style.display = 'block'; 683 button.style.display = 'none'; 684 allLoaded.style.display = 'block'; 685 }, 1500); 686 }); 687 } 688 689 if (typeof SmoothScroll !== 'undefined') { 690 var scroll = new SmoothScroll('a[href*="#"]', { 691 speed: 500, 692 speedAsDuration: true 693 }); 694 } 695 696 // SVG Map 697 if (d.querySelector('#map')) { 698 new svgMap({ 699 targetElementID: 'map', 700 colorMin: '#FCE1C3', 701 colorMax: '#F8BD7A', 702 flagType: 'emoji', 703 data: { 704 data: { 705 visitors: { 706 name: 'Visitors', 707 format: '{0} visitors', 708 thousandSeparator: ',', 709 thresholdMax: 500000, 710 thresholdMin: 0 711 }, 712 change: { 713 name: 'Change by month', 714 format: '{0} %' 715 } 716 }, 717 applyData: 'visitors', 718 values: { 719 US: { visitors: 272109, change: 4.73 }, 720 CA: { visitors: 160064, change: 11.09 }, 721 DE: { visitors: 120048, change: -2.3 }, 722 GB: { visitors: 110048, change: 3.3 }, 723 FR: { visitors: 100048, change: 1.3 }, 724 ES: { visitors: 90048, change: 1.5 }, 725 JP: { visitors: 56022, change: 3.5 }, 726 IT: { visitors: 48019, change: 1 }, 727 NL: { visitors: 40016, change: 2 }, 728 RU: { visitors: 30016, change: 3.4 }, 729 CN: { visitors: 50016, change: 6 }, 730 IN: { visitors: 140016, change: 2 }, 731 BR: { visitors: 40016, change: 5 }, 732 // ... 733 } 734 } 735 }); 736 } 737 738 // Dropzone 739 if (d.querySelector('myDropzone')) { 740 // Dropzone class: 741 var myDropzone = new Dropzone("div#myId", { url: "/file/post" }); 742 } 743 744 // Full Calendar 745 var calendarEl = d.getElementById('calendar'); 746 if (calendarEl) { 747 748 var events = [ 749 { 750 id: 1, 751 title: 'Call with Jane', 752 start: '2020-11-18', 753 end: '2020-11-19', 754 className: 'bg-red' 755 }, 756 757 { 758 id: 2, 759 title: 'Dinner meeting', 760 start: '2020-11-21', 761 end: '2020-11-22', 762 className: 'bg-orange' 763 }, 764 765 { 766 id: 3, 767 title: 'HackTM conference', 768 start: '2020-11-29', 769 end: '2020-11-30', 770 className: 'bg-green' 771 }, 772 773 { 774 id: 4, 775 title: 'Meeting with John', 776 start: '2020-12-01', 777 end: '2020-12-02', 778 className: 'bg-blue' 779 }, 780 781 { 782 id: 5, 783 title: 'Summer Hackaton', 784 start: '2020-12-03', 785 end: '2020-12-04', 786 className: 'bg-purple' 787 }, 788 789 { 790 id: 6, 791 title: 'Digital event', 792 start: '2020-12-07', 793 end: '2020-12-09', 794 className: 'bg-info' 795 }, 796 797 { 798 id: 7, 799 title: 'Marketing event', 800 start: '2020-12-10', 801 end: '2020-12-11', 802 className: 'bg-blue' 803 }, 804 805 { 806 id: 8, 807 title: 'Dinner with Parents', 808 start: '2020-12-19', 809 end: '2020-12-20', 810 className: 'bg-red' 811 }, 812 813 { 814 id: 9, 815 title: 'Black Friday', 816 start: '2020-12-23', 817 end: '2020-12-24', 818 className: 'bg-yellow' 819 }, 820 821 { 822 id: 10, 823 title: 'Cyber Week', 824 start: '2020-12-02', 825 end: '2020-12-03', 826 className: 'bg-red' 827 } 828 ]; 829 830 var addNewEventModalEl = d.getElementById('modal-new-event');
831 var addNewEventModal = new bootstrap.Modal(addNewEventModalEl); 832 var newEventTitleInput = d.getElementById('eventTitle'); 833 var newEventStartDatepicker = new Datepicker(d.getElementById('dateStart'), { buttonClass: 'btn' }); 834 var newEventEndDatepicker = new Datepicker(d.getElementById('dateEnd'), { buttonClass: 'btn' }); 835 836 var editEventModalEl = d.getElementById('modal-edit-event'); 837 var editEventModal = new bootstrap.Modal(editEventModalEl); 838 var editEventTitleInput = d.getElementById('eventTitleEdit'); 839 var editEventStartDatepicker = new Datepicker(d.getElementById('dateStartEdit'), { buttonClass: 'btn' }); 840 var editEventEndDatepicker = new Datepicker(d.getElementById('dateEndEdit'), { buttonClass: 'btn' }); 841 842 // current id selection 843 var currentId = null; 844 845 var calendar = new FullCalendar.Calendar(calendarEl, { 846 selectable: true, 847 initialView: 'dayGridMonth', 848 themeSystem: 'bootstrap', 849 initialDate: '2020-12-01', 850 editable: true, 851 events: events, 852 buttonText: { 853 prev: 'Previous', 854 next: 'Next' 855 }, 856 dateClick: function (d) { 857 addNewEventModal.show(); 858 newEventTitleInput.value = ''; 859 newEventStartDatepicker.setDate(d.date); 860 newEventEndDatepicker.setDate(d.date.setDate(d.date.getDate() + 1)); 861 862 addNewEventModalEl.addEventListener('shown.bs.modal', function () { 863 newEventTitleInput.focus(); 864 }); 865 }, 866 eventClick: function (info, element) { 867 // set current id 868 currentId = info.event.id; 869 editEventTitleInput.value = info.event.title; 870 editEventStartDatepicker.setDate(info.event.start); 871 editEventEndDatepicker.setDate(info.event.end ? info.event.end : info.event.start); 872 873 editEventModal.show(); 874 editEventModalEl.addEventListener('shown.bs.modal', function () { 875 editEventTitleInput.focus(); 876 }); 877 } 878 }); 879 calendar.render(); 880 console.log(calendar); 881 882 d.getElementById('addNewEventForm').addEventListener('submit', function (event) { 883 event.preventDefault(); 884 calendar.addEvent({ 885 id: Math.random() * 10000, // this should be a unique id from your back-end or API 886 title: newEventTitleInput.value, 887 start: moment(newEventStartDatepicker.getDate()).format('YYYY-MM-DD'), 888 end: moment(newEventEndDatepicker.getDate()).format('YYYY-MM-DD'), 889 className: 'bg-secondary', 890 dragabble: true 891 }); 892 addNewEventModal.hide(); 893 }); 894 895 d.getElementById('editEventForm').addEventListener('submit', function (event) { 896 event.preventDefault(); 897 var editEvent = calendar.getEventById(currentId); 898 var startDate = moment(editEventStartDatepicker.getDate()).format('YYYY-MM-DD'); 899 var endDate = moment(editEventEndDatepicker.getDate()).format('YYYY-MM-DD') 900 901 editEvent.setProp('title', editEventTitleInput.value); 902 editEvent.setStart(startDate); 903 editEvent.setEnd(endDate); 904 editEventModal.hide(); 905 }); 906 907 d.getElementById('deleteEvent').addEventListener('click', function () { 908 swalWithBootstrapButtons.fire({ 909 icon: 'error', 910 title: 'Confirm deletion', 911 text: 'Are you sure you want to delete this event?', 912 showCancelButton: true, 913 confirmButtonText: "Yes, delete it!", 914 cancelButtonText: 'No, cancel!', 915 }).then(function (result) { 916 if (result.value) { 917 swalWithBootstrapButtons.fire( 918 'Deleted!', 919 'The event has been deleted.', 920 'success' 921 ); 922 calendar.getEventById(currentId).remove(); 923 } else if (result.dismiss === Swal.DismissReason.cancel) { 924 editEventModal.hide(); 925 } 926 }) 927 }); 928 } 929 930 if (d.querySelector('.current-year')) { 931 d.querySelector('.current-year').textContent = new Date().getFullYear(); 932 } 933 934 // Glide JS 935 936 if (d.querySelector('.glide')) { 937 new Glide('.glide', { 938 type: 'carousel', 939 startAt: 0, 940 perView: 3 941 }).mount(); 942 } 943
944 if (d.querySelector('.glide-testimonials')) { 945 new Glide('.glide-testimonials', { 946 type: 'carousel', 947 startAt: 0, 948 perView: 1, 949 autoplay: 2000 950 }).mount(); 951 } 952 953 if (d.querySelector('.glide-clients')) { 954 new Glide('.glide-clients', { 955 type: 'carousel', 956 startAt: 0, 957 perView: 5, 958 autoplay: 2000 959 }).mount(); 960 } 961 962 if (d.querySelector('.glide-news-widget')) { 963 new Glide('.glide-news-widget', { 964 type: 'carousel', 965 startAt: 0, 966 perView: 1, 967 autoplay: 2000 968 }).mount(); 969 } 970 971 if (d.querySelector('.glide-autoplay')) { 972 new Glide('.glide-autoplay', { 973 type: 'carousel', 974 startAt: 0, 975 perView: 3, 976 autoplay: 2000 977 }).mount(); 978 } 979 980 /* 981 982 Check out the styles here: https://www.mapbox.com/maps/streets 983 To change the style of the map change the mapboxId attribute with the following available styles: 984 985 mapbox/dark-v10, mapbox/light-v10, mapbox/streets-v11, mapbox/outdoors/v-11, mapbox/satellite-streets-v11 986 987 This is based on the URL you can when clicking on the preview link from Mapbox. 988 989 You need to generate your own mapboxToken by creating an account. This token will NOT work for your website, you need to generate your own one! 990 991 */ 992 993 var config = { 994 mapboxToken: 'pk.eyJ1Ijoiem9sdGFudGhlbWVzYmVyZyIsImEiOiJjazZqaWUwcWswYTBvM21td2Jmcm5mYmdyIn0.7_5YCbbOFRnvqZzCNDo9fw', 995 mapboxId: 'mapbox/light-v10' 996 }; 997 998 var baseLatLng = [37.57, -122.26]; 999 var zoom = 10; 1000 var listings = [ 1001 { 1002 url: '#', 1003 latLng: [37.70, -122.41], 1004 name: 'Call with Jane', 1005 date: 'Tomorrow at 12:30 PM' 1006 }, 1007 { 1008 url: '#', 1009 latLng: [37.59, -122.39], 1010 name: 'HackTM conference', 1011 date: 'In about 5 minutes' 1012 }, 1013 { 1014 url: '#', 1015 latLng: [37.52, -122.29], 1016 name: 'Marketing event', 1017 date: 'Today at 1:00 PM' 1018 }, 1019 { 1020 url: '#', 1021 latLng: [37.37, -122.12], 1022 name: 'Dinner with partners', 1023 date: 'In 2 hours' 1024 }, 1025 { 1026 url: '#', 1027 latLng: [37.36, -121.94], 1028 name: 'Interview with Google', 1029 date: 'In two days at 15:00 PM' 1030 } 1031 ]; 1032 1033 if (d.querySelector('#mapbox')) { 1034 1035 var icon = L.icon({ 1036 iconUrl: '/static/assets/img/marker.svg', 1037 iconSize: [38, 95], // size of the icon 1038 shadowSize: [50, 64], // size of the shadow 1039 iconAnchor: [22, 94], // point of the icon which will correspond to marker's location 1040 shadowAnchor: [4, 62], // the same for the shadow 1041 popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor 1042 }); 1043 1044 // modal listing view 1045 var mapListings = L.map('mapbox').setView(baseLatLng, zoom); 1046 L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { 1047 attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', 1048 maxZoom: 18, 1049 id: config.mapboxId, 1050 accessToken: config.mapboxToken 1051 }).addTo(mapListings); 1052 1053 listings.map(function (listing, index) { 1054 var popupHtml = ` 1055 <a href="${listing.url}" class="card card-article-wide border-0 flex-column no-gutters no-hover"> 1056 <div class="card-body py-0 d-flex flex-column justify-content-between col-12"> 1057 <h4 class="h5 fw-normal mb-2">${listing.name}</h4> 1058 <div class="d-flex"><div class="icon icon-xs icon-tertiary me-2"><span class="fas fa-clock"></span></div><div class="font-xs text-dark">${listing.date}</div></div> 1059 </div> 1060 </a> 1061 `; 1062 1063 var marker = L.marker(listing.latLng, { icon: icon }).addTo(mapListings); 1064 marker.bindPopup(popupHtml); 1065 }); 1066 } 1067 1068 // Choices.js 1069 var selectStateInputEl = d.querySelector('#state'); 1070 if (selectStateInputEl) { 1071 const choices = new Choices(selectStateInputEl); 1072 } 1073 1074 // Sortable Js 1075 if (d.body.clientWidth > breakpoints.lg) { 1076 var kanbanColumn1 = document.getElementById('kanbanColumn1'); 1077 if (kanbanColumn1) { 1078 new Sortable(kanbanColumn1, { 1079 group: "shared", 1080 }); 1081 } 1082 1083 var kanbanColumn2 = document.getElementById('kanbanColumn2'); 1084 if (kanbanColumn2) { 1085 new Sortable(kanbanColumn2, { 1086 group: "shared", 1087 }); 1088 } 1089 1090 var kanbanColumn3 = document.getElementById('kanbanColumn3'); 1091 if (kanbanColumn3) { 1092 new Sortable(kanbanColumn3, { 1093 group: "shared", 1094 }); 1095 } 1096 1097 var kanbanColumn4 = document.getElementById('kanbanColumn4'); 1098 if (kanbanColumn4) { 1099 new Sortable(kanbanColumn4, { 1100 group: "shared", 1101 }); 1102 } 1103 } 1104 1105 // multiple 1106 var selectStatesInputEl = d.querySelector('#states'); 1107 if (selectStatesInputEl) { 1108 const choices = new Choices(selectStatesInputEl); 1109 } 1110 1111 // Pricing countup 1112 var billingSwitchEl = d.getElementById('billingSwitch'); 1113 if (billingSwitchEl) { 1114 const countUpStandard = new countUp.CountUp('priceStandard', 99, { startVal: 199 }); 1115 const countUpPremium = new countUp.CountUp('pricePremium', 199, { startVal: 299 }); 1116 1117 billingSwitchEl.addEventListener('change', function () { 1118 if (billingSwitch.checked) { 1119 countUpStandard.start(); 1120 countUpPremium.start(); 1121 } else { 1122 countUpStandard.reset(); 1123 countUpPremium.reset(); 1124 } 1125 }); 1126 } 1127 1128 if (sidebar) { 1129 if (localStorage.getItem('sidebar') === 'contracted') { 1130 sidebar.classList.add('notransition'); 1131 content.classList.add('notransition'); 1132 1133 sidebar.classList.add('contracted'); 1134 1135 setTimeout(function () { 1136 sidebar.classList.remove('notransition'); 1137 content.classList.remove('notransition'); 1138 }, 500); 1139 1140 } else { 1141 sidebar.classList.add('notransition'); 1142 content.classList.add('notransition'); 1143 1144 sidebar.classList.remove('contracted'); 1145 1146 setTimeout(function () { 1147 sidebar.classList.remove('notransition'); 1148 content.classList.remove('notransition'); 1149 }, 500); 1150 } 1151 1152 var sidebarToggle = d.getElementById('sidebar-toggle'); 1153 sidebarToggle.addEventListener('click', function () { 1154 if (sidebar.classList.contains('contracted')) { 1155 sidebar.classList.remove('contracted'); 1156 localStorage.removeItem('sidebar', 'contracted'); 1157 } else { 1158 sidebar.classList.add('contracted'); 1159 localStorage.setItem('sidebar', 'contracted'); 1160 } 1161 }); 1162 1163 sidebar.addEventListener('mouseenter', function () { 1164 if (localStorage.getItem('sidebar') === 'contracted') { 1165 if (sidebar.classList.contains('contracted')) { 1166 sidebar.classList.remove('contracted'); 1167 } else { 1168 sidebar.classList.add('contracted'); 1169 } 1170 } 1171 }); 1172 1173 sidebar.addEventListener('mouseleave', function () { 1174 if (localStorage.getItem('sidebar') === 'contracted') { 1175 if (sidebar.classList.contains('contracted')) { 1176 sidebar.classList.remove('contracted'); 1177 } else { 1178 sidebar.classList.add('contracted'); 1179 } 1180 } 1181 }); 1182 } 1183 1184});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.