(function ($) { "use strict"; new WOW().init(); /*---background image---*/ function dataBackgroundImage() { $('[data-bgimg]').each(function () { var bgImgUrl = $(this).data('bgimg'); $(this).css({ 'background-image': 'url(' + bgImgUrl + ')', // + meaning concat }); }); } $(window).on('load', function () { dataBackgroundImage(); }); $("#li-slider-active").owlCarousel({ loop: true, margin: 0, nav: false, navText: ['',''], autoplay: true, items: 1, autoplayTimeout: 3000, // navText: false, dots: false, autoHeight: true, lazyLoad: true }); $("#li-slider-fullpage-active").owlCarousel({ items: 1, loop: true, autoplay: true, dots: true, nav: false, smartSpeed: 2000, // Tốc độ chuyển animateOut: 'fadeOut', // Hiệu ứng ra animateIn: 'fadeIn', // Hiệu ứng vào onInitialized: addFullpageDotNumbers, onChanged: addFullpageDotNumbers, responsive: { 0: { items: 1 }, 768: { items: 1 }, 1024: { items: 1 } } }); function addFullpageDotNumbers() { $('.owl-dot').each(function(index){ $(this).html(index + 1); }); } /*---stickey menu---*/ // $(window).on('scroll',function() { // var scroll = $(window).scrollTop(); // if (scroll < 100) { // $(".sticky-header").removeClass("sticky"); // }else{ // $(".sticky-header").addClass("sticky"); // } // }); $("#li-productdocpage-slider-active").owlCarousel({ items: 1, loop: true, autoplay: true, dots: true, nav: true, navText: [ '', '' ], smartSpeed: 2000, // Tốc độ chuyển animateOut: 'fadeOut', // Hiệu ứng ra animateIn: 'fadeIn', // Hiệu ứng vào onInitialized: addProductdocpageSliderDotNumbers, onChanged: addProductdocpageSliderDotNumbers, responsive: { 0: { items: 1 }, 768: { items: 1 }, 1024: { items: 1 } } }); function addProductdocpageSliderDotNumbers() { $('.owl-dot').each(function(index){ $(this).html('' + (index + 1) + ''); }); } /*---partner activation---*/ $("#li-partner-active").owlCarousel({ loop: true, nav: true, autoplay: true, autoplayTimeout: 8000, items: 5, dots:false, margin: 30, navText: [ '', '' ], responsiveClass:true, responsive:{ 0:{ items:1, }, 768:{ items:5, }, 992:{ items:5, }, 1200:{ items:5, }, } }); /*---galleryboard activation---*/ $("#li-galleryboard-active").owlCarousel({ loop: true, nav: true, autoplay: true, autoplayTimeout: 8000, items: 1, dots:true, margin: 30, onInitialized: addFullpageDotNumbers, onChanged: addFullpageDotNumbers, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 768:{ items:1, }, 992:{ items:1, }, 1200:{ items:1, }, } }); /*---galleryboard_lh activation---*/ $("#li-galleryboard_lh-active").owlCarousel({ loop: true, nav: true, autoplay: true, autoplayTimeout: 8000, items: 4, dots:false, margin: 30, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 768:{ items:2, }, 992:{ items:3, }, 1200:{ items:4, }, } }); /*---videoboard_lh activation---*/ $("#li-videoboard_lh-active").owlCarousel({ loop: true, nav: true, autoplay: true, autoplayTimeout: 8000, items: 4, dots:false, margin: 30, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 768:{ items:2, }, 992:{ items:3, }, 1200:{ items:4, }, } }); /*---newsdoc activation---*/ $("#li-newsdoc-active").owlCarousel({ loop: true, nav: false, autoplay: true, autoplayTimeout: 8000, items: 3, dots:false, margin: 30, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 768:{ items:2, }, 992:{ items:3, }, 1200:{ items:3, }, } }); /*---salesdoc activation---*/ $("#li-salesdoc-active").owlCarousel({ loop: true, nav: true, autoplay: true, autoplayTimeout: 8000, items: 3, dots:false, margin: 30, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 768:{ items:2, }, 992:{ items:2, }, 1200:{ items:3, }, } }); /*---ultilitiesdoc activation---*/ $("#li-ultilitiesdoc-active").owlCarousel({ loop: true, nav: false, autoplay: true, autoplayTimeout: 8000, items: 3, dots:false, margin: 30, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 768:{ items:2, }, 992:{ items:3, }, 1200:{ items:3, }, } }); /*---envirinfosdoc activation---*/ $("#li-envirinfosdoc-active").owlCarousel({ loop: true, nav: false, autoplay: true, autoplayTimeout: 8000, items: 3, dots:false, margin: 30, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 768:{ items:2, }, 992:{ items:3, }, 1200:{ items:3, }, } }); /*---waterpricesdoc activation---*/ $("#li-waterpricesdoc-active").owlCarousel({ loop: true, nav: false, autoplay: true, autoplayTimeout: 8000, items: 3, dots:false, margin: 30, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 768:{ items:2, }, 992:{ items:3, }, 1200:{ items:3, }, } }); /*---investors activation---*/ $("#li-investors-active").owlCarousel({ loop: true, nav: false, autoplay: true, autoplayTimeout: 8000, items: 3, dots:false, margin: 30, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 768:{ items:2, }, 992:{ items:3, }, 1200:{ items:3, }, } }); /*---single galleryboard activation---*/ $("#li-singlegalleryboard-carousel").owlCarousel({ items: 1, loop: true, nav: false, dots: false, dotsData: true, autoplay: true, autoplayTimeout: 5000, navText: [ '', '' ] }); $('#li-singlegalleryboard-dots .owl-custom-dot').each(function(index) { $(this).off('click').on('click', function () { $("#li-singlegalleryboard-carousel").trigger('to.owl.carousel', [index, 300]); }); }); $("#li-singlegalleryboard-carousel").on('changed.owl.carousel', function(event) { const index = event.item.index - event.relatedTarget._clones.length / 2; const count = event.item.count; const realIndex = ((index % count) + count) % count; $('#li-singlegalleryboard-dots .owl-custom-dot').removeClass('active'); $('#li-singlegalleryboard-dots .owl-custom-dot').eq(realIndex).addClass('active'); }); /*---small product activation---*/ $('.paralax-hor').slick({ slidesToShow: 2, arrows:false, draggable: true, infinite: false, responsive:[ { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, } }, { breakpoint: 1200, settings: { slidesToShow: 2, slidesToScroll: 1, rows: 1, } }, ] }); let viewedIndexes = new Set(); $('.slick-slider').on('afterChange', function(event, slick, currentSlide) { const slidesToShow = slick.options.slidesToShow; for (let i = currentSlide; i < currentSlide + slidesToShow; i++) { viewedIndexes.add(i); } console.log('Đã xem các item:', Array.from(viewedIndexes)); if (viewedIndexes.size >= 3) { console.log('Người dùng đã xem ít nhất 3 item khác nhau!'); // Tùy ý thực hiện hành động tại đây, ví dụ: hiển thị nút, gửi tracking, v.v. } // Reset nếu quay về slide đầu if (currentSlide === 0) { viewedIndexes.clear(); console.log('Reset danh sách item đã xem.'); } }); /*---slider activation---*/ $('.slider_carousel').owlCarousel({ animateOut: 'fadeOut', loop: true, nav: false, autoplay: false, autoplayTimeout: 8000, items: 1, dots: true, }); /*---categories column7 activation---*/ $('.categories_column7').on('changed.owl.carousel initialized.owl.carousel', function (event) { $(event.target).find('.owl-item').removeClass('last').eq(event.item.index + event.page.size - 1).addClass('last')}).owlCarousel({ loop: true, nav: false, autoplay: false, autoplayTimeout: 8000, items: 7, margin: 20, dots:false, responsiveClass:true, responsive:{ 0:{ items:1, }, 480:{ items:2, }, 576:{ items:3, }, 768:{ items:5, }, 992:{ items:5, }, 1200:{ items:6, }, 1300:{ items:7, }, } }); /*---product column6 activation---*/ $('.product_column6').on('changed.owl.carousel initialized.owl.carousel', function (event) { $(event.target).find('.owl-item').removeClass('last').eq(event.item.index + event.page.size - 1).addClass('last')}).owlCarousel({ loop: true, nav: true, autoplay: false, autoplayTimeout: 8000, items: 6, margin: 20, dots:false, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 480:{ items:2, }, 576:{ items:2, }, 768:{ items:3, }, 992:{ items:4, }, 1200:{ items:5, }, 1301:{ items:6, }, } }); /*---product column5 activation---*/ $('.product_column5').on('changed.owl.carousel initialized.owl.carousel', function (event) { $(event.target).find('.owl-item').removeClass('last').eq(event.item.index + event.page.size - 1).addClass('last')}).owlCarousel({ loop: true, nav: false, autoplay: false, autoplayTimeout: 8000, items: 5, dots:false, margin: 30, responsiveClass:true, responsive:{ 0:{ items:1, }, 480:{ items:2, }, 768:{ items:3, }, 992:{ items:4, }, 1200:{ items:5, }, } }); function checkClasses(){ var total = $('.product_column5 .owl-stage .owl-item.active').length; $(".product_column5").each(function(){ $(this).find('.owl-item').removeClass('firstActiveItem'); $(this).find('.owl-item').removeClass('lastActiveItem'); $(this).find('.owl-item.active').each(function(index){ if (index === 0) { $(this).addClass('firstActiveItem'); } if (index === total - 1 && total > 1) { $(this).addClass('lastActiveItem'); } }); }); } checkClasses(); /*---product details column5 activation---*/ $('.product_details_column5').on('changed.owl.carousel initialized.owl.carousel', function (event) { $(event.target).find('.owl-item').removeClass('last').eq(event.item.index + event.page.size - 1).addClass('last')}).owlCarousel({ loop: true, nav: true, autoplay: false, autoplayTimeout: 8000, items: 5, dots:false, margin: 30, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 480:{ items:2, }, 768:{ items:3, }, 992:{ items:4, }, 1200:{ items:5, }, } }); /*---product column4 activation---*/ $('.product_column4').on('changed.owl.carousel initialized.owl.carousel', function (event) { $(event.target).find('.owl-item').removeClass('last').eq(event.item.index + event.page.size - 1).addClass('last')}).owlCarousel({ loop: true, nav: true, autoplay: false, autoplayTimeout: 8000, items: 4, dots:false, margin: 30, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 480:{ items:2, }, 768:{ items:3, }, 992:{ items:3, }, 1200:{ items:4, }, } }); /*---product column3 activation---*/ $('.product_column3').on('changed.owl.carousel initialized.owl.carousel', function (event) { $(event.target).find('.owl-item').removeClass('last').eq(event.item.index + event.page.size - 1).addClass('last')}).owlCarousel({ loop: true, nav: true, autoplay: false, autoplayTimeout: 8000, items: 3, dots:false, margin: 30, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 480:{ items:2, }, 768:{ items:3, }, 992:{ items:2, }, 1200:{ items:2, }, 1300:{ items:3, }, } }); /*---product column2 activation---*/ $('.product_column2').on('changed.owl.carousel initialized.owl.carousel', function (event) { $(event.target).find('.owl-item').removeClass('last').eq(event.item.index + event.page.size - 1).addClass('last')}).owlCarousel({ loop: true, nav: true, autoplay: false, autoplayTimeout: 8000, items: 2, dots:false, margin: 30, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 768:{ items:1, }, 992:{ items:2, }, } }); /*---product column2 activation---*/ $('.product_style_four').on('changed.owl.carousel initialized.owl.carousel', function (event) { $(event.target).find('.owl-item').removeClass('last').eq(event.item.index + event.page.size - 1).addClass('last')}).owlCarousel({ loop: true, nav: true, autoplay: false, autoplayTimeout: 8000, items: 2, margin: 20, dots:false, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 768:{ items:1, }, 1200:{ items:2, }, } }); /*---product column1 activation---*/ $('.product_column1').on('changed.owl.carousel initialized.owl.carousel', function (event) { $(event.target).find('.owl-item').removeClass('last').eq(event.item.index + event.page.size - 1).addClass('last')}).owlCarousel({ loop: true, nav: true, autoplay: false, autoplayTimeout: 8000, items: 1, dots:false, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 768:{ items:2, margin: 20, }, 992:{ items:1, }, } }); /*---deals product column1 activation---*/ $('.deals_product_column1').on('changed.owl.carousel initialized.owl.carousel', function (event) { $(event.target).find('.owl-item').removeClass('last').eq(event.item.index + event.page.size - 1).addClass('last')}).owlCarousel({ loop: true, nav: true, autoplay: false, autoplayTimeout: 8000, items: 1, dots:false, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 992:{ items:1, }, } }); /*---small product activation---*/ $('.small_product_active').slick({ centerMode: true, centerPadding: '0', slidesToShow: 1, arrows:true, rows: 4, prevArrow:'', nextArrow:'', responsive:[ { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, } }, { breakpoint: 1200, settings: { slidesToShow: 1, slidesToScroll: 1, rows: 3, } }, ] }); /*---testimonial active activation---*/ $('.testimonial-two').owlCarousel({ loop: true, nav: false, autoplay: true, autoplayTimeout: 8000, items: 3, dots: false, responsiveClass:true, responsive:{ 0:{ items:1, }, 768:{ items:2, }, 992:{ items:3, }, 1200:{ items:3, }, } }) /*---blog column3 activation---*/ $('.blog_column4').owlCarousel({ loop: true, nav: false, autoplay: false, autoplayTimeout: 8000, items: 4, dots:false, margin: 30, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 768:{ items:2, }, 992:{ items:3, }, 1200:{ items:4, }, } }); /*---brand container activation---*/ $('.brand_container').on('changed.owl.carousel initialized.owl.carousel', function (event) { $(event.target).find('.owl-item').removeClass('last').eq(event.item.index + event.page.size - 1).addClass('last')}).owlCarousel({ loop: true, nav: false, autoplay: false, autoplayTimeout: 8000, items: 6, dots:false, responsiveClass:true, responsive:{ 0:{ items:1, }, 320:{ items:2, }, 576:{ items:3, }, 768:{ items:4, }, 992:{ items:5, }, 1200:{ items:6, }, } }); function checkClasses(){ var total = $('.brand_container .owl-stage .owl-item.active').length; $(".brand_container").each(function(){ $(this).find('.owl-item').removeClass('firstActiveItem'); $(this).find('.owl-item').removeClass('lastActiveItem'); $(this).find('.owl-item.active').each(function(index){ if (index === 0) { $(this).addClass('firstActiveItem'); } if (index === total - 1 && total > 1) { $(this).addClass('lastActiveItem'); } }); }); } checkClasses(); /*---blog thumb activation---*/ $('.blog_thumb_active').owlCarousel({ loop: true, nav: true, autoplay: false, autoplayTimeout: 8000, items: 1, navText: ['',''], }); /*---single product activation---*/ $('.single-product-active').owlCarousel({ loop: true, nav: true, autoplay: false, autoplayTimeout: 8000, items: 4, margin:15, dots:false, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 320:{ items:2, margin:10, }, 992:{ items:3, }, 1200:{ items:4, }, } }); /*---product navactive activation---*/ $('.product_navactive').owlCarousel({ loop: false, nav: true, autoplay: false, items: 4, dots:false, navText: ['',''], responsiveClass:true, responsive:{ 0:{ items:1, }, 250:{ items:2, }, 480:{ items:3, }, 768:{ items:4, }, } }); $('.modal').on('shown.bs.modal', function (e) { $('.product_navactive').resize(); }) $('.product_navactive a').on('click',function(e){ e.preventDefault(); var $href = $(this).attr('href'); $('.product_navactive a').removeClass('active'); $(this).addClass('active'); $('.product-details-large .tab-pane').removeClass('active show'); $('.product-details-large '+ $href ).addClass('active show'); }) /*--- video Popup---*/ $('.video_popup').magnificPopup({ type: 'iframe', removalDelay: 300, mainClass: 'mfp-fade' }); /* Popup Video */ if ($('.popup-video').length) { $('.popup-video').magnificPopup({ type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: true }); } /*--- Magnific Popup Video---*/ $('.port_popup').magnificPopup({ type: 'image', gallery: { enabled: true } }); $('#nav-tab a,#nav-tab2 a').on('click', function (e) { e.preventDefault() $(this).tab('show') }) /*--- niceSelect---*/ $('.select_option').niceSelect(); /*--- Accordion---*/ $(".faequently-accordion").collapse({ accordion:true, open: function() { this.slideDown(300); }, close: function() { this.slideUp(300); } }); /*--- counterup activation ---*/ $('.counter_number').counterUp({ delay: 10, time: 1000 }); /*--- ScrollUp Active ---*/ $.scrollUp({ scrollText: '', easingType: 'linear', scrollSpeed: 900, animation: 'fade' }); /*---countdown activation---*/ $('[data-countdown]').each(function() { var $this = $(this), finalDate = $(this).data('countdown'); $this.countdown(finalDate, function(event) { $this.html(event.strftime('
%D
days
%H
hours
%M
mins
%S
secs
')); }); }); /*---slider-range here---*/ $( "#slider-range" ).slider({ range: true, min: 0, max: 500, values: [ 0, 500 ], slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] ); } }); $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) + " - $" + $( "#slider-range" ).slider( "values", 1 ) ); /*---niceSelect---*/ $('.niceselect_option').niceSelect(); /*---elevateZoom---*/ $("#zoom1").elevateZoom({ gallery:'gallery_01', responsive : true, cursor: 'crosshair', zoomType : 'inner' }); /*---portfolio Isotope activation---*/ $('.portfolio_gallery').imagesLoaded( function() { var $grid = $('.portfolio_gallery').isotope({ itemSelector: '.gird_item', percentPosition: true, masonry: { columnWidth: '.gird_item' } }); /*---ilter items on button click---*/ $('.portfolio_button').on( 'click', 'button', function() { var filterValue = $(this).attr('data-filter'); $grid.isotope({ filter: filterValue }); $(this).siblings('.active').removeClass('active'); $(this).addClass('active'); }); }); /*---widget sub categories---*/ $(".widget_sub_categories > a").on("click", function() { $(this).toggleClass('active'); $('.widget_dropdown_categories').slideToggle('medium'); }); /*---categories slideToggle---*/ $(".categories_title").on("click", function() { $(this).toggleClass('active'); $('.categories_menu_toggle').slideToggle('medium'); }); /*---widget sub categories---*/ $(".sub_categories1 > a").on("click", function() { $(this).toggleClass('active'); $('.dropdown_categories1').slideToggle('medium'); }); /*---widget sub categories---*/ $(".sub_categories2 > a").on("click", function() { $(this).toggleClass('active'); $('.dropdown_categories2').slideToggle('medium'); }); /*---widget sub categories---*/ $(".sub_categories3 > a").on("click", function() { $(this).toggleClass('active'); $('.dropdown_categories3').slideToggle('medium'); }); /*---------- Category more toggle ----------*/ $(".categories_menu_toggle li.hidden").hide(); $("#more-btn").on('click', function (e) { e.preventDefault(); $(".categories_menu_toggle li.hidden").toggle(500); var htmlAfter = ' Less Categories'; var htmlBefore = ' More Categories'; if ($(this).html() == htmlBefore) { $(this).html(htmlAfter); } else { $(this).html(htmlBefore); } }); /*---Category menu---*/ function categorySubMenuToggle(){ $('.categories_menu_toggle li.menu_item_children > a').on('click', function(){ if($(window).width() < 992){ $(this).removeAttr('href'); var element = $(this).parent('li'); if (element.hasClass('open')) { element.removeClass('open'); element.find('li').removeClass('open'); element.find('ul').slideUp(); } else { element.addClass('open'); element.children('ul').slideDown(); element.siblings('li').children('ul').slideUp(); element.siblings('li').removeClass('open'); element.siblings('li').find('li').removeClass('open'); element.siblings('li').find('ul').slideUp(); } } }); $('.categories_menu_toggle li.menu_item_children > a').append(''); } categorySubMenuToggle(); /*---shop grid activation---*/ $('.shop_toolbar_btn > button').on('click', function (e) { e.preventDefault(); $('.shop_toolbar_btn > button').removeClass('active'); $(this).addClass('active'); var parentsDiv = $('.shop_wrapper'); var viewMode = $(this).data('role'); parentsDiv.removeClass('grid_3 grid_4 grid_5 grid_list').addClass(viewMode); if(viewMode == 'grid_3'){ parentsDiv.children().addClass('col-lg-4 col-md-4 col-sm-6').removeClass('col-lg-3 col-cust-5 col-12'); } if(viewMode == 'grid_4'){ parentsDiv.children().addClass('col-lg-3 col-md-4 col-sm-6').removeClass('col-lg-4 col-cust-5 col-12'); } if(viewMode == 'grid_list'){ parentsDiv.children().addClass('col-12').removeClass('col-lg-3 col-lg-4 col-md-4 col-sm-6 col-cust-5'); } }); /*---search box slideToggle---*/ $(".search_box > a").on("click", function() { $(this).toggleClass('active'); $('.search_widget').slideToggle('medium'); }); /*---mini wishlist activation---*/ $('.mini_wishlist_wrapper .mini_wishlist_action').on('click', function(){ $('.mini_wishlist').toggleClass('active'); // Remove $('.offcanvas_menu_wrapper,.off_canvars_overlay').removeClass('active'); $('.mini_cart').removeClass('active'); }); $('.mini_wishlist_close').on('click', function(){ $('.mini_wishlist').removeClass('active') }); // quick wishlist button $('#wishlist-vr .wishlist-vr-img-circle').on('click', function(){ $('.mini_wishlist').toggleClass('active'); // Remove $('.offcanvas_menu_wrapper,.off_canvars_overlay').removeClass('active'); $('.mini_cart').removeClass('active'); }); $('.main').on('click', function(e){ var mini_wishlist_active = $('.mini_wishlist').hasClass('active'); if(mini_wishlist_active) { $('.mini_wishlist').removeClass('active'); } }); /*---mini cart activation---*/ $('.mini_cart_wrapper .mini_cart_action').on('click', function(){ $('.mini_cart').toggleClass('active'); // Remove $('.offcanvas_menu_wrapper,.off_canvars_overlay').removeClass('active'); $('.mini_wishlist').removeClass('active'); }); $('.mini_cart_close').on('click', function(){ $('.mini_cart').removeClass('active') }); // quick cart button $('#cart-vr .cart-vr-img-circle').on('click', function(){ $('.mini_cart').toggleClass('active'); // Remove $('.offcanvas_menu_wrapper,.off_canvars_overlay').removeClass('active'); $('.mini_wishlist').removeClass('active'); }); $('.main').on('click', function(e){ var mini_cart_active = $('.mini_cart').hasClass('active'); if(mini_cart_active) { $('.mini_cart').removeClass('active'); } }); /*---canvas menu activation---*/ $('.canvas_open').on('click', function(){ $('.offcanvas_menu_wrapper,.off_canvars_overlay').addClass('active') }); $('.canvas_close,.off_canvars_overlay').on('click', function(){ $('.offcanvas_menu_wrapper,.off_canvars_overlay').removeClass('active') }); $('.nav-mmenu-toggler').on('click', function(){ $('.offcanvas_menu_wrapper,.off_canvars_overlay').toggleClass('active'); // Remove $('.mini_wishlist').removeClass('active'); $('.mini_cart').removeClass('active'); }); $('.nav-menu-wishlist').on('click', function(){ $('.mini_wishlist').toggleClass('active'); // Remove $('.offcanvas_menu_wrapper,.off_canvars_overlay').removeClass('active'); $('.mini_cart').removeClass('active'); }); $('.nav-menu-shoppingcart').on('click', function(){ $('.mini_cart').toggleClass('active'); // Remove $('.offcanvas_menu_wrapper,.off_canvars_overlay').removeClass('active'); $('.mini_wishlist').removeClass('active'); }); /* Slide Up */ const slideUp = (target, time) => { const duration = time ? time : 500 target.style.transitionProperty = "height, margin, padding" target.style.transitionDuration = duration + "ms" target.style.boxSizing = "border-box" target.style.height = target.offsetHeight + "px" target.offsetHeight target.style.overflow = "hidden" target.style.height = 0 window.setTimeout(() => { target.style.display = "none" target.style.removeProperty("height") target.style.removeProperty("overflow") target.style.removeProperty("transition-duration") target.style.removeProperty("transition-property") }, duration) } /* Slide Down */ const slideDown = (target, time) => { const duration = time ? time : 500 target.style.removeProperty("display") let display = window.getComputedStyle(target).display if (display === "none") display = "block" target.style.display = display const height = target.offsetHeight target.style.overflow = "hidden" target.style.height = 0 target.offsetHeight target.style.boxSizing = "border-box" target.style.transitionProperty = "height, margin, padding" target.style.transitionDuration = duration + "ms" target.style.height = height + "px" window.setTimeout(() => { target.style.removeProperty("height") target.style.removeProperty("overflow") target.style.removeProperty("transition-duration") target.style.removeProperty("transition-property") }, duration) } /* Slide Toggle */ const slideToggle = (target, time) => { const duration = time ? time : 500 if (window.getComputedStyle(target).display === "none") { return slideDown(target, duration) } else { return slideUp(target, duration) } } /*---Off Canvas Menu---*/ var $offcanvasNav = $('.offcanvas_main_menu'), $offcanvasNavSubMenu = $offcanvasNav.find('.sub-menu'); $offcanvasNavSubMenu.parent().prepend(''); $offcanvasNavSubMenu.slideUp(); $offcanvasNav.on('click', 'li a, li .menu-expand', function(e) { var $this = $(this); if ( ($this.parent().attr('class').match(/\b(menu-item-has-children|has-children|has-sub-menu)\b/)) && ($this.attr('href') === '#' || $this.hasClass('menu-expand')) ) { e.preventDefault(); if ($this.siblings('ul:visible').length){ $this.siblings('ul').slideUp('slow'); }else { $this.closest('li').siblings('li').find('ul:visible').slideUp('slow'); $this.siblings('ul').slideDown('slow'); } } if( $this.is('a') || $this.is('span') || $this.attr('clas').match(/\b(menu-expand)\b/) ){ $this.parent().toggleClass('menu-open'); }else if( $this.is('li') && $this.attr('class').match(/\b('menu-item-has-children')\b/) ){ $this.toggleClass('menu-open'); } }); /*js ripples activation*/ $('.js-ripples').ripples({ resolution: 512, dropRadius: 20, perturbance: 0.04 }); /*------------------------------------- OwlCarousel -------------------------------------*/ $('.rs-carousel').each(function() { var owlCarousel = $(this), loop = owlCarousel.data('loop'), items = owlCarousel.data('items'), margin = owlCarousel.data('margin'), stagePadding = owlCarousel.data('stage-padding'), autoplay = owlCarousel.data('autoplay'), autoplayTimeout = owlCarousel.data('autoplay-timeout'), smartSpeed = owlCarousel.data('smart-speed'), dots = owlCarousel.data('dots'), nav = owlCarousel.data('nav'), navSpeed = owlCarousel.data('nav-speed'), xsDevice = owlCarousel.data('mobile-device'), xsDeviceNav = owlCarousel.data('mobile-device-nav'), xsDeviceDots = owlCarousel.data('mobile-device-dots'), smDevice = owlCarousel.data('ipad-device'), smDeviceNav = owlCarousel.data('ipad-device-nav'), smDeviceDots = owlCarousel.data('ipad-device-dots'), smDevice2 = owlCarousel.data('ipad-device2'), smDeviceNav2 = owlCarousel.data('ipad-device-nav2'), smDeviceDots2 = owlCarousel.data('ipad-device-dots2'), mdDevice = owlCarousel.data('md-device'), centerMode = owlCarousel.data('center-mode'), HoverPause = owlCarousel.data('hoverpause'), mdDeviceNav = owlCarousel.data('md-device-nav'), mdDeviceDots = owlCarousel.data('md-device-dots'); owlCarousel.owlCarousel({ loop: (loop ? true : false), items: (items ? items : 4), lazyLoad: true, center: (centerMode ? true : false), autoplayHoverPause: (HoverPause ? true : false), margin: (margin ? margin : 0), //stagePadding: (stagePadding ? stagePadding : 0), autoplay: (autoplay ? true : false), autoplayTimeout: (autoplayTimeout ? autoplayTimeout : 1000), smartSpeed: (smartSpeed ? smartSpeed : 250), dots: (dots ? true : false), nav: (nav ? true : false), navText: ["", ""], navSpeed: (navSpeed ? true : false), responsiveClass: true, responsive: { 0: { items: (xsDevice ? xsDevice : 1), nav: (xsDeviceNav ? true : false), dots: (xsDeviceDots ? true : false), center: false, }, 768: { items: (smDevice2 ? smDevice2 : 2), nav: (smDeviceNav2 ? true : false), dots: (smDeviceDots2 ? true : false), center: false, }, 992: { items: (smDevice ? smDevice : 3), nav: (smDeviceNav ? true : false), dots: (smDeviceDots ? true : false), center: false, }, 1200: { items: (mdDevice ? mdDevice : 4), nav: (mdDeviceNav ? true : false), dots: (mdDeviceDots ? true : false), } } }); }); /* Offcanvas/Collapseable Menu */ const offCanvasMenu = (selector) => { const offCanvasNav = document.querySelector(selector) if(offCanvasNav) { offCanvasNav.querySelectorAll(".menu-expand").forEach((item) => { item.addEventListener("click", (e) => { e.preventDefault() const parent = item.parentElement.parentElement if (parent.classList.contains("active")) { parent.classList.remove("active") parent .querySelectorAll(".sub-menu, .mega-menu, .children") .forEach((subMenu) => { subMenu.parentElement.classList.remove("active") slideUp(subMenu) }) } else { parent.classList.add("active") slideDown(item.parentElement.nextElementSibling) getSiblings(parent).forEach((item) => { item.classList.remove("active") item.querySelectorAll( ".sub-menu, .mega-menu, .children" ).forEach((subMenu) => { subMenu.parentElement.classList.remove("active") slideUp(subMenu) }) }) } }) }) } } offCanvasMenu(".navbar-mobile-menu, .slidedown-menu__menu") /*-- On Scroll Animations -----------------------------------*/ const scrollElements = document.querySelectorAll(".js-scroll") const elementInView = (el, dividend = 1) => { const elementTop = el.getBoundingClientRect().top return ( elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend ) } const elementOutofView = (el) => { const elementTop = el.getBoundingClientRect().top return ( elementTop > (window.innerHeight || document.documentElement.clientHeight) ) } const displayScrollElement = (element) => { element.classList.add("scrolled") } const hideScrollElement = (element) => { element.classList.remove("scrolled") } const handleScrollAnimation = () => { scrollElements.forEach((el) => { if (elementInView(el, 1.25)) { displayScrollElement(el) } else if (elementOutofView(el)) { hideScrollElement(el) } }) } ;["scroll", "load"].forEach((el) => { window.addEventListener(el, handleScrollAnimation) }) })(jQuery);