1/** 2* Blogzine - Blog and Magazine Bootstrap 5 Theme 3* 4* @author Webestica (https://www.webestica.com/) 5* @version 1.1.0 6**/ 7 8 9/* =================== 10Table Of Content 11====================== 1201 PRELOADER 1302 MEGA MENU 1403 STICKY HEADER 1504 TINY SLIDER 1605 PARALLAX BACKGROUND 1706 STICKY BAR 1807 TOOLTIP 1908 POPOVER 2009 BACK TO TOP 2110 STICKY POST 2211 STICKY FOOTER 2312 GLIGHTBOX 2413 ISOTOPE 2514 DARK MODE 2615 FONT SIZE 2716 LAZY LOAD 2817 QUILL EDITOR 2918 VIDEO PLAYER 3019 OVERLAY SCROLLBAR 3120 DASHBOARD CHART 3221 TRAFFIC CHART 33====================== */ 34 35"use strict"; 36!function () { 37 38 window.Element.prototype.removeClass = function () { 39 let className = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "", 40 selectors = this; 41 if (!(selectors instanceof HTMLElement) && selectors !== null) { 42 selectors = document.querySelector(selectors); 43 } 44 if (this.isVariableDefined(selectors) && className) { 45 selectors.classList.remove(className); 46 } 47 return this; 48 }, window.Element.prototype.addClass = function () { 49 let className = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "", 50 selectors = this; 51 if (!(selectors instanceof HTMLElement) && selectors !== null) { 52 selectors = document.querySelector(selectors); 53 } 54 if (this.isVariableDefined(selectors) && className) { 55 selectors.classList.add(className); 56 } 57 return this; 58 }, window.Element.prototype.toggleClass = function () { 59 let className = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "", 60 selectors = this; 61 if (!(selectors instanceof HTMLElement) && selectors !== null) { 62 selectors = document.querySelector(selectors); 63 } 64 if (this.isVariableDefined(selectors) && className) { 65 selectors.classList.toggle(className); 66 } 67 return this; 68 }, window.Element.prototype.isVariableDefined = function () { 69 return !!this && typeof (this) != 'undefined' && this != null; 70 } 71}(); 72 73// Get CSS var value 74var ThemeColor = function () { 75 return { 76 getCssVariableValue: function (e) { 77 var t = getComputedStyle(document.documentElement).getPropertyValue(e); 78 return t && t.length > 0 && (t = t.trim()), t; 79 } 80 }; 81}(); 82 83var e = { 84 init: function () { 85 e.preLoader(), 86 e.megaMenu(), 87 e.stickyHeader(), 88 e.tinySlider(), 89 e.parallaxBG(), 90 e.stickyBar(), 91 e.toolTipFunc(), 92 e.popOverFunc(), 93 e.backTotop(), 94 e.stickyPost(), 95 e.stickyFooter(), 96 e.lightBox(), 97 e.enableIsotope(), 98 e.darkMode(), 99 e.zooming(), 100 e.lazyLoading(), 101 e.quill(), 102 e.videoPlyr() 103 e.overlayScrollbars(), 104 e.trafficsourcesChart(), 105 e.trafficstatsChart(); 106 }, 107 isVariableDefined: function (el) { 108 return typeof !!el && (el) != 'undefined' && el != null; 109 }, 110 getParents: function (el, selector, filter) { 111 const result = []; 112 const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector; 113 114 // match start from parent 115 el = el.parentElement; 116 while (el && !matchesSelector.call(el, selector)) { 117 if (!filter) { 118 if (selector) { 119 if (matchesSelector.call(el, selector)) { 120 return result.push(el); 121 } 122 } else { 123 result.push(el); 124 } 125 } else { 126 if (matchesSelector.call(el, filter)) { 127 result.push(el); 128 } 129 } 130 el = el.parentElement; 131 if (e.isVariableDefined(el)) { 132 if (matchesSelector.call(el, selector)) { 133 return el; 134 } 135 } 136 137 } 138 return result; 139 }, 140 getNextSiblings: function (el, selector, filter) { 141 let sibs = []; 142 let nextElem = el.parentNode.firstChild; 143 const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector; 144 do { 145 if (nextElem.nodeType === 3) continue; // ignore text nodes 146 if (nextElem === el) continue; // ignore elem of target 147 if (nextElem === el.nextElementSibling) { 148 if ((!filter || filter(el))) { 149 if (selector) { 150 if (matchesSelector.call(nextElem, selector)) { 151 return nextElem; 152 } 153 } else { 154 sibs.push(nextElem); 155 } 156 el = nextElem; 157 158 } 159 } 160 } while (nextElem = nextElem.nextSibling) 161 return sibs; 162 }, 163 on: function (selectors, type, listener) { 164 document.addEventListener("DOMContentLoaded", () => { 165 if (!(selectors instanceof HTMLElement) && selectors !== null) { 166 selectors = document.querySelector(selectors); 167 } 168 selectors.addEventListener(type, listener); 169 }); 170 }, 171 onAll: function (selectors, type, listener) { 172 document.addEventListener("DOMContentLoaded", () => {
173 document.querySelectorAll(selectors).forEach((element) => { 174 if (type.indexOf(',') > -1) { 175 let types = type.split(','); 176 types.forEach((type) => { 177 element.addEventListener(type, listener); 178 }); 179 } else { 180 element.addEventListener(type, listener); 181 } 182 183 184 }); 185 }); 186 }, 187 removeClass: function (selectors, className) { 188 if (!(selectors instanceof HTMLElement) && selectors !== null) { 189 selectors = document.querySelector(selectors); 190 } 191 if (e.isVariableDefined(selectors)) { 192 selectors.removeClass(className); 193 } 194 }, 195 removeAllClass: function (selectors, className) { 196 if (e.isVariableDefined(selectors) && (selectors instanceof HTMLElement)) { 197 document.querySelectorAll(selectors).forEach((element) => { 198 element.removeClass(className); 199 }); 200 } 201 202 }, 203 toggleClass: function (selectors, className) { 204 if (!(selectors instanceof HTMLElement) && selectors !== null) { 205 selectors = document.querySelector(selectors); 206 } 207 if (e.isVariableDefined(selectors)) { 208 selectors.toggleClass(className); 209 } 210 }, 211 toggleAllClass: function (selectors, className) { 212 if (e.isVariableDefined(selectors) && (selectors instanceof HTMLElement)) { 213 document.querySelectorAll(selectors).forEach((element) => { 214 element.toggleClass(className); 215 }); 216 } 217 }, 218 addClass: function (selectors, className) { 219 if (!(selectors instanceof HTMLElement) && selectors !== null) { 220 selectors = document.querySelector(selectors); 221 } 222 if (e.isVariableDefined(selectors)) { 223 selectors.addClass(className); 224 } 225 }, 226 select: function (selectors) { 227 return document.querySelector(selectors); 228 }, 229 selectAll: function (selectors) { 230 return document.querySelectorAll(selectors); 231 }, 232 233 // START: 01 Preloader 234 preLoader: function () { 235 window.onload = function () { 236 var preloader = e.select('.preloader'); 237 if (e.isVariableDefined(preloader)) { 238 preloader.className += ' animate__animated animate__fadeOut'; 239 setTimeout(function(){ 240 preloader.style.display = 'none'; 241 }, 200); 242 } 243 }; 244 }, 245 // END: Preloader 246 247 // START: 02 Mega Menu 248 megaMenu: function () { 249 e.onAll('.dropdown-menu a.dropdown-item.dropdown-toggle', 'click', function (event) { 250 var element = this; 251 event.preventDefault(); 252 event.stopImmediatePropagation(); 253 if (e.isVariableDefined(element.nextElementSibling) && !element.nextElementSibling.classList.contains("show")) { 254 const parents = e.getParents(element, '.dropdown-menu'); 255 e.removeClass(parents.querySelector('.show'), "show"); 256 if(e.isVariableDefined(parents.querySelector('.dropdown-opened'))){ 257 e.removeClass(parents.querySelector('.dropdown-opened'), "dropdown-opened"); 258 } 259 260 } 261 var $subMenu = e.getNextSiblings(element, ".dropdown-menu"); 262 e.toggleClass($subMenu, "show"); 263 $subMenu.previousElementSibling.toggleClass('dropdown-opened'); 264 var parents = e.getParents(element, 'li.nav-item.dropdown.show'); 265 if (e.isVariableDefined(parents) && parents.length > 0) { 266 e.on(parents, 'hidden.bs.dropdown', function (event) { 267 e.removeAllClass('.dropdown-submenu .show'); 268 }); 269 } 270 }); 271 }, 272 // END: Mega Menu 273 274 // START: 03 Sticky Header 275 stickyHeader: function () { 276 var stickyNav = e.select('.navbar-sticky'); 277 if (e.isVariableDefined(stickyNav)) { 278 var stickyHeight = stickyNav.offsetHeight; 279 stickyNav.insertAdjacentHTML('afterend', '<div id="sticky-space"></div>'); 280 var stickySpace = e.select('#sticky-space'); 281 if (e.isVariableDefined(stickySpace)) { 282 document.addEventListener('scroll', function (event) { 283 var scTop = window.pageYOffset || document.documentElement.scrollTop; 284 if (scTop >= 400) { 285 stickySpace.addClass('active'); 286 e.select("#sticky-space.active").style.height = stickyHeight + 'px'; 287 stickyNav.addClass('navbar-sticky-on'); 288 } else { 289 stickySpace.removeClass('active'); 290 stickySpace.style.height = '0px'; 291 stickyNav.removeClass("navbar-sticky-on"); 292 } 293 }); 294 } 295 } 296 }, 297 // END: Sticky Header 298 299 // START: 04 Tiny Slider 300 tinySlider: function () { 301 var $carousel = e.select('.tiny-slider-inner'); 302 if (e.isVariableDefined($carousel)) { 303 var tnsCarousel = e.selectAll('.tiny-slider-inner');
304 tnsCarousel.forEach(slider => { 305 var slider1 = slider; 306 var sliderMode = slider1.getAttribute('data-mode') ? slider1.getAttribute('data-mode') : 'carousel'; 307 var sliderAxis = slider1.getAttribute('data-axis') ? slider1.getAttribute('data-axis') : 'horizontal'; 308 var sliderSpace = slider1.getAttribute('data-gutter') ? slider1.getAttribute('data-gutter') : 30; 309 var sliderEdge = slider1.getAttribute('data-edge') ? slider1.getAttribute('data-edge') : 0; 310 311 var sliderItems = slider1.getAttribute('data-items') ? slider1.getAttribute('data-items') : 4; //option: number (items in all device) 312 var sliderItemsXl = slider1.getAttribute('data-items-xl') ? slider1.getAttribute('data-items-xl') : Number(sliderItems); //option: number (items in 1200 to end ) 313 var sliderItemsLg = slider1.getAttribute('data-items-lg') ? slider1.getAttribute('data-items-lg') : Number(sliderItemsXl); //option: number (items in 992 to 1199 ) 314 var sliderItemsMd = slider1.getAttribute('data-items-md') ? slider1.getAttribute('data-items-md') : Number(sliderItemsLg); //option: number (items in 768 to 991 ) 315 var sliderItemsSm = slider1.getAttribute('data-items-sm') ? slider1.getAttribute('data-items-sm') : Number(sliderItemsMd); //option: number (items in 576 to 767 ) 316 var sliderItemsXs = slider1.getAttribute('data-items-xs') ? slider1.getAttribute('data-items-xs') : Number(sliderItemsSm); //option: number (items in start to 575 ) 317 318 var sliderSpeed = slider1.getAttribute('data-speed') ? slider1.getAttribute('data-speed') : 500; 319 var sliderautoWidth = slider1.getAttribute('data-autowidth') === 'true'; //option: true or false 320 var sliderArrow = slider1.getAttribute('data-arrow') !== 'false'; //option: true or false 321 var sliderDots = slider1.getAttribute('data-dots') !== 'false'; //option: true or false 322 323 var sliderAutoPlay = slider1.getAttribute('data-autoplay') !== 'false'; //option: true or false 324 var sliderAutoPlayTime = slider1.getAttribute('data-autoplaytime') ? slider1.getAttribute('data-autoplaytime') : 4000; 325 var sliderHoverPause = slider1.getAttribute('data-hoverpause') === 'true'; //option: true or false 326 if (e.isVariableDefined(e.select('.custom-thumb'))) { 327 var sliderNavContainer = e.select('.custom-thumb'); 328 } 329 var sliderLoop = slider1.getAttribute('data-loop') !== 'false'; //option: true or false 330 var sliderRewind = slider1.getAttribute('data-rewind') === 'true'; //option: true or false 331 var sliderAutoHeight = slider1.getAttribute('data-autoheight') === 'true'; //option: true or false 332 var sliderfixedWidth = slider1.getAttribute('data-fixedwidth') === 'true'; //option: true or false 333 var sliderTouch = slider1.getAttribute('data-touch') !== 'false'; //option: true or false 334 var sliderDrag = slider1.getAttribute('data-drag') !== 'false'; //option: true or false 335 // Check if document DIR is RTL 336 var ifRtl = document.getElementsByTagName("html")[0].getAttribute("dir"); 337 var sliderDirection; 338 if (ifRtl === 'rtl') { 339 sliderDirection = 'rtl'; 340 } 341 342 var tnsSlider = tns({ 343 container: slider, 344 mode: sliderMode, 345 axis: sliderAxis, 346 gutter: sliderSpace, 347 edgePadding: sliderEdge, 348 speed: sliderSpeed, 349 autoWidth: sliderautoWidth, 350 controls: sliderArrow, 351 nav: sliderDots, 352 autoplay: sliderAutoPlay, 353 autoplayTimeout: sliderAutoPlayTime, 354 autoplayHoverPause: sliderHoverPause, 355 autoplayButton: false, 356 autoplayButtonOutput: false, 357 controlsPosition: top, 358 navContainer: sliderNavContainer, 359 navPosition: top, 360 autoplayPosition: top, 361 controlsText: [ 362 '<i class="fas fa-chevron-left"></i>', 363 '<i class="fas fa-chevron-right"></i>' 364 ], 365 loop: sliderLoop, 366 rewind: sliderRewind, 367 autoHeight: sliderAutoHeight, 368 fixedWidth: sliderfixedWidth, 369 touch: sliderTouch, 370 mouseDrag: sliderDrag, 371 arrowKeys: true, 372 items: sliderItems, 373 textDirection: sliderDirection, 374 lazyload: true, 375 lazyloadSelector: '.lazy', 376 responsive: { 377 0: { 378 items: Number(sliderItemsXs) 379 }, 380 576: { 381 items: Number(sliderItemsSm) 382 }, 383 768: { 384 items: Number(sliderItemsMd) 385 }, 386 992: { 387 items: Number(sliderItemsLg) 388 }, 389 1200: { 390 items: Number(sliderItemsXl) 391 } 392 } 393 }); 394 }); 395 } 396 }, 397 // END: Tiny Slider 398
399 // START: 05 Parallax Background 400 parallaxBG: function () { 401 var parBG = e.select('.bg-parallax'); 402 if (e.isVariableDefined(parBG)) { 403 jarallax(e.selectAll('.bg-parallax'), { 404 speed: 0.6 405 }); 406 } 407 }, 408 // END: Parallax Background 409 410 // START: 06 Sticky Bar 411 stickyBar: function () { 412 var sb = e.select('[data-sticky]'); 413 if (e.isVariableDefined(sb)) { 414 var sticky = new Sticky('[data-sticky]'); 415 } 416 }, 417 // END: Sticky Bar 418 419 // START: 07 Tooltip 420 // Enable tooltips everywhere via data-toggle attribute 421 toolTipFunc: function () { 422 var tooltipTriggerList = [].slice.call(e.selectAll('[data-bs-toggle="tooltip"]')) 423 var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { 424 return new bootstrap.Tooltip(tooltipTriggerEl) 425 }) 426 }, 427 // END: Tooltip 428 429 // START: 08 Popover 430 // Enable popover everywhere via data-toggle attribute 431 popOverFunc: function () { 432 var popoverTriggerList = [].slice.call(e.selectAll('[data-bs-toggle="popover"]')) 433 var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { 434 return new bootstrap.Popover(popoverTriggerEl) 435 }) 436 }, 437 // END: Popover 438 439 // START: 09 Back to Top 440 backTotop: function () { 441 var scrollpos = window.scrollY; 442 var backBtn = e.select('.back-top'); 443 if (e.isVariableDefined(backBtn)) { 444 var add_class_on_scroll = () => backBtn.addClass("back-top-show"); 445 var remove_class_on_scroll = () => backBtn.removeClass("back-top-show"); 446 447 window.addEventListener('scroll', function () { 448 scrollpos = window.scrollY; 449 if (scrollpos >= 800) { 450 add_class_on_scroll() 451 } else { 452 remove_class_on_scroll() 453 } 454 }); 455 456 backBtn.addEventListener('click', () => window.scrollTo({ 457 top: 0, 458 behavior: 'smooth', 459 })); 460 } 461 }, 462 // END: Back to Top 463 464 // START: 10 Sticky post 465 stickyPost: function () { 466 var scrollpos = window.scrollY; 467 var sp = e.select('.sticky-post'); 468 if (e.isVariableDefined(sp)) { 469 var add_class_on_scroll = () => sp.addClass("sticky-post-sticked"); 470 var remove_class_on_scroll = () => sp.removeClass("sticky-post-sticked"); 471 472 window.addEventListener('scroll', function () { 473 scrollpos = window.scrollY; 474 if (scrollpos >= 1400) { 475 add_class_on_scroll() 476 } else { 477 remove_class_on_scroll() 478 } 479 }); 480 } 481 }, 482 // END: Sticky Post 483 484 // START: 11 Sticky Footer 485 stickyFooter: function () { 486 var fixedFooter = e.select('.footer-sticky'); 487 if (e.isVariableDefined(fixedFooter)) { 488 window.addEventListener("load", function () { 489 window.dispatchEvent(new Event('resize')); 490 }); 491 window.addEventListener('resize', function (event) { 492 var screenWidth = window.outerWidth; 493 var footerHeight = fixedFooter.offsetHeight - 1; 494 if (screenWidth >= 768) { 495 document.getElementsByTagName('main')[0].style.marginBottom = footerHeight + 'px'; 496 } 497 }); 498 } 499 }, 500 // END: Sticky Footer 501 502 // START: 12 GLightbox 503 lightBox: function () { 504 var light = e.select('[data-glightbox]'); 505 if (e.isVariableDefined(light)) { 506 var lb = GLightbox({ 507 selector: '*[data-glightbox]', 508 openEffect: 'fade', 509 closeEffect: 'fade' 510 }); 511 } 512 }, 513 // END: GLightbox 514 515 // START: 13 Isotope 516 enableIsotope: function () { 517 var isGridItem = e.select('.grid-item'); 518 if (e.isVariableDefined(isGridItem)) { 519 520 // Code only for normal Grid 521 var onlyGrid = e.select('[data-isotope]'); 522 if (e.isVariableDefined(onlyGrid)) { 523 var allGrid = e.selectAll("[data-isotope]");
524 allGrid.forEach(gridItem => { 525 var gridItemData = gridItem.getAttribute('data-isotope'); 526 var gridItemDataObj = JSON.parse(gridItemData); 527 var iso = new Isotope(gridItem, { 528 itemSelector: '.grid-item', 529 layoutMode: gridItemDataObj.layoutMode 530 }); 531 532 imagesLoaded(gridItem).on('progress', function () { 533 // layout Isotope after each image loads 534 iso.layout(); 535 }); 536 }); 537 } 538 539 // Code only for normal Grid 540 var onlyGridFilter = e.select('.grid-menu'); 541 if (e.isVariableDefined(onlyGridFilter)) { 542 var filterMenu = e.selectAll('.grid-menu'); 543 filterMenu.forEach(menu => { 544 var filterContainer = menu.getAttribute('data-target'); 545 var a = menu.dataset.target; 546 var b = e.select(a); 547 var filterContainerItemData = b.getAttribute('data-isotope'); 548 var filterContainerItemDataObj = JSON.parse(filterContainerItemData); 549 var filter = new Isotope(filterContainer, { 550 itemSelector: '.grid-item', 551 transitionDuration: '0.7s', 552 layoutMode: filterContainerItemDataObj.layoutMode 553 }); 554 555 var menuItems = menu.querySelectorAll('li a'); 556 menuItems.forEach(menuItem => { 557 menuItem.addEventListener('click', function (event) { 558 var filterValue = menuItem.getAttribute('data-filter'); 559 filter.arrange({filter: filterValue}); 560 menuItems.forEach((control) => control.removeClass('active')); 561 menuItem.addClass('active'); 562 }); 563 }); 564 565 imagesLoaded(filterContainer).on('progress', function () { 566 filter.layout(); 567 }); 568 }); 569 } 570 571 } 572 }, 573 // END: Isotope 574 575 // START: 14 Dark mode 576 darkMode: function () { 577 578 var dark = e.select('#darkModeSwitch'); 579 if (e.isVariableDefined(dark)) { 580 let theme = localStorage.getItem('data-theme'); 581 var style = document.getElementById("style-switch"); 582 var dir = document.getElementsByTagName("html")[0].getAttribute('dir'); 583 584 var changeThemeToDark = () => { 585 document.documentElement.setAttribute("data-theme", "dark") // set theme to dark 586 if(dir == 'rtl') { 587 style.setAttribute('href', 'assets/css/style-dark-rtl.css'); 588 } else { 589 style.setAttribute('href', 'assets/css/style-dark.css'); 590 } 591 localStorage.setItem("data-theme", "dark") // save theme to local storage 592 } 593 594 var changeThemeToLight = () => { 595 document.documentElement.setAttribute("data-theme", "light") // set theme light 596 if(dir == 'rtl') { 597 style.setAttribute('href', 'assets/css/style-rtl.css'); 598 } else { 599 style.setAttribute('href', 'assets/css/style.css'); 600 } 601 602 localStorage.setItem("data-theme", 'light') // save theme to local storage 603 } 604 605 if(theme === 'dark'){ 606 changeThemeToDark() 607 } else if (theme == null || theme === 'light' ) { 608 changeThemeToLight(); 609 } 610 611 const dms = document.querySelector('#darkModeSwitch'); 612 613 dms.addEventListener('click', () => { 614 let theme = localStorage.getItem('data-theme'); // Retrieve saved them from local storage 615 if (theme ==='dark'){ 616 changeThemeToLight() 617 } else{ 618 changeThemeToDark() 619 } 620 }); 621 622 } 623 }, 624 // END: Dark mode 625 626 // START: 15 Font size 627 zooming: function () { 628 const doc = document.documentElement; 629 var radios = document.querySelectorAll('input[type=radio][name="fntradio"]'); 630 radios.forEach(radio => { 631 radio.addEventListener("change", function() { 632 var idZ = radio.getAttribute('id'); 633 if(idZ == 'font-sm') { 634 doc.classList.remove('font-lg'); 635 doc.classList.add('font-sm'); 636 } else if(idZ == 'font-default') { 637 doc.classList.remove('font-sm','font-lg'); 638 } else if(idZ == 'font-lg') { 639 doc.classList.remove('font-sm'); 640 doc.classList.add('font-lg'); 641 } 642 }); 643 }); 644 }, 645 // END: Font size 646 647 // START: 16 Lazy Load 648 lazyLoading: function () { 649 var lazLoad = e.select('.lazy'); 650 if (e.isVariableDefined(lazLoad)) { 651 var lazyLoadInstance = new LazyLoad({ 652 }); 653 } 654 }, 655 // END: Lazy Load 656 657 // START: 17 Quill Editor 658 quill: function () { 659 var ql = e.select('#quilleditor'); 660 if (e.isVariableDefined(ql)) { 661 var editor = new Quill('#quilleditor', { 662 modules: { toolbar: '#quilltoolbar' }, 663 theme: 'snow' 664 }); 665 } 666 }, 667 // END: Quill Editor 668 669 // START: 18 Video player 670 videoPlyr: function () { 671 var vdp = e.select('.player-wrapper'); 672 if (e.isVariableDefined(vdp)) { 673 // youtube 674 const playerYoutube = Plyr.setup('.player-youtube', {}); 675 window.player = playerYoutube; 676 677 // Vimeo 678 const playerVimeo = Plyr.setup('.player-vimeo', {}); 679 window.player = playerVimeo; 680 681 // HTML video 682 const playerHtmlvideo = Plyr.setup('.player-html', { 683 captions: {active: true} 684 }); 685 window.player = playerHtmlvideo; 686 687 // HTML audio 688 const playerHtmlaudio = Plyr.setup('.player-audio', {}); 689 window.player = playerHtmlaudio; 690 } 691 }, 692 // END: Video player 693 694 // START: 19 Overlay scrollbar 695 overlayScrollbars: function () { 696 var os = e.select('.custom-scrollbar'); 697 if (os) { 698 document.addEventListener("DOMContentLoaded", function() { 699 var cs = document.querySelectorAll('.custom-scrollbar'); 700 cs.forEach(c => { 701 OverlayScrollbars(c, { 702 scrollbars: { 703 autoHide: 'leave', 704 autoHideDelay: 200 705 }, 706 overflowBehavior : { 707 x : "visible-hidden", 708 y : "scroll" 709 } 710 }); 711 }); 712 }); 713 } 714 }, 715 // END: Overlay scrollbar 716 717 // START: 20 Dashboard Chart 718 trafficsourcesChart: function () {
719 var ac = e.select('#apexChartTrafficSources'); 720 if (e.isVariableDefined(ac)) { 721 var options = { 722 colors: [ 723 '#2163e8', '#0cbc87', '#d6293e', '#f7c32e' 724 ], 725 labels: ['Search', 'Direct', 'Social', 'Display ads'], 726 series: [44, 55, 41, 17], 727 legend: { 728 show: false, 729 position: 'right' 730 }, 731 chart: { 732 height: 300, 733 type: 'donut', 734 }, 735 plotOptions: { 736 pie: { 737 donut: { 738 size: '75%', 739 }, 740 offsetY: 20, 741 }, 742 stroke: { 743 colors: undefined 744 } 745 }, 746 stroke:{ 747 show: false 748 }, 749 dataLabels: { 750 enabled: false 751 }, 752 responsive: [{ 753 breakpoint: 480, 754 options: { 755 chart: { 756 height: 200 757 }, 758 legend: { 759 show: false 760 } 761 } 762 }] 763 }; 764 var chart = new ApexCharts(document.querySelector("#apexChartTrafficSources"), options); 765 chart.render(); 766 } 767 }, 768 // END: Dashboard Chart 769 770 // START: 21 Traffic Chart 771 trafficstatsChart: function () { 772 var cpv = e.select('#apexChartTrafficStats'); 773 if (e.isVariableDefined(cpv)) { 774 var options = { 775 colors: [ 776 '#2163e8', 777 ], 778 series: [{ 779 name: 'Users', 780 data: [100, 401, 305, 501, 409, 602, 609, 901, 848, 602, 809, 901] 781 }], 782 chart: { 783 height: 320, 784 type: 'area', 785 toolbar: { 786 show: false 787 } 788 }, 789 grid: { 790 strokeDashArray: 4, 791 position: 'back' 792 }, 793 dataLabels: { 794 enabled: false 795 }, 796 stroke: { 797 curve: 'smooth' 798 }, 799 legend: { 800 show: true, 801 horizontalAlign: 'right', 802 position: 'top', 803 labels: { 804 }, 805 markers: { 806 width: 8, 807 height: 8 808 } 809 }, 810 xaxis: { 811 labels: { 812 show: true 813 }, 814 axisBorder: { 815 show: false 816 }, 817 categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 818 }, 819 tooltip: { 820 x: { 821 format: 'dd/MM/yy HH:mm' 822 }, 823 }, 824 }; 825 var chart = new ApexCharts(document.querySelector("#apexChartTrafficStats"), options); 826 chart.render(); 827 } 828 }, 829 // END: Traffic Chart 830 831}; 832e.init();
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.