%PDF-
%PDF-
Mini Shell
Mini Shell
/**
* The JavaScript code you place here will be processed by esbuild, and the
* output file will be created at `../js/script.min.js` and enqueued in
* `../functions.php`.
*
* For esbuild documentation, please see:
* https://esbuild.github.io/
*/
const zoom = new Swiper(".zoom-carousel", {
centeredSlides: true,
slidesPerView: 5,
loop: true,
effect: 'coverflow',
keyboard:true,
initialSlide: 2,
coverflowEffect: {
rotate: 0,
stretch: -20,
depth: 300,
slideShadows : false,
},
watchSlidesVisibility: true,
pagination: {
el: ".swiper-pagination",
clickable: true
},
breakpoints: {
320: {
slidesPerView: 3,
coverflowEffect: {
stretch: 0,
depth: 300,
},
},
768: {
slidesPerView: 3
},
1140: {
slidesPerView: 5
}
}
});
const resourcesCarousels = document.querySelectorAll('.resources-carousel');
resourcesCarousels.forEach((carousel, index) => {
new Swiper(carousel, {
centeredSlides: true,
watchSlidesProgress: true,
slidesPerView: 3,
spaceBetween: 130,
loop: true,
navigation: {
nextEl: carousel.parentNode.querySelector(".resources-carousel-next"),
prevEl: carousel.parentNode.querySelector(".resources-carousel-prev"),
},
breakpoints: {
320: {
slidesPerView: 1,
spaceBetween: 40,
},
768: {
spaceBetween: 50,
slidesPerView: 3,
},
1140: {
spaceBetween: 130,
slidesPerView: 3,
}
}
});
});
const imageCarousels = document.querySelectorAll('.image-carousel');
imageCarousels.forEach((carousel, index) => {
new Swiper(carousel, {
watchSlidesProgress: true,
spaceBetween: parseInt(carousel.dataset.spacebetween),
loop: carousel.dataset.loop === 'true',
breakpoints: {
320: {
slidesPerView: parseInt(carousel.dataset.imagesperrowmobile),
},
768: {
slidesPerView: parseInt(carousel.dataset.imagesperrowdesktop),
}
}
});
});
const teamCarousels = document.querySelectorAll('.team-carousel');
teamCarousels.forEach((carousel, index) => {
let slides = carousel.querySelectorAll('.swiper-slide');
let randomSlides = Array.from(slides).sort( () => { return 0.5 - Math.random(); });
carousel.querySelector('.swiper-wrapper').innerHTML = '';
randomSlides.map( x =>{
carousel.querySelector('.swiper-wrapper').innerHTML += `<div class="swiper-slide">${x.innerHTML}</div>`
});
new Swiper(carousel, {
loop: true,
autoplay: {
delay: 1,
disableOnInteraction: false,
reverseDirection: Boolean(index % 2)
},
slidesPerView: 'auto',
speed: 2000,
grabCursor: false,
mousewheelControl: false,
keyboardControl: false,
allowTouchMove: false,
spaceBetween: 16,
});
});
const wpcf7Forms = document.querySelectorAll('.wpcf7-form');
wpcf7Forms.forEach(form => {
form.querySelectorAll('.form-field').forEach(row => {
const wrapper = document.createElement('span');
wrapper.classList.add('form-field--wrapper');
const label = row.querySelector('label');
const input = row.querySelector('input') ? row.querySelector('input') : row.querySelector('textarea');
row.querySelector('.wpcf7-form-control-wrap').appendChild(wrapper);
wrapper.appendChild(input);
wrapper.appendChild(label);
});
});
const fadeIn = (el, timeout, display) => {
el.style.opacity = 0;
el.style.display = display || 'block';
el.style.transition = `opacity ${timeout}ms`;
setTimeout(() => {
el.style.opacity = 1;
}, 10);
};
const fadeOut = (el, timeout) => {
el.style.opacity = 1;
el.style.transition = `opacity ${timeout}ms`;
el.style.opacity = 0;
setTimeout(() => {
el.style.display = 'none';
}, timeout);
};
const ui = {
customeSelect() {
document.querySelectorAll('.custom-select-trigger').forEach(trigger => {
const target = trigger.parentNode.querySelector('.custom-select-list');
const defaultValue = trigger.dataset.default;
let reset = true;
let loadPosts = false;
const options = {
onHide: () => {
if(reset) {
if('' != trigger.dataset.selected) {
loadPosts = true;
}
trigger.querySelector('span').innerHTML = defaultValue;
trigger.setAttribute('data-selected', '');
}
if(loadPosts) {
this.loadFilteredPosts();
loadPosts = false;
}
trigger.querySelector('i').classList.add('fa-chevron-down');
trigger.querySelector('i').classList.remove('fa-xmark');
},
onShow: () => {
trigger.querySelector('i').classList.remove('fa-chevron-down');
trigger.querySelector('i').classList.add('fa-xmark');
}
};
const dropdown = new Dropdown(target, trigger, options);
target.querySelectorAll('button').forEach(button => {
button.addEventListener('click', e => {
if(button.dataset.value != trigger.dataset.selected) {
loadPosts = true;
}
trigger.querySelector('span').innerHTML = button.innerHTML;
trigger.setAttribute('data-selected', button.dataset.value);
reset = false;
dropdown.hide();
reset = true;
});
});
});
},
resourcesFilterMenu() {
document.querySelectorAll('#resources-filter-menu button').forEach(button => {
button.addEventListener('click', e => {
document.querySelectorAll('#resources-type-filter-list button').forEach(item => {
if(item.dataset.value == button.dataset.type) {
item.click();
}
});
});
});
},
loadFilteredPosts() {
const data = new FormData();
data.append( 'action', 'load_posts' );
document.querySelectorAll('#filter .custom-select-trigger').forEach(filter => {
data.append( filter.dataset.id, filter.dataset.selected );
});
fadeIn(document.querySelector('.svg-loader--wrapper'), 1000, 'block');
fetch(lloydajax.url, {
method: 'POST',
credentials: 'same-origin',
body: data
}).then((response) => response.text())
.then((data) => {
document.querySelector('#search-results').innerHTML = data;
if(data.trim() !== '') {
document.querySelector('#search-results').classList.remove('hidden');
document.querySelector('#no-results').classList.add('hidden');
} else {
document.querySelector('#search-results').classList.add('hidden');
document.querySelector('#no-results').classList.remove('hidden');
}
fadeOut(document.querySelector('.svg-loader--wrapper'), 1000);
})
.catch((error) => {
console.log('Load_posts!!!');
console.error(error);
});
},
markerList() {
document.querySelectorAll('.map-markers-trigger').forEach(trigger => {
const target = trigger.parentNode.querySelector('.map-markers-list');
trigger.querySelector('img').classList.remove('rotate-[30deg]');
if(target) {
const options = {
onHide: () => {
trigger.querySelector('img').classList.add('group-hover:scale-150');
trigger.querySelector('img').classList.remove('rotate-[30deg]');
},
onShow: () => {
trigger.querySelector('img').classList.remove('group-hover:scale-150');
trigger.querySelector('img').classList.add('rotate-[30deg]');
}
};
const dropdown = new Dropdown(target, trigger, options);
target.querySelectorAll('a').forEach(a => {
a.addEventListener('click', e => {
e.preventDefault();
document.querySelector(e.target.getAttribute('href')).click();
dropdown.hide();
});
});
}
});
},
blink() {
const containers = document.querySelectorAll('#partners, #customers');
containers.forEach(container => {
const count = parseInt(container.getAttribute('data-blink-count'));
const output = container.querySelector('.blink-result');
const images = [...container.querySelectorAll('img')].reduce((acc, img) => {
acc.push(img.getAttribute('src'));
return acc;
}, []);
const getRandomUniq = (prev,count) => {
const random = Math.floor(Math.random() * count);
return random != prev ? random : getRandomUniq(prev,count);
}
let active = images.slice(0, count);
let buffer = images.filter(item => !active.includes(item));
let cells = [];
active.forEach(image => {
const div = document.createElement('div');
const foreground = document.createElement('img');
const background = document.createElement('img');
foreground.setAttribute('src', image);
foreground.classList.add('foreground');
background.classList.add('background');
div.classList.add('blink');
div.appendChild(foreground);
div.appendChild(background);
cells.push(div);
output.appendChild(div);
});
let prevValue = 0;
setInterval(() => {
const randomCellIndex = getRandomUniq(prevValue, active.length);
const randomBufferImageIndex = Math.floor(Math.random() * buffer.length);
const backToBuffer = active[randomCellIndex];
const addToActive = buffer[randomBufferImageIndex];
buffer = buffer.filter(image => image != addToActive);
active[randomCellIndex] = addToActive;
buffer.push(backToBuffer);
const cellToModify = cells[randomCellIndex];
const oldImage = cellToModify.querySelector('.foreground');
const newImage = cellToModify.querySelector('.background');
newImage.setAttribute('src', addToActive);
setTimeout(() => {
oldImage.classList.add('blink-fade-out');
}, 50);
setTimeout(() => {
oldImage.setAttribute('src', newImage.getAttribute('src'));
setTimeout(() => {
oldImage.classList.remove('blink-fade-out');
newImage.removeAttribute('src');
}, 100)
}, 1500);
},2000);
});
}
}
ui.customeSelect();
ui.markerList();
ui.blink();
ui.resourcesFilterMenu();
Zerion Mini Shell 1.0