Cleanup: Remoción masiva de restos de WordPress y consolidación de archivos GKACHELE™
This commit is contained in:
komkida91
527
gk-assets/themes/chromax/assets/js/custom.js
Normal file
527
gk-assets/themes/chromax/assets/js/custom.js
Normal file
@@ -0,0 +1,527 @@
|
||||
(function($) {
|
||||
'use strict';
|
||||
|
||||
// Function to hide preloader
|
||||
var preloader = $('.dt_preloader');
|
||||
function initHidePreloader() {
|
||||
$('body').addClass('overlay--enabled')
|
||||
if (preloader.length) {
|
||||
preloader.addClass('loaded');
|
||||
preloader.delay(600).fadeOut();
|
||||
$('body').removeClass('overlay--enabled');
|
||||
}
|
||||
}
|
||||
if (preloader.length) {
|
||||
$('.dt_preloader-close').on('click', function() {
|
||||
preloader.addClass('loaded');
|
||||
preloader.delay(600).fadeOut();
|
||||
$('body').removeClass('overlay--enabled');
|
||||
});
|
||||
}
|
||||
|
||||
// Function to handle scrolling and update progress bar
|
||||
function initUpdateProgressBar() {
|
||||
var scroll = $(window).scrollTop();
|
||||
var height = $(document).height() - $(window).height();
|
||||
var progressPath = $('.dt_uptop path')[0];
|
||||
var pathLength = progressPath.getTotalLength();
|
||||
var progress = pathLength - (scroll * pathLength / height);
|
||||
progressPath.style.strokeDashoffset = progress;
|
||||
}
|
||||
|
||||
// Function to initialize Owl Slider Main
|
||||
function splitTitleWords($element) {
|
||||
const text = $element.data('text');
|
||||
if (!text) return;
|
||||
// Wrap the text in a temp div to allow HTML parsing
|
||||
const tempDiv = $('<div>').html(text);
|
||||
const contentNodes = tempDiv.contents();
|
||||
$element.html('');
|
||||
//const words = text.split(' ');
|
||||
//$element.html('');
|
||||
// words.forEach((word) => {
|
||||
// $element.append(`<span>${word}</span> `);
|
||||
// });
|
||||
/*if ($('.dt_slider').hasClass('dt_slider--one')) {
|
||||
words.forEach((word, index) => {
|
||||
const delay = index * 0.1;
|
||||
$element.append(`<span style="animation-delay: ${delay}s">${word} </span>`);
|
||||
});
|
||||
}*/
|
||||
if ($('.dt_slider').hasClass('dt_slider--one')) {
|
||||
let wordIndex = 0;
|
||||
contentNodes.each(function () {
|
||||
if (this.nodeType === 3) {
|
||||
// Text node
|
||||
const words = this.textContent.split(' ');
|
||||
words.forEach((word) => {
|
||||
const delay = wordIndex * 0.1;
|
||||
$element.append(`<span style="animation-delay: ${delay}s">${word} </span>`);
|
||||
wordIndex++;
|
||||
});
|
||||
} else if (this.nodeType === 1) {
|
||||
// Element node (e.g., span)
|
||||
const $span = $(this);
|
||||
const words = $span.text().split(' ');
|
||||
words.forEach((word) => {
|
||||
const delay = wordIndex * 0.1;
|
||||
$element.append(`<span class="${$span.attr('class')}" style="animation-delay: ${delay}s">${word} </span>`);
|
||||
wordIndex++;
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$element.html(text);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function prepareAllTitles() {
|
||||
$('.dt_slider .title').each(function () {
|
||||
splitTitleWords($(this));
|
||||
});
|
||||
}
|
||||
|
||||
function animateCurrentSlideContent() {
|
||||
const $activeSlide = $('.dt_slider .owl-item.active').not('.cloned');
|
||||
const $title = $activeSlide.find('.title');
|
||||
const $subtitle = $activeSlide.find('.subtitle');
|
||||
const $text = $activeSlide.find('.text');
|
||||
const $btnGroup = $activeSlide.find('.dt_btn-group');
|
||||
|
||||
// Skip if already animated
|
||||
if ($activeSlide.hasClass('content-animated')) return;
|
||||
|
||||
// Remove animations from all other slides
|
||||
$('.dt_slider .owl-item').removeClass('content-animated');
|
||||
$('.dt_slider .title').removeClass('animate-title');
|
||||
$('.dt_slider .subtitle').removeClass('animate-subtitle');
|
||||
$('.dt_slider .text').removeClass('animate-text');
|
||||
$('.dt_slider .dt_btn-group').removeClass('animate-buttons');
|
||||
|
||||
// Add animation classes
|
||||
$title.addClass('animate-title');
|
||||
$subtitle.addClass('animate-subtitle');
|
||||
$text.addClass('animate-text');
|
||||
$btnGroup.addClass('animate-buttons');
|
||||
|
||||
// Mark this slide as animated
|
||||
$activeSlide.addClass('content-animated');
|
||||
}
|
||||
|
||||
function initOwlCarousels() {
|
||||
$(".dt_owl_carousel").each(function () {
|
||||
const $carousel = $(this);
|
||||
const options = typeof $carousel.data("owl-options") === "object"
|
||||
? $carousel.data("owl-options")
|
||||
: JSON.parse($carousel.attr("data-owl-options"));
|
||||
|
||||
$carousel.owlCarousel(options)
|
||||
.on('initialized.owl.carousel', function () {
|
||||
prepareAllTitles(); // Split title words to spans
|
||||
if ($('.dt_slider').hasClass('dt_slider--one')) {
|
||||
animateCurrentSlideContent(); // Animate first slide
|
||||
}
|
||||
})
|
||||
.on('translated.owl.carousel', function () {
|
||||
if ($('.dt_slider').hasClass('dt_slider--one')) {
|
||||
animateCurrentSlideContent(); // Animate after slide transition
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Event handling for scrolling and updating progress bar
|
||||
$(window).on('scroll', function() {
|
||||
$('.dt_uptop').toggleClass('active', $(this).scrollTop() > 50);
|
||||
initUpdateProgressBar();
|
||||
});
|
||||
|
||||
// Function to handle click event for scrolling to top
|
||||
$('.dt_uptop').on('click', function(event) {
|
||||
event.preventDefault();
|
||||
$('html, body').animate({ scrollTop: 0 }, 550);
|
||||
});
|
||||
|
||||
if ($('.smoother-yes').length) {
|
||||
const lenis = new Lenis({
|
||||
smoothWheel: true,
|
||||
wheelMultiplier: 1.2,
|
||||
duration: 1.5,
|
||||
lerp: 0.1,
|
||||
});
|
||||
function raf(time) {
|
||||
lenis.raf(time);
|
||||
requestAnimationFrame(raf);
|
||||
}
|
||||
requestAnimationFrame(raf);
|
||||
|
||||
// Handle scroll animation for anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach((el) => {
|
||||
el.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
const id = el.getAttribute('href')?.slice(1);
|
||||
if (!id) return;
|
||||
const target = document.getElementById(id);
|
||||
if (target) {
|
||||
target.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Function to handle lenis prevent for dynamic select woo checkout
|
||||
if($('body.woocommerce-checkout').length) {
|
||||
const lenisPreventDynamic = () => {
|
||||
document.querySelectorAll('.select2-results__options:not([data-lenis-prevent])').forEach((el) => {
|
||||
el.setAttribute('data-lenis-prevent', '');
|
||||
});
|
||||
};
|
||||
const observer = new MutationObserver((mutationsList) => {
|
||||
mutationsList.forEach((mutation) => {
|
||||
mutation.addedNodes.forEach((node) => {
|
||||
if (node.nodeType === 1 && node.matches('.select2-results__options')) {
|
||||
lenisPreventDynamic();
|
||||
} else if (node.nodeType === 1 && node.querySelector('.select2-results__options')) {
|
||||
lenisPreventDynamic();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
lenisPreventDynamic();
|
||||
}
|
||||
}
|
||||
|
||||
// Title Animation
|
||||
const bodyClass = document.body.classList;
|
||||
const animationStyle = [...bodyClass].find(cls => cls.startsWith("use-animation-style-"));
|
||||
|
||||
document.querySelectorAll(".text-animate").forEach(el => {
|
||||
let split;
|
||||
|
||||
switch (animationStyle) {
|
||||
case "use-animation-style-1":
|
||||
split = new SplitText(el, {
|
||||
type: "chars, words"
|
||||
});
|
||||
gsap.from(split.words, {
|
||||
duration: 1,
|
||||
delay: 0.5,
|
||||
x: 20,
|
||||
autoAlpha: 0,
|
||||
stagger: 0.05,
|
||||
scrollTrigger: {
|
||||
trigger: el,
|
||||
start: "top 85%"
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
||||
case "use-animation-style-2":
|
||||
split = new SplitText(el, {
|
||||
type: "chars, words"
|
||||
});
|
||||
gsap.from(split.chars, {
|
||||
duration: 2,
|
||||
delay: 0.1,
|
||||
x: 20,
|
||||
autoAlpha: 0,
|
||||
stagger: 0.03,
|
||||
ease: "power2.out",
|
||||
scrollTrigger: {
|
||||
trigger: el,
|
||||
start: "top 85%"
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
||||
case "use-animation-style-3":
|
||||
if (el.animation) {
|
||||
el.animation.progress(1).kill();
|
||||
el.split.revert();
|
||||
}
|
||||
el.split = new SplitText(el, {
|
||||
type: "lines,words,chars",
|
||||
linesClass: "split-line"
|
||||
});
|
||||
gsap.set(el, {
|
||||
perspective: 400
|
||||
});
|
||||
gsap.set(el.split.chars, {
|
||||
opacity: 0,
|
||||
x: "50"
|
||||
});
|
||||
el.animation = gsap.to(el.split.chars, {
|
||||
scrollTrigger: {
|
||||
trigger: el,
|
||||
start: "top 90%"
|
||||
},
|
||||
x: "0",
|
||||
y: "0",
|
||||
rotateX: "0",
|
||||
opacity: 1,
|
||||
duration: 1,
|
||||
ease: "back.out(1.7)",
|
||||
stagger: 0.02
|
||||
});
|
||||
break;
|
||||
|
||||
case "use-animation-style-4":
|
||||
const tl = gsap.timeline({
|
||||
scrollTrigger: {
|
||||
trigger: el,
|
||||
start: 'top 90%',
|
||||
end: 'bottom 60%',
|
||||
scrub: false,
|
||||
markers: false,
|
||||
toggleActions: 'play none none none'
|
||||
}
|
||||
});
|
||||
const itemSplitted = new SplitText(el, {
|
||||
type: "words, lines"
|
||||
});
|
||||
gsap.set(el, {
|
||||
perspective: 400
|
||||
});
|
||||
itemSplitted.split({
|
||||
type: "lines"
|
||||
});
|
||||
tl.from(itemSplitted.lines, {
|
||||
duration: 1,
|
||||
delay: 0.3,
|
||||
opacity: 0,
|
||||
rotationX: -80,
|
||||
force3D: true,
|
||||
transformOrigin: "top center -50",
|
||||
stagger: 0.1
|
||||
});
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// Function to initialize FancyBox for lightbox images
|
||||
function initLightbox() {
|
||||
if ($('.dt_lightbox_img').length) {
|
||||
$('.dt_lightbox_img').fancybox({
|
||||
openEffect: 'fade',
|
||||
closeEffect: 'fade',
|
||||
helpers: { media: {} }
|
||||
});
|
||||
}
|
||||
$('.wp-block-image').each(function() {
|
||||
$(this).find("a").attr('data-fancybox', 'gallery');
|
||||
});
|
||||
if ($('.wp-block-image a').length) {
|
||||
$('[data-fancybox="gallery"]').fancybox({
|
||||
buttons: ["slideShow", "thumbs", "zoom", "fullScreen", "share", "close"],
|
||||
loop: false,
|
||||
protect: true
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Function to initialize scroll pin effect
|
||||
function initScrollPinEffect() {
|
||||
//gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
document.querySelectorAll(".gsap-fixed-yes").forEach(container => {
|
||||
const elements = container.querySelectorAll(":scope > *");
|
||||
|
||||
// Only kill triggers inside this container
|
||||
ScrollTrigger.getAll().forEach(trigger => {
|
||||
const el = trigger.trigger;
|
||||
if (el && el.closest && el.closest(".gsap-fixed-yes") === container) {
|
||||
trigger.kill();
|
||||
}
|
||||
});
|
||||
|
||||
// Force container to have enough height
|
||||
const totalHeight = Array.from(elements).reduce((acc, el) => acc + el.offsetHeight, 0);
|
||||
container.style.minHeight = totalHeight + "px";
|
||||
|
||||
const startClass = Array.from(container.classList).find(c => c.startsWith("start-"));
|
||||
const startOffset = startClass ? parseInt(startClass.split("-")[1]) : 40;
|
||||
|
||||
elements.forEach((element, index) => {
|
||||
ScrollTrigger.create({
|
||||
trigger: element,
|
||||
start: `top-=${startOffset}`,
|
||||
end: `bottom top+=${element.offsetHeight + startOffset}`,
|
||||
endTrigger: container,
|
||||
pin: true,
|
||||
pinSpacing: false,
|
||||
scrub: false,
|
||||
id: `${container.id}-trigger-${index}`,
|
||||
invalidateOnRefresh: true
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Important: Refresh after everything
|
||||
ScrollTrigger.refresh(true);
|
||||
}
|
||||
|
||||
// Particles
|
||||
const particleOptions = {
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 100,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 4000
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "random"
|
||||
},
|
||||
"shape": {
|
||||
"type": "polygon",
|
||||
"polygon": {
|
||||
"nb_sides": 6
|
||||
},
|
||||
"image": {
|
||||
"src": "img/github.svg",
|
||||
"width": 100,
|
||||
"height": 100
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 1,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": true,
|
||||
"speed": 1,
|
||||
"opacity_min": 0,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 3,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 4,
|
||||
"size_min": 0.3,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 1,
|
||||
"direction": "none",
|
||||
"random": true,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 600
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
};
|
||||
|
||||
// Data Background
|
||||
$("[data-background]").each(function () {
|
||||
$(this).css("background-image", "url(" + $(this).attr("data-background") + ")");
|
||||
});
|
||||
|
||||
// Text animation for bounce effect
|
||||
if ($('.bounce-text').length) {
|
||||
$('.bounce-text').each(function () {
|
||||
let $this = $(this);
|
||||
let targetColor = $this.data('bounce-color') || '#000DFF';
|
||||
|
||||
// Split the text into characters
|
||||
let mySplitText = new SplitText($this, { type: "chars" });
|
||||
let chars = mySplitText.chars;
|
||||
|
||||
// Hide initially
|
||||
gsap.set($this, { opacity: 0 });
|
||||
|
||||
// Animation Timeline (paused initially)
|
||||
let tl = gsap.timeline({ repeat: -1, paused: true });
|
||||
|
||||
tl.to(chars, {
|
||||
duration: 0.5,
|
||||
scaleY: 0.6,
|
||||
ease: "power3.out",
|
||||
stagger: 0.04,
|
||||
transformOrigin: 'center bottom'
|
||||
});
|
||||
|
||||
tl.to(chars, {
|
||||
yPercent: -20,
|
||||
ease: "elastic",
|
||||
stagger: 0.03,
|
||||
duration: 0.8
|
||||
}, 0.5);
|
||||
|
||||
tl.to(chars, {
|
||||
scaleY: 1,
|
||||
ease: "elastic.out(2.5, 0.2)",
|
||||
stagger: 0.03,
|
||||
duration: 1.5
|
||||
}, 0.5);
|
||||
|
||||
tl.to(chars, {
|
||||
yPercent: 0,
|
||||
ease: "back",
|
||||
stagger: 0.03,
|
||||
duration: 0.8
|
||||
}, 0.7);
|
||||
|
||||
tl.to(chars, {
|
||||
color: 'targetColor',
|
||||
duration: 1.4,
|
||||
stagger: 0.05
|
||||
});
|
||||
|
||||
// ScrollTrigger to reveal and play animation
|
||||
ScrollTrigger.create({
|
||||
trigger: $this[0],
|
||||
start: 'bottom 100%-=50px',
|
||||
once: true,
|
||||
onEnter: function () {
|
||||
gsap.to($this, {
|
||||
opacity: 1,
|
||||
duration: 1,
|
||||
ease: 'power2.out',
|
||||
onComplete: function () {
|
||||
tl.play();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Function to initialize headline and preloader on window load
|
||||
function initializeComponents() {
|
||||
$(window).on('load', function() {
|
||||
initHidePreloader();
|
||||
initUpdateProgressBar();
|
||||
initScrollPinEffect();
|
||||
});
|
||||
}
|
||||
|
||||
$(document).ready(function () {
|
||||
prepareAllTitles(); // Setup spans
|
||||
initOwlCarousels(); // Init everything
|
||||
initLightbox(); // Initialize lightbox
|
||||
$('.particles-js-area').each(function(index) {
|
||||
const id = 'particles-js-' + index;
|
||||
$(this).attr('id', id);
|
||||
particlesJS(id, particleOptions);
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize headline and preloader
|
||||
initializeComponents();
|
||||
|
||||
})(jQuery);
|
||||
434
gk-assets/themes/chromax/assets/js/theme.js
Normal file
434
gk-assets/themes/chromax/assets/js/theme.js
Normal file
@@ -0,0 +1,434 @@
|
||||
! function($, b) {
|
||||
"use strict";
|
||||
var a = {
|
||||
eventID: "DtThemeJs",
|
||||
document: $(document),
|
||||
window: $(window),
|
||||
body: $("body"),
|
||||
classes: {
|
||||
toggled: "active", isOverlay: "overlay--enabled", mobileMainMenuActive: "dt_mobilenav-mainmenu--active", headerSearchActive: "dt_header-search--active", headerSidebarActive: "sidebar--active"
|
||||
},
|
||||
init: function() {
|
||||
this.document.on("ready", this.documentReadyRender.bind(this)),
|
||||
this.document.on("ready", this.menuFocusAccessibility.bind(this)),
|
||||
this.document.on("ready", this.headerHeight.bind(this)),
|
||||
this.document.on("ready", this.topbarMobile.bind(this)),
|
||||
this.document.on("ready", this.mobileNavRight.bind(this)),
|
||||
this.document.on("ready", this.fixDuplicateSearchIds.bind(this)),
|
||||
this.window.on("ready", this.documentReadyRender.bind(this))
|
||||
},
|
||||
documentReadyRender: function() {
|
||||
this.document.on("click." + this.eventID, ".dt_mobilenav-mainmenu-toggle", this.menuToggleHandler.bind(this)).on("click." + this.eventID, ".dt_header-closemenu", this.menuToggleHandler.bind(this)).on("click." + this.eventID, this.hideHeaderMobilePopup.bind(this)).on("click." + this.eventID, ".dt_mobilenav-dropdown-toggle", this.verticalMobileSubMenuLinkHandle.bind(this)).on("click." + this.eventID, ".dt_header-closemenu", this.resetVerticalMobileMenu.bind(this)).on("hideHeaderMobilePopup." + this.eventID, this.resetVerticalMobileMenu.bind(this)).on("click." + this.eventID, ".dt_navbar-search-toggle", this.searchPopupHandler.bind(this)).on("click." + this.eventID, ".dt_search-close", this.searchPopupHandler.bind(this)).on("click." + this.eventID, ".dt_navbar-sidebar-toggle", this.sidebarPopupHandler.bind(this)).on("click." + this.eventID, ".dt_sidebar-close", this.sidebarPopupHandler.bind(this)), this.window.on("scroll." + this.eventID, this.scrollToSticky.bind(this)).on("resize." + this.eventID, this.headerHeight.bind(this))
|
||||
},
|
||||
scrollToSticky: function(b) {
|
||||
var $sticky = $(".is--sticky");
|
||||
var scrollTop = $(window).scrollTop();
|
||||
|
||||
// Preserve lastScrollTop outside the function so it remembers previous value
|
||||
if (typeof this.lastScrollTop === "undefined") {
|
||||
this.lastScrollTop = 0;
|
||||
}
|
||||
|
||||
if ($sticky.hasClass("reverse")) {
|
||||
// Reverse scroll behavior
|
||||
if (scrollTop < 200) {
|
||||
$sticky.removeClass("on");
|
||||
} else if (scrollTop > this.lastScrollTop) {
|
||||
// Scrolling down
|
||||
$sticky.removeClass("on");
|
||||
} else {
|
||||
// Scrolling up
|
||||
$sticky.addClass("on");
|
||||
}
|
||||
} else {
|
||||
// Normal sticky behavior
|
||||
if (scrollTop >= 220) {
|
||||
$sticky.addClass("on");
|
||||
} else {
|
||||
$sticky.removeClass("on");
|
||||
}
|
||||
}
|
||||
|
||||
this.lastScrollTop = scrollTop;
|
||||
},
|
||||
headerHeight: function(d) {
|
||||
var a = $(".dt_header-navwrapper"),
|
||||
b = $(".dt_header-navwrapperinner"),
|
||||
c = 0;
|
||||
$("body").find("div").hasClass("is--sticky") && (b.each(function() {
|
||||
var a = this.clientHeight;
|
||||
a > c && (c = a)
|
||||
}), a.css("min-height", c))
|
||||
},
|
||||
// New function to fix duplicate IDs
|
||||
fixDuplicateSearchIds: function() {
|
||||
// Fix desktop search IDs
|
||||
var desktopSearch = document.querySelector('.dt_navbar .dt_search-form');
|
||||
var desktopSearchField = document.querySelector('.dt_navbar .dt_search-field');
|
||||
var desktopSearchLabel = document.querySelector('.dt_navbar .dt_search-form label');
|
||||
|
||||
if (desktopSearch && desktopSearchField && desktopSearchLabel) {
|
||||
desktopSearchField.id = "dt_search-form-desktop";
|
||||
desktopSearchLabel.setAttribute('for', 'dt_search-form-desktop');
|
||||
}
|
||||
|
||||
// Fix mobile search IDs
|
||||
var mobileSearch = document.querySelector('.dt_mobilenav .dt_search-form');
|
||||
var mobileSearchField = document.querySelector('.dt_mobilenav .dt_search-field');
|
||||
var mobileSearchLabel = document.querySelector('.dt_mobilenav .dt_search-form label');
|
||||
|
||||
if (mobileSearch && mobileSearchField && mobileSearchLabel) {
|
||||
mobileSearchField.id = "dt_search-form-mobile";
|
||||
mobileSearchLabel.setAttribute('for', 'dt_search-form-mobile');
|
||||
}
|
||||
},
|
||||
topbarAccessibility: function() {
|
||||
var b, a, d, c = document.querySelector(".dt_mobilenav-topbar");
|
||||
var f = document.querySelector(".dt_mobilenav-topbar-toggle"),
|
||||
e = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),
|
||||
g = e[e.length - 1];
|
||||
if (!c) return !1;
|
||||
for (a = 0, d = (b = c.getElementsByTagName("a")).length; a < d; a++) b[a].addEventListener("focus", h, !0), b[a].addEventListener("blur", h, !0);
|
||||
|
||||
function h() {
|
||||
for (var a = this; - 1 === a.className.indexOf("dt_mobilenav-topbar");) "*" === a.tagName.toLowerCase() && (-1 !== a.className.indexOf("focus") ? a.className = a.className.replace(" focus", "") : a.className += " focus"), a = a.parentElement
|
||||
}
|
||||
document.addEventListener("keydown", function(a) {
|
||||
("Tab" === a.key || 9 === a.keyCode) && f.classList.contains("active") && (a.shiftKey ? document.activeElement === f && (g.focus(), a.preventDefault()) : document.activeElement === g && (f.focus(), a.preventDefault()))
|
||||
})
|
||||
},
|
||||
topbarMobile: function() {
|
||||
var c = $(".dt_mobilenav-topbar-content"),
|
||||
b = $(".dt_header-widget"),
|
||||
a = $(".dt_mobilenav-topbar-toggle");
|
||||
!b.children().length > 0 ? a.hide() : (a.show(), a.on("click", function(b) {
|
||||
c.slideToggle(), a.toggleClass("active"), b.preventDefault()
|
||||
}), this.topbarAccessibility())
|
||||
},
|
||||
mobileNavRight: function() {
|
||||
$(".dt_navbar-right .dt_navbar-cart-item").clone().prependTo(".dt_mobilenav-right .dt_navbar-list-right");
|
||||
},
|
||||
menuFocusAccessibility: function(a) {
|
||||
$(".dt_navbar-nav, .widget_nav_menu").find("a").on("focus blur", function() {
|
||||
$(this).parents("ul, li").toggleClass("focus")
|
||||
})
|
||||
},
|
||||
menuToggleHandler: function(c) {
|
||||
var b = $(".dt_mobilenav-mainmenu-content"),
|
||||
a = $(".dt_mobilenav-mainmenu-toggle");
|
||||
this.body.toggleClass(this.classes.mobileMainMenuActive), this.body.toggleClass(this.classes.isOverlay), a.toggleClass(this.classes.toggled), b.fadeToggle(), this.body.hasClass(this.classes.mobileMainMenuActive) ? $(".dt_header-closemenu").focus() : a.focus(), this.menuAccessibility()
|
||||
},
|
||||
hideHeaderMobilePopup: function(a) {
|
||||
var b = $(".dt_mobilenav-mainmenu-toggle"),
|
||||
c = $(".dt_mobilenav-mainmenu");
|
||||
!$(a.target).closest(b).length && !$(a.target).closest(c).length && this.body.hasClass(this.classes.mobileMainMenuActive) && (this.body.removeClass(this.classes.mobileMainMenuActive), this.body.removeClass(this.classes.isOverlay), b.removeClass(this.classes.toggled), $(".dt_mobilenav-mainmenu-content").fadeOut(), this.document.trigger("hideHeaderMobilePopup." + this.eventID), a.stopPropagation())
|
||||
},
|
||||
verticalMobileSubMenuLinkHandle: function(a) {
|
||||
a.preventDefault();
|
||||
var b = $(a.currentTarget);
|
||||
var self = this;
|
||||
b.closest(".dt_mobilenav-mainmenu .dt_navbar-mainmenu"), b.parents(".dropdown-menu").length, this.isRTL, setTimeout(function() {
|
||||
b.parent().toggleClass("current"), b.next().slideToggle();
|
||||
// Update focus trap when submenu opens/closes
|
||||
self.updateMenuFocusTrap();
|
||||
}, 250)
|
||||
},
|
||||
resetVerticalMobileMenu: function(a) {
|
||||
$(".dt_mobilenav-mainmenu .dt_navbar-mainmenu");
|
||||
var b = $(".dt_mobilenav-mainmenu .menu-item"),
|
||||
c = $(".dt_mobilenav-mainmenu .dropdown-menu");
|
||||
var self = this;
|
||||
setTimeout(function() {
|
||||
b.removeClass("current"), c.hide();
|
||||
// Update focus trap when submenus close
|
||||
self.updateMenuFocusTrap();
|
||||
}, 250)
|
||||
},
|
||||
// Updated and improved menu accessibility function
|
||||
menuAccessibility: function() {
|
||||
var self = this;
|
||||
var mobileMenuContent = document.querySelector(".dt_mobilenav-mainmenu-content");
|
||||
var closeButton = document.querySelector(".dt_header-closemenu:not(.off--layer)");
|
||||
|
||||
if (!mobileMenuContent || !closeButton) return false;
|
||||
|
||||
// Remove existing event listener to avoid duplicates
|
||||
if (this.keydownHandler) {
|
||||
document.removeEventListener("keydown", this.keydownHandler);
|
||||
}
|
||||
|
||||
// Create the keydown handler
|
||||
this.keydownHandler = function(event) {
|
||||
if (("Tab" === event.key || 9 === event.keyCode) &&
|
||||
document.body.classList.contains("dt_mobilenav-mainmenu--active")) {
|
||||
self.handleMenuTabNavigation(event);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", this.keydownHandler);
|
||||
|
||||
// Set up focus handlers for menu items
|
||||
this.setupMenuFocusHandlers();
|
||||
},
|
||||
|
||||
// New function to handle tab navigation in mobile menu
|
||||
handleMenuTabNavigation: function(event) {
|
||||
var focusableElements = this.getFocusableElements();
|
||||
if (focusableElements.length === 0) return;
|
||||
|
||||
var firstElement = focusableElements[0];
|
||||
var lastElement = focusableElements[focusableElements.length - 1];
|
||||
|
||||
if (event.shiftKey) {
|
||||
// Shift + Tab
|
||||
if (document.activeElement === firstElement) {
|
||||
lastElement.focus();
|
||||
event.preventDefault();
|
||||
}
|
||||
} else {
|
||||
// Tab
|
||||
if (document.activeElement === lastElement) {
|
||||
firstElement.focus();
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// New function to get currently focusable elements (including visible submenu items)
|
||||
getFocusableElements: function() {
|
||||
var mobileMenuContent = document.querySelector(".dt_mobilenav-mainmenu-content");
|
||||
if (!mobileMenuContent) return [];
|
||||
|
||||
var selector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
|
||||
var allFocusableElements = mobileMenuContent.querySelectorAll(selector);
|
||||
|
||||
// Filter out elements that are not visible (e.g., in closed submenus)
|
||||
var visibleElements = [];
|
||||
for (var i = 0; i < allFocusableElements.length; i++) {
|
||||
var element = allFocusableElements[i];
|
||||
var isVisible = this.isElementVisible(element);
|
||||
if (isVisible) {
|
||||
visibleElements.push(element);
|
||||
}
|
||||
}
|
||||
|
||||
return visibleElements;
|
||||
},
|
||||
|
||||
// New function to check if an element is visible
|
||||
isElementVisible: function(element) {
|
||||
var style = window.getComputedStyle(element);
|
||||
var rect = element.getBoundingClientRect();
|
||||
|
||||
// Check if element is hidden by CSS
|
||||
if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Check if element is in a closed submenu
|
||||
var submenu = element.closest('.dropdown-menu');
|
||||
if (submenu) {
|
||||
var parentLi = submenu.parentElement;
|
||||
if (parentLi && !parentLi.classList.contains('current')) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
// New function to update focus trap when submenus open/close
|
||||
updateMenuFocusTrap: function() {
|
||||
// Only update if mobile menu is active
|
||||
if (document.body.classList.contains("dt_mobilenav-mainmenu--active")) {
|
||||
// Small delay to ensure DOM is updated after submenu animation
|
||||
setTimeout(function() {
|
||||
// Focus trap will be handled by handleMenuTabNavigation function
|
||||
// which dynamically gets focusable elements
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
|
||||
// New function to set up focus handlers for menu items
|
||||
setupMenuFocusHandlers: function() {
|
||||
var mobileMenuContent = document.querySelector(".dt_mobilenav-mainmenu-content");
|
||||
if (!mobileMenuContent) return;
|
||||
|
||||
var menuLinks = mobileMenuContent.getElementsByTagName("a");
|
||||
var menuButtons = mobileMenuContent.getElementsByTagName("button");
|
||||
|
||||
// Focus handler function
|
||||
function focusHandler() {
|
||||
var currentElement = this;
|
||||
while (currentElement && currentElement.className.indexOf("dt_mobilenav-mainmenu-inner") === -1) {
|
||||
if (currentElement.tagName.toLowerCase() === "li") {
|
||||
if (currentElement.className.indexOf("focus") !== -1) {
|
||||
currentElement.className = currentElement.className.replace(" focus", "");
|
||||
} else {
|
||||
currentElement.className += " focus";
|
||||
}
|
||||
}
|
||||
currentElement = currentElement.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
// Add focus handlers to links
|
||||
for (var i = 0; i < menuLinks.length; i++) {
|
||||
menuLinks[i].addEventListener("focus", focusHandler, true);
|
||||
menuLinks[i].addEventListener("blur", focusHandler, true);
|
||||
}
|
||||
|
||||
// Add focus handlers to buttons
|
||||
for (var j = 0; j < menuButtons.length; j++) {
|
||||
menuButtons[j].addEventListener("focus", focusHandler, true);
|
||||
menuButtons[j].addEventListener("blur", focusHandler, true);
|
||||
}
|
||||
},
|
||||
|
||||
searchPopupHandler: function(c) {
|
||||
var clickedButton = c.currentTarget;
|
||||
var searchContainer, searchField, searchToggle;
|
||||
|
||||
// Determine if it's desktop or mobile search based on the clicked button's context
|
||||
if ($(clickedButton).closest('.dt_navbar').length) {
|
||||
// Desktop search
|
||||
searchContainer = $('.dt_navbar .dt_search.search--header');
|
||||
searchField = $('.dt_navbar .dt_search-field');
|
||||
searchToggle = $('.dt_navbar .dt_navbar-search-toggle');
|
||||
} else {
|
||||
// Mobile search
|
||||
searchContainer = $('.dt_mobilenav .dt_search.search--header');
|
||||
searchField = $('.dt_mobilenav .dt_search-field');
|
||||
searchToggle = $('.dt_mobilenav .dt_navbar-search-toggle');
|
||||
}
|
||||
|
||||
this.body.toggleClass(this.classes.headerSearchActive);
|
||||
this.body.toggleClass(this.classes.isOverlay);
|
||||
|
||||
if (this.body.hasClass(this.classes.headerSearchActive)) {
|
||||
searchField.focus();
|
||||
} else {
|
||||
searchToggle.focus();
|
||||
}
|
||||
|
||||
// Call accessibility function with the specific search context
|
||||
this.searchPopupAccessibility(clickedButton);
|
||||
},
|
||||
|
||||
// Updated search popup accessibility function
|
||||
searchPopupAccessibility: function(clickedButton) {
|
||||
var searchContainer, searchField;
|
||||
var self = this;
|
||||
|
||||
// Determine context based on the clicked button
|
||||
if ($(clickedButton).closest('.dt_navbar').length) {
|
||||
// Desktop search
|
||||
searchContainer = document.querySelector('.dt_navbar .search--header');
|
||||
searchField = document.querySelector('.dt_navbar .dt_search-field');
|
||||
} else {
|
||||
// Mobile search
|
||||
searchContainer = document.querySelector('.dt_mobilenav .search--header');
|
||||
searchField = document.querySelector('.dt_mobilenav .dt_search-field');
|
||||
}
|
||||
|
||||
if (!searchContainer || !searchField) return false;
|
||||
|
||||
// Remove existing search keydown handler if it exists
|
||||
if (this.searchKeydownHandler) {
|
||||
document.removeEventListener("keydown", this.searchKeydownHandler);
|
||||
}
|
||||
|
||||
// Get all focusable elements within the active search container
|
||||
var focusableElements = searchContainer.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
||||
|
||||
if (focusableElements.length === 0) return false;
|
||||
|
||||
var firstElement = focusableElements[0];
|
||||
var lastElement = focusableElements[focusableElements.length - 1];
|
||||
|
||||
// Create new keydown handler
|
||||
this.searchKeydownHandler = function(event) {
|
||||
if (("Tab" === event.key || 9 === event.keyCode) &&
|
||||
document.body.classList.contains("dt_header-search--active")) {
|
||||
|
||||
if (event.shiftKey) {
|
||||
// Shift + Tab
|
||||
if (document.activeElement === firstElement) {
|
||||
lastElement.focus();
|
||||
event.preventDefault();
|
||||
}
|
||||
} else {
|
||||
// Tab
|
||||
if (document.activeElement === lastElement) {
|
||||
firstElement.focus();
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("keydown", this.searchKeydownHandler);
|
||||
|
||||
// Set up focus handlers for search elements
|
||||
this.setupSearchFocusHandlers(searchContainer);
|
||||
},
|
||||
|
||||
// New function to set up focus handlers for search elements
|
||||
setupSearchFocusHandlers: function(searchContainer) {
|
||||
if (!searchContainer) return;
|
||||
|
||||
var searchButtons = searchContainer.getElementsByTagName("button");
|
||||
var searchInputs = searchContainer.getElementsByTagName("input");
|
||||
|
||||
// Focus handler function for search elements
|
||||
function searchFocusHandler() {
|
||||
var currentElement = this;
|
||||
while (currentElement && currentElement.className.indexOf("search--header") === -1) {
|
||||
if (currentElement.tagName.toLowerCase() === "input" || currentElement.tagName.toLowerCase() === "button") {
|
||||
if (currentElement.className.indexOf("focus") !== -1) {
|
||||
currentElement.className = currentElement.className.replace(" focus", "");
|
||||
} else {
|
||||
currentElement.className += " focus";
|
||||
}
|
||||
}
|
||||
currentElement = currentElement.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
// Add focus handlers to buttons
|
||||
for (var i = 0; i < searchButtons.length; i++) {
|
||||
searchButtons[i].addEventListener("focus", searchFocusHandler, true);
|
||||
searchButtons[i].addEventListener("blur", searchFocusHandler, true);
|
||||
}
|
||||
|
||||
// Add focus handlers to inputs
|
||||
for (var j = 0; j < searchInputs.length; j++) {
|
||||
searchInputs[j].addEventListener("focus", searchFocusHandler, true);
|
||||
searchInputs[j].addEventListener("blur", searchFocusHandler, true);
|
||||
}
|
||||
},
|
||||
|
||||
sidebarPopupHandler: function(d) {
|
||||
var a = $(".dt_navbar-sidebar-toggle"),
|
||||
b = $(".dt_sidebar"),
|
||||
c = $(".dt_sidebar-close");
|
||||
this.body.toggleClass(this.classes.headerSidebarActive), this.body.toggleClass(this.classes.isOverlay), a.toggleClass(this.classes.toggled), this.body.hasClass(this.classes.headerSidebarActive) ? (c.focus()) : (a.focus()), this.sidebarPopupAccessibility()
|
||||
},
|
||||
sidebarPopupAccessibility: function() {
|
||||
var b, a, d, c = document.querySelector(".dt_sidebar");
|
||||
var f = document.querySelector(".dt_sidebar-close:not(.off--layer)"),
|
||||
e = c.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),
|
||||
g = e[e.length - 1];
|
||||
if (!c) return !1;
|
||||
for (a = 0, d = (b = c.getElementsByTagName("button")).length; a < d; a++) b[a].addEventListener("focus", h, !0), b[a].addEventListener("blur", h, !0);
|
||||
|
||||
function h() {
|
||||
for (var a = this; - 1 === a.className.indexOf("dt_sidebar-inner");) "input" === a.tagName.toLowerCase() && (-1 !== a.className.indexOf("focus") ? a.className = a.className.replace("focus", "") : a.className += " focus"), a = a.parentElement
|
||||
}
|
||||
document.addEventListener("keydown", function(a) {
|
||||
("Tab" === a.key || 9 === a.keyCode) && (a.shiftKey ? document.activeElement === f && (g.focus(), a.preventDefault()) : document.activeElement === g && (f.focus(), a.preventDefault()))
|
||||
})
|
||||
}
|
||||
};
|
||||
a.init()
|
||||
}(jQuery, window.asConfig);
|
||||
Reference in New Issue
Block a user