1/* Dore Main Script 2 3Table of Contents 4 501. Utils 602. Shift Select 703. Dore Main Plugin 8 03.01. Getting Colors from CSS 9 03.02. Resize 10 03.03. Search 11 03.04. Shift Selectable Init 12 03.05. Menu 13 03.06. App Menu 14 03.07. Survey App 15 03.08. Rotate Button 16 03.09. Charts 17 03.10. Calendar 18 03.11. Datatable 19 03.12. Notification 20 03.13. Dropdown Select 21 03.14. Slick Slider 22 03.15. Form Validation 23 03.16. Tooltip 24 03.17. Popover 25 03.18. Select 2 26 03.19. Datepicker 27 03.20. Dropzone 28 03.21. Cropperjs 29 03.22. Range Slider 30 03.23. Modal Passing Content 31 03.24. Scrollbar 32 03.25. Progress 33 03.26. Rating 34 03.27. Tags Input 35 03.28. Sortable 36 03.29. State Button 37 03.30. Typeahead 38 03.31. Full Screen 39 03.32. Html Editors 40 03.33. Showing Body 41 03.34. Keyboard Shortcuts 42 03.35. Context Menu 43 03.36. Select from Library 44 03.37. Feedback 45 03.38. Smart Wizard 46 03.39. Countdown 47 03.40. Lightbox 48 03.41. Ellipsis 49 03.42. Glide 50 03.43. Validation 51*/ 52 53/* 01. Utils */ 54$.fn.addCommas = function (nStr) { 55 nStr += ""; 56 var x = nStr.split("."); 57 var x1 = x[0]; 58 var x2 = x.length > 1 ? "." + x[1] : ""; 59 var rgx = /(\d+)(\d{3})/; 60 while (rgx.test(x1)) { 61 x1 = x1.replace(rgx, "$1" + "," + "$2"); 62 } 63 return x1 + x2; 64}; 65 66// State Button 67(function ($) { 68 $.fn.stateButton = function (options) { 69 if (this.length > 1) { 70 this.each(function () { $(this).stateButton(options) }); 71 return this; 72 } 73 74 this.initialize = function () { 75 return this; 76 }; 77 78 this.showSpinner = function () { 79 $(this).addClass("show-spinner"); 80 $(this).addClass("active"); 81 return this; 82 }; 83 84 this.hideSpinner = function () { 85 $(this).removeClass("show-spinner"); 86 return this; 87 }; 88 89 this.showFail = function (tooltip) { 90 $(this).addClass("show-fail"); 91 $(this).removeClass("show-spinner"); 92 if (tooltip) { 93 $(this).find(".icon.fail").tooltip("show"); 94 } 95 return this; 96 }; 97 98 this.showSuccess = function (tooltip) { 99 $(this).addClass("show-success"); 100 $(this).removeClass("show-spinner"); 101 if (tooltip) { 102 $(this).find(".icon.success").tooltip("show"); 103 } 104 return this; 105 }; 106 107 this.reset = function () { 108 this.hideTooltips(); 109 this.hideSpinner(); 110 $(this).removeClass("show-success"); 111 $(this).removeClass("show-fail"); 112 $(this).removeClass("active"); 113 } 114 115 this.hideTooltips = function () { 116 this.hideFailTooltip(); 117 this.hideSuccessTooltip(); 118 return this; 119 }; 120 121 this.showSuccessTooltip = function () { 122 $(this).find(".icon.success").tooltip("show"); 123 return this; 124 }; 125 126 this.hideSuccessTooltip = function () { 127 $(this).find(".icon.success").tooltip("dispose"); 128 return this; 129 }; 130 131 this.showFailTooltip = function () { 132 $(this).find(".icon.fail").tooltip("show"); 133 return this; 134 }; 135 136 this.hideFailTooltip = function () { 137 $(this).find(".icon.fail").tooltip("dispose"); 138 return this; 139 }; 140 141 return this.initialize(); 142 } 143})(jQuery); 144 145/* 02. Shift Select */ 146$.shiftSelectable = function (element, config) { 147 var plugin = this; 148 config = $.extend( 149 { 150 items: ".card" 151 }, 152 config 153 ); 154 var $container = $(element); 155 var $checkAll = null; 156 var $boxes = $container.find("input[type='checkbox']"); 157 var lastChecked; 158 if ($container.data("checkAll")) { 159 $checkAll = $("#" + $container.data("checkAll")); 160 $checkAll.on("click", function () { 161 $boxes.prop("checked", $($checkAll).prop("checked")).trigger("change"); 162 document.activeElement.blur(); 163 controlActiveClasses(); 164 }); 165 } 166 167 function itemClick(checkbox, shiftKey) { 168 $(checkbox) 169 .prop("checked", !$(checkbox).prop("checked")) 170 .trigger("change"); 171 172 if (!lastChecked) { 173 lastChecked = checkbox; 174 } 175 if (lastChecked) { 176 if (shiftKey) { 177 var start = $boxes.index(checkbox); 178 var end = $boxes.index(lastChecked); 179 $boxes 180 .slice(Math.min(start, end), Math.max(start, end) + 1) 181 .prop("checked", lastChecked.checked) 182 .trigger("change"); 183 } 184 lastChecked = checkbox; 185 } 186 187 if ($checkAll) { 188 var anyChecked = false;
189 var allChecked = true; 190 $boxes.each(function () { 191 if ($(this).prop("checked")) { 192 anyChecked = true; 193 } else { 194 allChecked = false; 195 } 196 }); 197 if (anyChecked) { 198 $checkAll.prop("indeterminate", anyChecked); 199 } else { 200 $checkAll.prop("indeterminate", anyChecked); 201 $checkAll.prop("checked", anyChecked); 202 } 203 if (allChecked) { 204 $checkAll.prop("indeterminate", false); 205 $checkAll.prop("checked", allChecked); 206 } 207 } 208 document.activeElement.blur(); 209 controlActiveClasses(); 210 } 211 212 $container.on("click", config.items, function (e) { 213 if ( 214 $(e.target).is("a") || 215 $(e.target) 216 .parent() 217 .is("a") 218 ) { 219 return; 220 } 221 222 if ($(e.target).is("input[type='checkbox']")) { 223 e.preventDefault(); 224 e.stopPropagation(); 225 } 226 var checkbox = $(this).find("input[type='checkbox']")[0]; 227 itemClick(checkbox, e.shiftKey); 228 }); 229 230 function controlActiveClasses() { 231 $boxes.each(function () { 232 if ($(this).prop("checked")) { 233 $(this) 234 .parents(".card") 235 .addClass("active"); 236 } else { 237 $(this) 238 .parents(".card") 239 .removeClass("active"); 240 } 241 }); 242 } 243 244 plugin.update = function () { 245 $boxes = $container.find("input[type='checkbox']"); 246 } 247 248 plugin.selectAll = function () { 249 if ($checkAll) { 250 $boxes.prop("checked", true).trigger("change"); 251 $checkAll.prop("checked", true); 252 $checkAll.prop("indeterminate", false); 253 controlActiveClasses(); 254 } 255 }; 256 257 plugin.deSelectAll = function () { 258 if ($checkAll) { 259 $boxes.prop("checked", false).trigger("change"); 260 $checkAll.prop("checked", false); 261 $checkAll.prop("indeterminate", false); 262 controlActiveClasses(); 263 } 264 }; 265 266 plugin.rightClick = function (trigger) { 267 var checkbox = $(trigger).find("input[type='checkbox']")[0]; 268 if ($(checkbox).prop("checked")) { 269 return; 270 } 271 plugin.deSelectAll(); 272 itemClick(checkbox, false); 273 }; 274}; 275 276$.fn.shiftSelectable = function (options) { 277 return this.each(function () { 278 if (undefined == $(this).data("shiftSelectable")) { 279 var plugin = new $.shiftSelectable(this, options); 280 $(this).data("shiftSelectable", plugin); 281 } 282 }); 283}; 284 285/* 03. Dore Main Plugin */ 286$.dore = function (element, options) { 287 var defaults = {}; 288 var plugin = this; 289 plugin.settings = {}; 290 var $element = $(element); 291 var element = element; 292 var $shiftSelect; 293 var direction; 294 var isRtl = false; 295 296 function init() { 297 options = options || {}; 298 plugin.settings = $.extend({}, defaults, options); 299 setDirection(); 300 301 /* 03.01. Getting Colors from CSS */ 302 var rootStyle = getComputedStyle(document.body); 303 var themeColor1 = rootStyle.getPropertyValue("--theme-color-1").trim(); 304 var themeColor2 = rootStyle.getPropertyValue("--theme-color-2").trim(); 305 var themeColor3 = rootStyle.getPropertyValue("--theme-color-3").trim(); 306 var themeColor4 = rootStyle.getPropertyValue("--theme-color-4").trim(); 307 var themeColor5 = rootStyle.getPropertyValue("--theme-color-5").trim(); 308 var themeColor6 = rootStyle.getPropertyValue("--theme-color-6").trim(); 309 var themeColor1_10 = rootStyle 310 .getPropertyValue("--theme-color-1-10") 311 .trim(); 312 var themeColor2_10 = rootStyle 313 .getPropertyValue("--theme-color-2-10") 314 .trim(); 315 var themeColor3_10 = rootStyle 316 .getPropertyValue("--theme-color-3-10") 317 .trim(); 318 var themeColor4_10 = rootStyle 319 .getPropertyValue("--theme-color-4-10") 320 .trim(); 321 322 var themeColor5_10 = rootStyle 323 .getPropertyValue("--theme-color-5-10") 324 .trim(); 325 var themeColor6_10 = rootStyle 326 .getPropertyValue("--theme-color-6-10") 327 .trim(); 328 329 var primaryColor = rootStyle.getPropertyValue("--primary-color").trim(); 330 var foregroundColor = rootStyle 331 .getPropertyValue("--foreground-color") 332 .trim(); 333 var separatorColor = rootStyle.getPropertyValue("--separator-color").trim(); 334 335 /* 03.02. Resize */ 336 var subHiddenBreakpoint = 1440; 337 var searchHiddenBreakpoint = 768; 338 var menuHiddenBreakpoint = 768; 339 340 function onResize() { 341 var windowHeight = $(window).outerHeight(); 342 var windowWidth = $(window).outerWidth(); 343 var navbarHeight = $(".navbar").outerHeight(); 344 345 var submenuMargin = parseInt( 346 $(".sub-menu .scroll").css("margin-top"), 347 10 348 ); 349 350 if ($(".chat-app .scroll").length >
350 0 && chatAppScroll) { 351 $(".chat-app .scroll").scrollTop( 352 $(".chat-app .scroll").prop("scrollHeight") 353 ); 354 chatAppScroll.update(); 355 } 356 357 if (windowWidth < menuHiddenBreakpoint) { 358 $("#app-container").addClass("menu-mobile"); 359 } else if (windowWidth < subHiddenBreakpoint) { 360 $("#app-container").removeClass("menu-mobile"); 361 if ($("#app-container").hasClass("menu-default")) { 362 $("#app-container").removeClass(allMenuClassNames); 363 $("#app-container").addClass("menu-default menu-sub-hidden"); 364 } 365 } else { 366 $("#app-container").removeClass("menu-mobile"); 367 if ( 368 $("#app-container").hasClass("menu-default") && 369 $("#app-container").hasClass("menu-sub-hidden") 370 ) { 371 $("#app-container").removeClass("menu-sub-hidden"); 372 } 373 } 374 375 setMenuClassNames(0, true); 376 } 377 378 function setDirection() { 379 if (typeof Storage !== "undefined") { 380 if (localStorage.getItem("dore-direction")) { 381 direction = localStorage.getItem("dore-direction"); 382 } 383 isRtl = direction == "rtl" && true; 384 } 385 } 386 387 $(window).on("resize", function (event) { 388 if (event.originalEvent.isTrusted) { 389 onResize(); 390 } 391 }); 392 onResize(); 393 394 /* 03.03. Search */ 395 function searchIconClick() { 396 if ($(window).outerWidth() < searchHiddenBreakpoint) { 397 if ($(".search").hasClass("mobile-view")) { 398 $(".search").removeClass("mobile-view"); 399 navigateToSearchPage(); 400 } else { 401 $(".search").addClass("mobile-view"); 402 $(".search input").focus(); 403 } 404 } else { 405 navigateToSearchPage(); 406 } 407 } 408 409 $(".search .search-icon").on("click", function () { 410 searchIconClick(); 411 }); 412 413 $(".search input").on("keyup", function (e) { 414 if (e.which == 13) { 415 navigateToSearchPage(); 416 } 417 if (e.which == 27) { 418 hideSearchArea(); 419 } 420 }); 421 422 function navigateToSearchPage() { 423 var inputVal = $(".search input").val(); 424 var searchPath = $(".search").data("searchPath"); 425 if (inputVal != "") { 426 $(".search input").val(""); 427 window.location.href = searchPath + inputVal; 428 } 429 } 430 431 function hideSearchArea() { 432 if ($(".search").hasClass("mobile-view")) { 433 $(".search").removeClass("mobile-view"); 434 $(".search input").val(""); 435 } 436 } 437 438 $(document).on("click", function (event) { 439 if ( 440 !$(event.target) 441 .parents() 442 .hasClass("search") 443 ) { 444 hideSearchArea(); 445 } 446 }); 447 448 /* 03.04. Shift Selectable Init */ 449 $shiftSelect = $(".list").shiftSelectable(); 450 451 /* 03.05. Menu */ 452 var menuClickCount = 0; 453 var allMenuClassNames = "menu-default menu-hidden sub-hidden main-hidden menu-sub-hidden main-show-temporary sub-show-temporary menu-mobile"; 454 function setMenuClassNames(clickIndex, calledFromResize, link) { 455 menuClickCount = clickIndex; 456 var container = $("#app-container"); 457 if (container.length == 0) { 458 return; 459 } 460 461 var link = link || getActiveMainMenuLink(); 462 463 //menu-default no subpage 464 if ( 465 $(".sub-menu ul[data-link='" + link + "']").length == 0 && 466 (menuClickCount == 2 || calledFromResize) 467 ) { 468 if ($(window).outerWidth() >= menuHiddenBreakpoint) { 469 if (isClassIncludedApp("menu-default")) { 470 if (calledFromResize) { 471 $("#app-container").removeClass(allMenuClassNames); 472 $("#app-container").addClass("menu-default menu-sub-hidden sub-hidden"); 473 menuClickCount = 0; // This one should be changed from 1 to 0 474 } else { 475 $("#app-container").removeClass(allMenuClassNames); 476 $("#app-container").addClass("menu-default main-hidden menu-sub-hidden sub-hidden"); 477 menuClickCount = 0; 478 } 479 resizeCarousel(); 480 return; 481 } 482 } 483 } 484 485 //menu-sub-hidden no subpage 486 if ( 487 $(".sub-menu ul[data-link='" + link + "']").length == 0 &&
488 (menuClickCount == 1 || calledFromResize) 489 ) { 490 if ($(window).outerWidth() >= menuHiddenBreakpoint) { 491 if (isClassIncludedApp("menu-sub-hidden")) { 492 if (calledFromResize) { 493 $("#app-container").removeClass(allMenuClassNames); 494 $("#app-container").addClass("menu-sub-hidden sub-hidden"); 495 menuClickCount = 0; 496 } else { 497 $("#app-container").removeClass(allMenuClassNames); 498 $("#app-container").addClass("menu-sub-hidden main-hidden sub-hidden"); 499 menuClickCount = -1; 500 } 501 resizeCarousel(); 502 return; 503 } 504 } 505 } 506 507 //menu-hidden no subpage 508 if ( 509 $(".sub-menu ul[data-link='" + link + "']").length == 0 && 510 (menuClickCount == 1 || calledFromResize) 511 ) { 512 if ($(window).outerWidth() >= menuHiddenBreakpoint) { 513 if (isClassIncludedApp("menu-hidden")) { 514 if (calledFromResize) { 515 $("#app-container").removeClass(allMenuClassNames); 516 $("#app-container").addClass("menu-hidden main-hidden sub-hidden"); 517 menuClickCount = 0; 518 } else { 519 $("#app-container").removeClass(allMenuClassNames); 520 $("#app-container").addClass("menu-hidden main-show-temporary"); 521 menuClickCount = 3; 522 } 523 resizeCarousel(); 524 return; 525 } 526 } 527 } 528 529 if (clickIndex % 4 == 0) { 530 if (isClassIncludedApp("menu-main-hidden")) { 531 nextClasses = "menu-main-hidden"; 532 } else if ( 533 isClassIncludedApp("menu-default") && 534 isClassIncludedApp("menu-sub-hidden") 535 ) { 536 nextClasses = "menu-default menu-sub-hidden"; 537 } else if (isClassIncludedApp("menu-default")) { 538 nextClasses = "menu-default"; 539 } else if (isClassIncludedApp("menu-sub-hidden")) { 540 nextClasses = "menu-sub-hidden"; 541 } else if (isClassIncludedApp("menu-hidden")) { 542 nextClasses = "menu-hidden"; 543 } 544 menuClickCount = 0; 545 } else if (clickIndex % 4 == 1) { 546 if ( 547 isClassIncludedApp("menu-default") && 548 isClassIncludedApp("menu-sub-hidden") 549 ) { 550 nextClasses = "menu-default menu-sub-hidden main-hidden sub-hidden"; 551 } else if (isClassIncludedApp("menu-default")) { 552 nextClasses = "menu-default sub-hidden"; 553 } else if (isClassIncludedApp("menu-main-hidden")) { 554 nextClasses = "menu-main-hidden menu-hidden"; 555 } else if (isClassIncludedApp("menu-sub-hidden")) { 556 nextClasses = "menu-sub-hidden main-hidden sub-hidden"; 557 } else if (isClassIncludedApp("menu-hidden")) { 558 nextClasses = "menu-hidden main-show-temporary"; 559 } 560 } else if (clickIndex % 4 == 2) { 561 if (isClassIncludedApp("menu-main-hidden") && isClassIncludedApp("menu-hidden")) { 562 nextClasses = "menu-main-hidden"; 563 } else if ( 564 isClassIncludedApp("menu-default") && 565 isClassIncludedApp("menu-sub-hidden") 566 ) { 567 nextClasses = "menu-default menu-sub-hidden sub-hidden"; 568 } else if (isClassIncludedApp("menu-default")) { 569 nextClasses = "menu-default main-hidden sub-hidden"; 570 } else if (isClassIncludedApp("menu-sub-hidden")) { 571 nextClasses = "menu-sub-hidden sub-hidden"; 572 } else if (isClassIncludedApp("menu-hidden")) { 573 nextClasses = "menu-hidden main-show-temporary sub-show-temporary"; 574 } 575 } else if (clickIndex % 4 == 3) { 576 if (isClassIncludedApp("menu-main-hidden")) { 577 nextClasses = "menu-main-hidden menu-hidden"; 578 } 579 else if ( 580 isClassIncludedApp("menu-default") && 581 isClassIncludedApp("menu-sub-hidden") 582 ) { 583 nextClasses = "menu-default menu-sub-hidden sub-show-temporary"; 584 } else if (isClassIncludedApp("menu-default")) { 585 nextClasses = "menu-default sub-hidden"; 586 } else if (isClassIncludedApp("menu-sub-hidden")) { 587 nextClasses = "menu-sub-hidden sub-show-temporary"; 588 } else if (isClassIncludedApp("menu-hidden")) { 589 nextClasses = "menu-hidden main-show-temporary"; 590 } 591 } 592 if (isClassIncludedApp("menu-mobile")) { 593 nextClasses += " menu-mobile"; 594 } 595 container.removeClass(allMenuClassNames); 596 container.addClass(nextClasses); 597 resizeCarousel(); 598 } 599 $(".menu-button").on("click", function (event) { 600 event.preventDefault(); 601 // event.stopPropagation(); 602 setMenuClassNames(++menuClickCount); 603 }); 604 605 $(".menu-button-mobile").on("click", function (event) { 606 event.preventDefault(); 607 // event.stopPropagation(); 608 $("#app-container") 609 .removeClass("sub-show-temporary") 610 .toggleClass("main-show-temporary"); 611 return false;
612 }); 613 614 $(".main-menu").on("click", "a", function (event) { 615 event.preventDefault(); 616 // event.stopPropagation(); 617 var link = $(this) 618 .attr("href") 619 .replace("#", ""); 620 if ($(".sub-menu ul[data-link='" + link + "']").length == 0) { 621 var target = $(this).attr("target"); 622 if ($(this).attr("target") == null) { 623 window.open(link, "_self"); 624 } else { 625 window.open(link, target); 626 } 627 return; 628 } 629 630 showSubMenu($(this).attr("href")); 631 var container = $("#app-container"); 632 if (!$("#app-container").hasClass("menu-mobile")) { 633 if ( 634 $("#app-container").hasClass("menu-sub-hidden") && 635 (menuClickCount == 2 || menuClickCount == 0) 636 ) { 637 setMenuClassNames(3, false, link); 638 } else if ( 639 $("#app-container").hasClass("menu-hidden") && 640 (menuClickCount == 1 || menuClickCount == 3) 641 ) { 642 setMenuClassNames(2, false, link); 643 } else if ( 644 $("#app-container").hasClass("menu-default") && 645 !$("#app-container").hasClass("menu-sub-hidden") && 646 (menuClickCount == 1 || menuClickCount == 3) 647 ) { 648 setMenuClassNames(0, false, link); 649 } 650 } else { 651 $("#app-container").addClass("sub-show-temporary"); 652 } 653 return false; 654 }); 655 656 $(document).on("click", function (event) { 657 if ( 658 !( 659 $(event.target) 660 .parents() 661 .hasClass("menu-button") || 662 $(event.target).hasClass("menu-button") || 663 $(event.target) 664 .parents() 665 // .hasClass("menu-button-mobile") || 666 // $(event.target).hasClass("menu-button-mobile") || 667 // $(event.target) 668 // .parents() 669 .hasClass("sidebar") || 670 $(event.target).hasClass("sidebar") 671 ) 672 ) { 673 // Prevent sub menu closing on collapse click 674 if ($(event.target).parents("a[data-toggle='collapse']").length > 0 || $(event.target).attr("data-toggle") == 'collapse') { 675 return; 676 } 677 if ( 678 $("#app-container").hasClass("menu-sub-hidden") && 679 menuClickCount == 3 680 ) { 681 var link = getActiveMainMenuLink(); 682 if (link == lastActiveSubmenu) { 683 setMenuClassNames(2); 684 } else { 685 setMenuClassNames(0); 686 } 687 } else if ($("#app-container").hasClass("menu-main-hidden") && $("#app-container").hasClass("menu-mobile")) { 688 setMenuClassNames(0); 689 } else if ( 690 $("#app-container").hasClass("menu-hidden") || 691 $("#app-container").hasClass("menu-mobile") 692 ) { 693 setMenuClassNames(0); 694 } 695 } 696 }); 697 698 function getActiveMainMenuLink() { 699 var dataLink = $(".main-menu ul li.active a").attr("href"); 700 return dataLink ? dataLink.replace("#", "") : ""; 701 } 702 703 function isClassIncludedApp(className) { 704 var container = $("#app-container"); 705 var currentClasses = container 706 .attr("class") 707 .split(" ") 708 .filter(function (x) { 709 return x != ""; 710 }); 711 return currentClasses.includes(className); 712 } 713 714 var lastActiveSubmenu = ""; 715 function showSubMenu(dataLink) { 716 if ($(".main-menu").length == 0) { 717 return; 718 } 719 720 var link = dataLink ? dataLink.replace("#", "") : ""; 721 if ($(".sub-menu ul[data-link='" + link + "']").length == 0) { 722 $("#app-container").removeClass("sub-show-temporary"); 723 724 if ($("#app-container").length == 0) { 725 return; 726 } 727 728 if ( 729 isClassIncludedApp("menu-sub-hidden") || 730 isClassIncludedApp("menu-hidden") 731 ) { 732 menuClickCount = 0; 733 } else { 734 menuClickCount = 1; 735 } 736 $("#app-container").addClass("sub-hidden"); 737 noTransition(); 738 return; 739 } 740 if (link == lastActiveSubmenu) { 741 return; 742 } 743 $(".sub-menu ul").fadeOut(0); 744 $(".sub-menu ul[data-link='" + link + "']").slideDown(100); 745 746 $(".sub-menu .scroll").scrollTop(0); 747 lastActiveSubmenu = link; 748 } 749 750 function noTransition() { 751 $(".sub-menu").addClass("no-transition"); 752 $("main").addClass("no-transition"); 753 setTimeout(function () { 754 $(".sub-menu").removeClass("no-transition"); 755 $("main").removeClass("no-transition"); 756 }, 350); 757 } 758 759 showSubMenu($(".main-menu ul li.active a").attr("href")); 760 761 function resizeCarousel() { 762 setTimeout(function () { 763 var event = document.createEvent("HTMLEvents"); 764 event.initEvent("resize", false, false); 765 window.dispatchEvent(event); 766 }, 350); 767 } 768 769 /* 03.06. App Menu */ 770 $(".app-menu-button").on("click", function (event) { 771 event.preventDefault(); 772 if ($(".app-menu").hasClass("shown")) { 773 $(".app-menu").removeClass("shown"); 774 } else { 775 $(".app-menu").addClass("shown"); 776 } 777 }); 778 779 $(document).on("click", function (event) { 780 if ( 781 !( 782 $(event.target) 783 .parents() 784 .hasClass("app-menu") || 785 $(event.target) 786 .parents() 787 .hasClass("app-menu-button") || 788 $(event.target).hasClass("app-menu-button") || 789 $(event.target).hasClass("app-menu") 790 ) 791 ) { 792 if ($(".app-menu").hasClass("shown")) { 793 $(".app-menu").removeClass("shown"); 794 } 795 } 796 }); 797 798 /* 03.07. Survey App */ 799 $(document).on("click", ".question .view-button", function () { 800 editViewClick($(this)); 801 }); 802 803 $(document).on("click", ".question .edit-button", function () { 804 editViewClick($(this)); 805 }); 806 807 function editViewClick($this) { 808 var $question = $($this.parents(".question")); 809 $question.toggleClass("edit-quesiton"); 810 $question.toggleClass("view-quesiton"); 811 var $questionCollapse = $question.find(".question-collapse"); 812 if (!$questionCollapse.hasClass("show")) { 813 $questionCollapse.collapse("toggle"); 814 $question.find(".rotate-icon-click").toggleClass("rotate"); 815 } 816 } 817 818 /* 03.08. Rotate Button */ 819 $(document).on("click", ".rotate-icon-click", function () { 820 $(this).toggleClass("rotate"); 821 }); 822 823 /* 03.09. Charts */ 824 if (typeof Chart !== "undefined") { 825 Chart.defaults.global.defaultFontFamily = "'Nunito', sans-serif"; 826 827 Chart.defaults.LineWithShadow = Chart.defaults.line; 828 Chart.controllers.LineWithShadow = Chart.controllers.line.extend({ 829 draw: function (ease) { 830 Chart.controllers.line.prototype.draw.call(this, ease); 831 var ctx = this.chart.ctx; 832 ctx.save(); 833 ctx.shadowColor = "rgba(0,0,0,0.15)"; 834 ctx.shadowBlur = 10; 835 ctx.shadowOffsetX = 0; 836 ctx.shadowOffsetY = 10; 837 ctx.responsive = true; 838 ctx.stroke(); 839 Chart.controllers.line.prototype.draw.apply(this, arguments);
840 ctx.restore(); 841 } 842 }); 843 844 Chart.defaults.BarWithShadow = Chart.defaults.bar; 845 Chart.controllers.BarWithShadow = Chart.controllers.bar.extend({ 846 draw: function (ease) { 847 Chart.controllers.bar.prototype.draw.call(this, ease); 848 var ctx = this.chart.ctx; 849 ctx.save(); 850 ctx.shadowColor = "rgba(0,0,0,0.15)"; 851 ctx.shadowBlur = 12; 852 ctx.shadowOffsetX = 5; 853 ctx.shadowOffsetY = 10; 854 ctx.responsive = true; 855 Chart.controllers.bar.prototype.draw.apply(this, arguments); 856 ctx.restore(); 857 } 858 }); 859 860 Chart.defaults.LineWithLine = Chart.defaults.line; 861 Chart.controllers.LineWithLine = Chart.controllers.line.extend({ 862 draw: function (ease) { 863 Chart.controllers.line.prototype.draw.call(this, ease); 864 if (this.chart.tooltip._active && this.chart.tooltip._active.length) { 865 var activePoint = this.chart.tooltip._active[0]; 866 var ctx = this.chart.ctx; 867 var x = activePoint.tooltipPosition().x; 868 var topY = this.chart.scales["y-axis-0"].top; 869 var bottomY = this.chart.scales["y-axis-0"].bottom; 870 ctx.save(); 871 ctx.beginPath(); 872 ctx.moveTo(x, topY); 873 ctx.lineTo(x, bottomY); 874 ctx.lineWidth = 1; 875 ctx.strokeStyle = "rgba(0,0,0,0.1)"; 876 ctx.stroke(); 877 ctx.restore(); 878 } 879 } 880 }); 881 882 Chart.defaults.DoughnutWithShadow = Chart.defaults.doughnut; 883 Chart.controllers.DoughnutWithShadow = Chart.controllers.doughnut.extend({ 884 draw: function (ease) { 885 Chart.controllers.doughnut.prototype.draw.call(this, ease); 886 let ctx = this.chart.chart.ctx; 887 ctx.save(); 888 ctx.shadowColor = "rgba(0,0,0,0.15)"; 889 ctx.shadowBlur = 10; 890 ctx.shadowOffsetX = 0; 891 ctx.shadowOffsetY = 10; 892 ctx.responsive = true; 893 Chart.controllers.doughnut.prototype.draw.apply(this, arguments); 894 ctx.restore(); 895 } 896 }); 897 898 Chart.defaults.PieWithShadow = Chart.defaults.pie; 899 Chart.controllers.PieWithShadow = Chart.controllers.pie.extend({ 900 draw: function (ease) { 901 Chart.controllers.pie.prototype.draw.call(this, ease); 902 let ctx = this.chart.chart.ctx; 903 ctx.save(); 904 ctx.shadowColor = "rgba(0,0,0,0.15)"; 905 ctx.shadowBlur = 10; 906 ctx.shadowOffsetX = 0; 907 ctx.shadowOffsetY = 10; 908 ctx.responsive = true; 909 Chart.controllers.pie.prototype.draw.apply(this, arguments); 910 ctx.restore(); 911 } 912 }); 913 914 Chart.defaults.ScatterWithShadow = Chart.defaults.scatter; 915 Chart.controllers.ScatterWithShadow = Chart.controllers.scatter.extend({ 916 draw: function (ease) { 917 Chart.controllers.scatter.prototype.draw.call(this, ease); 918 let ctx = this.chart.chart.ctx; 919 ctx.save(); 920 ctx.shadowColor = "rgba(0,0,0,0.2)"; 921 ctx.shadowBlur = 7; 922 ctx.shadowOffsetX = 0; 923 ctx.shadowOffsetY = 7; 924 ctx.responsive = true; 925 Chart.controllers.scatter.prototype.draw.apply(this, arguments); 926 ctx.restore(); 927 } 928 }); 929 930 Chart.defaults.RadarWithShadow = Chart.defaults.radar; 931 Chart.controllers.RadarWithShadow = Chart.controllers.radar.extend({ 932 draw: function (ease) { 933 Chart.controllers.radar.prototype.draw.call(this, ease); 934 let ctx = this.chart.chart.ctx; 935 ctx.save(); 936 ctx.shadowColor = "rgba(0,0,0,0.2)"; 937 ctx.shadowBlur = 7; 938 ctx.shadowOffsetX = 0; 939 ctx.shadowOffsetY = 7; 940 ctx.responsive = true; 941 Chart.controllers.radar.prototype.draw.apply(this, arguments); 942 ctx.restore(); 943 } 944 }); 945 946 Chart.defaults.PolarWithShadow = Chart.defaults.polarArea; 947 Chart.controllers.PolarWithShadow = Chart.controllers.polarArea.extend({ 948 draw: function (ease) { 949 Chart.controllers.polarArea.prototype.draw.call(this, ease); 950 let ctx = this.chart.chart.ctx; 951 ctx.save(); 952 ctx.shadowColor = "rgba(0,0,0,0.2)"; 953 ctx.shadowBlur = 10; 954 ctx.shadowOffsetX = 5; 955 ctx.shadowOffsetY = 10; 956 ctx.responsive = true; 957 Chart.controllers.polarArea.prototype.draw.apply(this, arguments);
958 ctx.restore(); 959 } 960 }); 961 962 var chartTooltip = { 963 backgroundColor: foregroundColor, 964 titleFontColor: primaryColor, 965 borderColor: separatorColor, 966 borderWidth: 0.5, 967 bodyFontColor: primaryColor, 968 bodySpacing: 10, 969 xPadding: 15, 970 yPadding: 15, 971 cornerRadius: 0.15, 972 displayColors: false 973 }; 974 975 if (document.getElementById("visitChartFull")) { 976 var visitChartFull = document 977 .getElementById("visitChartFull") 978 .getContext("2d"); 979 var myChart = new Chart(visitChartFull, { 980 type: "LineWithShadow", 981 data: { 982 labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], 983 datasets: [ 984 { 985 label: "Data", 986 borderColor: themeColor1, 987 pointBorderColor: themeColor1, 988 pointBackgroundColor: themeColor1, 989 pointHoverBackgroundColor: themeColor1, 990 pointHoverBorderColor: themeColor1, 991 pointRadius: 3, 992 pointBorderWidth: 3, 993 pointHoverRadius: 3, 994 fill: true, 995 backgroundColor: themeColor1_10, 996 borderWidth: 2, 997 data: [180, 140, 150, 120, 180, 110, 160], 998 datalabels: { 999 align: "end", 1000 anchor: "end" 1001 } 1002 } 1003 ] 1004 }, 1005 options: { 1006 layout: { 1007 padding: { 1008 left: 0, 1009 right: 0, 1010 top: 40, 1011 bottom: 0 1012 } 1013 }, 1014 plugins: { 1015 datalabels: { 1016 backgroundColor: "transparent", 1017 borderRadius: 30, 1018 borderWidth: 1, 1019 padding: 5, 1020 borderColor: function (context) { 1021 return context.dataset.borderColor; 1022 }, 1023 color: function (context) { 1024 return context.dataset.borderColor; 1025 }, 1026 font: { 1027 weight: "bold", 1028 size: 10 1029 }, 1030 formatter: Math.round 1031 } 1032 }, 1033 responsive: true, 1034 maintainAspectRatio: false, 1035 legend: { 1036 display: false 1037 }, 1038 tooltips: chartTooltip, 1039 scales: { 1040 yAxes: [ 1041 { 1042 ticks: { 1043 min: 0 1044 }, 1045 display: false 1046 } 1047 ], 1048 xAxes: [ 1049 { 1050 ticks: { 1051 min: 0 1052 }, 1053 display: false 1054 } 1055 ] 1056 } 1057 } 1058 }); 1059 } 1060 1061 if (document.getElementById("visitChart")) { 1062 var visitChart = document.getElementById("visitChart").getContext("2d"); 1063 var myChart = new Chart(visitChart, { 1064 type: "LineWithShadow", 1065 options: { 1066 plugins: { 1067 datalabels: { 1068 display: false 1069 } 1070 }, 1071 responsive: true, 1072 maintainAspectRatio: false, 1073 scales: { 1074 yAxes: [ 1075 { 1076 gridLines: { 1077 display: true, 1078 lineWidth: 1, 1079 color: "rgba(0,0,0,0.1)", 1080 drawBorder: false 1081 }, 1082 ticks: { 1083 beginAtZero: true, 1084 stepSize: 5, 1085 min: 50, 1086 max: 70, 1087 padding: 0 1088 } 1089 } 1090 ], 1091 xAxes: [ 1092 { 1093 gridLines: { 1094 display: false 1095 } 1096 } 1097 ] 1098 }, 1099 legend: { 1100 display: false 1101 }, 1102 tooltips: chartTooltip 1103 }, 1104 data: { 1105 labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], 1106 datasets: [ 1107 { 1108 label: "", 1109 data: [54, 63, 60, 65, 60, 68, 60], 1110 borderColor: themeColor1,
1111 pointBackgroundColor: foregroundColor, 1112 pointBorderColor: themeColor1, 1113 pointHoverBackgroundColor: themeColor1, 1114 pointHoverBorderColor: foregroundColor, 1115 pointRadius: 4, 1116 pointBorderWidth: 2, 1117 pointHoverRadius: 5, 1118 fill: true, 1119 borderWidth: 2, 1120 backgroundColor: themeColor1_10 1121 } 1122 ] 1123 } 1124 }); 1125 } 1126 1127 if (document.getElementById("conversionChart")) { 1128 var conversionChart = document 1129 .getElementById("conversionChart") 1130 .getContext("2d"); 1131 var myChart = new Chart(conversionChart, { 1132 type: "LineWithShadow", 1133 options: { 1134 plugins: { 1135 datalabels: { 1136 display: false 1137 } 1138 }, 1139 responsive: true, 1140 maintainAspectRatio: false, 1141 scales: { 1142 yAxes: [ 1143 { 1144 gridLines: { 1145 display: true, 1146 lineWidth: 1, 1147 color: "rgba(0,0,0,0.1)", 1148 drawBorder: false 1149 }, 1150 ticks: { 1151 beginAtZero: true, 1152 stepSize: 5, 1153 min: 50, 1154 max: 70, 1155 padding: 0 1156 } 1157 } 1158 ], 1159 xAxes: [ 1160 { 1161 gridLines: { 1162 display: false 1163 } 1164 } 1165 ] 1166 }, 1167 legend: { 1168 display: false 1169 }, 1170 tooltips: chartTooltip 1171 }, 1172 data: { 1173 labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], 1174 datasets: [ 1175 { 1176 label: "", 1177 data: [65, 60, 68, 54, 63, 60, 60], 1178 borderColor: themeColor2,
1179 pointBackgroundColor: foregroundColor, 1180 pointBorderColor: themeColor2, 1181 pointHoverBackgroundColor: themeColor2, 1182 pointHoverBorderColor: foregroundColor, 1183 pointRadius: 4, 1184 pointBorderWidth: 2, 1185 pointHoverRadius: 5, 1186 fill: true, 1187 borderWidth: 2, 1188 backgroundColor: themeColor2_10 1189 } 1190 ] 1191 } 1192 }); 1193 } 1194 1195 var smallChartOptions = { 1196 layout: { 1197 padding: { 1198 left: 5, 1199 right: 5, 1200 top: 10, 1201 bottom: 10 1202 } 1203 }, 1204 plugins: { 1205 datalabels: { 1206 display: false 1207 } 1208 }, 1209 responsive: true, 1210 maintainAspectRatio: false, 1211 legend: { 1212 display: false 1213 }, 1214 tooltips: { 1215 intersect: false, 1216 enabled: false, 1217 custom: function (tooltipModel) { 1218 if (tooltipModel && tooltipModel.dataPoints) { 1219 var $textContainer = $(this._chart.canvas.offsetParent); 1220 var yLabel = tooltipModel.dataPoints[0].yLabel; 1221 var xLabel = tooltipModel.dataPoints[0].xLabel; 1222 var label = tooltipModel.body[0].lines[0].split(":")[0]; 1223 $textContainer.find(".value").html("$" + $.fn.addCommas(yLabel)); 1224 $textContainer.find(".label").html(label + "-" + xLabel); 1225 } 1226 } 1227 }, 1228 scales: { 1229 yAxes: [ 1230 { 1231 ticks: { 1232 beginAtZero: true 1233 }, 1234 display: false 1235 } 1236 ], 1237 xAxes: [ 1238 { 1239 display: false 1240 } 1241 ] 1242 } 1243 }; 1244 1245 var smallChartInit = { 1246 afterInit: function (chart, options) { 1247 var $textContainer = $(chart.canvas.offsetParent); 1248 var yLabel = chart.data.datasets[0].data[0]; 1249 var xLabel = chart.data.labels[0]; 1250 var label = chart.data.datasets[0].label; 1251 $textContainer.find(".value").html("$" + $.fn.addCommas(yLabel)); 1252 $textContainer.find(".label").html(label + "-" + xLabel); 1253 } 1254 }; 1255 1256 if (document.getElementById("smallChart1")) { 1257 var smallChart1 = document 1258 .getElementById("smallChart1") 1259 .getContext("2d"); 1260 var myChart = new Chart(smallChart1, { 1261 type: "LineWithLine", 1262 plugins: [smallChartInit], 1263 data: { 1264 labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], 1265 datasets: [ 1266 { 1267 label: "Total Orders", 1268 borderColor: themeColor1, 1269 pointBorderColor: themeColor1, 1270 pointHoverBackgroundColor: themeColor1, 1271 pointHoverBorderColor: themeColor1, 1272 pointRadius: 2, 1273 pointBorderWidth: 3, 1274 pointHoverRadius: 2, 1275 fill: false, 1276 borderWidth: 2, 1277 data: [1250, 1300, 1550, 921, 1810, 1106, 1610], 1278 datalabels: { 1279 align: "end", 1280 anchor: "end" 1281 } 1282 } 1283 ] 1284 }, 1285 options: smallChartOptions 1286 }); 1287 } 1288 1289 if (document.getElementById("smallChart2")) { 1290 var smallChart2 = document 1291 .getElementById("smallChart2") 1292 .getContext("2d"); 1293 var myChart = new Chart(smallChart2, { 1294 type: "LineWithLine", 1295 plugins: [smallChartInit], 1296 data: { 1297 labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], 1298 datasets: [ 1299 { 1300 label: "Pending Orders", 1301 borderColor: themeColor1, 1302 pointBorderColor: themeColor1, 1303 pointHoverBackgroundColor: themeColor1, 1304 pointHoverBorderColor: themeColor1, 1305 pointRadius: 2, 1306 pointBorderWidth: 3, 1307 pointHoverRadius: 2, 1308 fill: false, 1309 borderWidth: 2, 1310 data: [115, 120, 300, 222, 105, 85, 36], 1311 datalabels: { 1312 align: "end", 1313 anchor: "end" 1314 } 1315 } 1316 ] 1317 }, 1318 options: smallChartOptions 1319 }); 1320 } 1321 1322 if (document.getElementById("smallChart3")) { 1323 var smallChart3 = document 1324 .getElementById("smallChart3") 1325 .getContext("2d"); 1326 var myChart = new Chart(smallChart3, { 1327 type: "LineWithLine", 1328 plugins: [smallChartInit], 1329 data: { 1330 labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], 1331 datasets: [ 1332 { 1333 label: "Active Orders", 1334 borderColor: themeColor1, 1335 pointBorderColor: themeColor1,
1336 pointHoverBackgroundColor: themeColor1, 1337 pointHoverBorderColor: themeColor1, 1338 pointRadius: 2, 1339 pointBorderWidth: 3, 1340 pointHoverRadius: 2, 1341 fill: false, 1342 borderWidth: 2, 1343 data: [350, 452, 762, 952, 630, 85, 158], 1344 datalabels: { 1345 align: "end", 1346 anchor: "end" 1347 } 1348 } 1349 ] 1350 }, 1351 options: smallChartOptions 1352 }); 1353 } 1354 1355 if (document.getElementById("smallChart4")) { 1356 var smallChart4 = document 1357 .getElementById("smallChart4") 1358 .getContext("2d"); 1359 var myChart = new Chart(smallChart4, { 1360 type: "LineWithLine", 1361 plugins: [smallChartInit], 1362 data: { 1363 labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], 1364 datasets: [ 1365 { 1366 label: "Shipped Orders", 1367 borderColor: themeColor1, 1368 pointBorderColor: themeColor1, 1369 pointHoverBackgroundColor: themeColor1, 1370 pointHoverBorderColor: themeColor1, 1371 pointRadius: 2, 1372 pointBorderWidth: 3, 1373 pointHoverRadius: 2, 1374 fill: false, 1375 borderWidth: 2, 1376 data: [200, 452, 250, 630, 125, 85, 20], 1377 datalabels: { 1378 align: "end", 1379 anchor: "end" 1380 } 1381 } 1382 ] 1383 }, 1384 options: smallChartOptions 1385 }); 1386 } 1387 1388 if (document.getElementById("salesChart")) { 1389 var salesChart = document.getElementById("salesChart").getContext("2d"); 1390 var myChart = new Chart(salesChart, { 1391 type: "LineWithShadow", 1392 options: { 1393 plugins: { 1394 datalabels: { 1395 display: false 1396 } 1397 }, 1398 responsive: true, 1399 maintainAspectRatio: false, 1400 scales: { 1401 yAxes: [ 1402 { 1403 gridLines: { 1404 display: true, 1405 lineWidth: 1, 1406 color: "rgba(0,0,0,0.1)", 1407 drawBorder: false 1408 }, 1409 ticks: { 1410 beginAtZero: true, 1411 stepSize: 5, 1412 min: 50, 1413 max: 70, 1414 padding: 20 1415 } 1416 } 1417 ], 1418 xAxes: [ 1419 { 1420 gridLines: { 1421 display: false 1422 } 1423 } 1424 ] 1425 }, 1426 legend: { 1427 display: false 1428 }, 1429 tooltips: chartTooltip 1430 }, 1431 data: { 1432 labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], 1433 datasets: [ 1434 { 1435 label: "", 1436 data: [54, 63, 60, 65, 60, 68, 60], 1437 borderColor: themeColor1,
1438 pointBackgroundColor: foregroundColor, 1439 pointBorderColor: themeColor1, 1440 pointHoverBackgroundColor: themeColor1, 1441 pointHoverBorderColor: foregroundColor, 1442 pointRadius: 6, 1443 pointBorderWidth: 2, 1444 pointHoverRadius: 8, 1445 fill: false 1446 } 1447 ] 1448 } 1449 }); 1450 } 1451 1452 if (document.getElementById("areaChart")) { 1453 var areaChart = document.getElementById("areaChart").getContext("2d"); 1454 var myChart = new Chart(areaChart, { 1455 type: "LineWithShadow", 1456 options: { 1457 plugins: { 1458 datalabels: { 1459 display: false 1460 } 1461 }, 1462 responsive: true, 1463 maintainAspectRatio: false, 1464 scales: { 1465 yAxes: [ 1466 { 1467 gridLines: { 1468 display: true, 1469 lineWidth: 1, 1470 color: "rgba(0,0,0,0.1)", 1471 drawBorder: false 1472 }, 1473 ticks: { 1474 beginAtZero: true, 1475 stepSize: 5, 1476 min: 50, 1477 max: 70, 1478 padding: 0 1479 } 1480 } 1481 ], 1482 xAxes: [ 1483 { 1484 gridLines: { 1485 display: false 1486 } 1487 } 1488 ] 1489 }, 1490 legend: { 1491 display: false 1492 }, 1493 tooltips: chartTooltip 1494 }, 1495 data: { 1496 labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], 1497 datasets: [ 1498 { 1499 label: "", 1500 data: [54, 63, 60, 65, 60, 68, 60], 1501 borderColor: themeColor1,
1502 pointBackgroundColor: foregroundColor, 1503 pointBorderColor: themeColor1, 1504 pointHoverBackgroundColor: themeColor1, 1505 pointHoverBorderColor: foregroundColor, 1506 pointRadius: 4, 1507 pointBorderWidth: 2, 1508 pointHoverRadius: 5, 1509 fill: true, 1510 borderWidth: 2, 1511 backgroundColor: themeColor1_10 1512 } 1513 ] 1514 } 1515 }); 1516 } 1517 1518 if (document.getElementById("areaChartNoShadow")) { 1519 var areaChartNoShadow = document 1520 .getElementById("areaChartNoShadow") 1521 .getContext("2d"); 1522 var myChart = new Chart(areaChartNoShadow, { 1523 type: "line", 1524 options: { 1525 plugins: { 1526 datalabels: { 1527 display: false 1528 } 1529 }, 1530 responsive: true, 1531 maintainAspectRatio: false, 1532 scales: { 1533 yAxes: [ 1534 { 1535 gridLines: { 1536 display: true, 1537 lineWidth: 1, 1538 color: "rgba(0,0,0,0.1)", 1539 drawBorder: false 1540 }, 1541 ticks: { 1542 beginAtZero: true, 1543 stepSize: 5, 1544 min: 50, 1545 max: 70, 1546 padding: 0 1547 } 1548 } 1549 ], 1550 xAxes: [ 1551 { 1552 gridLines: { 1553 display: false 1554 } 1555 } 1556 ] 1557 }, 1558 legend: { 1559 display: false 1560 }, 1561 tooltips: chartTooltip 1562 }, 1563 data: { 1564 labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], 1565 datasets: [ 1566 { 1567 label: "", 1568 data: [54, 63, 60, 65, 60, 68, 60], 1569 borderColor: themeColor1,
1570 pointBackgroundColor: foregroundColor, 1571 pointBorderColor: themeColor1, 1572 pointHoverBackgroundColor: themeColor1, 1573 pointHoverBorderColor: foregroundColor, 1574 pointRadius: 4, 1575 pointBorderWidth: 2, 1576 pointHoverRadius: 5, 1577 fill: true, 1578 borderWidth: 2, 1579 backgroundColor: themeColor1_10 1580 } 1581 ] 1582 } 1583 }); 1584 } 1585 1586 if (document.getElementById("scatterChart")) { 1587 var scatterChart = document 1588 .getElementById("scatterChart") 1589 .getContext("2d"); 1590 var myChart = new Chart(scatterChart, { 1591 type: "ScatterWithShadow", 1592 options: { 1593 plugins: { 1594 datalabels: { 1595 display: false 1596 } 1597 }, 1598 responsive: true, 1599 maintainAspectRatio: false, 1600 scales: { 1601 yAxes: [ 1602 { 1603 gridLines: { 1604 display: true, 1605 lineWidth: 1, 1606 color: "rgba(0,0,0,0.1)", 1607 drawBorder: false 1608 }, 1609 ticks: { 1610 beginAtZero: true, 1611 stepSize: 20, 1612 min: -80, 1613 max: 80, 1614 padding: 20 1615 } 1616 } 1617 ], 1618 xAxes: [ 1619 { 1620 gridLines: { 1621 display: true, 1622 lineWidth: 1, 1623 color: "rgba(0,0,0,0.1)" 1624 } 1625 } 1626 ] 1627 }, 1628 legend: { 1629 position: "bottom", 1630 labels: { 1631 padding: 30, 1632 usePointStyle: true, 1633 fontSize: 12 1634 } 1635 }, 1636 tooltips: chartTooltip 1637 }, 1638 data: { 1639 datasets: [ 1640 { 1641 borderWidth: 2, 1642 label: "Cakes", 1643 borderColor: themeColor1, 1644 backgroundColor: themeColor1_10, 1645 data: [ 1646 { x: 62, y: -78 }, 1647 { x: -0, y: 74 }, 1648 { x: -67, y: 45 }, 1649 { x: -26, y: -43 }, 1650 { x: -15, y: -30 }, 1651 { x: 65, y: -68 }, 1652 { x: -28, y: -61 } 1653 ] 1654 }, 1655 { 1656 borderWidth: 2, 1657 label: "Desserts", 1658 borderColor: themeColor2, 1659 backgroundColor: themeColor2_10, 1660 data: [ 1661 { x: 79, y: 62 }, 1662 { x: 62, y: 0 }, 1663 { x: -76, y: -81 }, 1664 { x: -51, y: 41 }, 1665 { x: -9, y: 9 }, 1666 { x: 72, y: -37 }, 1667 { x: 62, y: -26 } 1668 ] 1669 } 1670 ] 1671 } 1672 }); 1673 } 1674 1675 if (document.getElementById("scatterChartNoShadow")) { 1676 var scatterChartNoShadow = document 1677 .getElementById("scatterChartNoShadow") 1678 .getContext("2d"); 1679 var myChart = new Chart(scatterChartNoShadow, { 1680 type: "scatter", 1681 options: { 1682 plugins: { 1683 datalabels: { 1684 display: false 1685 } 1686 }, 1687 responsive: true, 1688 maintainAspectRatio: false, 1689 scales: { 1690 yAxes: [ 1691 { 1692 gridLines: { 1693 display: true, 1694 lineWidth: 1, 1695 color: "rgba(0,0,0,0.1)", 1696 drawBorder: false 1697 }, 1698 ticks: { 1699 beginAtZero: true, 1700 stepSize: 20, 1701 min: -80, 1702 max: 80, 1703 padding: 20 1704 } 1705 } 1706 ], 1707 xAxes: [ 1708 { 1709 gridLines: { 1710 display: true, 1711 lineWidth: 1, 1712 color: "rgba(0,0,0,0.1)" 1713 } 1714 } 1715 ] 1716 }, 1717 legend: { 1718 position: "bottom", 1719 labels: { 1720 padding: 30, 1721 usePointStyle: true, 1722 fontSize: 12 1723 } 1724 }, 1725 tooltips: chartTooltip 1726 }, 1727 data: { 1728 datasets: [ 1729 { 1730 borderWidth: 2, 1731 label: "Cakes", 1732 borderColor: themeColor1, 1733 backgroundColor: themeColor1_10, 1734 data: [ 1735 { x: 62, y: -78 }, 1736 { x: -0, y: 74 }, 1737 { x: -67, y: 45 }, 1738 { x: -26, y: -43 }, 1739 { x: -15, y: -30 }, 1740 { x: 65, y: -68 }, 1741 { x: -28, y: -61 } 1742 ] 1743 }, 1744 { 1745 borderWidth: 2, 1746 label: "Desserts", 1747 borderColor: themeColor2, 1748 backgroundColor: themeColor2_10, 1749 data: [ 1750 { x: 79, y: 62 }, 1751 { x: 62, y: 0 }, 1752 { x: -76, y: -81 }, 1753 { x: -51, y: 41 }, 1754 { x: -9, y: 9 }, 1755 { x: 72, y: -37 }, 1756 { x: 62, y: -26 } 1757 ] 1758 } 1759 ] 1760 } 1761 }); 1762 } 1763 1764 if (document.getElementById("radarChartNoShadow")) { 1765 var radarChartNoShadow = document 1766 .getElementById("radarChartNoShadow") 1767 .getContext("2d"); 1768 var myChart = new Chart(radarChartNoShadow, { 1769 type: "radar", 1770 options: { 1771 plugins: { 1772 datalabels: { 1773 display: false 1774 } 1775 }, 1776 responsive: true, 1777 maintainAspectRatio: false, 1778 scale: { 1779 ticks: { 1780 display: false 1781 } 1782 }, 1783 legend: { 1784 position: "bottom", 1785 labels: { 1786 padding: 30, 1787 usePointStyle: true, 1788 fontSize: 12 1789 } 1790 }, 1791 tooltips: chartTooltip 1792 }, 1793 data: { 1794 datasets: [ 1795 { 1796 label: "Stock", 1797 borderWidth: 2,
1798 pointBackgroundColor: themeColor1, 1799 borderColor: themeColor1, 1800 backgroundColor: themeColor1_10, 1801 data: [80, 90, 70] 1802 }, 1803 { 1804 label: "Order", 1805 borderWidth: 2, 1806 pointBackgroundColor: themeColor2, 1807 borderColor: themeColor2, 1808 backgroundColor: themeColor2_10, 1809 data: [68, 80, 95] 1810 } 1811 ], 1812 labels: ["Cakes", "Desserts", "Cupcakes"] 1813 } 1814 }); 1815 } 1816 1817 if (document.getElementById("radarChart")) { 1818 var radarChart = document.getElementById("radarChart").getContext("2d"); 1819 var myChart = new Chart(radarChart, { 1820 type: "RadarWithShadow", 1821 options: { 1822 plugins: { 1823 datalabels: { 1824 display: false 1825 } 1826 }, 1827 responsive: true, 1828 maintainAspectRatio: false, 1829 scale: { 1830 ticks: { 1831 display: false 1832 } 1833 }, 1834 legend: { 1835 position: "bottom", 1836 labels: { 1837 padding: 30, 1838 usePointStyle: true, 1839 fontSize: 12 1840 } 1841 }, 1842 tooltips: chartTooltip 1843 }, 1844 data: { 1845 datasets: [ 1846 { 1847 label: "Stock", 1848 borderWidth: 2,
1849 pointBackgroundColor: themeColor1, 1850 borderColor: themeColor1, 1851 backgroundColor: themeColor1_10, 1852 data: [80, 90, 70] 1853 }, 1854 { 1855 label: "Order", 1856 borderWidth: 2, 1857 pointBackgroundColor: themeColor2, 1858 borderColor: themeColor2, 1859 backgroundColor: themeColor2_10, 1860 data: [68, 80, 95] 1861 } 1862 ], 1863 labels: ["Cakes", "Desserts", "Cupcakes"] 1864 } 1865 }); 1866 } 1867 1868 if (document.getElementById("polarChart")) { 1869 var polarChart = document.getElementById("polarChart").getContext("2d"); 1870 var myChart = new Chart(polarChart, { 1871 type: "PolarWithShadow", 1872 options: { 1873 plugins: { 1874 datalabels: { 1875 display: false 1876 } 1877 }, 1878 responsive: true, 1879 maintainAspectRatio: false, 1880 scale: { 1881 ticks: { 1882 display: false 1883 } 1884 }, 1885 legend: { 1886 position: "bottom", 1887 labels: { 1888 padding: 30, 1889 usePointStyle: true, 1890 fontSize: 12 1891 } 1892 }, 1893 tooltips: chartTooltip 1894 }, 1895 data: { 1896 datasets: [ 1897 { 1898 label: "Stock", 1899 borderWidth: 2,
1900 pointBackgroundColor: themeColor1, 1901 borderColor: [themeColor1, themeColor2, themeColor3], 1902 backgroundColor: [ 1903 themeColor1_10, 1904 themeColor2_10, 1905 themeColor3_10 1906 ], 1907 data: [80, 90, 50] 1908 } 1909 ], 1910 labels: ["Cakes", "Desserts", "Cupcakes"] 1911 } 1912 }); 1913 } 1914 1915 if (document.getElementById("polarChartNoShadow")) { 1916 var polarChartNoShadow = document 1917 .getElementById("polarChartNoShadow") 1918 .getContext("2d"); 1919 var myChart = new Chart(polarChartNoShadow, { 1920 type: "polarArea", 1921 options: { 1922 plugins: { 1923 datalabels: { 1924 display: false 1925 } 1926 }, 1927 responsive: true, 1928 maintainAspectRatio: false, 1929 scale: { 1930 ticks: { 1931 display: false 1932 } 1933 }, 1934 legend: { 1935 position: "bottom", 1936 labels: { 1937 padding: 30, 1938 usePointStyle: true, 1939 fontSize: 12 1940 } 1941 }, 1942 tooltips: chartTooltip 1943 }, 1944 data: { 1945 datasets: [ 1946 { 1947 label: "Stock", 1948 borderWidth: 2,
1949 pointBackgroundColor: themeColor1, 1950 borderColor: [themeColor1, themeColor2, themeColor3], 1951 backgroundColor: [ 1952 themeColor1_10, 1953 themeColor2_10, 1954 themeColor3_10 1955 ], 1956 data: [80, 90, 70] 1957 } 1958 ], 1959 labels: ["Cakes", "Desserts", "Cupcakes"] 1960 } 1961 }); 1962 } 1963 1964 if (document.getElementById("salesChartNoShadow")) { 1965 var salesChartNoShadow = document 1966 .getElementById("salesChartNoShadow") 1967 .getContext("2d"); 1968 var myChart = new Chart(salesChartNoShadow, { 1969 type: "line", 1970 options: { 1971 plugins: { 1972 datalabels: { 1973 display: false 1974 } 1975 }, 1976 responsive: true, 1977 maintainAspectRatio: false, 1978 scales: { 1979 yAxes: [ 1980 { 1981 gridLines: { 1982 display: true, 1983 lineWidth: 1, 1984 color: "rgba(0,0,0,0.1)", 1985 drawBorder: false 1986 }, 1987 ticks: { 1988 beginAtZero: true, 1989 stepSize: 5, 1990 min: 50, 1991 max: 70, 1992 padding: 20 1993 } 1994 } 1995 ], 1996 xAxes: [ 1997 { 1998 gridLines: { 1999 display: false 2000 } 2001 } 2002 ] 2003 }, 2004 legend: { 2005 display: false 2006 }, 2007 tooltips: chartTooltip 2008 }, 2009 data: { 2010 labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], 2011 datasets: [ 2012 { 2013 label: "", 2014 data: [54, 63, 60, 65, 60, 68, 60], 2015 borderColor: themeColor1,
2016 pointBackgroundColor: foregroundColor, 2017 pointBorderColor: themeColor1, 2018 pointHoverBackgroundColor: themeColor1, 2019 pointHoverBorderColor: foregroundColor, 2020 pointRadius: 6, 2021 pointBorderWidth: 2, 2022 pointHoverRadius: 8, 2023 fill: false 2024 } 2025 ] 2026 } 2027 }); 2028 } 2029 2030 if (document.getElementById("productChart")) { 2031 var productChart = document 2032 .getElementById("productChart") 2033 .getContext("2d"); 2034 var myChart = new Chart(productChart, { 2035 type: "BarWithShadow", 2036 options: { 2037 plugins: { 2038 datalabels: { 2039 display: false 2040 } 2041 }, 2042 responsive: true, 2043 maintainAspectRatio: false, 2044 scales: { 2045 yAxes: [ 2046 { 2047 gridLines: { 2048 display: true, 2049 lineWidth: 1, 2050 color: "rgba(0,0,0,0.1)", 2051 drawBorder: false 2052 }, 2053 ticks: { 2054 beginAtZero: true, 2055 stepSize: 100, 2056 min: 300, 2057 max: 800, 2058 padding: 20 2059 } 2060 } 2061 ], 2062 xAxes: [ 2063 { 2064 gridLines: { 2065 display: false 2066 } 2067 } 2068 ] 2069 }, 2070 legend: { 2071 position: "bottom", 2072 labels: { 2073 padding: 30, 2074 usePointStyle: true, 2075 fontSize: 12 2076 } 2077 }, 2078 tooltips: chartTooltip 2079 }, 2080 data: { 2081 labels: ["January", "February", "March", "April", "May", "June"], 2082 datasets: [ 2083 { 2084 label: "Cakes", 2085 borderColor: themeColor1, 2086 backgroundColor: themeColor1_10, 2087 data: [456, 479, 324, 569, 702, 600], 2088 borderWidth: 2 2089 }, 2090 { 2091 label: "Desserts", 2092 borderColor: themeColor2, 2093 backgroundColor: themeColor2_10, 2094 data: [364, 504, 605, 400, 345, 320], 2095 borderWidth: 2 2096 } 2097 ] 2098 } 2099 }); 2100 } 2101 2102 if (document.getElementById("productChartNoShadow")) { 2103 var productChartNoShadow = document 2104 .getElementById("productChartNoShadow") 2105 .getContext("2d"); 2106 var myChart = new Chart(productChartNoShadow, { 2107 type: "bar", 2108 options: { 2109 plugins: { 2110 datalabels: { 2111 display: false 2112 } 2113 }, 2114 responsive: true, 2115 maintainAspectRatio: false, 2116 scales: { 2117 yAxes: [ 2118 { 2119 gridLines: { 2120 display: true, 2121 lineWidth: 1, 2122 color: "rgba(0,0,0,0.1)", 2123 drawBorder: false 2124 }, 2125 ticks: { 2126 beginAtZero: true, 2127 stepSize: 100, 2128 min: 300, 2129 max: 800, 2130 padding: 20 2131 } 2132 } 2133 ], 2134 xAxes: [ 2135 { 2136 gridLines: { 2137 display: false 2138 } 2139 } 2140 ] 2141 }, 2142 legend: { 2143 position: "bottom", 2144 labels: { 2145 padding: 30, 2146 usePointStyle: true, 2147 fontSize: 12 2148 } 2149 }, 2150 tooltips: chartTooltip 2151 }, 2152 data: { 2153 labels: ["January", "February", "March", "April", "May", "June"], 2154 datasets: [ 2155 { 2156 label: "Cakes", 2157 borderColor: themeColor1, 2158 backgroundColor: themeColor1_10, 2159 data: [456, 479, 324, 569, 702, 600], 2160 borderWidth: 2 2161 }, 2162 { 2163 label: "Desserts", 2164 borderColor: themeColor2, 2165 backgroundColor: themeColor2_10, 2166 data: [364, 504, 605, 400, 345, 320], 2167 borderWidth: 2 2168 } 2169 ] 2170 } 2171 }); 2172 } 2173 2174 var contributionChartOptions = { 2175 type: "LineWithShadow", 2176 options: { 2177 plugins: { 2178 datalabels: { 2179 display: false 2180 } 2181 }, 2182 responsive: true, 2183 maintainAspectRatio: false, 2184 scales: { 2185 yAxes: [ 2186 { 2187 gridLines: { 2188 display: true, 2189 lineWidth: 1, 2190 color: "rgba(0,0,0,0.1)", 2191 drawBorder: false 2192 }, 2193 ticks: { 2194 beginAtZero: true, 2195 stepSize: 5, 2196 min: 50, 2197 max: 70, 2198 padding: 20 2199 } 2200 } 2201 ], 2202 xAxes: [ 2203 { 2204 gridLines: { 2205 display: false 2206 } 2207 } 2208 ] 2209 }, 2210 legend: { 2211 display: false 2212 }, 2213 tooltips: chartTooltip 2214 }, 2215 data: { 2216 labels: [ 2217 "Jan", 2218 "Feb", 2219 "Mar", 2220 "Apr", 2221 "May", 2222 "Jun", 2223 "Jul", 2224 "Aug", 2225 "Sep", 2226 "Oct", 2227 "Nov", 2228 "Dec" 2229 ], 2230 datasets: [ 2231 { 2232 borderWidth: 2, 2233 label: "", 2234 data: [54, 63, 60, 65, 60, 68, 60, 63, 60, 65, 60, 68], 2235 borderColor: themeColor1,
2236 pointBackgroundColor: foregroundColor, 2237 pointBorderColor: themeColor1, 2238 pointHoverBackgroundColor: themeColor1, 2239 pointHoverBorderColor: foregroundColor, 2240 pointRadius: 4, 2241 pointBorderWidth: 2, 2242 pointHoverRadius: 5, 2243 fill: false 2244 } 2245 ] 2246 } 2247 }; 2248 2249 if (document.getElementById("contributionChart1")) { 2250 var contributionChart1 = new Chart( 2251 document.getElementById("contributionChart1").getContext("2d"), 2252 contributionChartOptions 2253 ); 2254 } 2255 2256 if (document.getElementById("contributionChart2")) { 2257 var contributionChart2 = new Chart( 2258 document.getElementById("contributionChart2").getContext("2d"), 2259 contributionChartOptions 2260 ); 2261 } 2262 2263 if (document.getElementById("contributionChart3")) { 2264 var contributionChart3 = new Chart( 2265 document.getElementById("contributionChart3").getContext("2d"), 2266 contributionChartOptions 2267 ); 2268 } 2269 2270 var centerTextPlugin = { 2271 afterDatasetsUpdate: function (chart) { }, 2272 beforeDraw: function (chart) { 2273 var width = chart.chartArea.right; 2274 var height = chart.chartArea.bottom; 2275 var ctx = chart.chart.ctx; 2276 ctx.restore(); 2277 2278 var activeLabel = chart.data.labels[0]; 2279 var activeValue = chart.data.datasets[0].data[0]; 2280 var dataset = chart.data.datasets[0]; 2281 var meta = dataset._meta[Object.keys(dataset._meta)[0]]; 2282 var total = meta.total; 2283 2284 var activePercentage = parseFloat( 2285 ((activeValue / total) * 100).toFixed(1) 2286 ); 2287 activePercentage = chart.legend.legendItems[0].hidden 2288 ? 0 2289 : activePercentage; 2290 2291 if (chart.pointAvailable) { 2292 activeLabel = chart.data.labels[chart.pointIndex]; 2293 activeValue = 2294 chart.data.datasets[chart.pointDataIndex].data[chart.pointIndex]; 2295 2296 dataset = chart.data.datasets[chart.pointDataIndex]; 2297 meta = dataset._meta[Object.keys(dataset._meta)[0]]; 2298 total = meta.total; 2299 activePercentage = parseFloat( 2300 ((activeValue / total) * 100).toFixed(1) 2301 ); 2302 activePercentage = chart.legend.legendItems[chart.pointIndex].hidden 2303 ? 0 2304 : activePercentage; 2305 } 2306 2307 ctx.font = "36px" + " Nunito, sans-serif"; 2308 ctx.fillStyle = primaryColor; 2309 ctx.textBaseline = "middle"; 2310 2311 var text = activePercentage + "%", 2312 textX = Math.round((width - ctx.measureText(text).width) / 2), 2313 textY = height / 2; 2314 ctx.fillText(text, textX, textY); 2315 2316 ctx.font = "14px" + " Nunito, sans-serif"; 2317 ctx.textBaseline = "middle"; 2318 2319 var text2 = activeLabel, 2320 textX = Math.round((width - ctx.measureText(text2).width) / 2), 2321 textY = height / 2 - 30; 2322 ctx.fillText(text2, textX, textY); 2323 2324 ctx.save(); 2325 }, 2326 beforeEvent: function (chart, event, options) { 2327 var firstPoint = chart.getElementAtEvent(event)[0]; 2328 2329 if (firstPoint) { 2330 chart.pointIndex = firstPoint._index; 2331 chart.pointDataIndex = firstPoint._datasetIndex; 2332 chart.pointAvailable = true; 2333 } 2334 } 2335 }; 2336 2337 if (document.getElementById("categoryChart")) { 2338 var categoryChart = document.getElementById("categoryChart"); 2339 var myDoughnutChart = new Chart(categoryChart, { 2340 plugins: [centerTextPlugin], 2341 type: "DoughnutWithShadow", 2342 data: { 2343 labels: ["Cakes", "Cupcakes", "Desserts"], 2344 datasets: [ 2345 { 2346 label: "", 2347 borderColor: [themeColor3, themeColor2, themeColor1], 2348 backgroundColor: [ 2349 themeColor3_10, 2350 themeColor2_10, 2351 themeColor1_10 2352 ], 2353 borderWidth: 2, 2354 data: [15, 25, 20] 2355 } 2356 ] 2357 }, 2358 draw: function () { }, 2359 options: { 2360 plugins: { 2361 datalabels: { 2362 display: false 2363 } 2364 }, 2365 responsive: true, 2366 maintainAspectRatio: false, 2367 cutoutPercentage: 80, 2368 title: { 2369 display: false 2370 }, 2371 layout: { 2372 padding: { 2373 bottom: 20 2374 } 2375 }, 2376 legend: { 2377 position: "bottom", 2378 labels: { 2379 padding: 30, 2380 usePointStyle: true, 2381 fontSize: 12 2382 } 2383 }, 2384 tooltips: chartTooltip 2385 } 2386 }); 2387 } 2388 2389 if (document.getElementById("categoryChartNoShadow")) { 2390 var categoryChartNoShadow = document.getElementById( 2391 "categoryChartNoShadow" 2392 ); 2393 var myDoughnutChart = new Chart(categoryChartNoShadow, { 2394 plugins: [centerTextPlugin], 2395 type: "doughnut", 2396 data: { 2397 labels: ["Cakes", "Cupcakes", "Desserts"], 2398 datasets: [ 2399 { 2400 label: "", 2401 borderColor: [themeColor3, themeColor2, themeColor1], 2402 backgroundColor: [
2403 themeColor3_10, 2404 themeColor2_10, 2405 themeColor1_10 2406 ], 2407 borderWidth: 2, 2408 data: [15, 25, 20] 2409 } 2410 ] 2411 }, 2412 draw: function () { }, 2413 options: { 2414 plugins: { 2415 datalabels: { 2416 display: false 2417 } 2418 }, 2419 responsive: true, 2420 maintainAspectRatio: false, 2421 cutoutPercentage: 80, 2422 title: { 2423 display: false 2424 }, 2425 layout: { 2426 padding: { 2427 bottom: 20 2428 } 2429 }, 2430 legend: { 2431 position: "bottom", 2432 labels: { 2433 padding: 30, 2434 usePointStyle: true, 2435 fontSize: 12 2436 } 2437 }, 2438 tooltips: chartTooltip 2439 } 2440 }); 2441 } 2442 2443 if (document.getElementById("pieChartNoShadow")) { 2444 var pieChart = document.getElementById("pieChartNoShadow"); 2445 var myChart = new Chart(pieChart, { 2446 type: "pie", 2447 data: { 2448 labels: ["Cakes", "Cupcakes", "Desserts"], 2449 datasets: [ 2450 { 2451 label: "", 2452 borderColor: [themeColor1, themeColor2, themeColor3], 2453 backgroundColor: [ 2454 themeColor1_10, 2455 themeColor2_10, 2456 themeColor3_10 2457 ], 2458 borderWidth: 2, 2459 data: [15, 25, 20] 2460 } 2461 ] 2462 }, 2463 draw: function () { }, 2464 options: { 2465 plugins: { 2466 datalabels: { 2467 display: false 2468 } 2469 }, 2470 responsive: true, 2471 maintainAspectRatio: false, 2472 title: { 2473 display: false 2474 }, 2475 layout: { 2476 padding: { 2477 bottom: 20 2478 } 2479 }, 2480 legend: { 2481 position: "bottom", 2482 labels: { 2483 padding: 30, 2484 usePointStyle: true, 2485 fontSize: 12 2486 } 2487 }, 2488 tooltips: chartTooltip 2489 } 2490 }); 2491 } 2492 2493 if (document.getElementById("pieChart")) { 2494 var pieChart = document.getElementById("pieChart"); 2495 var myChart = new Chart(pieChart, { 2496 type: "PieWithShadow", 2497 data: { 2498 labels: ["Cakes", "Cupcakes", "Desserts"], 2499 datasets: [ 2500 { 2501 label: "", 2502 borderColor: [themeColor1, themeColor2, themeColor3], 2503 backgroundColor: [ 2504 themeColor1_10, 2505 themeColor2_10, 2506 themeColor3_10 2507 ], 2508 borderWidth: 2, 2509 data: [15, 25, 20] 2510 } 2511 ] 2512 }, 2513 draw: function () { }, 2514 options: { 2515 plugins: { 2516 datalabels: { 2517 display: false 2518 } 2519 }, 2520 responsive: true, 2521 maintainAspectRatio: false, 2522 title: { 2523 display: false 2524 }, 2525 layout: { 2526 padding: { 2527 bottom: 20 2528 } 2529 }, 2530 legend: { 2531 position: "bottom", 2532 labels: { 2533 padding: 30, 2534 usePointStyle: true, 2535 fontSize: 12 2536 } 2537 }, 2538 tooltips: chartTooltip 2539 } 2540 }); 2541 } 2542 2543 if (document.getElementById("frequencyChart")) { 2544 var frequencyChart = document.getElementById("frequencyChart"); 2545 var myDoughnutChart = new Chart(frequencyChart, { 2546 plugins: [centerTextPlugin], 2547 type: "DoughnutWithShadow", 2548 data: { 2549 labels: ["Adding", "Editing", "Deleting"], 2550 datasets: [ 2551 { 2552 label: "", 2553 borderColor: [themeColor1, themeColor2, themeColor3], 2554 backgroundColor: [
2555 themeColor1_10, 2556 themeColor2_10, 2557 themeColor3_10 2558 ], 2559 borderWidth: 2, 2560 data: [15, 25, 20] 2561 } 2562 ] 2563 }, 2564 draw: function () { }, 2565 options: { 2566 plugins: { 2567 datalabels: { 2568 display: false 2569 } 2570 }, 2571 responsive: true, 2572 maintainAspectRatio: false, 2573 cutoutPercentage: 80, 2574 title: { 2575 display: false 2576 }, 2577 layout: { 2578 padding: { 2579 bottom: 20 2580 } 2581 }, 2582 legend: { 2583 position: "bottom", 2584 labels: { 2585 padding: 30, 2586 usePointStyle: true, 2587 fontSize: 12 2588 } 2589 }, 2590 tooltips: chartTooltip 2591 } 2592 }); 2593 } 2594 2595 if (document.getElementById("ageChart")) { 2596 var ageChart = document.getElementById("ageChart"); 2597 var myDoughnutChart = new Chart(ageChart, { 2598 plugins: [centerTextPlugin], 2599 type: "DoughnutWithShadow", 2600 data: { 2601 labels: ["12-24", "24-30", "30-40", "40-50", "50-60"], 2602 datasets: [ 2603 { 2604 label: "", 2605 borderColor: [ 2606 themeColor1, 2607 themeColor2, 2608 themeColor3, 2609 themeColor4, 2610 themeColor5 2611 ], 2612 backgroundColor: [ 2613 themeColor1_10, 2614 themeColor2_10, 2615 themeColor3_10, 2616 themeColor4_10, 2617 themeColor5_10 2618 ], 2619 borderWidth: 2, 2620 data: [15, 25, 20, 30, 14] 2621 } 2622 ] 2623 }, 2624 draw: function () { }, 2625 options: { 2626 plugins: { 2627 datalabels: { 2628 display: false 2629 } 2630 }, 2631 responsive: true, 2632 maintainAspectRatio: false, 2633 cutoutPercentage: 80, 2634 title: { 2635 display: false 2636 }, 2637 layout: { 2638 padding: { 2639 bottom: 20 2640 } 2641 }, 2642 legend: { 2643 position: "bottom", 2644 labels: { 2645 padding: 30, 2646 usePointStyle: true, 2647 fontSize: 12 2648 } 2649 }, 2650 tooltips: chartTooltip 2651 } 2652 }); 2653 } 2654 2655 if (document.getElementById("genderChart")) { 2656 var genderChart = document.getElementById("genderChart"); 2657 var myDoughnutChart = new Chart(genderChart, { 2658 plugins: [centerTextPlugin], 2659 type: "DoughnutWithShadow", 2660 data: { 2661 labels: ["Male", "Female", "Other"], 2662 datasets: [ 2663 { 2664 label: "", 2665 borderColor: [themeColor1, themeColor2, themeColor3], 2666 backgroundColor: [ 2667 themeColor1_10, 2668 themeColor2_10, 2669 themeColor3_10 2670 ], 2671 borderWidth: 2, 2672 data: [85, 45, 20] 2673 } 2674 ] 2675 }, 2676 draw: function () { }, 2677 options: { 2678 plugins: { 2679 datalabels: { 2680 display: false 2681 } 2682 }, 2683 responsive: true, 2684 maintainAspectRatio: false, 2685 cutoutPercentage: 80, 2686 title: { 2687 display: false 2688 }, 2689 layout: { 2690 padding: { 2691 bottom: 20 2692 } 2693 }, 2694 legend: { 2695 position: "bottom", 2696 labels: { 2697 padding: 30, 2698 usePointStyle: true, 2699 fontSize: 12 2700 } 2701 }, 2702 tooltips: chartTooltip 2703 } 2704 }); 2705 } 2706 2707 if (document.getElementById("workChart")) { 2708 var workChart = document.getElementById("workChart"); 2709 var myDoughnutChart = new Chart(workChart, { 2710 plugins: [centerTextPlugin], 2711 type: "DoughnutWithShadow", 2712 data: { 2713 labels: [ 2714 "Employed for wages", 2715 "Self-employed", 2716 "Looking for work", 2717 "Retired" 2718 ], 2719 datasets: [ 2720 { 2721 label: "", 2722 borderColor: [
2723 themeColor1, 2724 themeColor2, 2725 themeColor3, 2726 themeColor4 2727 ], 2728 backgroundColor: [ 2729 themeColor1_10, 2730 themeColor2_10, 2731 themeColor3_10, 2732 themeColor4_10 2733 ], 2734 borderWidth: 2, 2735 data: [15, 25, 20, 8] 2736 } 2737 ] 2738 }, 2739 draw: function () { }, 2740 options: { 2741 plugins: { 2742 datalabels: { 2743 display: false 2744 } 2745 }, 2746 responsive: true, 2747 maintainAspectRatio: false, 2748 cutoutPercentage: 80, 2749 title: { 2750 display: false 2751 }, 2752 layout: { 2753 padding: { 2754 bottom: 20 2755 } 2756 }, 2757 legend: { 2758 position: "bottom", 2759 labels: { 2760 padding: 30, 2761 usePointStyle: true, 2762 fontSize: 12 2763 } 2764 }, 2765 tooltips: chartTooltip 2766 } 2767 }); 2768 } 2769 2770 if (document.getElementById("codingChart")) { 2771 var codingChart = document.getElementById("codingChart"); 2772 var myDoughnutChart = new Chart(codingChart, { 2773 plugins: [centerTextPlugin], 2774 type: "DoughnutWithShadow", 2775 data: { 2776 labels: ["Python", "JavaScript", "PHP", "Java", "C#"], 2777 datasets: [ 2778 { 2779 label: "", 2780 borderColor: [ 2781 themeColor1, 2782 themeColor2, 2783 themeColor3, 2784 themeColor4, 2785 themeColor5 2786 ], 2787 backgroundColor: [ 2788 themeColor1_10, 2789 themeColor2_10, 2790 themeColor3_10, 2791 themeColor4_10, 2792 themeColor5_10 2793 ], 2794 borderWidth: 2, 2795 data: [15, 25, 20, 8, 25] 2796 } 2797 ] 2798 }, 2799 draw: function () { }, 2800 options: { 2801 plugins: { 2802 datalabels: { 2803 display: false 2804 } 2805 }, 2806 responsive: true, 2807 maintainAspectRatio: false, 2808 cutoutPercentage: 80, 2809 title: { 2810 display: false 2811 }, 2812 layout: { 2813 padding: { 2814 bottom: 20 2815 } 2816 }, 2817 legend: { 2818 position: "bottom", 2819 labels: { 2820 padding: 30, 2821 usePointStyle: true, 2822 fontSize: 12 2823 } 2824 }, 2825 tooltips: chartTooltip 2826 } 2827 }); 2828 } 2829 } 2830 2831 /* 03.10. Calendar */ 2832 if ($().fullCalendar) { 2833 var testEvent = new Date(new Date().setHours(new Date().getHours())); 2834 var day = testEvent.getDate(); 2835 var month = testEvent.getMonth() + 1; 2836 $(".calendar").fullCalendar({ 2837 themeSystem: "bootstrap4", 2838 height: "auto", 2839 isRTL: isRtl, 2840 buttonText: { 2841 today: "Today", 2842 month: "Month", 2843 week: "Week", 2844 day: "Day", 2845 list: "List" 2846 }, 2847 bootstrapFontAwesome: { 2848 prev: " simple-icon-arrow-left", 2849 next: " simple-icon-arrow-right", 2850 prevYear: " simple-icon-control-start", 2851 nextYear: " simple-icon-control-end" 2852 }, 2853 events: [ 2854 { 2855 title: "Account", 2856 start: "2018-05-18" 2857 }, 2858 { 2859 title: "Delivery", 2860 start: "2019-07-22", 2861 end: "2019-07-24" 2862 }, 2863 { 2864 title: "Conference", 2865 start: "2019-06-07", 2866 end: "2019-06-09" 2867 }, 2868 { 2869 title: "Delivery", 2870 start: "2019-09-03", 2871 end: "2019-09-06" 2872 }, 2873 { 2874 title: "Meeting", 2875 start: "2019-06-17",
2876 end: "2019-06-18" 2877 }, 2878 { 2879 title: "Taxes", 2880 start: "2019-08-07", 2881 end: "2019-08-09" 2882 } 2883 ] 2884 }); 2885 } 2886 2887 /* 03.11. Datatable */ 2888 if ($().DataTable) { 2889 $(".data-table-standard").DataTable({ 2890 bLengthChange: false, 2891 searching: false, 2892 destroy: true, 2893 info: false, 2894 sDom: '<"row view-filter"<"col-sm-12"<"float-left"l><"float-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>', 2895 pageLength: 6, 2896 language: { 2897 paginate: { 2898 previous: "<i class='simple-icon-arrow-left'></i>", 2899 next: "<i class='simple-icon-arrow-right'></i>" 2900 } 2901 }, 2902 drawCallback: function () { 2903 $($(".dataTables_wrapper .pagination li:first-of-type")) 2904 .find("a") 2905 .addClass("prev"); 2906 $($(".dataTables_wrapper .pagination li:last-of-type")) 2907 .find("a") 2908 .addClass("next"); 2909 2910 $(".dataTables_wrapper .pagination").addClass("pagination-sm"); 2911 } 2912 }); 2913 2914 $(".data-tables-pagination").DataTable({ 2915 bLengthChange: false, 2916 searching: false, 2917 destroy: true, 2918 info: false, 2919 sDom: '<"row view-filter"<"col-sm-12"<"float-left"l><"float-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>', 2920 pageLength: 8, 2921 language: { 2922 paginate: { 2923 previous: "<i class='simple-icon-arrow-left'></i>", 2924 next: "<i class='simple-icon-arrow-right'></i>" 2925 } 2926 }, 2927 drawCallback: function () { 2928 $($(".dataTables_wrapper .pagination li:first-of-type")) 2929 .find("a") 2930 .addClass("prev"); 2931 $($(".dataTables_wrapper .pagination li:last-of-type")) 2932 .find("a") 2933 .addClass("next"); 2934 2935 $(".dataTables_wrapper .pagination").addClass("pagination-sm"); 2936 } 2937 }); 2938 2939 var dataTablePs; 2940 $(".data-table-scrollable").DataTable({ 2941 searching: false, 2942 bLengthChange: false, 2943 destroy: true, 2944 info: false, 2945 paging: false, 2946 sDom: '<"row view-filter"<"col-sm-12"<"float-left"l><"float-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>', 2947 responsive: !0, 2948 deferRender: !0, 2949 scrollY: "calc(100vh - 400px)", 2950 scrollCollapse: !0, 2951 "fnInitComplete": function () { 2952 dataTablePs = new PerfectScrollbar('.dataTables_scrollBody', { suppressScrollX: true }); 2953 dataTablePs.isRtl = false; 2954 }, 2955 "fnDrawCallback": function (oSettings) { 2956 dataTablePs = new PerfectScrollbar('.dataTables_scrollBody', { suppressScrollX: true }); 2957 dataTablePs.isRtl = false; 2958 } 2959 }); 2960 2961 $(".data-table-feature").DataTable({ 2962 sDom: '<"row view-filter"<"col-sm-12"<"float-right"l><"float-left"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>', 2963 "columns": [ 2964 { "data": "name" }, 2965 { "data": "position" }, 2966 { "data": "office" }, 2967 { "data": "age" }, 2968 { "data": "start_date" }, 2969 { "data": "salary" } 2970 ], 2971 drawCallback: function () { 2972 $($(".dataTables_wrapper .pagination li:first-of-type")) 2973 .find("a") 2974 .addClass("prev"); 2975 $($(".dataTables_wrapper .pagination li:last-of-type")) 2976 .find("a") 2977 .addClass("next"); 2978 2979 $(".dataTables_wrapper .pagination").addClass("pagination-sm"); 2980 }, 2981 language: { 2982 paginate: { 2983 previous: "<i class='simple-icon-arrow-left'></i>", 2984 next: "<i class='simple-icon-arrow-right'></i>" 2985 }, 2986 search: "_INPUT_", 2987 searchPlaceholder: "Search...", 2988 lengthMenu: "Items Per Page _MENU_" 2989 }, 2990 }); 2991 2992 // Datatable with rows 2993 var $dataTableRows = $("#datatableRows").DataTable({ 2994 bLengthChange: false, 2995 buttons: [ 2996 'copy', 2997 'excel', 2998 'csv', 2999 'pdf' 3000 ], 3001 destroy: true, 3002 info: false, 3003 sDom: '<"row view-filter"<"col-sm-12"<"float-left"l><"float-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"ip>>>', 3004 pageLength: 10, 3005 columns: [ 3006 { data: "Name" }, 3007 { data: "Sales" }, 3008 { data: "Stock" }, 3009 { data: "Category" }, 3010 { data: "Check" } 3011 ], 3012 language: { 3013 paginate: { 3014 previous: "<i class='simple-icon-arrow-left'></i>", 3015 next: "<i class='simple-icon-arrow-right'></i>" 3016 } 3017 }, 3018 drawCallback: function () { 3019 unCheckAllRows(); 3020 $("#checkAllDataTables").prop("checked", false); 3021 $("#checkAllDataTables").prop("indeterminate", false).trigger("change"); 3022 3023 $($(".dataTables_wrapper .pagination li:first-of-type")) 3024 .find("a") 3025 .addClass("prev"); 3026 $($(".dataTables_wrapper .pagination li:last-of-type")) 3027 .find("a") 3028 .addClass("next"); 3029 $(".dataTables_wrapper .pagination").addClass("pagination-sm"); 3030 var api = $(this).dataTable().api(); 3031 $("#pageCountDatatable span").html("Displaying " + parseInt(api.page.info().start + 1) + "-" + api.page.info().end + " of " + api.page.info().recordsTotal + " items"); 3032 } 3033 }); 3034 3035 $("#dataTablesCopy").on("click", function(event) { 3036 event.preventDefault(); 3037 $dataTableRows.buttons(0).trigger(); 3038 }); 3039 3040 $("#dataTablesExcel").on("click", function(event) { 3041 event.preventDefault(); 3042 $dataTableRows.buttons(1).trigger(); 3043 }); 3044 3045 $("#dataTablesCsv").on("click", function(event) { 3046 event.preventDefault(); 3047 $dataTableRows.buttons(2).trigger(); 3048 }); 3049 3050 $("#dataTablesPdf").on("click", function(event) { 3051 event.preventDefault(); 3052 $dataTableRows.buttons(3).trigger(); 3053 }); 3054 3055 $('#datatableRows tbody').on('click', 'tr', function () { 3056 $(this).toggleClass('selected'); 3057 var $checkBox = $(this).find(".custom-checkbox input"); 3058 $checkBox.prop("checked", !$checkBox.prop("checked")).trigger("change"); 3059 controlCheckAll(); 3060 }); 3061 3062 function controlCheckAll() { 3063 var anyChecked = false;
3064 var allChecked = true; 3065 $('#datatableRows tbody tr .custom-checkbox input').each(function () { 3066 if ($(this).prop("checked")) { 3067 anyChecked = true; 3068 } else { 3069 allChecked = false; 3070 } 3071 }); 3072 if (anyChecked) { 3073 $("#checkAllDataTables").prop("indeterminate", anyChecked); 3074 } else { 3075 $("#checkAllDataTables").prop("indeterminate", anyChecked); 3076 $("#checkAllDataTables").prop("checked", anyChecked); 3077 } 3078 if (allChecked) { 3079 $("#checkAllDataTables").prop("indeterminate", false); 3080 $("#checkAllDataTables").prop("checked", allChecked); 3081 } 3082 } 3083 3084 function unCheckAllRows() { 3085 $('#datatableRows tbody tr').removeClass('selected'); 3086 $('#datatableRows tbody tr .custom-checkbox input').prop("checked", false).trigger("change"); 3087 } 3088 3089 function checkAllRows() { 3090 $('#datatableRows tbody tr').addClass('selected'); 3091 $('#datatableRows tbody tr .custom-checkbox input').prop("checked", true).trigger("change"); 3092 } 3093 3094 $("#checkAllDataTables").on("click", function (event) { 3095 var isCheckedAll = $("#checkAllDataTables").prop("checked"); 3096 if (isCheckedAll) { 3097 checkAllRows(); 3098 } else { 3099 unCheckAllRows(); 3100 } 3101 }); 3102 3103 function getSelectedRows() { 3104 //Getting Selected Ones 3105 console.log($dataTableRows.rows('.selected').data()); 3106 } 3107 3108 $("#searchDatatable").on("keyup", function (event) { 3109 $dataTableRows.search($(this).val()).draw(); 3110 }); 3111 3112 $("#pageCountDatatable .dropdown-menu a").on("click", function (event) { 3113 var selText = $(this).text(); 3114 $dataTableRows.page.len(parseInt(selText)).draw(); 3115 }); 3116 3117 var $addToDatatableButton = $("#addToDatatable").stateButton(); 3118 3119 // Validation when modal shown 3120 $('#rightModal').on('shown.bs.modal', function (e) { 3121 $("#addToDatatableForm").validate( 3122 { 3123 rules: { 3124 Sales: { 3125 required: true, 3126 number: true, 3127 min: 3000 3128 }, 3129 Stock: { 3130 required: true, 3131 number: true, 3132 }, 3133 Category: { 3134 required: true 3135 }, 3136 Name: { 3137 required: true 3138 } 3139 } 3140 } 3141 ) 3142 }) 3143 3144 //Adding to datatable from right modal 3145 $("#addToDatatable").on("click", function (event) { 3146 if ($("#addToDatatableForm").valid()) { 3147 $addToDatatableButton.showSpinner(); 3148 var inputs = $("#addToDatatableForm").find(':input'); 3149 var data = {}; 3150 inputs.each(function () { 3151 data[$(this).attr("name")] = $(this).val(); 3152 }); 3153 data["Check"] = '<label class="custom-control custom-checkbox mb-1 align-self-center data-table-rows-check"><input type="checkbox" class="custom-control-input"><span class="custom-control-label"> </span></label>'; 3154 $dataTableRows.row.add(data).draw(); 3155 setTimeout(function () { 3156 $addToDatatableButton.showSuccess(true, "New row added!"); 3157 setTimeout(function () { 3158 $("#rightModal").modal("toggle"); 3159 $addToDatatableButton.reset(); 3160 inputs.each(function () { 3161 $(this).val(""); 3162 }); 3163 if ($("#addToDatatableForm").find('select').data('select2')) { 3164 $("#addToDatatableForm").find('select').val('').trigger('change'); 3165 } 3166 $("#addToDatatableForm").validate().resetForm(); 3167 }, 1000); 3168 }, 1000); 3169 } 3170 }); 3171 } 3172 3173 /* 03.12. Notification */ 3174 function showNotification(placementFrom, placementAlign, type) { 3175 $.notify( 3176 { 3177 title: "Bootstrap Notify", 3178 message: "Here is a notification!", 3179 target: "_blank" 3180 }, 3181 { 3182 element: "body", 3183 position: null, 3184 type: type, 3185 allow_dismiss: true, 3186 newest_on_top: false, 3187 showProgressbar: false, 3188 placement: { 3189 from: placementFrom, 3190 align: placementAlign 3191 }, 3192 offset: 20, 3193 spacing: 10, 3194 z_index: 1031, 3195 delay: 4000, 3196 timer: 2000, 3197 url_target: "_blank", 3198 mouse_over: null, 3199 animate: { 3200 enter: "animated fadeInDown", 3201 exit: "animated fadeOutUp" 3202 }, 3203 onShow: null, 3204 onShown: null, 3205 onClose: null, 3206 onClosed: null, 3207 icon_type: "class", 3208 template: 3209 '<div data-notify="container" class="col-11 col-sm-3 alert alert-{0} " role="alert">
3209' + 3210 '<button type="button" aria-hidden="true" class="close" data-notify="dismiss">×</button>' + 3211 '<span data-notify="icon"></span> ' + 3212 '<span data-notify="title">{1}</span> ' + 3213 '<span data-notify="message">{2}</span>' + 3214 '<div class="progress" data-notify="progressbar">' + 3215 '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' + 3216 "</div>" + 3217 '<a href="{3}" target="{4}" data-notify="url"></a>' + 3218 "</div>" 3219 } 3220 ); 3221 } 3222 3223 $("body").on("click", ".notify-btn", function (event) { 3224 event.preventDefault(); 3225 showNotification($(this).data("from"), $(this).data("align"), "primary"); 3226 }); 3227 3228 /* 03.13. Dropdown Select */ 3229 $(".dropdown-as-select .dropdown-menu a").click(function () { 3230 var selText = $(this).text(); 3231 $(this).parents(".dropdown-as-select").find('.dropdown-toggle').html(selText); 3232 $(this).parents(".dropdown-as-select").find('a').removeClass("active"); 3233 $(this).addClass("active"); 3234 }); 3235 3236 /* 03.14. Slick Slider */ 3237 if ($().slick) { 3238 $(".slick.basic").slick({ 3239 dots: true, 3240 infinite: true, 3241 speed: 300, 3242 rtl: isRtl, 3243 slidesToShow: 3, 3244 slidesToScroll: 4, 3245 appendDots: $(".slick.basic") 3246 .parents(".slick-container") 3247 .find(".slider-dot-container"), 3248 prevArrow: $(".slick.basic") 3249 .parents(".slick-container") 3250 .find(".slider-nav .left-arrow"), 3251 nextArrow: $(".slick.basic") 3252 .parents(".slick-container") 3253 .find(".slider-nav .right-arrow"), 3254 customPaging: function (slider, i) { 3255 return '<button role="button" class="slick-dot"><span></span></button>'; 3256 }, 3257 responsive: [ 3258 { 3259 breakpoint: 1024, 3260 settings: { 3261 slidesToShow: 2, 3262 slidesToScroll: 2, 3263 infinite: true, 3264 dots: true 3265 } 3266 }, 3267 { 3268 breakpoint: 600, 3269 settings: { 3270 slidesToShow: 1, 3271 slidesToScroll: 1 3272 } 3273 } 3274 ] 3275 }); 3276 3277 $(".slick.center").slick({ 3278 dots: true, 3279 infinite: true, 3280 centerMode: true, 3281 speed: 300, 3282 rtl: isRtl, 3283 slidesToShow: 4, 3284 slidesToScroll: 4, 3285 appendDots: $(".slick.center") 3286 .parents(".slick-container") 3287 .find(".slider-dot-container"), 3288 prevArrow: $(".slick.center") 3289 .parents(".slick-container") 3290 .find(".slider-nav .left-arrow"), 3291 nextArrow: $(".slick.center") 3292 .parents(".slick-container") 3293 .find(".slider-nav .right-arrow"), 3294 customPaging: function (slider, i) { 3295 return '<button role="button" class="slick-dot"><span></span></button>'; 3296 }, 3297 responsive: [ 3298 { 3299 breakpoint: 992, 3300 settings: { 3301 slidesToShow: 3, 3302 slidesToScroll: 3, 3303 infinite: true, 3304 dots: true, 3305 centerMode: false 3306 } 3307 }, 3308 { 3309 breakpoint: 600, 3310 settings: { 3311 slidesToShow: 2, 3312 slidesToScroll: 2, 3313 centerMode: false 3314 } 3315 }, 3316 { 3317 breakpoint: 480, 3318 settings: { 3319 slidesToShow: 1, 3320 slidesToScroll: 1, 3321 centerMode: false 3322 } 3323 } 3324 ] 3325 }); 3326 3327 $(".slick.single").slick({ 3328 dots: true, 3329 infinite: true, 3330 rtl: isRtl, 3331 speed: 300, 3332 appendDots: $(".slick.single") 3333 .parents(".slick-container") 3334 .find(".slider-dot-container"), 3335 prevArrow: $(".slick.single") 3336 .parents(".slick-container") 3337 .find(".slider-nav .left-arrow"), 3338 nextArrow: $(".slick.single") 3339 .parents(".slick-container") 3340 .find(".slider-nav .right-arrow"), 3341 customPaging: function (slider, i) { 3342 return '<button role="button" class="slick-dot"><span></span></button>'; 3343 } 3344 }); 3345 } 3346 3347 /* 03.15. Form Validation */ 3348 var forms = document.getElementsByClassName("needs-validation");
3349 var validation = Array.prototype.filter.call(forms, function (form) { 3350 form.addEventListener( 3351 "submit", 3352 function (event) { 3353 if (form.checkValidity() === false) { 3354 event.preventDefault(); 3355 event.stopPropagation(); 3356 } 3357 form.classList.add("was-validated"); 3358 }, 3359 false 3360 ); 3361 }); 3362 3363 /* 03.16. Tooltip */ 3364 if ($().tooltip) { 3365 $('[data-toggle="tooltip"]').tooltip(); 3366 } 3367 3368 /* 03.17. Popover */ 3369 if ($().popover) { 3370 $('[data-toggle="popover"]').popover({ trigger: "focus" }); 3371 } 3372 3373 /* 03.18. Select 2 */ 3374 if ($().select2) { 3375 $(".select2-single, .select2-multiple").select2({ 3376 theme: "bootstrap", 3377 dir: direction, 3378 placeholder: "", 3379 maximumSelectionSize: 6, 3380 containerCssClass: ":all:" 3381 }); 3382 } 3383 3384 /* 03.19. Datepicker */ 3385 if ($().datepicker) { 3386 $("input.datepicker").datepicker({ 3387 autoclose: true, 3388 rtl: isRtl, 3389 templates: { 3390 leftArrow: '<i class="simple-icon-arrow-left"></i>', 3391 rightArrow: '<i class="simple-icon-arrow-right"></i>' 3392 } 3393 }); 3394 3395 $(".input-daterange").datepicker({ 3396 autoclose: true, 3397 rtl: isRtl, 3398 templates: { 3399 leftArrow: '<i class="simple-icon-arrow-left"></i>', 3400 rightArrow: '<i class="simple-icon-arrow-right"></i>' 3401 } 3402 }); 3403 3404 $(".input-group.date").datepicker({ 3405 autoclose: true, 3406 rtl: isRtl, 3407 templates: { 3408 leftArrow: '<i class="simple-icon-arrow-left"></i>', 3409 rightArrow: '<i class="simple-icon-arrow-right"></i>' 3410 } 3411 }); 3412 3413 $(".date-inline").datepicker({ 3414 autoclose: true, 3415 rtl: isRtl, 3416 templates: { 3417 leftArrow: '<i class="simple-icon-arrow-left"></i>', 3418 rightArrow: '<i class="simple-icon-arrow-right"></i>' 3419 } 3420 }); 3421 } 3422 3423 /* 03.20. Dropzone */ 3424 if ($().dropzone && !$(".dropzone").hasClass("disabled")) { 3425 $(".dropzone").dropzone({ 3426 url: "https://httpbin.org/post", 3427 init: function () { 3428 this.on("success", function (file, responseText) { 3429 console.log(responseText); 3430 }); 3431 }, 3432 thumbnailWidth: 160, 3433 previewTemplate: '<div class="dz-preview dz-file-preview mb-3"><div class="d-flex flex-row "><div class="p-0 w-30 position-relative"><div class="dz-error-mark"><span><i></i></span></div><div class="dz-success-mark"><span><i></i></span></div><div class="preview-container"><img data-dz-thumbnail class="img-thumbnail border-0" /><i class="simple-icon-doc preview-icon" ></i></div></div><div class="pl-3 pt-2 pr-2 pb-1 w-70 dz-details position-relative"><div><span data-dz-name></span></div><div class="text-primary text-extra-small" data-dz-size /><div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div><div class="dz-error-message"><span data-dz-errormessage></span></div></div></div><a href="#/" class="remove" data-dz-remove><i class="glyph-icon simple-icon-trash"></i></a></div>' 3434 }); 3435 } 3436 3437 3438 3439 /* 03.21. Cropperjs */ 3440 var Cropper = window.Cropper; 3441 if (typeof Cropper !== "undefined") { 3442 function each(arr, callback) { 3443 var length = arr.length; 3444 var i; 3445 3446 for (i = 0; i < length; i++) { 3447 callback.call(arr, arr[i], i, arr); 3448 } 3449 3450 return arr; 3451 } 3452 var previews = document.querySelectorAll(".cropper-preview"); 3453 var options = { 3454 aspectRatio: 4 / 3, 3455 preview: ".img-preview", 3456 ready: function () { 3457 var clone = this.cloneNode(); 3458 3459 clone.className = ""; 3460 clone.style.cssText = 3461 "display: block;" + 3462 "width: 100%;" + 3463 "min-width: 0;" + 3464 "min-height: 0;" + 3465 "max-width: none;" + 3466 "max-height: none;"; 3467 each(previews, function (elem) { 3468 elem.appendChild(clone.cloneNode()); 3469 }); 3470 }, 3471 crop: function (e) { 3472 var data = e.detail; 3473 var cropper = this.cropper; 3474 var imageData = cropper.getImageData(); 3475 var previewAspectRatio = data.width / data.height; 3476 3477 each(previews, function (elem) { 3478 var previewImage = elem.getElementsByTagName("img").item(0); 3479 var previewWidth = elem.offsetWidth; 3480 var previewHeight = previewWidth / previewAspectRatio; 3481 var imageScaledRatio = data.width / previewWidth; 3482 elem.style.height = previewHeight + "px"; 3483 if (previewImage) { 3484 previewImage.style.width =
3485 imageData.naturalWidth / imageScaledRatio + "px"; 3486 previewImage.style.height = 3487 imageData.naturalHeight / imageScaledRatio + "px"; 3488 previewImage.style.marginLeft = -data.x / imageScaledRatio + "px"; 3489 previewImage.style.marginTop = -data.y / imageScaledRatio + "px"; 3490 } 3491 }); 3492 }, 3493 zoom: function (e) { } 3494 }; 3495 3496 if ($("#inputImage").length > 0) { 3497 var inputImage = $("#inputImage")[0]; 3498 var image = $("#cropperImage")[0]; 3499 3500 var cropper; 3501 inputImage.onchange = function () { 3502 var files = this.files; 3503 var file; 3504 3505 if (files && files.length) { 3506 file = files[0]; 3507 $("#cropperContainer").css("display", "block"); 3508 3509 if (/^image\/\w+/.test(file.type)) { 3510 uploadedImageType = file.type; 3511 uploadedImageName = file.name; 3512 3513 image.src = uploadedImageURL = URL.createObjectURL(file); 3514 if (cropper) { 3515 cropper.destroy(); 3516 } 3517 cropper = new Cropper(image, options); 3518 inputImage.value = null; 3519 } else { 3520 window.alert("Please choose an image file."); 3521 } 3522 } 3523 }; 3524 } 3525 } 3526 3527 /* 03.22. Range Slider */ 3528 if (typeof noUiSlider !== "undefined") { 3529 if ($("#dashboardPriceRange").length > 0) { 3530 noUiSlider.create($("#dashboardPriceRange")[0], { 3531 start: [800, 2100], 3532 connect: true, 3533 tooltips: true, 3534 direction: direction, 3535 range: { 3536 min: 200, 3537 max: 2800 3538 }, 3539 step: 10, 3540 format: { 3541 to: function (value) { 3542 return "$" + $.fn.addCommas(Math.floor(value)); 3543 }, 3544 from: function (value) { 3545 return value; 3546 } 3547 } 3548 }); 3549 } 3550 3551 if ($("#doubleSlider").length > 0) { 3552 noUiSlider.create($("#doubleSlider")[0], { 3553 start: [800, 1200], 3554 connect: true, 3555 tooltips: true, 3556 direction: direction, 3557 range: { 3558 min: 500, 3559 max: 1500 3560 }, 3561 step: 10, 3562 format: { 3563 to: function (value) { 3564 return "$" + $.fn.addCommas(Math.round(value)); 3565 }, 3566 from: function (value) { 3567 return value; 3568 } 3569 } 3570 }); 3571 } 3572 3573 if ($("#singleSlider").length > 0) { 3574 noUiSlider.create($("#singleSlider")[0], { 3575 start: 0, 3576 connect: true, 3577 tooltips: true, 3578 direction: direction, 3579 range: { 3580 min: 0, 3581 max: 150 3582 }, 3583 step: 1, 3584 format: { 3585 to: function (value) { 3586 return $.fn.addCommas(Math.round(value)); 3587 }, 3588 from: function (value) { 3589 return value; 3590 } 3591 } 3592 }); 3593 } 3594 } 3595 3596 /* 03.23. Modal Passing Content */ 3597 $("#exampleModalContent").on("show.bs.modal", function (event) { 3598 var button = $(event.relatedTarget); 3599 var recipient = button.data("whatever"); 3600 var modal = $(this); 3601 modal.find(".modal-title").text("New message to " + recipient); 3602 modal.find(".modal-body input").val(recipient); 3603 }); 3604 3605 /* 03.24. Scrollbar */ 3606 if (typeof PerfectScrollbar !== "undefined") { 3607 var chatAppScroll; 3608 $(".scroll").each(function () { 3609 if ($(this).parents(".chat-app").length > 0) { 3610 var scrollElement = $(this)[0]; 3611 var $scrollContent = $(this).find(".scroll-content"); 3612 var initialized = false; 3613 3614 function createChatAppScroll() { 3615 chatAppScroll = new PerfectScrollbar(scrollElement, { suppressScrollX: true }); 3616 chatAppScroll.isRtl = false; 3617 initialized = false; 3618 } 3619 3620 function calculateHeight() { 3621 var elementsHeight = 0; 3622 if ($("main").length > 0) { 3623 elementsHeight += parseInt($("main").css("margin-top")); 3624 } 3625 if ($(".chat-input-container").length > 0) { 3626 elementsHeight += $(".chat-input-container").outerHeight(true); 3627 } 3628 if ($(".chat-heading-container").length > 0) { 3629 elementsHeight += $(".chat-heading-container").outerHeight(true); 3630 } 3631 if ($(".separator").length > 0) { 3632 elementsHeight += $(".separator").outerHeight(true); 3633 } 3634 $(".chat-app .scroll").css("height", (window.innerHeight - elementsHeight) + "px"); 3635 3636 if (chatAppScroll) { 3637 $(".chat-app .scroll").scrollTop( 3638 $(".chat-app .scroll").prop("scrollHeight") 3639 );
3640 chatAppScroll.update(); 3641 } 3642 if (window.innerWidth < 576) { 3643 if (chatAppScroll) { 3644 chatAppScroll.destroy(); 3645 chatAppScroll = null; 3646 } 3647 $(".chat-app .scroll-content > div:last-of-type").css("padding-bottom", ($(".chat-input-container").outerHeight(true)) + "px"); 3648 3649 if (!initialized) { 3650 setTimeout(function () { 3651 $("html, body").animate({ scrollTop: $(document).height() + 30 }, 100); 3652 }, 300); 3653 initialized = true; 3654 } 3655 } else { 3656 if (!chatAppScroll) { 3657 createChatAppScroll(); 3658 } 3659 $(".chat-app .scroll-content > div:last-of-type").css("padding-bottom", 0); 3660 } 3661 } 3662 $(window).on("resize", function (event) { 3663 calculateHeight(); 3664 }); 3665 calculateHeight(); 3666 3667 return; 3668 } 3669 var ps = new PerfectScrollbar($(this)[0], { suppressScrollX: true }); 3670 ps.isRtl = false; 3671 }); 3672 } 3673 3674 /* 03.25. Progress */ 3675 $(".progress-bar").each(function () { 3676 $(this).css("width", $(this).attr("aria-valuenow") + "%"); 3677 }); 3678 3679 if (typeof ProgressBar !== "undefined") { 3680 $(".progress-bar-circle").each(function () { 3681 var val = $(this).attr("aria-valuenow");
3682 var color = $(this).data("color") || themeColor1; 3683 var trailColor = $(this).data("trailColor") || "#d7d7d7"; 3684 var max = $(this).attr("aria-valuemax") || 100; 3685 var showPercent = $(this).data("showPercent"); 3686 var circle = new ProgressBar.Circle(this, { 3687 color: color, 3688 duration: 20, 3689 easing: "easeInOut", 3690 strokeWidth: 4, 3691 trailColor: trailColor, 3692 trailWidth: 4, 3693 text: { 3694 autoStyleContainer: false 3695 }, 3696 step: function (state, bar) { 3697 if (showPercent) { 3698 bar.setText(Math.round(bar.value() * 100) + "%"); 3699 } else { 3700 bar.setText(val + "/" + max); 3701 } 3702 } 3703 }).animate(val / max); 3704 }); 3705 } 3706 3707 /* 03.26. Rating */ 3708 if ($().barrating) { 3709 $(".rating").each(function () { 3710 var current = $(this).data("currentRating"); 3711 var readonly = $(this).data("readonly"); 3712 $(this).barrating({ 3713 theme: "bootstrap-stars", 3714 initialRating: current, 3715 readonly: readonly 3716 }); 3717 }); 3718 } 3719 3720 /* 03.27. Tags Input */ 3721 if ($().tagsinput) { 3722 $(".tags").tagsinput({ 3723 cancelConfirmKeysOnEmpty: true, 3724 confirmKeys: [13] 3725 }); 3726 3727 $("body").on("keypress", ".bootstrap-tagsinput input", function (e) { 3728 if (e.which == 13) { 3729 e.preventDefault(); 3730 e.stopPropagation(); 3731 } 3732 }); 3733 } 3734 3735 /* 03.28. Sortable */ 3736 if (typeof Sortable !== "undefined") { 3737 $(".sortable").each(function () { 3738 if ($(this).find(".handle").length > 0) { 3739 Sortable.create($(this)[0], { handle: ".handle" }); 3740 } else { 3741 Sortable.create($(this)[0]); 3742 } 3743 }); 3744 if ($(".sortable-survey").length > 0) { 3745 Sortable.create($(".sortable-survey")[0]); 3746 } 3747 } 3748 3749 /* 03.29. State Button */ 3750 var $successButton = $("#successButton").stateButton(); 3751 $successButton.on("click", function (event) { 3752 event.preventDefault(); 3753 $successButton.showSpinner(); 3754 //Demonstration states with a timeout 3755 setTimeout(function () { 3756 $successButton.showSuccess(true); 3757 setTimeout(function () { 3758 $successButton.reset(); 3759 }, 2000); 3760 }, 3000); 3761 }); 3762 3763 var $failButton = $("#failButton").stateButton(); 3764 $("#failButton").on("click", function (event) { 3765 event.preventDefault(); 3766 $failButton.showSpinner(); 3767 //Demonstration states with a timeout 3768 setTimeout(function () { 3769 $failButton.showFail(true); 3770 setTimeout(function () { 3771 $failButton.reset(); 3772 }, 2000); 3773 }, 3000); 3774 }); 3775 3776 /* 03.30. Typeahead */ 3777 var testData = [ 3778 { 3779 name: "May", 3780 index: 0, 3781 id: "5a8a9bfd8bf389ba8d6bb211" 3782 }, 3783 { 3784 name: "Fuentes", 3785 index: 1, 3786 id: "5a8a9bfdee10e107f28578d4" 3787 }, 3788 { 3789 name: "Henderson", 3790 index: 2, 3791 id: "5a8a9bfd4f9e224dfa0110f3" 3792 }, 3793 { 3794 name: "Hinton", 3795 index: 3, 3796 id: "5a8a9bfde42b28e85df34630" 3797 }, 3798 { 3799 name: "Barrera", 3800 index: 4, 3801 id: "5a8a9bfdc0cba3abc4532d8d" 3802 }, 3803 { 3804 name: "Therese", 3805 index: 5, 3806 id: "5a8a9bfdedfcd1aa0f4c414e" 3807 }, 3808 { 3809 name: "Nona", 3810 index: 6, 3811 id: "5a8a9bfdd6686aa51b953c4e" 3812 }, 3813 { 3814 name: "Frye", 3815 index: 7, 3816 id: "5a8a9bfd352e2fd4c101507d" 3817 }, 3818 { 3819 name: "Cora", 3820 index: 8, 3821 id: "5a8a9bfdb5133142047f2600" 3822 }, 3823 { 3824 name: "Miles", 3825 index: 9, 3826 id: "5a8a9bfdadb1afd136117928" 3827 }, 3828 { 3829 name: "Cantrell", 3830 index: 10, 3831 id: "5a8a9bfdca4795bcbb002057" 3832 }, 3833 { 3834 name: "Benson", 3835 index: 11, 3836 id: "5a8a9bfdaa51e9a4aeeddb7d" 3837 }, 3838 { 3839 name: "Susanna", 3840 index: 12, 3841 id: "5a8a9bfd57dd857535ef5998" 3842 }, 3843 { 3844 name: "Beatrice", 3845 index: 13, 3846 id: "5a8a9bfd68b6f12828da4175" 3847 }, 3848 { 3849 name: "Tameka", 3850 index: 14, 3851 id: "5a8a9bfd2bc4a368244d5253" 3852 }, 3853 { 3854 name: "Lowe", 3855 index: 15, 3856 id: "5a8a9bfd9004fda447204d30" 3857 }, 3858 { 3859 name: "Roth", 3860 index: 16, 3861 id: "5a8a9bfdb4616dbc06af6172" 3862 }, 3863 { 3864 name: "Conley", 3865 index: 17, 3866 id: "5a8a9bfdfae43320dd8f9c5a" 3867 }, 3868 { 3869 name: "Nelda", 3870 index: 18, 3871 id: "5a8a9bfd534d9e0ba2d7c9a7" 3872 }, 3873 { 3874 name: "Angie", 3875 index: 19, 3876 id: "5a8a9bfd57de84496dc42259" 3877 } 3878 ]; 3879 3880 if ($().typeahead) { 3881 $("#query").typeahead({ source: testData }); 3882 } 3883 3884 /* 03.31. Full Screen */ 3885 3886 function isFullScreen() { 3887 var isInFullScreen = 3888 (document.fullscreenElement && document.fullscreenElement !== null) || 3889 (document.webkitFullscreenElement && 3890 document.webkitFullscreenElement !== null) || 3891 (document.mozFullScreenElement && 3892 document.mozFullScreenElement !== null) || 3893 (document.msFullscreenElement && document.msFullscreenElement !== null); 3894 return isInFullScreen; 3895 } 3896 3897 function fullscreen() { 3898 var isInFullScreen = isFullScreen(); 3899 3900 var docElm = document.documentElement; 3901 if (!isInFullScreen) { 3902 if (docElm.requestFullscreen) { 3903 docElm.requestFullscreen(); 3904 } else if (docElm.mozRequestFullScreen) { 3905 docElm.mozRequestFullScreen(); 3906 } else if (docElm.webkitRequestFullScreen) { 3907 docElm.webkitRequestFullScreen(); 3908 } else if (docElm.msRequestFullscreen) { 3909 docElm.msRequestFullscreen(); 3910 } 3911 } else { 3912 if (document.exitFullscreen) { 3913 document.exitFullscreen(); 3914 } else if (document.webkitExitFullscreen) { 3915 document.webkitExitFullscreen(); 3916 } else if (document.mozCancelFullScreen) { 3917 document.mozCancelFullScreen(); 3918 } else if (document.msExitFullscreen) { 3919 document.msExitFullscreen(); 3920 } 3921 } 3922 } 3923 3924 $("#fullScreenButton").on("click", function (event) { 3925 event.preventDefault(); 3926 if (isFullScreen()) { 3927 $($(this).find("i")[1]).css("display", "none"); 3928 $($(this).find("i")[0]).css("display", "inline"); 3929 } else { 3930 $($(this).find("i")[1]).css("display", "inline"); 3931 $($(this).find("i")[0]).css("display", "none"); 3932 } 3933 fullscreen(); 3934 }); 3935 3936 /* 03.32. Html Editors */ 3937 if (typeof Quill !== "undefined") { 3938 var quillToolbarOptions = [ 3939 ["bold", "italic", "underline", "strike"], 3940 ["blockquote", "code-block"], 3941 3942 [{ header: 1 }, { header: 2 }], 3943 [{ list: "ordered" }, { list: "bullet" }], 3944 [{ script: "sub" }, { script: "super" }], 3945 [{ indent: "-1" }, { indent: "+1" }], 3946 [{ direction: direction }], 3947 3948 [{ size: ["small", false, "large", "huge"] }], 3949 [{ header: [1, 2, 3, 4, 5, 6, false] }], 3950 3951 [{ color: [] }, { background: [] }], 3952 [{ font: [] }], 3953 [{ align: [] }], 3954 3955 ["clean"] 3956 ]; 3957 3958 var quillBubbleToolbarOptions = [ 3959 ["bold", "italic", "underline", "strike"], 3960 [{ list: "ordered" }, { list: "bullet" }], 3961 [{ size: ["small", false, "large", "huge"] }], 3962 [{ color: [] }], 3963 [{ direction: direction }], 3964 [{ align: [] }] 3965 ]; 3966 3967 var editor = new Quill("#quillEditor", { 3968 modules: { toolbar: quillToolbarOptions }, 3969 theme: "snow" 3970 }); 3971 3972 var editorBubble = new Quill("#quillEditorBubble", { 3973 modules: { toolbar: quillBubbleToolbarOptions }, 3974 theme: "bubble" 3975 }); 3976 } 3977 3978 if (typeof ClassicEditor !== "undefined") { 3979 ClassicEditor.create(document.querySelector("#ckEditorClassic")).catch(function (error) { }); 3980 } 3981 3982 /* 03.33. Showing Body */ 3983 $("body > *").css({ opacity: 0 }); 3984 3985 setTimeout(function () { 3986 $("body").removeClass("show-spinner"); 3987 $("main").addClass("default-transition"); 3988 $(".sub-menu").addClass("default-transition"); 3989 $(".main-menu").addClass("default-transition"); 3990 $(".theme-colors").addClass("default-transition"); 3991 $("body > *").animate({ opacity: 1 }, 100); 3992 }, 300); 3993 3994 3995 /*03.34. Keyboard Shortcuts*/ 3996 if (typeof Mousetrap !== "undefined") { 3997 //Go to next page on sub menu 3998 Mousetrap.bind(["ctrl+down", "command+down"], function (e) { 3999 var $nextItem = $(".sub-menu li.active").next(); 4000 if ($nextItem.length == 0) { 4001 $nextItem = $(".sub-menu li.active") 4002 .parent() 4003 .children() 4004 .first(); 4005 } 4006 window.location.href = $nextItem.find("a").attr("href"); 4007 return false;
4008 }); 4009 4010 //Go to prev page on sub menu 4011 Mousetrap.bind(["ctrl+up", "command+up"], function (e) { 4012 var $prevItem = $(".sub-menu li.active").prev(); 4013 if ($prevItem.length == 0) { 4014 $prevItem = $(".sub-menu li.active") 4015 .parent() 4016 .children() 4017 .last(); 4018 } 4019 window.location.href = $prevItem.find("a").attr("href"); 4020 return false; 4021 }); 4022 4023 //Go to next page on main menu 4024 Mousetrap.bind(["ctrl+shift+down", "command+shift+down"], function (e) { 4025 var $nextItem = $(".main-menu li.active").next(); 4026 if ($nextItem.length == 0) { 4027 $nextItem = $(".main-menu li:first-of-type"); 4028 } 4029 var $link = $nextItem 4030 .find("a") 4031 .attr("href") 4032 .replace("#", ""); 4033 var $firstSubLink = $( 4034 ".sub-menu ul[data-link='" + $link + "'] li:first-of-type" 4035 ); 4036 window.location.href = $firstSubLink.find("a").attr("href"); 4037 return false; 4038 }); 4039 4040 //Go to prev page on main menu 4041 Mousetrap.bind(["ctrl+shift+up", "command+shift+up"], function (e) { 4042 var $prevItem = $(".main-menu li.active").prev(); 4043 if ($prevItem.length == 0) { 4044 $prevItem = $(".main-menu li:last-of-type"); 4045 } 4046 var $link = $prevItem 4047 .find("a") 4048 .attr("href") 4049 .replace("#", ""); 4050 var $firstSubLink = $( 4051 ".sub-menu ul[data-link='" + $link + "'] li:first-of-type" 4052 ); 4053 window.location.href = $firstSubLink.find("a").attr("href"); 4054 return false; 4055 }); 4056 4057 /*Select all with ctrl+a and deselect all with ctrl+d at list pages */ 4058 if ($(".list") && $(".list").length > 0) { 4059 Mousetrap.bind(["ctrl+a", "command+a"], function (e) { 4060 $(".list") 4061 .shiftSelectable() 4062 .data("shiftSelectable") 4063 .selectAll(); 4064 return false; 4065 }); 4066 4067 Mousetrap.bind(["ctrl+d", "command+d"], function (e) { 4068 $(".list") 4069 .shiftSelectable() 4070 .data("shiftSelectable") 4071 .deSelectAll(); 4072 return false; 4073 }); 4074 } 4075 } 4076 4077 /*03.35. Context Menu */ 4078 if ($().contextMenu) { 4079 $.contextMenu({ 4080 selector: ".list .card", 4081 callback: function (key, options) { 4082 var m = "clicked: " + key; 4083 }, 4084 events: { 4085 show: function (options) { 4086 var $list = options.$trigger.parents(".list"); 4087 if ($list && $list.length > 0) { 4088 $list.data("shiftSelectable").rightClick(options.$trigger); 4089 } 4090 } 4091 }, 4092 items: { 4093 copy: { 4094 name: "Copy", 4095 className: "simple-icon-docs" 4096 }, 4097 archive: { name: "Move to archive", className: "simple-icon-drawer" }, 4098 delete: { name: "Delete", className: "simple-icon-trash" } 4099 } 4100 }); 4101 } 4102 4103 /* 03.36. Select from Library */ 4104 if ($().selectFromLibrary) { 4105 $(".sfl-multiple").selectFromLibrary(); 4106 $(".sfl-single").selectFromLibrary(); 4107 /* 4108 Getting selected items 4109 console.log($(".sfl-multiple").selectFromLibrary().data("selectFromLibrary").getData()); 4110 console.log($(".sfl-single").selectFromLibrary().data("selectFromLibrary").getData()); 4111 */ 4112 } 4113 4114 /* 03.37. Feedback */ 4115 $(".feedback-container").on("click", "a", onFeedbackClick); 4116 4117 function onFeedbackClick(event) { 4118 event.preventDefault(); 4119 $(".feedback-container").off("click", "a", onFeedbackClick); 4120 $(".feedback-container a").tooltip("dispose"); 4121 $(".feedback-container a").animate({ 4122 opacity: 0 4123 }, 300, function () { 4124 $(".feedback-container a").css("visibility", "hidden"); 4125 }); 4126 $(".feedback-container .feedback-answer").html($(event.currentTarget).data("message")); 4127 } 4128 4129 4130 /* 03.38. Smart Wizard */ 4131 if ($().smartWizard) { 4132 $('#smartWizardDefault').smartWizard({ 4133 selected: 0, 4134 theme: 'default', 4135 transitionEffect: 'fade', 4136 showStepURLhash: false 4137 }); 4138 4139 $('#smartWizardDot').smartWizard({ 4140 selected: 0, 4141 theme: 'dots', 4142 transitionEffect: 'fade', 4143 showStepURLhash: false 4144 }); 4145 4146 $('#smartWizardCheck').smartWizard({ 4147 selected: 0, 4148 theme: 'check', 4149 transitionEffect: 'fade', 4150 showStepURLhash: false 4151 }); 4152 4153 $('#smartWizardClickable').smartWizard({ 4154 selected: 0, 4155 theme: 'default', 4156 transitionEffect: 'fade', 4157 showStepURLhash: false, 4158 anchorSettings: { 4159 enableAllAnchors: true 4160 } 4161 }); 4162 4163 //Custom Buttons 4164 $('#smartWizardCustomButtons').smartWizard({ 4165 selected: 0, 4166 theme: 'default', 4167 transitionEffect: 'fade', 4168 showStepURLhash: false, 4169 toolbarSettings: { 4170 toolbarPosition: 'none' 4171 } 4172 }); 4173 4174 $("#smartWizardCustomButtons .prev-btn").on("click", function () { 4175 $('#smartWizardCustomButtons').smartWizard("prev"); 4176 return true; 4177 }); 4178 4179 $("#smartWizardCustomButtons .next-btn").on("click", function () { 4180 $('#smartWizardCustomButtons').smartWizard("next"); 4181 return true; 4182 }); 4183 4184 $("#smartWizardCustomButtons .reset-btn").on("click", function (event) { 4185 $('#smartWizardCustomButtons').smartWizard("reset"); 4186 return true; 4187 }); 4188 4189 // Validation 4190 $("#smartWizardValidation").on("showStep", function (e, anchorObject, stepNumber, stepDirection, stepPosition) { 4191 if (stepPosition === 'first') { 4192 $("#smartWizardValidation .prev-btn").addClass('disabled'); 4193 $("#smartWizardValidation .finish-btn").hide(); 4194 $("#smartWizardValidation .next-btn").show(); 4195 } else if (stepPosition === 'final') { 4196 $("#smartWizardValidation .next-btn").hide(); 4197 $("#smartWizardValidation .finish-btn").show(); 4198 $("#smartWizardValidation .prev-btn").removeClass('disabled'); 4199 } else { 4200 $("#smartWizardValidation .finish-btn").hide(); 4201 $("#smartWizardValidation .next-btn").show(); 4202 $("#smartWizardValidation .prev-btn").removeClass('disabled'); 4203 } 4204 }); 4205 4206 $('#smartWizardValidation').smartWizard({ 4207 selected: 0, 4208 theme: 'check', 4209 transitionEffect: 'fade', 4210 showStepURLhash: false, 4211 toolbarSettings: { 4212 toolbarPosition: 'none' 4213 } 4214 }); 4215 4216 $("#smartWizardValidation").on("leaveStep", function (e, anchorObject, stepNumber, stepDirection) { 4217 var elmForm = $("#form-step-" + stepNumber); 4218 if (stepDirection === 'forward' && elmForm) { 4219 return checkWizardValidation(elmForm); 4220 } 4221 }); 4222 4223 $("#smartWizardValidation .prev-btn").on("click", function () { 4224 $('#smartWizardValidation').smartWizard("prev"); 4225 return true; 4226 }); 4227 4228 $("#smartWizardValidation .next-btn").on("click", function () { 4229 $('#smartWizardValidation').smartWizard("next"); 4230 return true; 4231 }); 4232 4233 $("#smartWizardValidation .finish-btn").on("click", function (event) { 4234 if (checkWizardValidation($('#smartWizardValidation #form-step-1'))) { 4235 console.log("Form Done"); 4236 return false;
4237 } 4238 return true; 4239 }); 4240 4241 function checkWizardValidation(form) { 4242 if ($().validate) { 4243 if ($(form).valid()) { 4244 return true; 4245 } else { 4246 return false; 4247 } 4248 } else { 4249 return false; 4250 } 4251 } 4252 } 4253 4254 /* 03.39. Countdown */ 4255 if (typeof Countdown !== "undefined") { 4256 var dateToCount = new Date(new Date().setMinutes(new Date().getMinutes() + 5000)); 4257 var countdown = new Countdown({ 4258 selector: '#timer', 4259 leadingZeros: true, 4260 msgBefore: "", 4261 msgAfter: "", 4262 msgPattern: ' <span class="timer-column"><p class="lead text-center">{days}</p><p>Days</p></span><span class="timer-column"><p class="lead text-center">{hours}</p><p>Hours</p></span><span class="timer-column"><p class="lead text-center">{minutes}</p><p>Minutes</p></span><span class="timer-column"><p class="lead text-center">{seconds}</p><p>Seconds</p></span>', 4263 dateEnd: dateToCount 4264 }); 4265 } 4266 4267 /* 03.40. Lightbox */ 4268 if (typeof baguetteBox !== "undefined") { 4269 baguetteBox.run('.gallery'); 4270 baguetteBox.run('.lightbox'); 4271 } 4272 4273 /* 03.41. Ellipsis */ 4274 if ($().ellipsis) { 4275 $(".ellipsis").ellipsis({ 4276 live: true 4277 }); 4278 } 4279 4280 /* 03.42. Glide */ 4281 if (typeof Glide !== "undefined") { 4282 4283 // Details Images 4284 if ($(".glide.details").length > 0) { 4285 var glideThumbCountMax = 5; 4286 var glideLength = $(".glide.thumbs li").length; 4287 var perView = Math.min(glideThumbCountMax, glideLength); 4288 4289 var glideLarge = new Glide(".glide.details", { 4290 bound: true, 4291 rewind: false, 4292 focusAt: 0, 4293 perView: 1, 4294 startAt: 0, 4295 direction: direction, 4296 }); 4297 4298 var glideThumbs = new Glide(".glide.thumbs", { 4299 bound: true, 4300 rewind: false, 4301 perView: perView, 4302 perTouch: 1, 4303 focusAt: 0, 4304 startAt: 0, 4305 direction: direction, 4306 breakpoints: { 4307 576: { 4308 perView: Math.min(4, glideLength) 4309 }, 4310 420: { 4311 perView: Math.min(3, glideLength) 4312 } 4313 } 4314 }); 4315 4316 $(".glide.thumbs").css("width", perView * 70); 4317 addActiveThumbClass(0); 4318 4319 $(".glide.thumbs li").on("click", function (event) { 4320 var clickedIndex = $(event.currentTarget).index(); 4321 glideLarge.go("=" + clickedIndex); 4322 addActiveThumbClass(clickedIndex); 4323 }); 4324 4325 glideLarge.on(["swipe.end"], function () { 4326 addActiveThumbClass(glideLarge.index); 4327 }); 4328 4329 glideThumbs.on("resize", function () { 4330 perView = Math.min(glideThumbs.settings.perView, glideLength); 4331 $(".glide.thumbs").css("width", perView * 70); 4332 if (perView >= $(".glide.thumbs li").length) { 4333 $(".glide.thumbs .glide__arrows").css("display", "none"); 4334 } else { 4335 $(".glide.thumbs .glide__arrows").css("display", "block"); 4336 } 4337 }); 4338 4339 function addActiveThumbClass(index) { 4340 $(".glide.thumbs li").removeClass("active"); 4341 $($(".glide.thumbs li")[index]).addClass("active"); 4342 var gap = glideThumbs.index + perView; 4343 if (index >= gap) { 4344 glideThumbs.go(">"); 4345 } 4346 if (index < glideThumbs.index) { 4347 glideThumbs.go("<"); 4348 } 4349 } 4350 glideThumbs.mount(); 4351 glideLarge.mount(); 4352 } 4353 4354 // Dashboard Numbers 4355 if ($(".glide.dashboard-numbers").length > 0) { 4356 new Glide(".glide.dashboard-numbers", { 4357 bound: true, 4358 rewind: false, 4359 perView: 4, 4360 perTouch: 1, 4361 focusAt: 0, 4362 startAt: 0, 4363 direction: direction, 4364 gap: 7, 4365 breakpoints: { 4366 1800: { 4367 perView: 3 4368 }, 4369 576: { 4370 perView: 2 4371 }, 4372 320: { 4373 perView: 1 4374 } 4375 } 4376 }).mount(); 4377 } 4378 4379 // Dashboard Best Rated 4380 if ($(".best-rated-items").length > 0) { 4381 new Glide(".best-rated-items", { 4382 gap: 10, 4383 perView: 1, 4384 direction: direction, 4385 type: "carousel", 4386 peek: { before: 0, after: 100 }, 4387 breakpoints: { 4388 480: { perView: 1 }, 4389 992: { perView: 2 }, 4390 1200: { perView: 1 } 4391 }, 4392 }).mount(); 4393 } 4394 4395 4396 if ($(".glide.basic").length > 0) { 4397 new Glide(".glide.basic", { 4398 gap: 0, 4399 rewind: false, 4400 bound: true, 4401 perView: 3, 4402 direction: direction, 4403 breakpoints: { 4404 600: { perView: 1 }, 4405 1000: { perView: 2 } 4406 }, 4407 }).mount(); 4408 } 4409 4410 if ($(".glide.center").length > 0) { 4411 new Glide(".glide.center", { 4412 gap: 0, 4413 type: "carousel", 4414 perView: 4, 4415 direction: direction, 4416 peek: { before: 50, after: 50 }, 4417 breakpoints: { 4418 600: { perView: 1 }, 4419 1000: { perView: 2 } 4420 }, 4421 }).mount(); 4422 } 4423 4424 if ($(".glide.single").length > 0) { 4425 new Glide(".glide.single", { 4426 gap: 0, 4427 type: "carousel", 4428 perView: 1, 4429 direction: direction, 4430 }).mount(); 4431 } 4432 4433 4434 4435 if ($(".glide.gallery").length > 0) { 4436 var enableClick = true; 4437 var glideGallery = new Glide(".glide.gallery", { 4438 gap: 10, 4439 perTouch: 1, 4440 perView: 1, 4441 type: "carousel", 4442 peek: { before: 100, after: 100 }, 4443 direction: direction 4444 }) 4445 4446 glideGallery.on(["swipe.move"], function () { 4447 enableClick = false;
4448 }); 4449 4450 glideGallery.on(["run.after"], function () { 4451 enableClick = true; 4452 }); 4453 4454 glideGallery.mount(); 4455 4456 $(".glide.gallery").get(0).addEventListener('click', function (event) { 4457 if (!enableClick) { 4458 event.stopPropagation(); 4459 event.preventDefault(); 4460 return false; 4461 } else { 4462 return true; 4463 } 4464 }, true); 4465 4466 } 4467 } 4468 4469 /* 03.43. Validation */ 4470 // Bootstrap Validate 4471 var forms = document.getElementsByClassName('needs-validation'); 4472 var validation = Array.prototype.filter.call(forms, function (form) { 4473 form.addEventListener('submit', function (event) { 4474 if (form.checkValidity() === false) { 4475 event.preventDefault(); 4476 event.stopPropagation(); 4477 } 4478 $(form).find(".custom-control input").parents(".form-group").each(function () { 4479 $(this).find(".custom-control input").parents(".form-group").removeClass("is-invalid"); 4480 if ($(this).find(".custom-control input:invalid").length == $(this).find(".custom-control input").length) { 4481 $(this).find(".custom-control input:invalid").parents(".form-group").addClass("is-invalid"); 4482 } 4483 }); 4484 form.classList.add('was-validated'); 4485 }, false); 4486 4487 $(form).find("input").each(function () { 4488 $(this).on("change", function () { 4489 $(this).parents(".form-group").removeClass("is-invalid"); 4490 }); 4491 }); 4492 }); 4493 4494 // jQuery Validate 4495 if ($().validate) { 4496 $.validator.setDefaults({ 4497 ignore: [], 4498 errorElement: "div", 4499 submitHandler: function () { 4500 alert("submitted!"); 4501 }, 4502 errorPlacement: function (error, element) { 4503 if (element.attr("class").indexOf("custom-control") != -1) { 4504 error.insertAfter(element.parent()); 4505 } else { 4506 error.insertAfter(element); 4507 } 4508 } 4509 }); 4510 4511 $("#exampleForm").validate(); 4512 $("#exampleFormTopLabels").validate(); 4513 $("#exampleFormLabelsInInput").validate(); 4514 $("#tooltipPositions").validate(); 4515 $("#tooltipHelpers").validate(); 4516 4517 $("#rulesForm").validate({ 4518 rules: { 4519 rulesName: { 4520 required: true, 4521 lettersonly: true 4522 }, 4523 rulesEmail: { 4524 required: true, 4525 email: true 4526 }, 4527 rulesId: { 4528 required: true, 4529 minlength: 8, 4530 maxlength: 8, 4531 number: true 4532 }, 4533 rulesDetail: { 4534 required: true, 4535 maxlength: 20 4536 }, 4537 rulesPassword: { 4538 required: true, 4539 minlength: 6, 4540 }, 4541 rulesPasswordConfirm: { 4542 required: true, 4543 minlength: 6, 4544 equalTo: "#rulesPassword" 4545 }, 4546 rulesCreditCard: { 4547 creditcard: true, 4548 nowhitespace: true, 4549 required: true, 4550 }, 4551 rulesAge: { 4552 number: true, 4553 min: 18, 4554 required: true 4555 } 4556 }, 4557 messages: { 4558 rulesName: { 4559 lettersonly: "Only letters are accepted!" 4560 }, 4561 rulesEmail: { 4562 email: "Your email address must be in correct format!" 4563 }, 4564 rulesId: { 4565 number: "Must be a number!", 4566 minlength: "Id must be {0} characters!", 4567 maxlength: "Id must be {0} characters!" 4568 }, 4569 rulesPassword: { 4570 minlength: "Password must be at least {0} characters!" 4571 }, 4572 rulesPasswordConfirm: { 4573 equalTo: "Passwords must match!", 4574 minlength: "Password must be at least {0} characters!" 4575 }, 4576 rulesDetail: { 4577 maxlength: "Details must be maximum {0} characters!" 4578 }, 4579 rulesCreditCard: { 4580 creditcard: "Must be a valid credit card number!", 4581 nowhitespace: "Must not contain whitespace!" 4582 } 4583 } 4584 }); 4585 4586 $('select, .tags-input, .datepicker').on('change', function () {
4587 $(this).valid(); 4588 }); 4589 } 4590 } 4591 4592 init(); 4593}; 4594 4595$.fn.dore = function (options) { 4596 return this.each(function () { 4597 if (undefined == $(this).data("dore")) { 4598 var plugin = new $.dore(this, options); 4599 $(this).data("dore", plugin); 4600 } 4601 }); 4602};
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.