1/* ------------------------------------------------------- 2 3 Theme Name: Crafto - The Multipurpose HTML5 Template 4 Theme URL: https://craftohtml.themezaa.com/ 5 Description: Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos. 6 Author: ThemeZaa - https://www.themezaa.com/ 7 Author ThemeForest URL: https://themeforest.net/user/themezaa 8 Copyright(c) 2024 themezaa.com 9 Version: 2.0 10 11 ------------------------------------------------------- */ 12 13(function ($) { 14 15 "use strict"; 16 /* =================================== 17 Change variables value as per your need 18 ====================================== */ 19 20 var menuBreakPoint = 991; 21 var sliderBreakPoint = 991; // It will effect when you have used attribute "data-thumb-slider-md-direction" OR "data-slider-md-direction" 22 var animeBreakPoint = 1199; 23 var headerTransition = 300; // Header transition effect time 24 25 /* =================================== 26 Touch device 27 ====================================== */ 28 29 var isTouchDevice = (('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)); 30 if (isTouchDevice) { 31 $('body').addClass('is-touchable'); 32 } 33 34 /* =================================== 35 Don't change variables value 36 ====================================== */ 37 38 var lastScroll = 0, 39 simpleDropdown = 0, 40 linkDropdown = 0, 41 isotopeObjs = [], 42 swiperObjs = []; 43 var windowScrollTop = window.pageYOffset || document.documentElement.scrollTop; 44 45 /* =================================== 46 Check for browser OS 47 ====================================== */ 48 49 var isMobile = false, 50 isiPhoneiPad = false, 51 isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); 52 53 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 54 isMobile = true; 55 } 56 57 if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) { 58 isiPhoneiPad = true; 59 } 60 61 /* =================================== 62 jQuery appear 63 ====================================== */ 64 65 $('.vertical-counter, .counter, .progress-bar, .pie-chart-style-01, .attractive-hover, .splitting-animation, .section-dark, footer, [data-anime], [data-fancy-text]').each(function () { 66 $(this).appear().trigger('resize'); 67 }); 68 69 initScrollNavigate(); 70 slideboxstyle(); 71 animateCounters(); 72 setSpaceInTeamStyle(); 73 setSpaceInInteractiveBannerStyle(); 74 setOverLayerPosition(); 75 setBottomOverLayerPosition(2000); 76 setupSwiper(); 77 78 /* =================================== 79 Header 80 ====================================== */ 81 82 // Mobile menu - modern style 83 var mobileStyle = $('body').attr('data-mobile-nav-style'); 84 if ((mobileStyle == 'modern' || mobileStyle == 'full-screen-menu') && !$('.navbar-' + mobileStyle + '-inner').length) { 85 if (!$('.box-layout').length && mobileStyle == 'modern') { 86 $('section, footer').wrapAll('<div class="page-layout"></div>'); 87 } else { 88 $('section').wrapAll('<div class="page-layout"></div>'); 89 } 90 91 $('.navbar .navbar-toggler').clone(true).addClass('navbar-toggler-clone').insertAfter('.page-layout'); 92 $('.navbar .navbar-collapse').clone(true).addClass('navbar-collapse-clone').attr('id', 'navbarNav-clone').insertAfter('.page-layout'); 93 94 $('.navbar-toggler-clone, .navbar-collapse-clone').wrapAll('<div class="navbar-' + mobileStyle + '-inner"></div>'); 95 $('.navbar-toggler').attr('data-target', '#navbarNav-clone').attr('aria-controls', '#navbarNav-clone'); 96 $('.navbar-' + mobileStyle + '-inner').find('.dropdown-toggle').addClass('dropdown-toggle-clone'); 97 if (typeof $.fn.mCustomScrollbar === 'function') { 98 if ($('.navbar-collapse-clone').length) { 99 var scrollOptions = $('.navbar-collapse-clone').attr('data-scroll-options') || '{ "theme": "light" }'; 100 if (typeof (scrollOptions) !== 'undefined' && scrollOptions !== null) { 101 scrollOptions = $.parseJSON(scrollOptions); 102 $('.navbar-collapse-clone').mCustomScrollbar(scrollOptions); 103 } 104 } 105 } 106 if (mobileStyle == 'modern') {
107 $('<div class="navbar-show-modern-bg"></div>').insertAfter('.page-layout'); 108 } 109 } 110 111 // Navbar collapse - classic menu 112 $('.navbar-collapse.collapse').on('show.bs.collapse', function (e) { 113 if (!$('body').hasClass('navbar-collapse-show')) { 114 $('body').addClass('navbar-collapse-show'); 115 $('html').addClass('overflow-hidden'); 116 if ($('body').attr('data-mobile-nav-bg-color') && $('.navbar-modern-inner').length) { 117 var bgColor = $('body').attr('data-mobile-nav-bg-color'); 118 $('.navbar-show-modern-bg').css('background', bgColor); 119 } 120 if ($('body').attr('data-mobile-nav-bg-color') && $('.navbar-full-screen-menu-inner').length) { 121 var bgColor = $('body').attr('data-mobile-nav-bg-color'); 122 $('.navbar-full-screen-menu-inner').css('background', bgColor); 123 } 124 // Set submenu height after opened toggle menu 125 if (getWindowWidth() <= menuBreakPoint) { 126 var windowHeight = getWindowHeight(), 127 headerHeight = getHeaderHeight(); 128 $('header .navbar-collapse').css('max-height', windowHeight - headerHeight); 129 } 130 } else { 131 if ($('.navbar-modern-inner').length) { 132 setTimeout(function () {
133 $('.navbar-show-modern-bg').css('background', ''); 134 }, 600); 135 } 136 if ($('.navbar-full-screen-menu-inner').length) { 137 setTimeout(function () { 138 $('.navbar-full-screen-menu-inner').css('background', ''); 139 }, 600); 140 } 141 } 142 var headerHeight = getHeaderHeight(); 143 var windowHeight = getWindowHeight(); 144 if ($('.navbar-modern-inner').length > 0 || $('.navbar-full-screen-menu-inner').length > 0) { 145 $('.navbar-collapse-clone').css('max-height', windowHeight); 146 } else { 147 $('.navbar-collapse-clone').css('max-height', (windowHeight - headerHeight)); 148 } 149 }).on('hide.bs.collapse', function (e) { 150 if ($('body').hasClass('navbar-collapse-show')) { 151 $('body').removeClass('navbar-collapse-show'); 152 $('html').removeClass('overflow-hidden'); 153 } 154 }); 155 156 // Sub menu collapse event 157 $('.sub-menu.collapse').on('show.bs.collapse', function (e) { 158 var activeMenuId = $(e.target).attr('id'); 159 $('[data-bs-target="#' + activeMenuId + '"]').addClass('show'); 160 $(this).parents('.menu-item').siblings().each(function () { 161 $('.sub-menu.show', this).collapse('hide'); 162 }); 163 stickyKitRecalc(); 164 }).on('hide.bs.collapse', function (e) { 165 var activeMenuId = $(e.target).attr('id'); 166 $('[data-bs-target="#' + activeMenuId + '"]').removeClass('show'); 167 $(e.target).find('.sub-menu.show').collapse('hide'); 168 stickyKitRecalc(); 169 }); 170 171 // Search popup open 172 $(document).on('click', '.search-form-icon', function (e) { 173 e.preventDefault(); 174 $('body').addClass('show-search-popup'); 175 }); 176 177 // Search popup close 178 $(document).on('click', '.search-close', function (e) { 179 e.preventDefault(); 180 $('body').removeClass('show-search-popup'); 181 }); 182 183 // Search validation 184 $(document).on('click', '.search-button', function () { 185 var error = true; 186 var formObj = $(this).parents('form'); 187 formObj.find('input[type=text]').each(function (index) { 188 var _this = $(this), 189 searchVal = _this.val(); 190 if (searchVal === null || searchVal === '') { 191 formObj.find('input:eq(' + index + ')').addClass('search-error'); 192 error = false; 193 } else { 194 formObj.find('input:eq(' + index + ')').removeClass('search-error'); 195 } 196 }); 197 return error; 198 }); 199 200 // Header push menu open 201 $(document).on('click', '.header-push-button .push-button', function () { 202 $('html, body').toggleClass('show-menu'); 203 }); 204 205 // Header push menu close 206 $(document).on('click', '.close-menu', function () { 207 $('html, body').removeClass('show-menu'); 208 // Close left menu 209 $('.sub-menu.show').collapse('hide'); 210 }); 211 212 // Close all left menu submenu 213 $(document).on('click', '#navbar-menu .navbar-toggler', function () { 214 // Close left menu 215 $('.sub-menu.show').collapse('hide'); 216 }); 217 218 // Close on outside area 219 $(document).on('click', 'body', function (e) { 220 // Close all menu 221 if (!($(e.target).closest('.navbar-nav').length || $(e.target).closest('.navbar-full-screen-menu-inner').length)) { 222 setTimeout(function () { 223 $('.navbar-collapse.collapse').collapse('hide'); 224 }, 100); 225 } 226 // Close push menu 227 if (!($(e.target).hasClass('push-button') || $(e.target).closest('.push-button').length || $(e.target).closest('.push-menu').length || $(e.target).closest('.hamburger-menu').length)) { 228 $('html, body').removeClass('show-menu'); 229 } 230 // Close search 231 if (!($(e.target).hasClass('search-form') || $(e.target).closest('.search-form-icon').length || $(e.target).closest('.search-form-box').length)) { 232 $('body').removeClass('show-search-popup'); 233 } 234 // Close dropdown menu, language and cart 235 if (!$(e.target).closest('.navbar-nav').length) { 236 if (!$(e.target).closest('.header-language').length) { 237 // Close language menu 238 $('.header-language').trigger('mouseleave'); 239 $('.header-language').removeClass('show'); 240 $('.header-language').children('.dropdown-menu').removeClass('show'); 241 } 242 if (!$(e.target).closest('.header-cart').length) { 243 // Close cart 244 $('.header-cart').trigger('mouseleave'); 245 $('.header-cart').removeClass('show'); 246 $('.header-cart').children('.dropdown-menu').removeClass('show'); 247 } 248 // Close all dropdown 249 $('.navbar-nav .dropdown').each(function () { 250 var _this = $(this); 251 _this.trigger('mouseleave'); 252 _this.removeClass('show'); 253 _this.children('.dropdown-menu').removeClass('show'); 254 }); 255 } else if ($(e.target).parents('body').find('.header-language.open').length) { 256 // Close language menu 257 $('.header-language').trigger('mouseleave'); 258 $('.header-language').removeClass('show'); 259 $('.header-language').children('.dropdown-menu').removeClass('show'); 260 } else if ($(e.target).parents('body').find('.header-cart.open').length) { 261 // Close cart 262 $('.header-cart').trigger('mouseleave'); 263 $('.header-cart').removeClass('show'); 264 $('.header-cart').children('.dropdown-menu').removeClass('show'); 265 } 266 // Close left-modern-header menu 267 if (!$(e.target).closest('.left-modern-header').length) { 268 $(".left-modern-header").collapse('hide'); 269 } 270 });
271 272 // Close on escape key 273 $(document).on('keydown', function (e) { 274 if (e.keyCode === 27) { 275 // Close all menu 276 $('.navbar-collapse.collapse').collapse('hide'); 277 // Close left menu 278 $('#navbar-menu').collapse('hide'); 279 // Close push menu 280 $('html, body').removeClass('show-menu'); 281 // Close search 282 $('body').removeClass('show-search-popup'); 283 // Close left-modern-header menu 284 $(".left-modern-header").collapse('hide'); 285 } 286 }); 287 288 // Header submenu on hover 289 $('.nav-item.submenu').on('mouseenter touchstart', function (e) { 290 var _this = $(this), 291 colorAttr = $('header nav').attr('data-header-hover'); 292 if (getWindowWidth() > menuBreakPoint) { 293 if ($(e.target).siblings('.dropdown-menu').length) { 294 e.preventDefault(); 295 } 296 if (colorAttr == 'light') { 297 $('header nav').addClass('submenu-light').removeClass('submenu-dark'); 298 } else if (colorAttr == 'dark') { 299 $('header nav').addClass('submenu-dark').removeClass('submenu-light'); 300 } 301 } 302 }).on('mouseleave', function (e) { 303 var _this = $(this); 304 $('header nav').removeClass('submenu-light').removeClass('submenu-dark'); 305 }); 306 307 // Open menu on hover 308 $('.dropdown').on('mouseenter touchstart', function (e) { 309 var _this = $(this); 310 _this.siblings('.dropdown').removeClass('open'); 311 _this.parents('.navbar-nav').siblings('.navbar-nav').find('.dropdown').removeClass('open'); 312 if (getWindowWidth() >= menuBreakPoint) { 313 if (_this.hasClass('open') && _this[0] == $(e.target).parent()[0]) { 314 let href = $(_this).find('.nav-link').attr('href'); 315 if (href != 'undefined' && href.indexOf('javascript') === -1 && typeof undefined !== typeof href && href != '#') { 316 window.location.href = href; 317 } 318 } 319 } 320 _this.addClass('open'); 321 menuPosition(_this); 322 if (getWindowWidth() > menuBreakPoint) { 323 if ($(e.target).siblings('.dropdown-menu').length) { 324 e.preventDefault(); 325 } 326 // Header color remove click on simple dropdown menu 327 if ($(e.target).hasClass('simple-dropdown') || $(e.target).closest('.simple-dropdown').length) { 328 $('header nav').removeClass('submenu-light').removeClass('submenu-dark'); 329 } 330 } 331 }).on('mouseleave', function (e) { 332 var _this = $(this); 333 _this.removeClass('menu-left'); 334 _this.removeClass('open'); 335 }); 336 337 // Add active class to current menu 338 var pgurl = window.location.href.substr(window.location.href.lastIndexOf('/') + 1); 339 var $hash = window.location.hash.substring(1); 340 if ($hash) { 341 $hash = '#' + $hash; 342 pgurl = pgurl.replace($hash, ''); 343 } else { 344 pgurl = pgurl.replace('#', ''); 345 } 346 $('.navbar-nav li a, .menu-item-list a').each(function () { 347 var _this = $(this), 348 aHref = _this.attr('href'); 349 if (aHref === pgurl || aHref === pgurl + '.html') { 350 _this.parent().addClass('active'); 351 _this.parents('li.dropdown').addClass('active'); 352 _this.parents('li.menu-item').addClass('active'); 353 } 354 }); 355 356 // Sticky left menu 357 if ($.fn.stick_in_parent !== undefined && $.fn.stick_in_parent !== null) { 358 if ($('.left-sidebar-wrapper').length) { 359 $('.left-sidebar-wrapper .left-sidebar-nav').stick_in_parent({ 360 recalc: 1 361 }); 362 } 363 } 364 if (typeof $.fn.smoothScroll === 'function') { 365 if ($('.header-reverse').length > 0) { 366 $('.inner-link').smoothScroll({ 367 speed: 800, 368 offset: -59, 369 beforeScroll: function () { 370 if ($('body').hasClass('left-menu-onepage')) { 371 $('.left-modern-header').collapse('hide'); 372 } 373 $('.navbar-collapse.collapse').collapse('hide'); 374 } 375 }); 376 } else { 377 if ($('.inner-link').length > 0) { 378 var offset = 0 379 if ($('nav.navbar').hasClass('disable-fixed')) { 380 offset = 1; 381 } 382 383 if ($('.left-modern-menu').hasClass('left-menu-onepage')) { 384 if (getWindowWidth() <= menuBreakPoint) { 385 offset = -59; 386 } 387 } 388 389 $('.inner-link').smoothScroll({
390 speed: 800, 391 offset: offset, 392 beforeScroll: function () { 393 if ($('body').hasClass('left-menu-onepage')) { 394 $('.left-modern-header').collapse('hide'); 395 } 396 397 if ($('body').hasClass('show-menu')) { 398 $('html, body').removeClass('show-menu'); 399 } 400 $('.navbar-collapse.collapse').collapse('hide'); 401 } 402 }); 403 } 404 } 405 406 // Section link 407 if ($('.section-link').length > 0) { 408 $('.section-link').smoothScroll({ 409 speed: 900, 410 offset: 1, 411 beforeScroll: function () { 412 $('.navbar-collapse.collapse').collapse('hide'); 413 } 414 }); 415 } 416 } 417 418 $('.modern-side-menu .menu-item').on('click', function () { 419 $('.modern-side-menu .menu-item').removeClass('active'); 420 $(this).addClass('active'); 421 }); 422 423 // Get top space header height 424 function getHeaderHeight() { 425 var headerHeight = 0; 426 if ($('.header-top-bar').length) { 427 headerHeight = headerHeight + $('.header-top-bar').outerHeight(); 428 } 429 if ($('header nav.navbar').length) { 430 headerHeight = headerHeight + $('header nav.navbar').outerHeight(); 431 } 432 if ($('.left-modern-header .left-modern-sidebar').length) { 433 headerHeight = headerHeight + $('.left-modern-header .left-modern-sidebar').outerHeight(); 434 } 435 return headerHeight; 436 } 437 438 // Get top space height 439 function setTopSpaceHeight() { 440 441 if (!$('header').hasClass('sticky') && ($('.top-space-margin').length || $('.top-space-padding').length) || $('.ipad-top-space-margin').length) { 442 var headerHeight = getHeaderHeight(); 443 if ($('.top-space-margin').length) { 444 $('.top-space-margin').css('margin-top', headerHeight); 445 } 446 if ($('.top-space-padding').length) { 447 $('.top-space-padding').css('padding-top', headerHeight); 448 } 449 if ($('.ipad-top-space-margin').length) { 450 if (getWindowWidth() <= menuBreakPoint) { 451 $('.ipad-top-space-margin').css('margin-top', headerHeight); 452 } else { 453 $('.ipad-top-space-margin').css('margin-top', 'inherit'); 454 } 455 } 456 } 457 } 458 459 // Menu position 460 function menuPosition(element) { 461 var windowWidth = getWindowWidth(); 462 if (element.hasClass('simple-dropdown')) { 463 simpleDropdown = element; 464 linkDropdown = element.find('a.nav-link'); 465 var menuSpacing = 30, 466 menuLeftPosition = element.offset().left, 467 menuWidth = element.children('.dropdown-menu').outerWidth(), 468 menuDropdownCSS = (windowWidth - menuSpacing) - (menuLeftPosition + menuWidth); 469 if (menuDropdownCSS < 0) { 470 element.children('.dropdown-menu').css('left', menuDropdownCSS); 471 } 472 } 473 if (element.parent().hasClass('dropdown-menu') && element.parents('.simple-dropdown')) { 474 var dropdownWidth = 0, 475 maxValueInArray = 0, 476 lastValue = 0, 477 multiDepth = 0; 478 dropdownWidth = element.outerWidth() - linkDropdown.outerWidth(); 479 element.children('.dropdown-menu').each(function () { 480 var arr = []; 481 if (element.find('li').hasClass('dropdown')) { 482 dropdownWidth = dropdownWidth + element.outerWidth(); 483 element.find('li.dropdown').each(function () { 484 var dropdownMenu = element.closest('.dropdown-menu'); 485 arr.push(dropdownMenu.outerWidth()); 486 }); 487 maxValueInArray = lastValue + Math.max.apply(Math, arr);
488 lastValue = maxValueInArray; 489 dropdownWidth = dropdownWidth + maxValueInArray; 490 multiDepth = multiDepth + 1; 491 } else if (multiDepth < 1) { 492 dropdownWidth = dropdownWidth + element.outerWidth(); 493 } 494 }); 495 var menuRightPosition = windowWidth - (simpleDropdown.offset().left + simpleDropdown.outerWidth()); 496 if (dropdownWidth > menuRightPosition) { 497 if (element.find('.dropdown-menu').length > 0) { 498 var menuTopPosition = element.position().top, 499 submenuObj = element.find('.dropdown-menu'), 500 submenuHeight = submenuObj.outerHeight(), 501 totalHeight = menuTopPosition + submenuHeight + getHeaderHeight(), 502 windowHeight = getWindowHeight(); 503 if (totalHeight > windowHeight) { 504 submenuObj.css('top', '-' + (totalHeight - windowHeight) + 'px'); 505 } 506 } 507 element.addClass('menu-left'); 508 } 509 } 510 } 511 512 // Recalculate sticky kit 513 function stickyKitRecalc() { 514 if ($('.left-sidebar-wrapper').length) { 515 setTimeout(function () { 516 $('.left-sidebar-wrapper').trigger('sticky_kit:recalc'); 517 }, 500); 518 } 519 } 520 521 // Without link 522 $('.nav-item .nav-link').on('click',function(e) { 523 var submenuLenth = $(this).closest('.dropdown').find('.dropdown').length; 524 525 if ( $( window ).width() < 992 && $(this).closest('.dropdown').length > 0 ) { 526 var HasClass = $(this).closest('.nav-item').find( '.dropdown-menu' ).hasClass ('show'); 527 if ($(this).closest('.nav-item').find( '.dropdown-menu' ).hasClass ('show')) { 528 $(this).closest('.nav-item').find( '.dropdown-menu' ).removeClass('show') 529 $(this).closest('.nav-item').find( '.dropdown-toggle' ).removeClass('show') 530 } 531 else{ 532 $( '.navbar-nav' ).find( '.dropdown-menu' ).removeClass('show'); 533 $( '.navbar-nav' ).find( '.dropdown-toggle' ).removeClass('show'); 534 $(this).closest('.nav-item').find( '.dropdown-menu' ).addClass('show') 535 $(this).closest('.nav-item').find( '.dropdown-toggle' ).addClass('show') 536 } 537 } 538 }); 539 540 $(window).resize( function () { 541 if ( $( window ).width() > 991 ) { 542 $( '.navbar-nav' ).find( '.dropdown-menu' ).removeClass('show'); 543 $( '.navbar-nav' ).find( '.dropdown-toggle' ).removeClass('show'); 544 } 545 }); 546 547 /* =================================== 548 Custom scrollbar 549 ====================================== */ 550 551 if (typeof $.fn.mCustomScrollbar === 'function') { 552 $('[data-scroll-options]').each(function () { 553 var _this = $(this); 554 var scrollOptions = _this.data('scroll-options') || '{"theme": "dark"}'; 555 556 try { 557 _this.mCustomScrollbar(scrollOptions); 558 } catch (error) { 559 console.error('Error parsing scroll options:', error); 560 } 561 }); 562 } 563 564 /* =================================== 565 Portfolio 566 ====================================== */ 567 568 // Portfolio isotope filter 569 if (typeof imagesLoaded === 'function') { 570 $('.portfolio-wrapper, .shop-wrapper').each(function () { 571 var _this = $(this); 572 _this.imagesLoaded(function () { 573 _this.removeClass('grid-loading'); 574 if (typeof $.fn.isotope === 'function') { 575 var _thisIsotop = _this.isotope({ 576 layoutMode: 'masonry', 577 itemSelector: '.grid-item', 578 percentPosition: true, 579 stagger: 0, 580 masonry: { 581 columnWidth: '.grid-sizer', 582 } 583 }); 584 } 585 isotopeObjs.push(_this); 586 587 // Filter default on load 588 if (typeof $.fn.isotope === 'function') { 589 var currentPortfolioActive = $('.portfolio-filter > li.active > a').attr('data-filter'); 590 if (currentPortfolioActive != '' && currentPortfolioActive != undefined) { 591 _this.isotope({filter: currentPortfolioActive}); 592 } 593 } 594 }); 595 596 _this.on('arrangeComplete', function () { 597 reInitSkrollr(); 598 }); 599 600 $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) { 601 _this.isotope({transitionDuration: 0}); 602 }); 603 }); 604 } 605 606 $(document).on('click', '.portfolio-filter > li > a', function () { 607 var _this = $(this), 608 parentSectionObj = _this.parents('section'); 609 parentSectionObj.find('.portfolio-filter > li').removeClass('active'); 610 _this.parent().addClass('active'); 611 var selector = _this.attr('data-filter'), 612 portfolioFilter = parentSectionObj.find('.portfolio-wrapper'); 613 614 portfolioFilter.find('.grid-item[data-anime]').addClass('appear'); 615 if (typeof portfolioFilter.isotope === 'function') { 616 portfolioFilter.isotope({filter: selector}); 617 } 618 619 if (parentSectionObj.length && $(parentSectionObj).hasClass('overlap-height')) { 620 setOverLayerPosition(); 621 } 622 623 return false; 624 });
625 626 // Reset isotope loop 627 function resetIsotopeLayoutLoop(isotopeObjs, removeAnimation) { 628 for (var i = 0; i < isotopeObjs.length; i++) { 629 if (isotopeObjs[i].data('isotope')) { 630 isotopeObjs[i].isotope('layout'); 631 } 632 } 633 ; 634 } 635 636 // Horizontal portfolio 637 const ThreeDLetterMenuEffect = () => { 638 $(".threeD-letter-menu .menu-item").each(function () { 639 let _self = this, 640 MenuLink = _self.querySelector(".menu-item-text"), 641 MenuText = MenuLink.querySelector("span"), 642 imgHeight = _self.querySelector(".hover-reveal").clientHeight, 643 imgWidth = _self.querySelector(".hover-reveal").clientWidth, 644 windowHeight = window.innerHeight, 645 windowWidth = window.innerWidth; 646 647 MenuLink.innerHTML = `<span>${MenuText.innerHTML}</span><span class="clone">${MenuText.innerHTML}</span>` 648 649 MenuLink.querySelectorAll("span").forEach(function (item) { 650 item.setAttribute("data-splitting", true); 651 Splitting(); 652 }); 653 654 _self.addEventListener("mouseenter", function () { 655 anime({ 656 targets: _self.querySelector(".hover-reveal"), 657 opacity: [0, 1], 658 duration: 1000, 659 easing: "easeOutQuad" 660 }) 661 662 anime({ 663 targets: _self.querySelector(".hover-reveal__inner"), 664 scale: [0.5, 1], 665 easing: "easeOutQuad" 666 }) 667 668 anime({ 669 targets: _self.querySelector(".hover-reveal__img"), 670 scale: [2, 1], 671 easing: "easeOutQuad" 672 }) 673 }) 674 675 _self.addEventListener("mouseleave", function () { 676 anime({ 677 targets: _self.querySelector(".hover-reveal"), 678 opacity: 0, 679 duration: 1000, 680 easing: "easeOutQuad" 681 }) 682 683 anime({ 684 targets: _self.querySelector(".hover-reveal__inner"), 685 scale: [1, 0.5], 686 easing: "easeOutQuad" 687 }) 688 689 anime({ 690 targets: _self.querySelector(".hover-reveal__img"), 691 scale: [1, 2], 692 easing: "easeOutQuad" 693 }) 694 }) 695 696 if (typeof TweenLite !== "undefined") { 697 document.addEventListener("mousemove", function (e) { 698 let posX = e.clientX + 20, 699 posY = e.clientY + 20; 700 701 TweenLite.to(_self.querySelector(".hover-reveal"), .6, { 702 x: posX + imgWidth > windowWidth ? e.clientX - imgWidth : posX, 703 y: posY + imgHeight > windowHeight ? e.clientY - imgHeight : posY, 704 }) 705 }) 706 } 707 }); 708 } 709 ThreeDLetterMenuEffect(); 710 711 // Minimal portfolio 712 const sticky_container = document.querySelector(".sticky-image-distortion-wrapper"); 713 if (typeof (sticky_container) != 'undefined' && sticky_container != null) { 714 let winsize; 715 const calcWinsize = () => winsize = {width: window.innerWidth, height: window.innerHeight}; 716 calcWinsize(); 717 window.addEventListener('resize', calcWinsize); 718 719 class Menu { 720 constructor() { 721 this.DOM = { 722 menu: document.querySelector('.sticky-image-distortion-wrapper nav.menu') 723 }; 724 this.DOM.menuLinks = [...this.DOM.menu.querySelectorAll('.menu__link')]; 725 this.mousePos = {x: winsize.width / 2, y: winsize.height / 2}; 726 this.lastMousePos = { 727 translation: {x: winsize.width / 2, y: winsize.height / 2}, 728 displacement: {x: 0, y: 0} 729 }; 730 this.dmScale = 0; 731 this.current = -1; 732 this.initEvents(); 733 requestAnimationFrame(() => this.render()); 734 } 735 736 initEvents() { 737 document.body.style.setProperty('--body-bgcolor', this.DOM.menuLinks[0].getAttribute("data-bg")) 738 let active_item; 739 this.DOM.menuLinks.forEach((item, i) => { 740 let imgPath = item.getAttribute('data-img'); 741 let bgColor = item.getAttribute('data-bg'); 742 item.querySelector(".svg-wrapper").innerHTML = ` 743 <svg class="distort" width="960" height="980" viewBox="0 0 960 980"> 744 <filter id="distortionFilter${i}"> 745 <feTurbulence type="fractalNoise" baseFrequency="0.01 0.003" numOctaves="5" seed="2" stitchTiles="noStitch" x="0%" y="0%" width="100%" height="100%" result="noise"/> 746 <feDisplacementMap in="SourceGraphic" in2="noise" scale="0" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" filterUnits="userSpaceOnUse"/> 747 </filter>
748 <g filter="url(#distortionFilter${i})"> 749 <image class="distort__img" x="80" y="0" xlink:href="${imgPath}" height="980" width="960" /> 750 </g> 751 </svg> 752 ` 753 const displaceMentEl = [...item.querySelectorAll('feDisplacementMap')] 754 item.addEventListener('mouseenter', (e) => { 755 item.closest(".menu").childNodes.forEach(item => item.classList && item.classList.remove("active")) 756 item.classList.add("active"); 757 if (typeof TweenMax !== 'undefined' && typeof TweenMax !== null) { 758 if (item !== active_item) { 759 TweenMax.fromTo(displaceMentEl, 1.2, {attr: {scale: 50}}, {attr: {scale: 0.3}}); 760 } 761 } 762 document.body.style.setProperty('--body-bgcolor', bgColor) 763 active_item = item; 764 }); 765 766 item.addEventListener('mouseleave', (e) => { 767 active_item = item; 768 }) 769 }); 770 } 771 render() { 772 requestAnimationFrame(() => this.render()); 773 } 774 } 775 776 new Menu(); 777 } 778 779 /* =================================== 780 Blog 781 ====================================== */ 782 783 // Blog isotope filter 784 if (typeof imagesLoaded === 'function') { 785 $('.blog-wrapper').each(function () { 786 var _this = $(this); 787 _this.imagesLoaded(function () { 788 _this.removeClass('grid-loading'); 789 if (typeof $.fn.isotope === 'function') { 790 _this.isotope({ 791 layoutMode: 'masonry', 792 itemSelector: '.grid-item', 793 percentPosition: true, 794 stagger: 0, 795 masonry: { 796 columnWidth: '.grid-sizer', 797 } 798 }); 799 } 800 isotopeObjs.push(_this); 801 var currentBlogActive = $('.blog-filter > li.active > a').attr('data-filter'); 802 if (currentBlogActive != '' && currentBlogActive != undefined) { 803 _this.isotope({filter: currentBlogActive}); 804 } 805 }); 806 }); 807 } 808 809 // INICIO Blog isotope filter - por Johana Arrieta por problema con noticias Relacionadas 23 Abril 2025 810 /* 811 PRUEBA 1 812 if (typeof imagesLoaded === 'function') { 813 $('.blog-wrapper').each(function () { 814 var _this = $(this); 815 816 // Verificamos si contiene al menos una .grid-item antes de aplicar imagesLoaded 817 if (_this.find('.grid-item').length > 0) { 818 _this.imagesLoaded(function () { 819 _this.removeClass('grid-loading'); 820 if (typeof $.fn.isotope === 'function') { 821 _this.isotope({ 822 layoutMode: 'masonry', 823 itemSelector: '.grid-item', 824 percentPosition: true, 825 stagger: 0, 826 masonry: { 827 columnWidth: '.grid-sizer', 828 } 829 }); 830 } 831 isotopeObjs.push(_this); 832 var currentBlogActive = $('.blog-filter > li.active > a').attr('data-filter'); 833 if (currentBlogActive != '' && currentBlogActive != undefined) { 834 _this.isotope({filter: currentBlogActive}); 835 } 836 }); 837 } else { 838 // Si no hay .grid-item, quitamos el loader por si acaso 839 _this.removeClass('grid-loading'); 840 } 841 }); 842 }}*/ 843 844 /*if (typeof imagesLoaded === 'function') { 845 var $blogWrappers = $('.blog-wrapper'); 846 if ($blogWrappers.length > 0) { 847 $blogWrappers.each(function () { 848 var _this = $(this); 849 850 if (_this.length === 0) return; // Por si acaso 851 852 _this.imagesLoaded() 853 .done(function () { 854 _this.removeClass('grid-loading'); 855 856 if (typeof $.fn.isotope === 'function') { 857 _this.isotope({ 858 layoutMode: 'masonry', 859 itemSelector: '.grid-item', 860 percentPosition: true, 861 stagger: 0, 862 masonry: { 863 columnWidth: '.grid-sizer', 864 } 865 }); 866 867 var currentBlogActive = $('.blog-filter > li.active > a').attr('data-filter'); 868 if (currentBlogActive !== '' && currentBlogActive !== undefined) { 869 _this.isotope({ filter: currentBlogActive }); 870 } 871 } 872 873 isotopeObjs.push(_this); 874 }); 875 }); 876 } 877 }*/ 878 879 880 /* PRUEBA 3if (typeof $.fn.imagesLoaded === 'function') { 881 $('.blog-wrapper').each(function () { 882 var $this = $(this); 883 884 // Validar que $this[0] sea un elemento DOM 885 if ($this.length > 0 && $this[0].nodeType === 1) { 886 $this.imagesLoaded().done(function () { 887 $this.removeClass('grid-loading'); 888 889 if (typeof $.fn.isotope === 'function') { 890 $this.isotope({ 891 layoutMode: 'masonry', 892 itemSelector: '.grid-item', 893 percentPosition: true, 894 stagger: 0, 895 masonry: { 896 columnWidth: '.grid-sizer', 897 } 898 }); 899 900 var currentFilter = $('.blog-filter > li.active > a').attr('data-filter'); 901 if (currentFilter) { 902 $this.isotope({ filter: currentFilter }); 903 } 904 } 905 906 if (typeof isotopeObjs !== 'undefined') { 907 isotopeObjs.push($this); 908 } 909 }); 910 } else { 911 console.warn('imagesLoaded fue llamado sobre un objeto inválido:', $this); 912 } 913 });
914} else { 915 console.warn("imagesLoaded no está disponible."); 916}*/ 917 918/* 919if (typeof $.fn.imagesLoaded === 'function') { 920 $('.blog-wrapper').each(function () { 921 var $this = $(this); 922 923 console.log('Revisando blog-wrapper:', $this); 924 925 if ($this.length > 0 && $this[0].nodeType === 1) { 926 $this.imagesLoaded().done(function () { 927 $this.removeClass('grid-loading'); 928 929 if (typeof $.fn.isotope === 'function') { 930 $this.isotope({ 931 layoutMode: 'masonry', 932 itemSelector: '.grid-item', 933 percentPosition: true, 934 stagger: 0, 935 masonry: { 936 columnWidth: '.grid-sizer', 937 } 938 }); 939 940 var currentFilter = $('.blog-filter > li.active > a').attr('data-filter'); 941 if (currentFilter) { 942 $this.isotope({ filter: currentFilter }); 943 } 944 } 945 946 if (typeof isotopeObjs !== 'undefined') { 947 isotopeObjs.push($this); 948 } 949 }); 950 } else { 951 console.warn('Elemento no válido para imagesLoaded:', $this); 952 } 953 }); 954} else { 955 console.warn("imagesLoaded no está disponible."); 956}---- 957 958 959$('.blog-wrapper').each(function () { 960 console.log("Encontrado contenedor:", this); 961 console.log("Contiene imágenes:", $(this).find('img').length); 962});*/ 963 964 965 966 // FIN Blog isotope filter - por Johana Arrieta por problema con noticias Relacionadas 23 Abril 2025 967 968 969 970 $(document).on('click', '.blog-filter > li > a', function () { 971 var _this = $(this), 972 parentSectionObj = _this.parents('section'); 973 parentSectionObj.find('.blog-filter > li').removeClass('active'); 974 _this.parent().addClass('active'); 975 var selector = _this.attr('data-filter'), 976 blogFilter = parentSectionObj.find('.blog-wrapper'); 977 blogFilter.find('.grid-item[data-anime]').addClass('appear'); 978 blogFilter.isotope({filter: selector}); 979 return false; 980 }); 981 982 // blog hover box 983 $('.box-hover').on('mouseenter', function (e) { 984 $(this).find('.hover-text').slideDown(400); 985 }).on('mouseleave', function (e) { 986 $(this).find('.hover-text').slideUp(400); 987 }); 988 989 /* =================================== 990 Image gallery 991 ====================================== */ 992 993 // Image gallery isotope filter 994 if (typeof imagesLoaded === 'function') { 995 $('.gallery-wrapper').each(function () { 996 var _this = $(this); 997 _this.imagesLoaded(function () { 998 _this.removeClass('grid-loading'); 999 if (typeof $.fn.isotope === 'function') { 1000 _this.isotope({ 1001 layoutMode: 'masonry', 1002 itemSelector: '.grid-item', 1003 percentPosition: true, 1004 stagger: 0, 1005 masonry: { 1006 columnWidth: '.grid-sizer', 1007 } 1008 }); 1009 } 1010 isotopeObjs.push(_this); 1011 }); 1012 }); 1013 } 1014 1015 // Group gallery light box 1016 if (typeof $.fn.magnificPopup === 'function') { 1017 var lightboxgallerygroups = {}; 1018 $('.portfolio-box [data-group], .gallery-box [data-group]').each(function () { 1019 var id = $(this).attr('data-group'); 1020 if (!lightboxgallerygroups[id]) { 1021 lightboxgallerygroups[id] = []; 1022 } 1023 lightboxgallerygroups[id].push(this); 1024 }); 1025 $.each(lightboxgallerygroups, function () { 1026 $(this).magnificPopup({ 1027 type: 'image', 1028 closeOnContentClick: true, 1029 closeBtnInside: false, 1030 gallery: {enabled: true} 1031 }); 1032 }); 1033 } 1034 1035 /* =================================== 1036 Justified gallery 1037 ====================================== */ 1038 if (typeof imagesLoaded === 'function') { 1039 if ($('.justified-gallery').length) { 1040 $('.justified-gallery').each(function () { 1041 var _this = $(this), 1042 justifiedOptions = _this.attr('data-justified-options') || '{ "rowHeight": 400, "maxRowHeight": false, "captions": true, "margins": 10, "waitThumbnailsLoad": true }'; 1043 if (typeof $.fn.justifiedGallery !== 'undefined') { 1044 if (typeof (justifiedOptions) !== 'undefined' && justifiedOptions !== null) { 1045 _this.imagesLoaded(function () { 1046 justifiedOptions = $.parseJSON(justifiedOptions); 1047 _this.justifiedGallery(justifiedOptions); 1048 }); 1049 } 1050 } 1051 }); 1052 } 1053 } 1054 1055 /* =================================== 1056 Accordion 1057 ====================================== */ 1058 1059 $('.accordion').each(function () { 1060 var _this = $(this), 1061 activeIconClass = _this.attr('data-active-icon') || '', 1062 inactiveIconClass = _this.attr('data-inactive-icon') || ''; 1063 $('.collapse', this).on('show.bs.collapse', function () { 1064 var id = $(this).attr('id'); 1065 $('a[data-bs-target="#' + id + '"]').closest('.accordion-header').parent('.accordion-item').addClass('active-accordion'); 1066 $('a[data-bs-target="#' + id + '"] i').addClass(activeIconClass).removeClass(inactiveIconClass); 1067 }).on('hide.bs.collapse', function () { 1068 var id = $(this).attr('id'); 1069 $('a[data-bs-target="#' + id + '"]').closest('.accordion-header').parent('.accordion-item').removeClass('active-accordion'); 1070 $('a[data-bs-target="#' + id + '"] i').addClass(inactiveIconClass).removeClass(activeIconClass); 1071 }); 1072 });
1073 1074 // Accordion on checkout page 1075 $('.checkout-accordion label input').on('click', function (e) { 1076 var collapseId = $(this).parent().find('a').attr('href'); 1077 if ($(this).prop("checked")) { 1078 $(collapseId).collapse('show'); 1079 } else { 1080 $(collapseId).collapse('hide'); 1081 } 1082 }); 1083 1084 /* =================================== 1085 Progress bar 1086 ====================================== */ 1087 1088 if ($('.progress-bar').length) { 1089 $(document).on('appear', '.progress-bar', function (e) { 1090 if (!$(this).hasClass('appear')) { 1091 $(this).addClass('appear'); 1092 var total = $(this).attr('aria-valuenow'), delay = 300; 1093 $(this).animate({'width': total + '%'}, { 1094 duration: delay, 1095 easing: "swing", 1096 progress: function (animation, progress, msRemaining) { 1097 var counter = parseInt(total * progress); 1098 $(this).find('span').html(counter + '%'); 1099 } 1100 }); 1101 } 1102 }); 1103 } 1104 1105 $('[data-tab="review-tab"]').on('shown.bs.tab', function (e) { 1106 $('.progress-bar').each(function () { 1107 $(this).appear().trigger('resize'); 1108 }); 1109 }); 1110 1111 /* =================================== 1112 Pie charts 1113 ====================================== */ 1114 1115 // Pie charts style 01 1116 if ($('.pie-chart-style-01').length) { 1117 if (typeof $.fn.easyPieChart === 'function') { 1118 var color1, color2; 1119 $(document.body).on('appear', '.pie-chart-style-01', function (e) { 1120 $('.pie-chart-style-01').easyPieChart({ 1121 trackColor: '#232323', 1122 scaleColor: "", 1123 lineCap: 'round', 1124 lineWidth: 10, 1125 size: 180, 1126 barColor: function () { 1127 color1 = $(this.el).attr('data-start-color') || $(this.el).attr('data-bar-color') || "#000"; 1128 color2 = $(this.el).attr('data-end-color') || $(this.el).attr('data-bar-color') || "#000"; 1129 var ctx = this.renderer.getCtx(); 1130 var canvas = this.renderer.getCanvas(); 1131 var gradient = ctx.createLinearGradient(0, 0, canvas.width, 270); 1132 gradient.addColorStop(0.2, color1); 1133 gradient.addColorStop(0, color2); 1134 return gradient; 1135 }, 1136 animate: { 1137 duration: 2000, 1138 enabled: true 1139 }, 1140 onStep: function (from, to, percent) { 1141 $(this.el).find('.percent').text(Math.round(percent) + '%'); 1142 } 1143 }); 1144 }); 1145 } 1146 } 1147 1148 /* =================================== 1149 Mousetip on mouse move 1150 ====================================== */ 1151 1152 if (!isMobile) { 1153 $(document).on('mousemove', '.mousetip-wrapper', function (e) { 1154 var mouseX = e.pageX - $(this).offset().left + 20; 1155 var mouseY = e.pageY - $(this).offset().top + 20; 1156 $(this).find('.caption').show().css({ 1157 top: mouseY, left: mouseX 1158 }); 1159 }); 1160 } 1161 1162 /* =================================== 1163 Counter 1164 ====================================== */ 1165 1166 // Vertical counter 1167 $('.vertical-counter').each(function () { 1168 var _this = $(this), 1169 counterValue = _this.attr('data-to'), 1170 individualValue = counterValue.toString().split(''), 1171 valueLength = counterValue.length; 1172 1173 // Adding the div.vertical-counter-number in div.counter multiple(valueLength) times 1174 for (var i = 0; i < valueLength; i++) { 1175 _this.append('<span class="vertical-counter-number"><ul><li>0</li><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></span>'); 1176 } 1177 1178 // Adding the individual data-to in each div.vertical-counter-number 1179 _this.find('.vertical-counter-number').each(function (index) { 1180 $(this).attr('data-to', individualValue[index]); 1181 }); 1182 });
1183 1184 // Vertical counter on jQuery appear 1185 if ($('.vertical-counter').length) { 1186 1187 function calculateHeight() { 1188 $('.vertical-counter').each(function () { 1189 var _this = $(this), 1190 divHeight = _this.find('.vertical-counter-number').find('li').height(); 1191 1192 $(this).height(divHeight); 1193 }); 1194 } 1195 1196 calculateHeight(); 1197 1198 $(window).resize(function () { 1199 calculateHeight(); 1200 }) 1201 1202 $(document).on('appear', '.vertical-counter', function (e) { 1203 if (!$(this).hasClass('appear')) { 1204 $(this).addClass('appear'); 1205 1206 if ($(window).scrollTop() + getWindowHeight() >= $('.vertical-counter').offset().top) { 1207 $(this).find('.vertical-counter-number').each(function () { 1208 var _this = $(this), 1209 value = _this.attr('data-to'); 1210 if (value <= 9) { 1211 anime({ 1212 targets: this.querySelector('ul'), 1213 translateY: [0, `${-value * 10}%`], 1214 duration: 2000, 1215 easing: 'easeOutCubic' 1216 }); 1217 } 1218 }); 1219 } 1220 } 1221 }); 1222 $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) { 1223 let activeTabPane = $(`${$(this).attr('href')}`); 1224 1225 activeTabPane.find('.vertical-counter').each(function () { 1226 var _this = $(this), 1227 value = _this.attr('data-to'), 1228 divHeight = _this.find('li').height(); 1229 _this.height(divHeight); 1230 1231 if (value <= 9) { 1232 _this.find('ul').css({'transform': 'translateY(-' + value * 10 + '%)'}); 1233 } 1234 }); 1235 }); 1236 } 1237 1238 $('[data-tab="counter"]').on('shown.bs.tab', function (e) { 1239 $('.vertical-counter').each(function () { 1240 $(this).appear().trigger('resize'); 1241 }); 1242 }); 1243 1244 // Counter number reset on jQuery appear 1245 if (typeof $.fn.countTo === 'function' && $('.counter').length) { 1246 $(document).on('appear', '.counter', function (e) { 1247 var _this = $(this); 1248 if (!_this.hasClass('appear')) { 1249 var options = _this.data('countToOptions') || {}; 1250 _this.countTo(options); 1251 _this.addClass('appear'); 1252 } 1253 }); 1254 } 1255 1256 // Counter 1257 function animateCounters() { 1258 $('.counter').each(function (options) { 1259 var _this = $(this); 1260 options = $.extend({}, options || {}, _this.data('countToOptions') || {}); 1261 if (typeof $.fn.countTo === 'function') { 1262 _this.countTo(options); 1263 } 1264 }); 1265 } 1266 1267 /* =================================== 1268 Sliding box 1269 ====================================== */ 1270 1271 function slideboxstyle() { 1272 $('.sliding-box').each(function (index, value) { 1273 var valueObj = $(value), 1274 totalWidth = valueObj.outerWidth(), 1275 slidingLength = valueObj.find('.sliding-box-item').length, 1276 devideRightPadding = parseInt(valueObj.css('padding-right')) / slidingLength, 1277 devideLeftPadding = parseInt(valueObj.css('padding-left')) / slidingLength, 1278 usageWidth = (slidingLength * 30) + 30 + devideRightPadding + devideLeftPadding, 1279 useWidth = totalWidth - usageWidth, 1280 devideLength = slidingLength + 1, 1281 devideWidth = (useWidth / devideLength), 1282 activeWidth = devideWidth * 2; 1283 1284 valueObj.find('.sliding-box-item, .sliding-box-img, .sliding-box-item .sliding-box-content').css('width', devideWidth); 1285 valueObj.find('.sliding-box-item .sliding-box-content').css('left', devideWidth);
1286 valueObj.find('.sliding-box-item.active').css('width', activeWidth); 1287 1288 $(document).on('mouseenter', '.sliding-box .sliding-box-item', function () { 1289 $(this).siblings().removeClass('active'); 1290 $(this).addClass('active'); 1291 valueObj.find('.sliding-box-item, .sliding-box-img, .sliding-box-item .sliding-box-content').css('width', devideWidth); 1292 valueObj.find('.sliding-box-item .sliding-box-content').css('left', devideWidth); 1293 valueObj.find('.sliding-box-item.active').css('width', activeWidth); 1294 }); 1295 }); 1296 } 1297 1298 /* =================================== 1299 Team 1300 ====================================== */ 1301 1302 // Team style 01 1303 function setSpaceInTeamStyle() { 1304 $('.team-style-01').each(function () { 1305 let _this = $(this), 1306 figure = _this.find('figure'), 1307 figcaption = _this.find('figcaption'); 1308 1309 setTimeout(function () { 1310 figure.css({'padding-bottom': figcaption.outerHeight()}); 1311 }, 200); 1312 }); 1313 } 1314 1315 /* =================================== 1316 Interactive banner 1317 ====================================== */ 1318 1319 // Interactive banner style 02 1320 function setSpaceInInteractiveBannerStyle() { 1321 $('.interactive-banner-style-02').each(function () { 1322 let _this = $(this), 1323 figure = _this.find('figure'), 1324 figcaption = _this.find('figcaption'); 1325 1326 setTimeout(function () { 1327 figure.css({'padding-bottom': figcaption.outerHeight()}); 1328 }, 500); 1329 }); 1330 } 1331 1332 /* =================================== 1333 Video 1334 ====================================== */ 1335 1336 // Video player in background 1337 $(document).on('click', '.html-video-play', function () { 1338 var $videoBg = $(this).parents('section').find('.video-bg'); 1339 if ($(this).is('[playing]') === false) { 1340 $videoBg.trigger('play'); 1341 $(this).attr('playing', 'true'); 1342 $(this).parents('section').find('.video-play-icon').addClass('remove-play-icon'); 1343 } else { 1344 1345 $videoBg.trigger('pause'); 1346 $(this).removeAttr('playing'); 1347 $(this).parents('section').find('.video-play-icon').removeClass('remove-play-icon'); 1348 } 1349 }); 1350 1351 // Fit video 1352 if (typeof $.fn.fitVids === 'function') { 1353 $('.fit-videos').fitVids(); 1354 } 1355 1356 /* =================================== 1357 Countdown timer 1358 ====================================== */ 1359 1360 if ($.fn.countdown !== undefined && $.fn.countdown !== null) { 1361 $('.countdown').each(function () { 1362 var _this = $(this); 1363 _this.countdown(_this.attr("data-enddate")).on('update.countdown', function (event) { 1364 _this.html(event.strftime('' + '<div class="counter-container"><div class="countdown-box first"><div class="number">%-D</div><span>Days</span></div>' + '<div class="countdown-box"><div class="number">%H</div><span>Hours</span></div>' + '<div class="countdown-box"><div class="number">%M</div><span>Minutes</span></div>' + '<div class="countdown-box last"><div class="number">%S</div><span>Seconds</span></div></div>')); 1365 }).on('finish.countdown', function (event) { 1366 _this.html(event.strftime('' + '<div class="counter-container"><div class="countdown-box first" data-number="00"><div class="number">00</div><span>Days</span></div>' + '<div class="countdown-box"><div class="number">00</div><span>Hours</span></div>' + '<div class="countdown-box"><div class="number">00</div><span>Minutes</span></div>' + '<div class="countdown-box last"><div class="number">00</div><span>Seconds</span></div></div>')); 1367 }); 1368 }); 1369 } 1370 1371 /* =================================== 1372 Anime - animation library 1373 ====================================== */ 1374 1375 // Anime animation 1376 function animeAnimation(target, options) { 1377 let child = target; 1378 let staggerValue = options.staggervalue || 0; 1379 let delay = options.delay || 0; 1380 let anime_animation = anime.timeline(); 1381 1382 function applyTransitionStyles(elements) { 1383 for (let i = 0; i < elements.length; i++) { 1384 const element = elements[i];
1385 element.style.transition = 'none'; 1386 if (options.willchange) { 1387 element.style.willChange = 'transform'; 1388 } 1389 } 1390 } 1391 1392 if (options.el === "childs") { 1393 child = target.children; 1394 applyTransitionStyles(target.children); 1395 } 1396 1397 if (options.el === "lines") { 1398 function lineSplitting() { 1399 const lines = Splitting({target: target, by: 'lines'}); 1400 const line = lines[0].lines.map(item => item.map(i => i.innerHTML).join(" ")); 1401 target.innerHTML = line.map(item => `<span class="d-inline-flex">${item}</span>`).join(' '); 1402 } 1403 lineSplitting(); 1404 applyTransitionStyles(target.children); 1405 child = target.children; 1406 } 1407 1408 if (options.el === "words") { 1409 function lineSplitting() { 1410 const words = Splitting({target: target, by: 'words'}); 1411 const word = words[0].words.join(" "); 1412 } 1413 lineSplitting(); 1414 applyTransitionStyles(target.children); 1415 child = target.children; 1416 } 1417 1418 if (options.perspective) { 1419 target.style.perspective = `${options.perspective}px`; 1420 } 1421 1422 if (options.willchange) { 1423 target.style.willChange = options.willchange; 1424 } 1425 1426 anime_animation.add({ 1427 targets: child, 1428 ...options, 1429 delay: anime.stagger(staggerValue, {start: delay}), 1430 complete: function () { 1431 if (options.el) { 1432 target.classList.add('anime-child'); 1433 target.classList.add('anime-complete'); 1434 1435 for (let i = 0; i < target.children.length; i++) { 1436 const element = target.children[i]; 1437 element.style.removeProperty('opacity'); 1438 element.style.removeProperty('transform'); 1439 element.style.removeProperty('transition'); 1440 1441 if (target.classList.contains('grid')) { 1442 element.style.transition = 'none'; 1443 } 1444 } 1445 1446 if (options.el === "lines") { 1447 for (let i = 0; i < target.children.length; i++) { 1448 const element = target.children[i]; 1449 element.classList.remove('d-inline-flex'); 1450 element.classList.add('d-inline'); 1451 element.style.willChange = "inherit"; 1452 } 1453 } 1454 } else { 1455 target.classList.add('anime-complete'); 1456 target.style.removeProperty('opacity'); 1457 target.style.removeProperty('transform'); 1458 target.style.removeProperty('transition'); 1459 } 1460 } 1461 }); 1462 } 1463 1464 const $dataAnimeElements = $('[data-anime]:not(.swiper [data-anime])'); 1465 $dataAnimeElements.each(function () { 1466 const $self = $(this); 1467 const animeOptions = $self.data('anime'); 1468 1469 if (animeOptions && getWindowWidth() > animeBreakPoint) { 1470 try { 1471 const effect = animeOptions.effect && animeOptions.effect.toLowerCase(); 1472 1473 $self.on('appear', function () { 1474 if (!$self.hasClass('appear')) { 1475 $self.addClass('appear'); 1476 1477 if (effect === 'slide') { 1478 slideAnimation(this, animeOptions); 1479 } else { 1480 animeAnimation(this, animeOptions); 1481 } 1482 } 1483 1484 if ($self.hasClass('grid')) { 1485 $self.find('.grid-sizer').removeAttr('style'); 1486 } 1487 }); 1488 } catch (error) { 1489 console.error('Error parsing anime options:', error); 1490 } 1491 } else { 1492 $self.removeAttr('data-anime'); 1493 $("body").addClass("no-animation"); 1494 } 1495 });
1496 1497 // Anime text revealer js 1498 const slideAnimation = (target, options) => { 1499 let duration = options.speed ? options.speed : 100, 1500 direction = options.direction ? options.direction : "lr", 1501 delay = options.delay ? options.delay : 0; 1502 1503 target.style.position = 'relative'; 1504 1505 // Create slide panel div 1506 let tmp = document.createElement('div'); 1507 tmp.style.width = tmp.style.height = '100%'; 1508 tmp.style.top = tmp.style.left = 0; 1509 tmp.style.background = options.color ? options.color : '#fff'; 1510 tmp.style.position = 'absolute'; 1511 1512 if (direction === 'lr') { 1513 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '0% 50%'; 1514 tmp.style.WebkitTransform = tmp.style.transform = 'scaleX(0)'; 1515 } else if (direction === 'tb') { 1516 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '50% 0%'; 1517 tmp.style.WebkitTransform = tmp.style.transform = 'scaleY(0)'; 1518 } else if (direction === 'bt') { 1519 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '100% 100%'; 1520 tmp.style.WebkitTransform = tmp.style.transform = 'scaleY(0)'; 1521 } else { 1522 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '100% 50%'; 1523 tmp.style.WebkitTransform = tmp.style.transform = 'scaleX(0)'; 1524 } 1525 target.appendChild(tmp); 1526 1527 // init Anime js. 1528 let slide_anime = anime.timeline(); 1529 slide_anime.add({ 1530 targets: tmp, 1531 scaleX: (direction === 'lr' || direction === 'rl') ? [0, 1] : [1, 1], 1532 scaleY: (direction === 'tb' || direction === 'bt') ? [0, 1] : [1, 1], 1533 duration: duration + 500, 1534 easing: 'easeInOutCubic', 1535 delay: delay, 1536 complete: function () { 1537 if (direction === 'lr') { 1538 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '100% 50%'; 1539 } else if (direction === 'tb') { 1540 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '50% 100%'; 1541 } else if (direction === 'bt') { 1542 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '0% 0%'; 1543 } else { 1544 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '0% 50%'; 1545 } 1546 1547 anime({ 1548 targets: tmp, 1549 duration: duration + 500, 1550 easing: 'easeInOutCubic', 1551 scaleX: (direction === 'lr' || direction === 'rl') ? [1, 0] : [1, 1], 1552 scaleY: (direction === 'tb' || direction === 'bt') ? [1, 0] : [1, 1], 1553 complete: function () { 1554 target.removeChild(tmp); 1555 if (typeof callback === 'function') { 1556 callback(); 1557 } 1558 } 1559 }); 1560 } 1561 }).add({ 1562 targets: target.querySelector('*'), 1563 easing: 'easeOutQuint', 1564 delay: direction === 'lr' ? anime.stagger(duration, {start: 1000}) : anime.stagger(-duration, {start: 1000}), 1565 opacity: [0, 1] 1566 }, "-=900"); 1567 } 1568 1569 /* =================================== 1570 Fancy text animation 1571 ====================================== */ 1572 1573 // Curved text effect 1574 const curvedTextAnimation = (target, options) => { 1575 let duration = options.duration ? (options.duration <= 2000 ? 2000 : options.duration) : 2000, 1576 content = options.string, 1577 curveText = anime.timeline(); 1578 1579 const lineEq = (y2, y1, x2, x1, currentVal) => { 1580 var m = (y2 - y1) / (x2 - x1), 1581 b = y1 - m * x1; 1582 return m * currentVal + b; 1583 } 1584 1585 curveText.add({ 1586 targets: target.querySelectorAll('.anime-text > .word > .char'), 1587 duration: 800, 1588 easing: 'easeOutElastic', 1589 opacity: 1, 1590 translateY: function (el, index) { 1591 var p = el.parentNode, 1592 lastElOffW = p.lastElementChild.offsetWidth, 1593 firstElOffL = p.firstElementChild.offsetLeft, 1594 w = p.offsetWidth - lastElOffW - firstElOffL - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft), 1595 tyVal = lineEq(0, 100, firstElOffL + w / 2, firstElOffL, el.offsetLeft); 1596 return [Math.abs(tyVal) + '%', '0%']; 1597 }, 1598 rotateZ: function (el, index) { 1599 var p = el.parentNode, 1600 lastElOffW = p.lastElementChild.offsetWidth, 1601 firstElOffL = p.firstElementChild.offsetLeft, 1602 w = p.offsetWidth - lastElOffW - p.firstElementChild.offsetLeft - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft), 1603 rz = lineEq(90, -90, firstElOffL + w, firstElOffL, el.offsetLeft); 1604 return [rz, 0]; 1605 } 1606 }).add({ 1607 targets: target.querySelectorAll('.anime-text > .word > .char'), 1608 duration: 1000, 1609 easing: 'easeInExpo', 1610 opacity: content.length > 1 ? 0 : 1, 1611 translateY: function (el, index) { 1612 var p = el.parentNode, 1613 lastElOffW = p.lastElementChild.offsetWidth, 1614 firstElOffL = p.firstElementChild.offsetLeft, 1615 w = p.offsetWidth - lastElOffW - firstElOffL - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft), 1616 tyVal = lineEq(0, 100, firstElOffL + w / 2, firstElOffL, el.offsetLeft); 1617 return content.length > 1 ? [-Math.abs(tyVal) + '%'] : [Math.abs(tyVal) + '%', '0%']; 1618 }, 1619 rotateZ: function (el, index) { 1620 var p = el.parentNode, 1621 lastElOffW = p.lastElementChild.offsetWidth, 1622 firstElOffL = p.firstElementChild.offsetLeft, 1623 w = p.offsetWidth - lastElOffW - p.firstElementChild.offsetLeft - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft), 1624 rz = lineEq(-90, 90, firstElOffL + w, firstElOffL, el.offsetLeft); 1625 return content.length > 1 ? [rz] : [rz, 0]; 1626 } 1627 }, duration - 1500); 1628 } 1629 1630 // Slide text effect 1631 const slideTextAnimation = (target, options) => { 1632 let current_anime_text = target.querySelectorAll('.anime-text')[0], 1633 speed = options.speed ? options.speed : 100; 1634 1635 current_anime_text.style.position = 'relative'; 1636 1637 // Create slide panel div 1638 let tmp = document.createElement('div'); 1639 tmp.style.width = tmp.style.height = '100%'; 1640 tmp.style.top = tmp.style.left = 0; 1641 tmp.style.background = options.color ? options.color : '#fff'; 1642 tmp.style.position = 'absolute'; 1643 tmp.style.WebkitTransform = tmp.style.transform = 'scaleX(0)'; 1644 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '0% 50%'; 1645 1646 if (options.direction === 'left') { 1647 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '100% 50%'; 1648 } 1649 current_anime_text.appendChild(tmp); 1650 1651 // init Anime js. 1652 let slide_anime = anime.timeline(); 1653 slide_anime.add({ 1654 targets: current_anime_text.querySelectorAll('div'), 1655 scaleX: [0, 1], 1656 duration: speed + 500, 1657 easing: 'easeInOutCubic', 1658 complete: function () { 1659 if (options.direction === 'left') { 1660 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '0% 50%'; 1661 } else { 1662 tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '100% 50%'; 1663 } 1664 1665 anime({ 1666 targets: tmp, 1667 duration: speed + 500, 1668 easing: 'easeInOutCubic', 1669 scaleX: [1, 0], 1670 complete: function () { 1671 current_anime_text.removeChild(tmp); 1672 if (typeof callback === 'function') { 1673 callback(); 1674 } 1675 } 1676 }); 1677 } 1678 }).add({ 1679 targets: target.querySelectorAll('.anime-text > .word > .char'), 1680 easing: 'easeOutQuint', 1681 delay: options.direction === 'left' ? anime.stagger(speed, {start: 1000}) : anime.stagger(-speed, {start: 1000}), 1682 opacity: [0, 1], 1683 translateX: options.direction === 'left' ? [100, 0] : [-100, 0] 1684 }, "-=600"); 1685 } 1686 1687 // Wave text effect 1688 const waveTextAnimation = (target, options) => { 1689 let duration = options.duration ? options.duration : 3000, 1690 direction = options.direction, 1691 content = options.string, 1692 speed = options.speed, 1693 waveText = anime.timeline(); 1694 1695 waveText.add({ 1696 targets: target.querySelectorAll('.anime-text > .word > .char'), 1697 opacity: [0, 1], 1698 translateY: direction === 'down' ? [-20, 0] : [20, 0], 1699 delay: anime.stagger(speed ? speed : 50) 1700 }).add({ 1701 targets: target.querySelectorAll('.anime-text .word .char'), 1702 opacity: content.length > 1 ? [1, 0] : [1, 1], 1703 translateY: content.length > 1 ? (direction === 'down' ? [0, 20] : [0, -20]) : [0, 0], 1704 delay: anime.stagger(speed ? speed : 50, {start: duration - 1500}) 1705 }); 1706 } 1707 1708 // Smooth wave text effect 1709 const smoothWaveTextAnimation = (target, options) => { 1710 let duration = options.duration ? options.duration : 3000, 1711 direction = options.direction, 1712 content = options.string, 1713 speed = options.speed, 1714 smoothWaveText = anime.timeline(); 1715 1716 smoothWaveText.add({ 1717 targets: target.querySelectorAll('.anime-text > .word > .char'), 1718 opacity: [0, 1], 1719 translateY: direction === 'down' ? [-50, 0] : [50, 0], 1720 duration: 500, 1721 easing: 'easeOutQuad', 1722 delay: anime.stagger(speed ? speed : 40, {direction: 'reverse'}), 1723 }).add({ 1724 targets: target.querySelectorAll('.anime-text .word .char'), 1725 opacity: content.length > 1 ? [1, 0] : [1, 1], 1726 translateY: content.length > 1 ? (direction === 'down' ? 50 : -50) : 0, 1727 duration: 500, 1728 easing: 'easeOutQuad', 1729 delay: anime.stagger(speed ? speed : 40, {start: duration - 1000, direction: 'reverse'}) 1730 }); 1731 } 1732 1733 // Rotate text effect 1734 const rotateTextAnimation = (target, options) => { 1735 let duration = options.duration ? options.duration : 3000, 1736 content = options.string, 1737 speed = options.speed, 1738 rotateText = anime.timeline(); 1739 1740 rotateText.add({ 1741 targets: target.querySelectorAll('.anime-text > .word > .char'), 1742 opacity: [0, 1], 1743 rotateX: [-70, 0], 1744 duration: 150, 1745 delay: anime.stagger(speed ? speed : 50), 1746 easing: "linear" 1747 }).add({ 1748 targets: target.querySelectorAll('.anime-text > .word > .char'), 1749 opacity: content.length > 1 ? 0 : 1, 1750 rotateX: content.length > 1 ? [0, 70] : [0, 0], 1751 duration: 150, 1752 delay: anime.stagger(speed ? speed : 50, {start: duration - 1500}), 1753 easing: "linear" 1754 }); 1755 } 1756 1757 // Jump text effect 1758 const jumpTextAnimation = (target, options) => { 1759 let duration = options.duration ? options.duration : 3000, 1760 content = options.string, 1761 speed = options.speed,
1762 delay = options.delay, 1763 movingLetter9 = anime.timeline(); 1764 1765 movingLetter9.add({ 1766 targets: target.querySelectorAll('.anime-text > .word > .char'), 1767 scale: [0, 1], 1768 duration: 1500, 1769 elasticity: 600, 1770 transformOrigin: '50% 100%', 1771 delay: anime.stagger(speed ? speed : 45, {start: delay}) 1772 }).add({ 1773 targets: target.querySelectorAll('.anime-text > .word > .char'), 1774 opacity: content.length > 1 ? 0 : 1, 1775 scale: content.length > 1 ? 0 : 1, 1776 duration: 500, 1777 easing: "easeOutExpo", 1778 delay: anime.stagger(speed ? speed : 45) 1779 }, `+=${duration - 2300}`); 1780 } 1781 1782 // Zoom text effect 1783 const zoomTextAnimation = (target, options) => { 1784 let duration = options.duration ? options.duration : 3000, 1785 content = options.string, 1786 speed = options.speed, 1787 movingLetter2 = anime.timeline(); 1788 1789 movingLetter2.add({ 1790 targets: target.querySelectorAll('.anime-text > .word > .char'), 1791 scale: [4, 1], 1792 opacity: [0, 1], 1793 translateZ: 0, 1794 easing: "easeOutExpo", 1795 duration: 950, 1796 delay: anime.stagger(speed ? speed : 70) 1797 }).add({ 1798 targets: target.querySelectorAll('.anime-text > .word'), 1799 opacity: content.length > 1 ? 0 : 1, 1800 duration: 1000, 1801 easing: "easeOutExpo", 1802 delay: 1000 1803 }, `+=${duration - 2500}`); 1804 } 1805 1806 // Rubber band text effect 1807 const rubberbandTextAnimation = (target, options) => { 1808 let duration = options.duration ? options.duration : 3000, 1809 content = options.string, 1810 speed = options.speed, 1811 direction = options.direction, 1812 rubberband = anime.timeline(); 1813 1814 rubberband.add({ 1815 targets: target.querySelectorAll('.anime-text > .word > .char'), 1816 translateX: direction === "right" ? [-40, 0] : [40, 0], 1817 translateZ: 0, 1818 opacity: [0, 1], 1819 easing: "easeOutExpo", 1820 duration: 1200, 1821 delay: anime.stagger(speed ? speed : 75, {direction: direction === "right" ? 'reverse' : 'normal'}) 1822 }).add({ 1823 targets: target.querySelectorAll('.anime-text > .word > .char'), 1824 translateX: content.length > 1 ? (direction === "left" ? -40 : 40) : 0, 1825 opacity: content.length > 1 ? 0 : 1, 1826 easing: "easeInExpo", 1827 duration: 500, 1828 delay: anime.stagger(speed ? speed : 75, {start: duration - 2500, direction: direction === "right" ? 'reverse' : 'normal'}) 1829 }); 1830 } 1831 1832 // Fade text effect 1833 const fadeTextAnimation = (target, options) => { 1834 let duration = options.duration ? options.duration : 3000, 1835 content = options.string, 1836 speed = options.speed, 1837 fade = anime.timeline(); 1838 1839 fade.add({ 1840 targets: target.querySelectorAll('.anime-text > .word > .char'), 1841 translateY: [100, 0], 1842 translateZ: 0, 1843 opacity: [0, 1], 1844 easing: "easeOutExpo", 1845 delay: anime.stagger(speed ? speed : 30) 1846 }).add({ 1847 targets: target.querySelectorAll('.anime-text > .word > .char'), 1848 translateY: content.length > 1 ? [0, -100] : [0, 0], 1849 opacity: content.length > 1 ? [1, 0] : [1, 1], 1850 easing: "easeInExpo", 1851 delay: anime.stagger(speed ? speed : 40, {start: duration - 3000}) 1852 }); 1853 } 1854 1855 // Fancy text 1856 function FancyTextDefault(item, ftOptions) { 1857 let text_effect = ftOptions.effect, 1858 duration = ftOptions.duration ? ftOptions.duration : 3000, 1859 content = ftOptions.string, 1860 speed = ftOptions.speed, 1861 delay = ftOptions.delay; 1862 1863 if (content) { 1864 item.innerHTML = `<span class="anime-text">${content[0]}</span>`; 1865 item.querySelector('.anime-text').setAttribute('data-splitting', true); 1866 Splitting(); 1867 1868 if (getWindowWidth() > animeBreakPoint) { 1869 switch (text_effect) { 1870 case 'wave': 1871 waveTextAnimation(item, ftOptions); 1872 break; 1873 1874 case 'smooth-wave': 1875 smoothWaveTextAnimation(item, ftOptions); 1876 break; 1877 1878 case 'curve': 1879 curvedTextAnimation(item, ftOptions); 1880 break; 1881 1882 case 'rotate': 1883 rotateTextAnimation(item, ftOptions); 1884 break; 1885 1886 case 'slide': 1887 slideTextAnimation(item, ftOptions); 1888 break; 1889 1890 case 'jump': 1891 jumpTextAnimation(item, ftOptions); 1892 break; 1893 1894 case 'zoom': 1895 zoomTextAnimation(item, ftOptions); 1896 break; 1897 1898 case 'rubber-band': 1899 rubberbandTextAnimation(item, ftOptions); 1900 break; 1901 1902 case 'fade': 1903 fadeTextAnimation(item, ftOptions); 1904 break; 1905 1906 default: 1907 } 1908 1909 if (text_effect === undefined) { 1910 anime({ 1911 targets: item.querySelectorAll('.anime-text > .word > .char'), 1912 ...ftOptions, 1913 delay: anime.stagger(speed ? speed : 0, {start: delay ? delay : 0}) 1914 }) 1915 } 1916 } 1917 1918 if (content.length > 1) { 1919 let counter = 1; 1920 setInterval(function () { 1921 let new_el = document.createElement('span'); 1922 new_el.classList.add('anime-text'); 1923 new_el.innerHTML = content[counter]; 1924 new_el.setAttribute('data-splitting', true); 1925 1926 item.querySelector('.anime-text').replaceWith(new_el); 1927 Splitting(); 1928 counter++; 1929 1930 if (counter === content.length) { 1931 counter = 0; 1932 } 1933 1934 switch (text_effect) { 1935 case 'wave': 1936 waveTextAnimation(item, ftOptions); 1937 break; 1938 1939 case 'smooth-wave': 1940 smoothWaveTextAnimation(item, ftOptions); 1941 break; 1942 1943 case 'curve': 1944 curvedTextAnimation(item, ftOptions); 1945 break; 1946 1947 case 'rotate': 1948 rotateTextAnimation(item, ftOptions); 1949 break; 1950 1951 case 'slide': 1952 slideTextAnimation(item, ftOptions); 1953 break; 1954 1955 case 'jump': 1956 jumpTextAnimation(item, ftOptions); 1957 break; 1958 1959 case 'zoom': 1960 zoomTextAnimation(item, ftOptions); 1961 break; 1962 1963 case 'rubber-band': 1964 rubberbandTextAnimation(item, ftOptions); 1965 break; 1966 1967 case 'fade': 1968 fadeTextAnimation(item, ftOptions); 1969 break; 1970 1971 default: 1972 } 1973 1974 if (text_effect === undefined) { 1975 anime({ 1976 targets: item.querySelectorAll('.anime-text > .word > .char'), 1977 ...ftOptions, 1978 delay: anime.stagger(speed ? speed : 0, {start: delay ? delay : 0}) 1979 }); 1980 } 1981 }, duration); 1982 } 1983 } 1984 } 1985 1986 $('[data-fancy-text]').each(function () { 1987 const _this = $(this); 1988 const ftOptions = _this.data('fancy-text'); 1989 if (ftOptions) { 1990 if (_this.hasClass('swiper-parallax-fancy-text')) { 1991 FancyTextDefault(this, ftOptions); 1992 } else { 1993 _this.on('appear', function () { 1994 if (!_this.hasClass('appear')) { 1995 _this.addClass('appear'); 1996 FancyTextDefault(this, ftOptions); 1997 } 1998 }); 1999 } 2000 } 2001 });
2002 2003 /* =================================== 2004 Instagram feed 2005 ====================================== */ 2006 var instagramWrapperItems = document.querySelectorAll('.instafeed-wrapper'); 2007 instagramWrapperItems.forEach(function (instagramWrapperItem) { 2008 var token = 'IGQWRPSWZAleS1CRk5UR2dqcWhkam5lTFZAQQUxmQU9MLTgzVi11WjYzY0NVSS10UlVSR195aWxMZAnh5cC1OZAUdFUlFLRnV0M0hFR19pcnhXOU1MZAi1UQTYzZAHl2NmVGVzA1ZAE5pZAllHMGdDaFZA5bFBzUzUxeWF2NVkZD', 2009 _this = $(instagramWrapperItem), 2010 token = _this.attr('data-token') || token, 2011 total = _this.attr('data-total') || '6', // how much photos do you want to get 2012 slider = _this.attr('data-slider-options'), 2013 _html = _this.html(), 2014 outputHTML = ''; 2015 if (typeof (slider) !== 'undefined' && slider !== null) { 2016 _this.html(''); 2017 } 2018 $.ajax({ 2019 url: 'https://graph.instagram.com/me/media?fields=id,media_type,media_url,timestamp,permalink&access_token='
2019+ token, 2020 type: 'GET', 2021 success: function (response) { 2022 outputHTML += _this.find('.grid-item').length ? '<li class="grid-sizer"></li>' : ''; 2023 for (var x in response.data) { 2024 if (x < parseInt(total)) { 2025 if (response.data[x]['media_type'] == 'IMAGE' || response.data[x]['media_type'] == 'CAROUSEL_ALBUM') { 2026 console.log('image'); 2027 var link = response.data[x]['permalink'] || '', 2028 image = response.data[x]['media_url'] || '', 2029 likes = response.data[x]['like_count'] || '', 2030 comments = response.data[x]['comments_count'] || '', 2031 output = _html; 2032 2033 output = output.replace(' href="#"', ''); 2034 output = output.replace(' src="#"', ''); 2035 output = output.replace('data-href', 'href'); 2036 output = output.replace('data-src', 'src'); 2037 output = output.replace('{{link}}', link); 2038 output = output.replace('{{image}}', image); 2039 2040 output = output.replace('{{likes}}', likes); 2041 output = output.replace('{{comments}}', comments); 2042 output = output.replace( '{{image-class}}', 'image' ); 2043 outputHTML += output; 2044 2045 }else if( response.data[x]['media_type'] == 'VIDEO' ){ 2046 var link = response.data[x]['permalink'] || '', 2047 video = response.data[x]['media_url'] || ''; 2048 2049 output = output.replace( '{{video}}', video ); 2050 output = output.replace( '{{video-class}}', 'video' ); 2051 outputHTML += output; 2052 } 2053 } 2054 } 2055 _this.html(outputHTML); 2056 if (typeof (slider) !== 'undefined' && slider !== null) { 2057 // Apply swiper 2058 var sliderOptions = $.parseJSON(slider); 2059 var swiperObj = instagramWrapperItem.parentElement; 2060 if (typeof Swiper === 'function') { 2061 new Swiper(swiperObj, sliderOptions); 2062 } 2063 } else { 2064 // Apply isotope 2065 _this.imagesLoaded(function () { 2066 _this.removeClass('grid-loading'); 2067 if (typeof $.fn.isotope === 'function') { 2068 _this.isotope({ 2069 layoutMode: 'masonry', 2070 itemSelector: '.grid-item', 2071 percentPosition: true, 2072 stagger: 0, 2073 masonry: { 2074 columnWidth: '.grid-sizer', 2075 } 2076 }); 2077 } 2078 isotopeObjs.push(_this); 2079 }); 2080 } 2081 }, 2082 error: function (data) { 2083 var output = '<div class="col-12"><span class=text-center>No Images Found</span></div>'; 2084 _this.append(output); 2085 } 2086 }); 2087 }); 2088 2089 /* =================================== 2090 Subscribe popup on page load 2091 ====================================== */ 2092 if (typeof $.fn.magnificPopup === 'function') { 2093 if ($('#subscribe-popup').length > 0) { 2094 let delaySecond = 1.5, 2095 expireDays = 30, 2096 cookieName = 'crafto-promo-popup'; 2097 if (getCookie(cookieName) != 'shown') { 2098 setTimeout(function () { 2099 $.magnificPopup.open({ 2100 showCloseBtn: false, 2101 items: { 2102 src: '#subscribe-popup' 2103 }, 2104 type: 'inline', 2105 mainClass: 'my-mfp-zoom-in', 2106 callbacks: { 2107 close: function () { 2108 if ($('#newsletter-off').is(':checked')) {
2109 setCookie(cookieName, 'shown', expireDays); 2110 } 2111 } 2112 } 2113 }); 2114 }, (delaySecond * 3500)); 2115 } 2116 } 2117 } 2118 2119 /* =================================== 2120 Magnific popup 2121 ====================================== */ 2122 if (typeof $.fn.magnificPopup === 'function') { 2123 // Modal popup 2124 $('.modal-popup').magnificPopup({ 2125 type: 'inline', 2126 preloader: false, 2127 blackbg: true 2128 }); 2129 2130 // Modal popup close 2131 $(document).on('click', '.popup-modal-dismiss', function (e) { 2132 e.preventDefault(); 2133 $.magnificPopup.close(); 2134 }); 2135 2136 // Modal popup - zoom animation 2137 $('.popup-with-zoom-anim').magnificPopup({ 2138 type: 'inline', 2139 fixedContentPos: false, 2140 fixedBgPos: true, 2141 overflowY: 'auto', 2142 closeBtnInside: true, 2143 preloader: false, 2144 midClick: true, 2145 removalDelay: 300, 2146 blackbg: true, 2147 mainClass: 'my-mfp-zoom-in' 2148 }); 2149 2150 // Modal popup - move animation 2151 $('.popup-with-move-anim').magnificPopup({ 2152 type: 'inline', 2153 fixedContentPos: false, 2154 fixedBgPos: true, 2155 overflowY: 'auto', 2156 closeBtnInside: true, 2157 preloader: false, 2158 midClick: true, 2159 removalDelay: 300, 2160 blackbg: true, 2161 mainClass: 'my-mfp-slide-bottom' 2162 }); 2163 2164 // Modal popup - slide up animation 2165 $('.slide-up-animation').magnificPopup({ 2166 type: 'inline', 2167 fixedContentPos: false, 2168 fixedBgPos: true, 2169 overflowY: 'auto', 2170 closeBtnInside: true, 2171 preloader: false, 2172 midClick: true, 2173 removalDelay: 300, 2174 blackbg: true, 2175 mainClass: 'my-mfp-slide-up' 2176 }); 2177 2178 // Popup with form 2179 $('.popup-with-form').magnificPopup({ 2180 type: 'inline', 2181 preloader: false, 2182 fixedContentPos: true, 2183 focus: '#name', 2184 callbacks: { 2185 beforeOpen: function () { 2186 if ($(window).width() < 700) { 2187 this.st.focus = false; 2188 } else { 2189 this.st.focus = '#name'; 2190 } 2191 } 2192 } 2193 }); 2194 2195 // Video magnific popup 2196 $('.popup-youtube, .popup-vimeo, .popup-googlemap').magnificPopup({ 2197 disableOn: 320, 2198 type: 'iframe', 2199 mainClass: 'mfp-fade', 2200 removalDelay: 160, 2201 preloader: false, 2202 fixedContentPos: true, 2203 closeBtnInside: false 2204 }); 2205 2206 // Ajax magnific popup 2207 $('.ajax-popup').magnificPopup({ 2208 type: 'ajax', 2209 alignTop: true, 2210 fixedContentPos: true, 2211 closeBtnInside: false, 2212 overflowY: 'scroll', // as we know that popup content is tall we set scroll overflow by default to avoid jump 2213 callbacks: { 2214 open: function () { 2215 $('.navbar .collapse').removeClass('show'); 2216 $('.navbar a.dropdown-toggle').addClass('collapsed'); 2217 } 2218 } 2219 }); 2220 } 2221 2222 /* =================================== 2223 Contact form validation 2224 ====================================== */ 2225 2226 // Contact form validation on submit 2227 $(document).on('click', '.submit', function () { 2228 var error = false, 2229 _this = $(this), 2230 formObj = _this.parents('form'), 2231 emailFormat = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/, 2232 urlformat = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/, 2233 telFormat = /[0-9 -()+]+$/, 2234 actionURL = formObj.attr('action'), 2235 resultsObj = formObj.find('.form-results'), 2236 grecaptchav3= _this.attr( 'data-sitekey' ) || '', 2237 redirectVal = formObj.find('[name="redirect"]').val(); 2238 formObj.find('.required').removeClass('is-invalid'); 2239 formObj.find('.required').each(function () { 2240 var __this = $(this), 2241 fieldVal = __this.val(); 2242 if (fieldVal == '' || fieldVal == undefined) { 2243 error = true; 2244 __this.addClass('is-invalid'); 2245 } else if (__this.attr('type') == 'email' && !emailFormat.test(fieldVal)) { 2246 error = true; 2247 __this.addClass('is-invalid'); 2248 } else if (__this.attr('type') == 'url' && !urlformat.test(fieldVal)) { 2249 error = true; 2250 __this.addClass('is-invalid'); 2251 } else if (__this.attr('type') == 'tel' && !telFormat.test(fieldVal)) { 2252 error = true; 2253 __this.addClass('is-invalid'); 2254 } 2255 }); 2256 var termsObj = formObj.find('.terms-condition'); 2257 if (termsObj.length) { 2258 if (!termsObj.is(':checked')) { 2259 error = true; 2260 termsObj.addClass('is-invalid'); 2261 } 2262 } 2263 2264 // Google reCaptcha verify 2265 if ( typeof ( grecaptcha ) !== 'undefined' && grecaptcha !== null ) {
2266 if (formObj.find('.g-recaptcha').length) { 2267 var gResponse = grecaptcha.getResponse(); 2268 if (!(gResponse.length)) { 2269 error = true; 2270 formObj.find('.g-recaptcha').addClass('is-invalid'); 2271 } 2272 } else if( grecaptchav3 != '' && grecaptchav3 != undefined ) { // For Version 3 2273 grecaptcha.ready(function() { 2274 grecaptcha.execute(grecaptchav3, {action: 'submit'}).then(function(token) { 2275 }); 2276 }); 2277 } 2278 } 2279 2280 if (!error && actionURL != '' && actionURL != undefined) { 2281 _this.addClass('loading'); 2282 $.ajax({ 2283 type: 'POST', 2284 url: actionURL, 2285 data: formObj.serialize(), 2286 success: function (result) { 2287 _this.removeClass('loading'); 2288 if (redirectVal != '' && redirectVal != undefined) { 2289 window.location.href = redirectVal; 2290 } else { 2291 if (typeof (result) !== 'undefined' && result !== null) { 2292 result = $.parseJSON(result); 2293 } 2294 formObj.find('input[type=text],input[type=url],input[type=email],input[type=tel],input[type=password],textarea').each(function () { 2295 $(this).val(''); 2296 $(this).removeClass('is-invalid'); 2297 }); 2298 formObj.find('.g-recaptcha').removeClass('is-invalid'); 2299 formObj.find('input[type=checkbox],input[type=radio]').prop('checked', false); 2300 if (formObj.find('.g-recaptcha').length) { 2301 grecaptcha.reset(); 2302 } 2303 resultsObj.removeClass('alert-success').removeClass('alert-danger').hide(); 2304 resultsObj.addClass(result.alert).html(result.message); 2305 resultsObj.removeClass('d-none').fadeIn('slow').delay(4000).fadeOut('slow'); 2306 } 2307 } 2308 }); 2309 } 2310 return false; 2311 }); 2312 2313 // Contact form validation on blur 2314 $(document).on('blur', '.required', function () { 2315 var emailFormat = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/, 2316 telFormat = /[0-9 -()+]+$/, 2317 urlformat = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/, 2318 fieldVal = $(this).val(); 2319 if (fieldVal == '' || fieldVal == undefined) { 2320 $(this).addClass('is-invalid'); 2321 } else if ($(this).attr('type') == 'email' && !emailFormat.test(fieldVal)) { 2322 $(this).addClass('is-invalid'); 2323 } else if ($(this).attr('type') == 'url' && !urlformat.test(fieldVal)) { 2324 $(this).addClass('is-invalid'); 2325 } else if ($(this).attr('type') == 'tel' && !telFormat.test(fieldVal)) { 2326 $(this).addClass('is-invalid'); 2327 } else { 2328 $(this).removeClass('is-invalid').addClass('is-valid'); 2329 } 2330 }); 2331 2332 // Validate terms and conditions in form 2333 $(document).on('click', '.terms-condition', function () { 2334 var termsObj = $(this); 2335 if (!termsObj.is(':checked')) { 2336 termsObj.addClass('is-invalid'); 2337 } else { 2338 termsObj.removeClass('is-invalid').addClass('is-valid'); 2339 } 2340 }); 2341 2342 /* =================================== 2343 Revolution slider 2344 ====================================== */ 2345 2346 // Reinit skroller after revolution slider loaded 2347 if ($('.rev_slider').length) { 2348 $('.rev_slider').each(function () { 2349 $(this).one('revolution.slide.onloaded', function () { 2350 reInitSkrollr(); 2351 }); 2352 }); 2353 } 2354 2355 /* =================================== 2356 Window on load 2357 ====================================== */ 2358 2359 $(window).on('load', function () { 2360 2361 // Bootstrap tooltip 2362 var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) 2363 var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { 2364 return new bootstrap.Tooltip(tooltipTriggerEl); 2365 }); 2366 2367 // Parallax 2368 if (typeof $.fn.parallax !== 'undefined' && typeof $.fn.parallax !== null) { 2369 setParallax();
2370 } 2371 2372 // Non retina image code 2373 $("img:not([data-at2x])").each(function () { 2374 $(this).attr('data-no-retina', ''); 2375 }); 2376 2377 // Page loader 2378 if ($('.page-loader').length) { 2379 $('.page-loader').fadeOut(); 2380 } 2381 2382 // Reset isotope loop 2383 resetIsotopeLayoutLoop(isotopeObjs, false); 2384 2385 // Top overlap section position 2386 setOverLayerPosition(); 2387 2388 // Bottom overlap section position 2389 setBottomOverLayerPosition(); 2390 2391 // Set full screen height & top space 2392 setTimeout(function () { 2393 fullScreenHeight(); 2394 setTopSpaceHeight(); 2395 }, headerTransition); // Header transition effect time 2396 }); 2397 2398 /* =================================== 2399 Page loader 2400 ====================================== */ 2401 2402 $(window).on("load", function () { 2403 $('.page-loader').show(); 2404 setTimeout(function () { 2405 $('.page-loader').hide(); 2406 }, 1000); 2407 }); 2408 2409 /* =================================== 2410 Window resize 2411 ====================================== */ 2412 2413 $(window).resize(function () { 2414 slideboxstyle(); 2415 setParallax(); 2416 initScrollNavigate(); 2417 setOverLayerPosition(); 2418 setBottomOverLayerPosition(100); 2419 setSpaceInInteractiveBannerStyle(); 2420 2421 // Update custom scrollbar for full screen & modern menu 2422 if ($('.navbar-collapse-clone').length && typeof $.fn.mCustomScrollbar === 'function') { 2423 $('.navbar-collapse-clone').mCustomScrollbar('update'); 2424 } 2425 2426 // Reset isotope 2427 if (!isMobile) { 2428 setTimeout(function () { 2429 resetIsotopeLayoutLoop(isotopeObjs, true); 2430 }, 300); 2431 } 2432 2433 if ($(window).width() <= 1199) { 2434 destroyAtropos(); 2435 destroySkrollr(); 2436 } else { 2437 if (typeof Atropos !== 'undefined' && typeof Atropos !== null) { 2438 initAtropos(); 2439 } 2440 initSkrollr(); 2441 } 2442 }); 2443 2444 /* =================================== 2445 Window orientation change 2446 ====================================== */ 2447 2448 $(window).on('orientationchange', function (e) { 2449 2450 // Top overlap section position 2451 setOverLayerPosition(); 2452 2453 // Bottom overlap section position 2454 setBottomOverLayerPosition(); 2455 2456 // Set full screen height & top space 2457 setTimeout(function () { 2458 fullScreenHeight(); 2459 setTopSpaceHeight(); 2460 }, headerTransition); // Header transition effect time 2461 2462 // Close all menu 2463 $('.navbar-collapse.collapse').collapse('hide'); 2464 // Close push menu 2465 $('html, body').removeClass('show-menu'); 2466 // Close search 2467 $('body').removeClass('show-search-popup'); 2468 // Header color remove 2469 $('header nav').removeClass('submenu-light').removeClass('submenu-dark'); 2470 // Close all dropdown menu 2471 $('.dropdown').trigger('mouseleave'); 2472 // Close left submenu 2473 $('.sub-menu.show').collapse('hide'); 2474 // Close left simple menu 2475 $('.left-sidebar-header').collapse('hide'); 2476 stickyKitRecalc(); 2477 // Close left modern menu 2478 $('.left-modern-header').collapse('hide'); 2479 }); 2480 2481 /* =================================== 2482 Window scroll 2483 ====================================== */ 2484 2485 $(window).on('scroll', initScrollNavigate); 2486 2487 // Window scroll Function 2488 function initScrollNavigate() { 2489 2490 var scrollPos = $(window).scrollTop(); 2491 2492 // One page navigation 2493 var menuLinks = $('.navbar-nav li a'); 2494 menuLinks.each(function () { 2495 var _this = $(this); 2496 var hasPos = _this.attr('href').indexOf('#'); 2497 if (hasPos > -1) { 2498 var res = _this.attr('href').substring(hasPos); 2499 if (res != '' && res != '#' && $(res).length) { 2500 var refElement = $(_this.attr('href')); 2501 if (refElement.position().top <= (scrollPos + 60) && refElement.position().top + refElement.height() > (scrollPos + 60)) { 2502 menuLinks.removeClass('active'); 2503 _this.addClass('active'); 2504 } 2505 if (scrollPos < 1) { 2506 _this.removeClass('active'); 2507 } 2508 } 2509 } 2510 }); 2511 2512 // Sticky nav Start 2513 var navHeight = 0, 2514 miniHeaderHeight = 0; 2515 if ($('header nav.navbar').length) { 2516 navHeight = $('header nav.navbar').outerHeight(); 2517 } 2518 if ($('.header-top-bar').length) { 2519 miniHeaderHeight = $('.header-top-bar').outerHeight(); 2520 } 2521 var headerHeight = navHeight + miniHeaderHeight; 2522 if (!$('header').hasClass('no-sticky')) { 2523 if (scrollPos >= headerHeight) { 2524 $('header').addClass('sticky'); 2525 if (!$('.header-top-bar').is(':hidden')) { 2526 $('.header-top-bar').css({'top': '-' + (miniHeaderHeight) + 'px'}); 2527 $('.header-top-bar + .navbar').css({'top': '0px'}); 2528 } else { 2529 $('.header-top-bar, .header-top-bar + .navbar').css({'top': ''}); 2530 } 2531 } else if (scrollPos <= headerHeight) { 2532 $('header').removeClass('sticky'); 2533 if (!$('.header-top-bar').is(':hidden')) { 2534 $('.header-top-bar').css({'top': '0px'}); 2535 $('.header-top-bar + .navbar').css({'top': (miniHeaderHeight) + 'px'}); 2536 } else { 2537 $('.header-top-bar, .header-top-bar + .navbar').css({'top': ''}); 2538 } 2539 } 2540 } 2541 2542 // Header sticky 2543 if (scrollPos > (headerHeight + 150)) { 2544 setTimeout(function () { 2545 $('header').addClass('sticky-active'); 2546 }, headerTransition); // Header transition effect time 2547 } 2548 if (scrollPos < headerHeight) { 2549 setTimeout(function () { 2550 $('header').removeClass('sticky-active'); 2551 }, headerTransition); // Header transition effect time 2552 } 2553 2554 // Hide side menu on scroll 2555 if (scrollPos >= 200 && getWindowWidth() > menuBreakPoint) { 2556 2557 // Close all dropdown menu 2558 $('.dropdown').trigger('mouseleave'); 2559 } 2560 2561 // Scroll to top 2562 if (scrollPos > 150) { 2563 $('.scroll-top-arrow').fadeIn('300'); 2564 } else { 2565 $('.scroll-top-arrow').fadeOut('300'); 2566 } 2567 2568 if ( $( 'nav.header-reverse-back-scroll' ).length > 0 ) { 2569 var st = scrollPos; 2570 if ( st > lastScroll ) { 2571 st = st - 1; 2572 $( 'header' ).removeClass( 'sticky-appear' ); 2573 } else { 2574 $('header').addClass('sticky-appear'); 2575 } 2576 lastScroll = st; 2577 if ( lastScroll <= headerHeight ) { 2578 $( 'header' ).removeClass( 'sticky-appear' ); 2579 } 2580 } 2581 2582 // Set full screen height & top space 2583 if (scrollPos <= 0) { 2584 setTimeout(function () { 2585 fullScreenHeight(); 2586 setTopSpaceHeight(); 2587 }, headerTransition); // Header transition effect time 2588 } 2589 2590 lastScroll = scrollPos; 2591 } 2592 2593 /* =================================== 2594 Utility functions start 2595 ====================================== */ 2596 2597 // Check formatted number 2598 function pad(d) { 2599 return (d < 10) ? '0' + d.toString() : d.toString(); 2600 } 2601 2602 // Check IE browser 2603 function isIE() { 2604 var ua = window.navigator.userAgent, 2605 msie = ua.indexOf('MSIE '); 2606 if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) { 2607 return true; 2608 } else { 2609 return false; 2610 } 2611 return false; 2612 } 2613 2614 // Get window height 2615 function getWindowHeight() { 2616 return $(window).height(); 2617 } 2618 2619 // Get window width 2620 function getWindowWidth() { 2621 return $(window).width(); 2622 } 2623 2624 // Full screen 2625 function fullScreenHeight() { 2626 var fullScreenObj = $('.full-screen'), 2627 minHeight = getWindowHeight(), 2628 headerHeight = getHeaderHeight(); 2629 if (!$('header').hasClass('sticky')) { 2630 fullScreenObj.parents('section').imagesLoaded(function () { 2631 if ($('section:first.full-screen, section:first .full-screen').length && ($('.top-space-margin').length || $('.mobile-top-space').length) || $('.ipad-top-space-margin').length) { 2632 if ($('.ipad-top-space-margin').length) { 2633 if (getWindowWidth() <= menuBreakPoint) { 2634 $('section:first.full-screen, section:first .full-screen').css('height', minHeight - headerHeight); 2635 } else { 2636 $('section:first.full-screen, section:first .full-screen').css('height', minHeight); 2637 } 2638 } else { 2639 $('section:first.full-screen, section:first .full-screen').css('height', minHeight - headerHeight); 2640 } 2641 } else if ($('header nav.navbar').hasClass('top-space-margin') || $('header nav.navbar').hasClass('mobile-top-space')) { 2642 if ($('header nav.navbar').hasClass('ipad-top-space-margin')) { 2643 if (getWindowWidth() <= menuBreakPoint) { 2644 minHeight = minHeight - $('header nav.navbar').outerHeight(); 2645 } 2646 } else { 2647 minHeight = minHeight - $('header nav.navbar').outerHeight(); 2648 } 2649 fullScreenObj.css('height', minHeight); 2650 } else { 2651 fullScreenObj.css('height', minHeight); 2652 } 2653 }); 2654 } 2655 } 2656 2657 // Get cookie 2658 function getCookie(cname) { 2659 var name = cname + "="; 2660 var decodedCookie = decodeURIComponent(document.cookie); 2661 var ca = decodedCookie.split(';'); 2662 for (var i = 0; i < ca.length; i++) { 2663 var c = ca[i];
2664 while (c.charAt(0) == ' ') { 2665 c = c.substring(1); 2666 } 2667 if (c.indexOf(name) == 0) { 2668 return c.substring(name.length, c.length); 2669 } 2670 } 2671 return ""; 2672 } 2673 2674 // Set cookie 2675 function setCookie(cname, cvalue, exdays) { 2676 var d = new Date(); 2677 d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); 2678 var expires = (exdays != 0 && exdays != '') ? d.toUTCString() : 0; 2679 document.cookie = cname + "=" + cvalue + ";expires=" + expires + ";path=/"; 2680 } 2681 2682 /* =================================== 2683 Swiper slider 2684 ====================================== */ 2685 2686 // Setup swiper slider 2687 function setupSwiper() { 2688 2689 // Swiper slider using params 2690 var swipers = document.querySelectorAll('[data-slider-options]:not(.instafeed-wrapper)'); 2691 swipers.forEach(function (swiperItem) { 2692 var _this = $(swiperItem), 2693 sliderOptions = _this.attr('data-slider-options'); 2694 if (typeof (sliderOptions) !== 'undefined' && sliderOptions !== null) { 2695 2696 sliderOptions = $.parseJSON(sliderOptions); 2697 2698 // If user have provided "data-slide-change-on-click" attribute then below code will execute 2699 var changeOnClick = _this.attr('data-slide-change-on-click'); 2700 if (changeOnClick != '' && changeOnClick != undefined && changeOnClick == '1') { 2701 2702 sliderOptions['on'] = { 2703 click: function () { 2704 if (this.activeIndex > this.clickedIndex) { 2705 this.slidePrev(); 2706 } else if (this.activeIndex < this.clickedIndex) { 2707 this.slideNext(); 2708 } 2709 } 2710 }; 2711 } 2712 2713 /* If user have provided "data-thumb-slider-md-direction" attribute then below code will execute */ 2714 if (sliderOptions['thumbs'] != '' && sliderOptions['thumbs'] != undefined) { 2715 2716 var mdThumbDirection = _this.attr('data-thumb-slider-md-direction'); 2717 if (mdThumbDirection != '' && mdThumbDirection != undefined) { 2718 2719 var thumbDirection = (sliderOptions['thumbs']['swiper']['direction'] != '' && sliderOptions['thumbs']['swiper']['direction'] != undefined) ? sliderOptions['thumbs']['swiper']['direction'] : mdThumbDirection; 2720 sliderOptions['thumbs']['swiper']['on'] = { 2721 init: function () { 2722 if (getWindowWidth() <= sliderBreakPoint) { 2723 this.changeDirection(mdThumbDirection); 2724 } else { 2725 this.changeDirection(thumbDirection); 2726 } 2727 this.update(); 2728 }, 2729 resize: function () { 2730 if (getWindowWidth() <= sliderBreakPoint) { 2731 this.changeDirection(mdThumbDirection); 2732 } else { 2733 this.changeDirection(thumbDirection); 2734 } 2735 this.update(); 2736 }, 2737 click: function () { 2738 /* Product thumbs automatic next / previous on click slide */ 2739 if (this.activeIndex == this.clickedIndex) { 2740 this.slidePrev(); 2741 } else { 2742 this.slideNext(); 2743 } 2744 } 2745 }; 2746 } 2747 } 2748 2749 // If user have provided "data-number-pagination" attribute then below code will execute 2750 var numberPagination = _this.attr('data-number-pagination'); 2751 if (numberPagination != '' && numberPagination != undefined && numberPagination == '1' && sliderOptions['pagination'] != '' && sliderOptions['pagination'] != undefined) { 2752 sliderOptions['pagination']['renderBullet'] = function (index, className) { 2753 return '<span class="' + className + '">' + pad(index + 1) + '</span>'; 2754 } 2755 } 2756 2757 // If user have provided "data-thumbs" attribute then below code will execute 2758 var dataThumbs = _this.attr('data-thumbs'); 2759 if (dataThumbs != '' && dataThumbs != undefined && sliderOptions['pagination'] != '' && sliderOptions['pagination'] != undefined) { 2760 dataThumbs = $.parseJSON(dataThumbs); 2761 if (typeof (dataThumbs) !== 'undefined' && dataThumbs !== null) { 2762 sliderOptions['pagination']['renderBullet'] = function (index, className) { 2763 return '<span class="' + className + '" style="background-image: url( ' + dataThumbs[index] + ' )"></span>'; 2764 } 2765 } 2766 } 2767 2768 sliderOptions['on'] = { 2769 init: function () { 2770 let slides = this.slides; 2771 let activeIndex = this.activeIndex, 2772 current_slide = this.slides[activeIndex], 2773 anime_el = current_slide.querySelectorAll('[data-anime]'), 2774 fancy_el = current_slide.querySelectorAll('[data-fancy-text]'); 2775 2776 if (getWindowWidth() > animeBreakPoint) { 2777 if (anime_el) { 2778 anime_el.forEach(element => { 2779 let options = element.getAttribute('data-anime'); 2780 2781 if (typeof (options) !== 'undefined' && options !== null) { 2782 options = $.parseJSON(options); 2783 2784 element.classList.add('appear'); 2785 element.style.transition = "none"; 2786 2787 if (options.el) { 2788 for (let i = 0; i < element.children.length; i++) { 2789 element.children[i].style.transition = "none"; 2790 element.children[i].classList.add('appear'); 2791 } 2792 } 2793 animeAnimation(element, options); 2794 element.classList.remove('appear'); 2795 } 2796 }); 2797 } 2798 } 2799 }, 2800 slideChange: function () { 2801 // Get active slide 2802 let slides = this.slides; 2803 let activeIndex = this.activeIndex, 2804 current_slide = this.slides[activeIndex], 2805 anime_el = current_slide.querySelectorAll('[data-anime]'), 2806 fancy_el = current_slide.querySelectorAll('[data-fancy-text]'); 2807 2808 if (getWindowWidth() > animeBreakPoint) { 2809 if (fancy_el) { 2810 fancy_el.forEach(element => { 2811 element.classList.add('appear'); 2812 let fancy_options = element.getAttribute('data-fancy-text'); 2813 if (typeof (fancy_options) !== 'undefined' && fancy_options !== null) { 2814 fancy_options = $.parseJSON(fancy_options); 2815 let child = element; 2816 2817 FancyTextDefault(child, fancy_options); 2818 element.classList.remove('appear'); 2819 } 2820 }); 2821 } 2822 2823 if (anime_el) { 2824 anime_el.forEach(element => { 2825 let options = element.getAttribute('data-anime'); 2826 2827 if (typeof (options) !== 'undefined' && options !== null) { 2828 options = $.parseJSON(options); 2829 2830 element.classList.add('appear'); 2831 element.style.transition = "none"; 2832 2833 if (options.el) { 2834 for (let i = 0; i < element.children.length; i++) { 2835 element.children[i].style.transition = "none"; 2836 element.children[i].classList.add('appear'); 2837 } 2838 } 2839 animeAnimation(element, options); 2840 element.classList.remove('appear'); 2841 } 2842 }); 2843 } 2844 } 2845 } 2846 }; 2847 2848 // If swiper has number navigation 2849 var isNumberPagination = _this.attr('data-swiper-number-line-pagination') || false; 2850 var isNumberNavigation = _this.attr('data-swiper-number-navigation') || false; 2851 var isNumberPaginationProgress = _this.attr('data-swiper-number-pagination-progress') || false; 2852 var showProgress = _this.attr('data-swiper-show-progress') || false; 2853 var hasGalleryBox = _this.attr('data-gallery-box') || false; 2854 if (isNumberPagination || isNumberNavigation || isNumberPaginationProgress || hasGalleryBox) { 2855 sliderOptions['on'] = { 2856 init: function () { 2857 if (isNumberPagination || isNumberNavigation || isNumberPaginationProgress) { 2858 if (sliderOptions.hasOwnProperty('loop') && sliderOptions['loop']) { 2859 var slideLength = this.slides.length; 2860 } 2861 var length = slideLength; 2862 if (isNumberPaginationProgress) { 2863 _this.parent().find('.number-next').text('0' + length); 2864 _this.parent().find('.number-prev').text('01'); 2865 _this.parent().find('.swiper-pagination-progress')[0].style.setProperty('--swiper-progress',
2865(100 / length).toFixed(2) + '%'); 2866 } else { 2867 _this.parent().find('.number-next').text('02'); 2868 _this.parent().find('.number-prev').text('0' + length); 2869 if (showProgress) 2870 _this.parent().find('.swiper-pagination-progress')[0].style.setProperty('--swiper-progress', (100 / length).toFixed(2) + '%'); 2871 } 2872 } 2873 if (typeof $.fn.magnificPopup === 'function') { 2874 if (hasGalleryBox) { 2875 _this.magnificPopup({ 2876 delegate: 'a', 2877 type: 'image', 2878 closeOnContentClick: true, 2879 closeBtnInside: false, 2880 gallery: {enabled: true} 2881 }); 2882 } 2883 } 2884 }, 2885 slideChange: function () { 2886 if (isNumberPagination || isNumberNavigation || isNumberPaginationProgress) { 2887 if (sliderOptions.hasOwnProperty('loop') && sliderOptions['loop']) { 2888 var slideLength = this.slides.length; 2889 } 2890 var length = this.slides.length, 2891 active = (this.realIndex) + 1, 2892 next = active + 1, 2893 prev = active - 1; 2894 if (active == 1) { 2895 prev = length; 2896 } 2897 if (active == length) { 2898 next = 1; 2899 } 2900 if (isNumberPaginationProgress) { 2901 _this.parent().find('.number-prev').each(function () { 2902 $(this).text(active < 10 ? '0' + active : active); 2903 }); 2904 _this.parent().find('.swiper-pagination-progress')[0].style.setProperty('--swiper-progress', ((100 / length) * active).toFixed(2) + '%'); 2905 } else { 2906 _this.parent().find('.number-next').each(function () { 2907 $(this).text(next < 10 ? '0' + next : next); 2908 }); 2909 _this.parent().find('.number-prev').each(function () { 2910 $(this).text(prev < 10 ? '0' + prev : prev); 2911 }); 2912 if (showProgress) 2913 _this.parent().find('.swiper-pagination-progress')[0].style.setProperty('--swiper-progress', ((100 / length) * active).toFixed(2) + '%'); 2914 } 2915 } 2916 } 2917 } 2918 } 2919 2920 // Move thumb slide on click in product page. 2921 var thumbClick = _this.attr('data-swiper-thumb-click') || false; 2922 if (thumbClick && sliderOptions.hasOwnProperty('thumbs')) { 2923 sliderOptions['thumbs']['swiper']['on'] = { 2924 click: function (swiper) { 2925 if (swiper.activeIndex >= swiper.clickedIndex) { 2926 swiper.slidePrev(); 2927 } else if (swiper.activeIndex < swiper.clickedIndex) { 2928 swiper.slideNext(); 2929 } 2930 } 2931 } 2932 } 2933 2934 if (typeof Swiper === 'function') { 2935 _this.imagesLoaded(function () { 2936 var swiperObj = new Swiper(swiperItem, sliderOptions); 2937 swiperObjs.push(swiperObj); 2938 }); 2939 } 2940 } 2941 }); 2942 } 2943 2944 /* =================================== 2945 Parallax background 2946 ====================================== */ 2947 2948 function setParallax() { 2949 if (!isIE()) { 2950 if (typeof $.fn.parallax !== 'undefined' && typeof $.fn.parallax !== null) { 2951 $('[data-parallax-background-ratio]').each(function () { 2952 var ratio = $(this).attr('data-parallax-background-ratio') || 0.5; 2953 $(this).parallax('50%', ratio); 2954 }); 2955 $('[data-parallax-layout-ratio]').each(function () { 2956 var ratio = $(this).attr('data-parallax-layout-ratio') || 1; 2957 $(this).parallaxImg(ratio); 2958 }); 2959 } 2960 2961 $('[data-parallax-liquid]').each(function () { 2962 var scale = $(this).attr('data-parallax-scale') || 0; 2963 var scaleFraction = parseFloat($(this).attr('data-parallax-scale-fraction')); 2964 var reverse = $(this).attr('data-parallax-reverse') ? $(this).attr('data-parallax-reverse') : false; 2965 var parallaxTransition = parseFloat($(this).attr('data-parallax-transition')) ? parseFloat($(this).attr('data-parallax-transition')) : 1.5;
2966 if (typeof $.fn.parallaxLiquidImg !== 'undefined' && typeof $.fn.parallaxLiquidImg !== null) { 2967 $(this).parallaxLiquidImg(parallaxTransition, parseFloat(scale), scaleFraction, reverse); 2968 } 2969 }); 2970 } 2971 } 2972 2973 /* =================================== 2974 Overlap section 2975 ====================================== */ 2976 2977 // Top overlap section position 2978 function setOverLayerPosition() { 2979 if (($('.overlap-section').length > 0 || $('.overlap-section-one-fourth').length > 0 || $('.overlap-section-three-fourth').length > 0)) { 2980 $('.overlap-section, .overlap-section-one-fourth, .overlap-section-three-fourth').each(function () { 2981 let _this = $(this), 2982 overlayBreakpoint = 767; 2983 2984 if (_this.hasClass('md-overlap-disable')) { 2985 overlayBreakpoint = 991; 2986 } else if (_this.hasClass('sm-overlap-disable')) { 2987 overlayBreakpoint = 767; 2988 } 2989 2990 if (getWindowWidth() > overlayBreakpoint) { 2991 setTimeout(function () { 2992 _this.imagesLoaded(function () { 2993 var closestSectionObj = _this.closest('section'); 2994 if (_this.closest('footer').length) { 2995 closestSectionObj = _this.closest('footer'); 2996 } 2997 var sectionPaddingTop = parseInt(closestSectionObj.css('padding-top')), 2998 areaHeight = _this.find('*').outerHeight(), 2999 overlayTop = areaHeight + sectionPaddingTop; 3000 if (_this.hasClass('overlap-section-one-fourth')) { 3001 overlayTop = (areaHeight / 4) - overlayTop; 3002 } else if (_this.hasClass('overlap-section-three-fourth')) { 3003 overlayTop = ((areaHeight * 3) / 4) - overlayTop; 3004 } else { 3005 overlayTop = (areaHeight / 2) - overlayTop; 3006 } 3007 _this.css('margin-top', overlayTop); 3008 var parentSectionObj = closestSectionObj.prev('.overlap-height'), 3009 overlapGap = parentSectionObj.find('.overlap-gap-section'); 3010 parentSectionObj.imagesLoaded(function () { 3011 if (overlapGap.length > 0) { 3012 var gapSectionHeight = overlapGap.outerHeight() + (Math.abs(overlayTop) - sectionPaddingTop); 3013 overlapGap.parents('.overlap-height').height(gapSectionHeight); 3014 } 3015 }); 3016 }); 3017 }, 500); 3018 } else { 3019 setTimeout(function () { 3020 $('.overlap-height').height('inherit'); 3021 $('.overlap-section, .overlap-section-one-fourth, .overlap-section-three-fourth').css('margin-top', 'inherit'); 3022 }, 500); 3023 } 3024 }); 3025 } 3026 } 3027 3028 // Bottom overlap section position 3029 function setBottomOverLayerPosition(delay) { 3030 if (($('.overlap-section-bottom').length > 0) && getWindowWidth() >= 768) { 3031 $('.overlap-section-bottom').each(function () { 3032 var _this = $(this), 3033 timeOut = (_this.find('.instafeed-wrapper').length > 0) ? delay : 10; 3034 setTimeout(function () { 3035 _this.imagesLoaded(function () { 3036 var areaHeight = _this.outerHeight(), 3037 overlayerMargin = ((areaHeight / 2) - areaHeight); 3038 _this.parents('section').next('.overlap-gap-section-bottom').css('margin-top', overlayerMargin); 3039 _this.parents('section').next('.overlap-gap-section-bottom').css('padding-top', areaHeight); 3040 }); 3041 }, timeOut); 3042 }); 3043 } else { 3044 $('.overlap-gap-section-bottom').css('margin-top', ''); 3045 $('.overlap-gap-section-bottom').css('padding-top', ''); 3046 } 3047 } 3048 3049 /* =================================== 3050 Magic cursor 3051 ====================================== */ 3052 3053 if ($('.magic-cursor').length > 0) { 3054 $('<div class="magic-cursor-wrapper"><div id="ball-cursor"><div id="ball-cursor-loader"></div></div></div>').clone(false).appendTo('body'); 3055 3056 if ($('.magic-cursor').hasClass('light')) { 3057 $('.magic-cursor-wrapper').addClass('magic-cursor-light'); 3058 } 3059 if ($('.magic-cursor').hasClass('base-color')) { 3060 $('.magic-cursor-wrapper').addClass('magic-cursor-base-color'); 3061 } 3062 if ($('.magic-cursor').hasClass('view-cursor')) { 3063 $('.magic-cursor-wrapper').addClass('magic-view-cursor'); 3064 } 3065 if ($('.magic-cursor').hasClass('drag-cursor')) { 3066 $('.magic-cursor-wrapper').addClass('magic-drag-cursor'); 3067 } 3068 if ($('.magic-cursor').hasClass('round-cursor')) { 3069 $('.magic-cursor-wrapper').addClass('magic-round-cursor'); 3070 } 3071 3072 var mouse = { 3073 x: 0, 3074 y: 0 3075 }, 3076 pos = { 3077 x: 0, 3078 y: 0 3079 }, 3080 ratio = .65, 3081 active = !1, 3082 ball = document.getElementById('ball-cursor'), 3083 ballloader = document.getElementById('ball-cursor-loader'); 3084 3085 function mouseMove(e) { 3086 var a = window.pageYOffset || document.documentElement.scrollTop; 3087 mouse.x = e.pageX, mouse.y = e.pageY - a 3088 } 3089 3090 function updatePosition() { 3091 active || (pos.x += (mouse.x - pos.x) * ratio, pos.y += (mouse.y - pos.y) * ratio, TweenLite.to(ball, .4, { 3092 x: pos.x, 3093 y: pos.y, 3094 })) 3095 } 3096 if (typeof TweenLite !== "undefined") { 3097 TweenLite.set(ball, { 3098 xPercent: -50, 3099 yPercent: -50, 3100 scale: 0, 3101 borderWidth: "0", 3102 opacity: 1 3103 }); 3104 } 3105 document.addEventListener("mousemove", mouseMove); 3106 if (typeof gsap !== "undefined") { 3107 gsap.ticker.add(updatePosition); 3108 } 3109 3110 if (typeof TweenMax !== 'undefined' && typeof TweenMax !== null) {
3111 $('.magic-cursor').mouseenter(function (e) { 3112 TweenMax.to('#ball-cursor', 0.3, { 3113 borderWidth: '2px', 3114 scale: 1, 3115 }); 3116 TweenMax.to('#ball-cursor-loader', 0.2, { 3117 borderWidth: '2px', 3118 top: 2, 3119 left: 2 3120 }); 3121 $('.magic-cursor-wrapper').addClass('sliderhover'); 3122 if ($(this).hasClass('magic-cursor-vertical')) { 3123 $('.magic-cursor-wrapper').addClass('vertical'); 3124 } 3125 }); 3126 } 3127 if (typeof TweenMax !== 'undefined' && typeof TweenMax !== null) { 3128 $('.magic-cursor').mouseleave(function (e) { 3129 TweenMax.to('#ball-cursor', 0.3, { 3130 borderWidth: '2px', 3131 scale: 1, 3132 borderColor: 'transparent', 3133 opacity: 1 3134 }); 3135 TweenMax.to('#ball-cursor-loader', 0.2, { 3136 borderWidth: '2px', 3137 top: 0, 3138 left: 0 3139 }); 3140 $('.magic-cursor-wrapper').removeClass('sliderhover'); 3141 }); 3142 } 3143 } 3144 3145 $(document).on('mouseenter', '.swiper-button-next, .swiper-button-prev, .swiper-pagination, a:not(.force-magic-cursor)', function () { 3146 $('.magic-cursor-wrapper').css({'opacity': 0}); 3147 }).on('mouseleave', '.swiper-button-next, .swiper-button-prev, .swiper-pagination, a:not(.force-magic-cursor)', function () { 3148 $('.magic-cursor-wrapper').css({'opacity': 1}); 3149 }); 3150 3151 /* =================================== 3152 Box shadow animation 3153 ====================================== */ 3154 3155 $(window).scroll(function (event) { 3156 $('[data-shadow-animation="true"]').each(function () { 3157 addBoxAnimationClass($(this)) 3158 }); 3159 }); 3160 $('[data-shadow-animation="true"]').removeClass('shadow-in'); 3161 $('[data-shadow-animation="true"]').each(function () { 3162 addBoxAnimationClass($(this)) 3163 }); 3164 function addBoxAnimationClass(boxObj) { 3165 if (boxObj.length) { 3166 var w = boxObj.width(); 3167 var h = boxObj.height(); 3168 var offset = boxObj.offset(); 3169 var right = offset.left + parseInt(boxObj.width()); 3170 var bottom = offset.top + parseInt(boxObj.height()); 3171 var visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - offset.left, right - window.pageXOffset)); 3172 var visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - offset.top, bottom - window.pageYOffset)); 3173 var visible = visibleX * visibleY / (w * h); 3174 if (visible >= 0.5) { 3175 if (typeof boxObj.attr('data-animation-delay') !== 'undefined' && boxObj.attr('data-animation-delay') > 10) { 3176 setTimeout(function () { 3177 boxObj.addClass('shadow-in'); 3178 }, boxObj.attr('data-animation-delay')); 3179 } else { 3180 boxObj.addClass('shadow-in'); 3181 } 3182 } 3183 } 3184 } 3185 3186 /* =================================== 3187 Skrollr animation 3188 ====================================== */ 3189 3190 var skroller; 3191 function initSkrollr() { 3192 if (typeof skrollr !== 'undefined' && typeof skrollr !== null) { 3193 skroller = skrollr.init({ 3194 'forceHeight': false, 3195 'smoothScrollingDuration': 1000, 3196 'mobileCheck': function () { 3197 return false; 3198 } 3199 }); 3200 } 3201 } 3202 3203 function reInitSkrollr() { 3204 destroySkrollr(); 3205 if ($(window).width() >= 1200) { 3206 setTimeout(function () { 3207 initSkrollr(); 3208 }, 1000); 3209 } 3210 } 3211 3212 function destroySkrollr() { 3213 if (typeof skroller !== typeof undefined && skroller != 'undefined') { 3214 skroller.destroy(); 3215 } 3216 } 3217 3218 if ($(window).width() >= 1200) { 3219 initSkrollr(); 3220 } 3221 3222 /* =================================== 3223 Particles 3224 ====================================== */ 3225 3226 var particleDefaultOptions = { 3227 particles: { 3228 number: { 3229 value: 80, 3230 density: { 3231 enable: !1, 3232 value_area: 800 3233 } 3234 }, 3235 color: {
3236 value: ["#fdc14c", "#fd5c4c", "#48bb0f"] 3237 }, 3238 shape: { 3239 type: "circle" 3240 }, 3241 size: { 3242 value: 10, 3243 random: !0, 3244 anim: { 3245 enable: !0, 3246 speed: 1 3247 } 3248 }, 3249 opacity: { 3250 value: 0.5, 3251 random: false 3252 }, 3253 move: { 3254 direction: "right", 3255 attract: { 3256 enable: !0 3257 } 3258 }, 3259 line_linked: { 3260 enable: !1 3261 } 3262 }, 3263 interactivity: { 3264 events: { 3265 onhover: { 3266 enable: !1 3267 }, 3268 onclick: { 3269 enable: !1 3270 } 3271 } 3272 }, 3273 "retina_detect": true 3274 }; 3275 var particleItems = $('[data-particle="true"]'); 3276 if (typeof particlesJS === 'function' && particleItems.length) { 3277 $.each(particleItems, function (index, particleItem) { 3278 var particleId = $(particleItem).attr('id'); 3279 var particleItemOptions = $(particleItem).attr('data-particle-options'); 3280 if (particleItemOptions != 'undefined' && typeof particleItemOptions !== typeof undefined) { 3281 particleItemOptions = JSON.parse(particleItemOptions); 3282 } else { 3283 particleItemOptions = particleDefaultOptions; 3284 } 3285 particlesJS(particleId, particleItemOptions); 3286 }); 3287 } 3288 3289 /* =================================== 3290 SVG animated image mask 3291 ====================================== */ 3292 3293 $('.animatedSvgPath').each(function () { 3294 var animePath = $(this); 3295 var paths = animePath.attr('pathdata:id').split(';'); 3296 paths.splice(paths.length, 0, animePath.attr('d')); 3297 anime({ 3298 targets: animePath[0], 3299 duration: 10000, 3300 easing: 'cubicBezier(0.5, 0, 0.5, 1)', 3301 d: paths, 3302 loop: true 3303 }); 3304 }); 3305 3306 /* =================================== 3307 Custom cursor 3308 ====================================== */ 3309 3310 var customCursorInit = false; 3311 handleCustomCursor(); 3312 3313 // Custom cursor issue 3314 forceHideCustomCursor(); 3315 $(window).resize(function () { 3316 if (!customCursorInit && !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))) { 3317 handleCustomCursor(); 3318 } 3319 forceHideCustomCursor(); 3320 }); 3321 function forceHideCustomCursor() { 3322 setTimeout(function () { 3323 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 3324 $('.cursor-page-inner').hide(); 3325 } else { 3326 $('.cursor-page-inner').show(); 3327 } 3328 }, 250); 3329 } 3330 3331 function handleCustomCursor() { 3332 if ($('body').hasClass('custom-cursor')) { 3333 customCursorInit = true; 3334 const cursorInnerEl = document.querySelector('.circle-cursor-inner'); 3335 const cursorOuterEl = document.querySelector('.circle-cursor-outer'); 3336 let lastY, lastX; 3337 let magneticFlag = false; 3338 let anchorHover = false; 3339 3340 // Document - mouse move 3341 window.onmousemove = function (event) { 3342 if (!magneticFlag) { 3343 cursorOuterEl.style.transform = 'translate(' + event.clientX + 'px, ' + event.clientY + 'px' + ')'; 3344 } 3345 if (cursorInnerEl.style.opacity = '0') { 3346 cursorInnerEl.style.opacity = '1'; 3347 } 3348 cursorInnerEl.style.transform = 'translate(' + event.clientX + 'px, ' + event.clientY + 'px' + ')'; 3349 lastY = event.clientY; 3350 lastX = event.clientX; 3351 } 3352 3353 // Link - mouse enter 3354 $('body').on('mouseenter', 'a', function () { 3355 cursorInnerEl.classList.add('cursor-link-hover'); 3356 cursorOuterEl.classList.add('cursor-link-hover'); 3357 anchorHover = true; 3358 }); 3359 3360 // Disable custom cursor when mouse enter in the magic cursor element 3361 $('body').on('mouseenter', '.magic-cursor', function () { 3362 cursorInnerEl.style.visibility = 'hidden'; 3363 cursorOuterEl.style.visibility = 'hidden'; 3364 }); 3365 3366 // Enable custom cursor when mouse leave from the magic cursor element 3367 $('body').on('mouseleave', '.magic-cursor', function () { 3368 cursorInnerEl.style.visibility = 'visible'; 3369 cursorOuterEl.style.visibility = 'visible'; 3370 }); 3371 3372 // Link - mouse leave 3373 $('body').on('mouseleave', 'a', function () { 3374 if ($(this).is('a') && $(this).closest('.cursor-as-
3374pointer').length) { 3375 return; 3376 } 3377 cursorInnerEl.classList.remove('cursor-link-hover'); 3378 cursorOuterEl.classList.remove('cursor-link-hover'); 3379 anchorHover = false; 3380 }); 3381 3382 // Cursor - mouse enter 3383 $('body').on('mouseenter', '.rounded-box', function () { 3384 const $elem = $(this); 3385 const scrollTop = window.pageYOffset || document.documentElement.scrollTop; 3386 3387 if (anchorHover) { 3388 cursorInnerEl.classList.remove('cursor-link-hover'); 3389 cursorOuterEl.classList.remove('cursor-link-hover'); 3390 } 3391 3392 cursorOuterEl.style.transition = 'all .2s ease-out'; 3393 cursorOuterEl.style.transform = 'translate(' + $elem.offset().left + 'px, ' + ($elem.offset().top - scrollTop) + 'px' + ')'; 3394 cursorOuterEl.style.width = $elem.width() + 'px'; 3395 cursorOuterEl.style.height = $elem.height() + 'px'; 3396 cursorOuterEl.style.marginLeft = 0; 3397 cursorOuterEl.style.marginTop = 0; 3398 magneticFlag = true; 3399 }); 3400 3401 // Cursor - mouse leave 3402 $('body').on('mouseleave', '.rounded-box', function () { 3403 if (anchorHover) { 3404 cursorInnerEl.classList.add('cursor-link-hover'); 3405 cursorOuterEl.classList.add('cursor-link-hover'); 3406 } 3407 3408 cursorOuterEl.style.transition = null; 3409 cursorOuterEl.style.width = null; 3410 cursorOuterEl.style.height = null; 3411 cursorOuterEl.style.marginLeft = null; 3412 cursorOuterEl.style.marginTop = null; 3413 magneticFlag = false; 3414 }); 3415 3416 cursorInnerEl.style.visibility = 'visible'; 3417 cursorOuterEl.style.visibility = 'visible'; 3418 } 3419 } 3420 3421 /* =================================== 3422 Stack animataion 3423 ====================================== */ 3424 3425 stackAnimation(); 3426 var stackLastScroll = 0; 3427 function stackAnimation() { 3428 windowScrollTop = window.pageYOffset || document.documentElement.scrollTop; 3429 $('.stack-box').each(function () { 3430 if ($(window).width() > 1199) { 3431 var _this = $(this); 3432 var stackItems = _this.find('.stack-item'); 3433 if (stackItems.length) { 3434 if (windowScrollTop > stackLastScroll) { 3435 _this.addClass('forward'); 3436 _this.removeClass('reverse'); 3437 } else { 3438 _this.removeClass('forward'); 3439 _this.addClass('reverse'); 3440 } 3441 3442 for (let i = 0; i < stackItems.length - 1; i++) { 3443 var stackBoxHeight = (_this.height() / (_this.find('.stack-item').length)) * i; 3444 var stackTopPosition = _this.offset().top; 3445 if ((windowScrollTop - stackTopPosition) > stackBoxHeight) { 3446 var yMove = windowScrollTop - stackTopPosition - stackBoxHeight; 3447 if (yMove > _this.outerHeight()) { 3448 yMove = _this.outerHeight(); 3449 } 3450 $(stackItems[i]).css({'height': 'calc(100vh - ' + yMove + 'px)'}); 3451 $(stackItems[i]).addClass('active'); 3452 } else { 3453 $(stackItems[i]).css({'height': 'calc(100vh - 0px)'}); 3454 $(stackItems[i]).removeClass('active'); 3455 } 3456 } 3457 } 3458 } else { 3459 $('.stack-box .stack-item').css({'height': 'inherit'}); 3460 } 3461 }); 3462 3463 stackLastScroll = windowScrollTop; 3464 } 3465 $(window).scroll(function () { 3466 stackAnimation(); 3467 }); 3468 3469 /* =================================== 3470 Image tilt 3d effect using atropos 3471 ====================================== */ 3472 3473 var atroposItems = document.querySelectorAll('[data-atropos]') 3474 function initAtropos() { 3475 if (atroposItems.length && $(window).width() > 1199) {
3476 atroposItems.forEach(function (atroposItem) { 3477 var myAtropos = Atropos({ 3478 el: atroposItem 3479 }); 3480 }); 3481 } 3482 } 3483 if (typeof Atropos !== 'undefined' && Atropos !== null) { 3484 initAtropos(); 3485 } 3486 function destroyAtropos() { 3487 if (atroposItems.length && $(window).width() > 1199) { 3488 atroposItems.forEach(function (atroposItem) { 3489 if (atroposItem.__atropos__) { 3490 atroposItem.__atropos__.destroy(); 3491 } 3492 }); 3493 } 3494 } 3495 3496 /* =================================== 3497 Sticky vertical strip - add dark section class 3498 ====================================== */ 3499 3500 var getElementsInArea = (function (docElm) { 3501 var viewportHeight = docElm.clientHeight; 3502 return function (e, opts) { 3503 var found = [], i; 3504 if (e && e.type == 'resize') { 3505 viewportHeight = docElm.clientHeight; 3506 } 3507 for (i = opts.elements.length; i--; ) { 3508 var elm = opts.elements[i], 3509 pos = elm.getBoundingClientRect(), 3510 topPerc = pos.top / viewportHeight * 100, 3511 bottomPerc = pos.bottom / viewportHeight * 100, 3512 middle = (topPerc + bottomPerc) / 2, 3513 inViewport = middle > opts.zone[1] && middle < (100 - opts.zone[1]); 3514 3515 elm.classList.toggle(opts.markedClass, inViewport); 3516 3517 if (inViewport) { 3518 found.push(elm); 3519 } 3520 } 3521 }; 3522 })(document.documentElement); 3523 3524 $(window).on('scroll resize load', function (e) { 3525 getElementsInArea(e, { 3526 elements: document.querySelectorAll('.section-dark'), 3527 markedClass: 'section-dark-highlight', 3528 zone: [10, 10] 3529 }); 3530 if ($('.section-dark-highlight').length > 0) { 3531 $('.sticky-wrap').addClass('sticky-highlight'); 3532 } else { 3533 $('.sticky-wrap').removeClass('sticky-highlight'); 3534 } 3535 }); 3536 3537 $(document).on('appear', 'footer', function (e) { 3538 $('.sticky-wrap').addClass('sticky-hidden'); 3539 }).on('disappear', 'footer', function (e) { 3540 $('.sticky-wrap').removeClass('sticky-hidden'); 3541 }); 3542 3543 /* =================================== 3544 Quantity input 3545 ====================================== */ 3546 3547 $('.qty-plus').click(function () { 3548 var th = $(this).closest('.quantity').find('.qty-text'); 3549 th.val(+th.val() + 1); 3550 }); 3551 $('.qty-minus').click(function () { 3552 var th = $(this).closest('.quantity').find('.qty-text'); 3553 if (th.val() > 1) 3554 th.val(+th.val() - 1); 3555 }); 3556 3557 /* =================================== 3558 Infinite looping animation 3559 ====================================== */ 3560 3561 const wrapperEl = document.querySelector('.looping-wrapper') || false; 3562 const numberOfEls = 100; 3563 const duration = 6000; 3564 const delay = duration / numberOfEls; 3565 3566 let tl = anime.timeline({ 3567 duration: delay, 3568 complete: function () { 3569 tl.restart(); 3570 } 3571 }); 3572 3573 function createEl(i) { 3574 let el = document.createElement('div'); 3575 const rotate = (360 / numberOfEls) * i; 3576 const translateY = -50; 3577 el.classList.add('el'); 3578 el.style.transform = 'rotate(' + rotate + 'deg) translateY(' + translateY + '%)'; 3579 tl.add({ 3580 begin: function () { 3581 anime({ 3582 targets: el, 3583 rotate: [rotate + 'deg', rotate + 10 + 'deg'], 3584 translateY: [translateY + '%', translateY + 10 + '%'], 3585 scale: [1, 1.25], 3586 easing: 'easeInOutSine', 3587 direction: 'alternate', 3588 duration: duration * .1 3589 }); 3590 } 3591 }); 3592 if (wrapperEl) 3593 wrapperEl.appendChild(el); 3594 } 3595 3596 for (let i = 0; i < numberOfEls; i++) 3597 createEl(i); 3598 3599 /* ===================================
3600 Background color change on scroll - Adaptive Backgrounds 3601 ====================================== */ 3602 window.sections = [...document.querySelectorAll('[data-background]')]; 3603 window.lastScrollTop = window.pageYOffset; 3604 let activeSection; 3605 3606 onScroll(); 3607 window.addEventListener('scroll', onScroll); 3608 3609 function onScroll() { 3610 if (window.sections.length > 0) { 3611 const section = window.sections 3612 .map(section => { 3613 const el = section; 3614 const rect = el.getBoundingClientRect(); 3615 return {el, rect}; 3616 }) 3617 .find(section => section.rect.bottom >= (window.innerHeight * 0.5)); 3618 if (section && section.el !== activeSection) { 3619 activeSection = section.el; 3620 const sectionBg = activeSection.getAttribute('data-background'); 3621 activeSection.closest(".page-content").querySelectorAll("[data-background]").forEach(item => item.classList.remove("active")) 3622 activeSection.classList.add("active") 3623 if (typeof gsap !== "undefined") { 3624 gsap.to(activeSection.closest(".page-content"), {backgroundColor: sectionBg}) 3625 } 3626 } 3627 } 3628 } 3629 3630 /* =================================== 3631 Cookies set 3632 ====================================== */ 3633 if (typeof $.cookie === 'function') { 3634 if ($('body').find('#cookies-model').length > 0) { 3635 setTimeout(function () { 3636 var cookieModel = $('#cookies-model'), 3637 cookieConsentclosed = $.cookie('cookieConsent'); 3638 3639 if (cookieConsentclosed == 'closed') { 3640 cookieModel.remove(); 3641 } else { 3642 cookieModel.show(); 3643 } 3644 3645 cookieModel.find('[data-accept-btn]').on('click', function (e) { 3646 e.preventDefault(); 3647 var expiresDays = 1; 3648 cookieModel.remove(); 3649 $.cookie('cookieConsent', 'closed', {expires: expiresDays, path: '/'}); 3650 }); 3651 }, 1000); 3652 } 3653 } 3654 3655 /* =================================== 3656 Back to top scroll 3657 ====================================== */ 3658 $(document).on('click', '.scroll-top', function () { 3659 $('html, body').animate({scrollTop: 0}, 800); 3660 return false; 3661 }); 3662 3663 function scrollIndicator() { 3664 var scrollTop = document.documentElement.scrollTop; 3665 if (scrollTop > 200) { 3666 $('.scroll-progress').addClass('visible'); 3667 } else { 3668 $('.scroll-progress').removeClass('visible'); 3669 } 3670 3671 var scrollHeight = document.documentElement.scrollHeight; 3672 var windowHeight = document.documentElement.clientHeight; 3673 var maxScrollTop = scrollHeight - windowHeight; 3674 var scrollTop = document.documentElement.scrollTop; 3675 var scrollPercentage = (scrollTop / (maxScrollTop - 200)) * 100; 3676 3677 $('.scroll-point').css('height', Math.min(scrollPercentage, 100) + '%'); 3678 3679 /***** Theme demos button scroll to show *****/ 3680 var scrollPos = $(window).scrollTop(); 3681 if (scrollPos > 150) { 3682 $('.theme-demos').fadeIn(600); 3683 } 3684 } 3685 $(window).scroll(function () { 3686 scrollIndicator(); 3687 }); 3688 3689 /* =================================== 3690 Trusted customers 3691 ====================================== */ 3692 3693 $('.bg-more-trusted .btn').click(function (e) { 3694 e.preventDefault(); 3695 $(this).parent().parent().addClass('show-trusted-customers'); 3696 }); 3697 3698 3699 /* =================================== 3700 Theme demo panel 3701 ====================================== */ 3702 3703 // var themeDemoHTML = '<div class="theme-demos"><div class="demo-button-wrapper"><div class="buy-theme"><a href="https://1.envato.market/R53mL2" target="_blank"><div class="theme-wrapper"><div><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 22.284 25.436"><path d="M19.314,9.285c-.745-.414-2.882-.158-5.449.637-4.492,3.07-8.283,7.594-8.547,14.858-.048.174-.491-.024-.579-.077a10.346,10.346,0,0,1-.681-8.3c.189-.314-.428-.7-.539-.591a12.683,12.683,0,0,0-1.765,2.278,11.061,11.061,0,0,0,19.33,10.759c3.438-6.161.246-18.432-1.77-19.558Z" transform="translate(-0.32 -9.089)" fill="#fff"></path></svg></div></div></a></div><div class="all-demo"><a href="#"><div class="theme-wrapper"><div>52+ Pre-built sites</div></div></a></div></div><span class="close-popup fs-22 text-dark-gray w-40px h-40px d-flex justify-content-center align-items-center"><i class="fa-solid fa-xmark"></i></span></div>'; 3704 // var themeDemoData = '<section class="theme-demos-main d-flex justify-content-center"> <div class="demos-wrapper w-100"> <div class="w-100 demos-wrapper-inner"> <div class="w-100 text-center mb-15px"> <h3 class="fw-700 text-dark-gray ls-minus-1px ps-20 pe-20 mb-35px"> 52+ Pre-built websites</h3> </div> <div class="container-fluid"> <div class="row"> <div class="col-12"> <ul class="portfolio-wrapper grid grid-4col xxl-grid-4col xl-grid-3col lg-grid-2col md-grid-2col sm-gr
3704id-1col xs-grid-1col gutter-extra-large"> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-corporate.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-corporate.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-corporate.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Corporate</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-restaurant.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-restaurant.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-restaurant.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Restaurant</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-branding-agency.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-branding-agency.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-branding-agency.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Branding agency</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-elearning.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-elearning.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-elearning.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> eLearning</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-it-business.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-it-business.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-it-business.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> IT Business</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-data-analysis.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-data-analysis.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-data-analysis.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Data analysis</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-hotel-and-resort.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-hotel-and-resort.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-hotel-and-resort.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Hotel resort</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-scattered-portfolio.html"target="_blank"> <img class="border-radius-6px w-100" src="images/demo-scattered-portfolio.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-scattered-portfolio.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Scattered portfolio</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-beauty-salon.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-beauty-salon.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-beauty-salon.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600">
3704 Beauty salon</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-product-showcase.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-product.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-product-showcase.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Product showcase</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-medical.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-medical.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-medical.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Medical</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-marketing.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-marketing.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-marketing.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Marketing</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-gym-and-fitness.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-gym-and-fitness.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-gym-and-fitness.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Gym & fitness</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-design-agency.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-design-agency.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-design-agency.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Design agency</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-accounting.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-accounting.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-accounting.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Accounting</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-fashion-store.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-fashion-store.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-fashion-store.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Fashion store</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-interactive-portfolio.html"target="_blank"> <img class="border-radius-6px w-100" src="images/demo-interactive-portfolio.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-interactive-portfolio.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Interactive portfolio</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-yoga-and-meditation.html"target="_blank"> <img class="border-radius-6px w-100" src="images/demo-yoga-and-meditation.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-yoga-and-meditation.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Yoga & meditation</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-travel-agency.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-travel-agency.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-travel-agency.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Travel agency</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-photography.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-photography.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-photography.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Photography</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-ebook.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-ebook.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-ebook.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> eBook</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-conference.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-conference.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-conference.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Conference</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-freelancer.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-freelancer.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-freelancer.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Freelancer</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-lawyer.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-lawyer.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-lawyer.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Lawyer</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-blogger.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-blogger.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-blogger.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Blogger</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-business.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-business.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-business.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Business</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-horizontal-portfolio.html"target="_blank"> <img class="border-radius-6px w-100" src="images/demo-horizontal-portfolio.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-horizontal-portfolio.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Horizontal portfolio</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-finance.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-finance.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-finance.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Finance</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-decor-store.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-decor-store.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-decor-store.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Decor store</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-wedding-invitation.html"target="_blank"> <img class="border-radius-6px w-100" src="images/demo-wedding-invitation.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-wedding-invitation.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Wedding invitation</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-vertical-portfolio.html"target="_blank"> <img class="border-radius-6px w-100" src="images/demo-vertical-portfolio.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-vertical-portfolio.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Vertical portfolio</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-pizza-parlor.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-pizza-parlor.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-pizza-parlor.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Pizza parlor</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-music-onepage.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-music.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-music-onepage.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> music</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-magazine.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-magazine.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-magazine.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Magazine</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-charity.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-charity.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-charity.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Charity</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-hosting.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-hosting.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-hosting.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Hosting</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-jewellery-store.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-jewellery-store.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-jewellery-store.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Jewellery store</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-architecture.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-architecture.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-architecture.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Architecture</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-minimal-portfolio.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-minimal-portfolio.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-minimal-portfolio.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Minimal portfolio</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-digital-agency.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-digital-agency.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-digital-agency.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Digital agency</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-consulting.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-consulting.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-consulting.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Consulting</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-application.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-application.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-application.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Application</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a
3704href="demo-real-estate.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-real-estate.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-real-estate.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Real estate</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-seo-agency.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-seo-agency.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-seo-agency.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Seo agency</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-green-energy.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-green-energy.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-green-energy.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Green energy</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-logistics.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-logistics.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-logistics.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Logistics</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-cryptocurrency.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-cryptocurrency.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-cryptocurrency.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600">Cryptocurrency</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-elder-care.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-elder-care.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-elder-care.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600">Elder care</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-spa-salon.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-spa-salon.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-spa-salon.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Spa salon</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-barber.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-barber.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-barber.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Barber</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-web-agency.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-web-agency.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-web-agency.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Web agency</a> </div> </div> </li> <li class="grid-item"> <div class="box-shadow-medium box-shadow-quadruple-large-hover p-10px bg-white border-radius-10px"> <div class="portfolio-image"> <a href="demo-startup.html" target="_blank"> <img class="border-radius-6px w-100" src="images/demo-startup.jpg" alt=""> </a> </div> <div class="portfolio-caption text-center pt-15px pb-10px"> <a href="demo-startup.html" target="_blank"class="text-dark-gray text-dark-gray-hover fw-600"> Startup</a> </div> </div> </li> </ul> </div> </div> </div> <div class="w-100 text-center"> <a href="https://1.envato.market/R53mL2" target="_blank"class="btn btn-dark-gray btn-large btn-switch-text btn-rounded btn-box-sha
3704dow mt-50px text-transform-none"> <span> <span class="btn-double-text" data-text="Purchase Crafto"> Purchase Crafto</span> <span> <i class="feather icon-feather-shopping-cart"> </i> </span> </span> </a> </div> </div> </div> </section>'; 3705 // $('body:not( .landing-page )').append(themeDemoHTML); 3706 3707 $(document).on('click', '.all-demo', function () { 3708 var themeDemosObj = $(this).parents('.theme-demos'); 3709 if (!themeDemosObj.hasClass('active')) { 3710 themeDemosObj.append(themeDemoData); 3711 themeDemosObj.addClass('active'); 3712 $('body').addClass('overflow-hidden'); 3713 } else { 3714 themeDemosObj.removeClass('active'); 3715 $('body').removeClass('overflow-hidden'); 3716 } 3717 }); 3718 var timer; 3719 $(document).on('click', '.close-popup', function () { 3720 var themeDemosObj = $(this).parents('.theme-demos'); 3721 themeDemosObj.removeClass('active'); 3722 $('body').removeClass('overflow-hidden'); 3723 clearTimeout(timer); 3724 timer = setTimeout(function () { 3725 $('.theme-demos-main').animate({scrollTop: '0'}, 'slow'); 3726 }, 800); 3727 3728 }); 3729 3730 $(document).on('keydown', function (event) { 3731 if (event.key == "Escape") { 3732 var themeDemosObj = $('.theme-demos'); 3733 themeDemosObj.removeClass('active'); 3734 $('body').removeClass('overflow-hidden'); 3735 clearTimeout(timer); 3736 timer = setTimeout(function () { 3737 $('.theme-demos-main').animate({scrollTop: '0'}, 'slow'); 3738 }, 800); 3739 } 3740 }); 3741 3742 $(".all-demo a").click(function (event) { 3743 event.preventDefault(); 3744 }); 3745 3746})(jQuery); 3747 3748/* =================================== 3749 Google map 3750 ====================================== */ 3751 3752function initMap() { 3753 $('.map').each(function (e) { 3754 let _this = $(this), 3755 mapOptions = _this.attr('data-map-options'); 3756 3757 // Convert String into the Json 3758 if (typeof (mapOptions) !== 'undefined' && mapOptions !== null) { 3759 mapOptions = $.parseJSON(mapOptions); 3760 } 3761 3762 let lat = mapOptions.lat ? mapOptions.lat : 19.07, 3763 lng = mapOptions.lng ? mapOptions.lng : 72.87, 3764 marker = mapOptions.marker, 3765 popup = mapOptions.popup; 3766 3767 switch (mapOptions.style && mapOptions.style.toLowerCase()) { 3768 case 'retro': 3769 map_style = Retro 3770 break; 3771 case 'standard': 3772 map_style = Standard 3773 break; 3774 case 'silver': 3775 map_style = Silver 3776 break; 3777 case 'dark': 3778 map_style = Dark 3779 break; 3780 case 'night': 3781 map_style = Night 3782 break; 3783 case 'aubergine': 3784 map_style = Aubergine 3785 break; 3786 default: 3787 map_style = Silver 3788 } 3789 3790 // Google Map variable 3791 const gmap = new google.maps.Map(this, { 3792 zoom: 13, 3793 center: new google.maps.LatLng(lat, lng), 3794 mapTypeId: google.maps.MapTypeId.READMAP, 3795 styles: map_style 3796 }); 3797 3798 // InforWindow variable 3799 const infowindow = new google.maps.InfoWindow({ 3800 content: popup && popup.html, 3801 maxWidth: 300, 3802 }); 3803 infowindow.setPosition(new google.maps.LatLng(lat, lng)); 3804 3805 // Marker Options 3806 if (marker !== null && marker !== undefined) { 3807 // Custom HTML Marker 3808 if (marker.type.toLowerCase() === 'html') { 3809 3810 function HTMLMarker(lat, lng) { 3811 this.lat = lat; 3812 this.lng = lng; 3813 this.pos = new google.maps.LatLng(lat, lng); 3814 } 3815 3816 HTMLMarker.prototype = new google.maps.OverlayView(); 3817 3818 //init html 3819 HTMLMarker.prototype.onAdd = function () { 3820 div = document.createElement('DIV'); 3821 div.className = `arrow_box ${marker.class ? ' ' + marker.class : ''}`; 3822 div.innerHTML = `<span style='background-color: ${marker.color}; border-color: ${marker.color}'></span><span style='background-color: ${marker.color}; border-color: ${marker.color}'></span>`; 3823 div.style.setProperty('background-color', marker.color); 3824 let panes = this.getPanes(); 3825 panes.overlayImage.appendChild(div); 3826 3827 let flag = false; 3828 3829 if (popup.defaultOpen === true) { 3830 flag = true; 3831 infowindow.setOptions({pixelOffset: new google.maps.Size(10, -30)}); 3832 infowindow.open(gmap); 3833 } 3834 3835 google.maps.event.addDomListener(div, "click", function (event) { 3836 if (popup) { 3837 infowindow.setOptions({pixelOffset: new google.maps.Size(10, -30)}); 3838 if (flag === false) { 3839 infowindow.open(gmap); 3840 flag = true; 3841 } else { 3842 infowindow.close(); 3843 flag = false; 3844 } 3845 } 3846 }); 3847 } 3848 3849 HTMLMarker.prototype.draw = function () { 3850 let overlayProjection = this.getProjection(); 3851 let position = overlayProjection.fromLatLngToDivPixel(this.pos); 3852 let panes = this.getPanes(); 3853 panes.overlayImage.style.left = position.x + 'px'; 3854 panes.overlayImage.style.top = position.y - 30 + 'px'; 3855 } 3856 3857 let htmlMarker = new HTMLMarker(lat, lng); 3858 htmlMarker.setMap(gmap); 3859 3860 } else { 3861 // Custom Image Marker 3862 const image_marker = new google.maps.Marker({ 3863 icon: {url: marker.src}, 3864 position: {lat: lat, lng: lng}, 3865 map: gmap, 3866 animation: google.maps.Animation.DROP, 3867 }); 3868 let flag = false; 3869 3870 if (popup.defaultOpen === true) { 3871 infowindow.open({ 3872 anchor: image_marker, 3873 map: gmap 3874 }); 3875 flag = true; 3876 } 3877 3878 image_marker.addListener("click", toggleBounce); 3879 3880 function toggleBounce() { 3881 if (image_marker.getAnimation() !== null) { 3882 image_marker.setAnimation(null); 3883 } else { 3884 image_marker.setAnimation(google.maps.Animation.BOUNCE); 3885 } 3886 3887 if (popup) { 3888 if (flag === false) { 3889 infowindow.open({ 3890 anchor: image_marker, 3891 map: gmap 3892 }); 3893 flag = true; 3894 } else { 3895 infowindow.close(); 3896 flag = false; 3897 } 3898 } 3899 } 3900 } 3901 } else { 3902 // Default Marker 3903 const marker = new google.maps.Marker({ 3904 position: {lat: lat, lng: lng}, 3905 map: gmap 3906 }); 3907 3908 let flag = false; 3909 3910 if (popup.defaultOpen === true) { 3911 infowindow.open({ 3912 anchor: marker, 3913 map: gmap 3914 }); 3915 flag = true; 3916 } 3917 3918 marker.addListener("click", function () { 3919 if (popup) { 3920 if (flag === false) { 3921 infowindow.open({ 3922 anchor: marker, 3923 map: gmap 3924 }); 3925 flag = true; 3926 } else { 3927 infowindow.close(); 3928 flag = false; 3929 } 3930 } 3931 }); 3932 } 3933 });
3934} 3935 3936 3937 3938 3939 3940 3941// Esto deberÃas ejecutarlo cada vez que se cargan nuevas noticias 3942/*function reinitIsotope() { -------- 3943 var $grid = $('.grid-loading'); 3944 $grid.imagesLoaded(function() { 3945 $grid.isotope('reloadItems').isotope(); // Recalcula el layout con las nuevas 3946 }); 3947}*/
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.