Skip to content

Commit

Permalink
Merge pull request #1194 from equalizedigital/dev/video-carousel
Browse files Browse the repository at this point in the history 
carousel cc
  • Loading branch information
@tronsymphony
tronsymphony authored Apr 16, 2024
2 parents 2719c6c + 8492ffa commit fa79c67
Show file tree
Hide file tree
Showing 7 changed files with 318 additions and 257 deletions.
226 changes: 226 additions & 0 deletions assets/js/block/video-carousel.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/js/global-min.js
View file

Large diffs are not rendered by default.

216 changes: 1 addition & 215 deletions assets/js/src/global.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1162,220 +1162,6 @@ document.addEventListener('DOMContentLoaded', function () {
});


document.addEventListener('DOMContentLoaded', function () {

const videoCarouselElement = document.querySelectorAll('.video-carousel-swiper-container');
if (videoCarouselElement.length) {

var videoCarousel = new Swiper('.video-carousel-swiper-container', {
// Optional parameters
loop: true,
spaceBetween: 21, // Adjust the space between slides as needed.
loopedSlides: 4,
slidesPerView: 6,
slidesPerGroup:3,
centeredSlides: false,
initialSlide: 3,
watchSlidesProgress: true,
loopFillGroupWithBlank: true,
speed:800,
a11y: true,
keyboard: {
enabled: true,
onlyInViewport: true,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},

// Responsive breakpoints
breakpoints: {
1: {
slidesPerView: 3,
slidesPerGroup:1,
},
768: {
slidesPerView: 4,
},
1400: {
slidesPerView: 6,
}
},


on: {
// Remove the class from all slides on initialization
init: function () {
this.slides.forEach(slide => {
slide.classList.remove('keyboard-focused');
});
},
// Update the class on slides when the active slide changes
slideChange: function () {
this.slides.forEach(slide => {
slide.classList.remove('keyboard-focused');
});

const activeSlide = this.slides[this.activeIndex];
if (activeSlide) {
activeSlide.classList.add('keyboard-focused');
}
},
transitionStart: function () {

var videos = document.querySelectorAll('video');

Array.prototype.forEach.call(videos, function (video) {
video.pause();
});

},
}
});

function updateVisibleSlidesClass(swiper) {
// Only proceed if viewport is greater than 768 pixels
if (window.innerWidth > 1) {
// Remove the class from all slides first
swiper.slides.forEach(slide => {
slide.classList.remove('first-visible-slide', 'last-visible-slide');
});

// Filter for visible slides
const visibleSlides = Array.from(swiper.slides).filter(slide => slide.classList.contains('swiper-slide-visible'));

// Check if there are visible slides
if (visibleSlides.length > 0) {
// Add the class to the first and last visible slides
visibleSlides[0].classList.add('first-visible-slide');
visibleSlides[visibleSlides.length - 1].classList.add('last-visible-slide');
}
} else {
// Optionally, ensure classes are removed when viewport is less than or equal to 768 pixels
swiper.slides.forEach(slide => {
slide.classList.remove('first-visible-slide', 'last-visible-slide');
});
}
}

// Function to handle resize event with debounce to improve performance
let resizeTimer;
function onResize() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
updateVisibleSlidesClass(videoCarousel);
}, 250); // Adjust debounce time as needed
}

// Add event listeners for Swiper events
videoCarousel.on('init slideChange update', function () {
updateVisibleSlidesClass(this);
});

// Listen to resize events
window.addEventListener('resize', onResize);

// Trigger the update function initially in case the Swiper is already initialized
updateVisibleSlidesClass(videoCarousel);

let isKeyboardNavigation = false;

// Function to handle keyboard navigation including Arrow keys, Tab, and Shift+Tab
function handleKeyboardNavigation(event) {
const key = event.key;
let isTabPressed = key === 'Tab';
let isShiftPressed = event.shiftKey;

// Check for navigation keys
if (key === 'ArrowLeft' || key === 'ArrowRight' || isTabPressed && !isShiftPressed || isTabPressed && isShiftPressed) {
isKeyboardNavigation = true;
setTimeout(() => {
if (isKeyboardNavigation) {
videoCarousel.slides.forEach(slide => slide.classList.add('keyboard-focused'));
isKeyboardNavigation = true;
} else {
videoCarousel.slides.forEach(slide => slide.classList.remove('keyboard-focused'));
}
}, 50); // Adjust delay as necessary
}
}

// Add a global listener for keyboard events
document.addEventListener('keydown', handleKeyboardNavigation);

function clearKeyboardFocus() {
videoCarousel.slides.forEach(slide => {
slide.classList.remove('keyboard-focused');
});
videoCarouselElement[0].classList.remove('keyboard-focused');
isKeyboardNavigation = false; // Reset the flag when the mouse is used
}

document.addEventListener('click', function (event) {
// Check if the clicked element is a Swiper pagination bullet
if (event.target.classList.contains('swiper-button-next')) {
clearKeyboardFocus();
}
if (event.target.classList.contains('swiper-button-prev')) {
clearKeyboardFocus();
}
});

setTimeout(() => {
clearKeyboardFocus()
}, 200);


window.addEventListener('resize', function () {
setTimeout(() => {
clearKeyboardFocus()
}, 200);
});



// Assuming 'video-carousel-swiper-container' is the class of your Swiper container
const swiperContainer = document.querySelector('.video-carousel-swiper-container');

if (!swiperContainer) {
console.warn('Swiper container not found.');
return;
}

// This function checks if the focused element is what we're interested in
function isTargetElement(element) {
// Check if the element is an .image-placeholder-action or a video tag
return element.classList.contains('image-placeholder-action') || element.tagName === 'VIDEO' || element.classList.contains('btn') ;
}

// Adds a class to the swiper container when a target element within any slide gains focus
function handleFocusIn(event) {
const focusedElement = event.target;

if (isTargetElement(focusedElement)) {
swiperContainer.classList.add('container-focused-class'); // Replace 'container-focused-class' with your desired class
}
}

// Removes the class from the swiper container when focus moves away from a target element within any slide
function handleFocusOut(event) {
const blurredElement = event.target;

if (isTargetElement(blurredElement)) {
swiperContainer.classList.remove('container-focused-class'); // Ensure this matches the class added in handleFocusIn
}
}

// Add event listeners for focusin and focusout within the swiper container
swiperContainer.addEventListener('focusin', handleFocusIn);
swiperContainer.addEventListener('focusout', handleFocusOut);


}

});


document.addEventListener('DOMContentLoaded', function () {
Expand Down Expand Up @@ -1584,7 +1370,7 @@ document.addEventListener('DOMContentLoaded', function () {
// Function to recursively grab text content from nodes
function getTextWithSpacing(node) {
let text = '';
node.childNodes.forEach(function(child) {
node.childNodes.forEach(function (child) {
if (child.nodeType === Node.TEXT_NODE) {
// For text nodes, trim and add space to avoid extra whitespace issues
text += child.textContent.trim() + ' ';
Expand Down
5 changes: 5 additions & 0 deletions assets/js/video-carousel-min.js
View file

Large diffs are not rendered by default.

33 changes: 33 additions & 0 deletions config.codekit3
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2555,6 +2555,17 @@
"q" : 100,
"rq" : 75
},
"\/assets\/js\/block\/video-carousel.js" : {
"bF" : 0,
"ft" : 64,
"ma" : 0,
"mi" : 1,
"oA" : 0,
"oAP" : "\/assets\/js\/video-carousel-min.js",
"oF" : 0,
"sC" : 3,
"tS" : 0
},
"\/assets\/js\/blocks-min.js" : {
"bF" : 0,
"ft" : 64,
Expand Down Expand Up @@ -2651,6 +2662,28 @@
"sC" : 3,
"tS" : 0
},
"\/assets\/js\/vendor\/swiper-bundle.min.js" : {
"bF" : 0,
"ft" : 64,
"ma" : 0,
"mi" : 1,
"oA" : 0,
"oAP" : "\/assets\/js\/swiper-bundle.min-min.js",
"oF" : 0,
"sC" : 3,
"tS" : 0
},
"\/assets\/js\/video-carousel-min.js" : {
"bF" : 0,
"ft" : 64,
"ma" : 0,
"mi" : 1,
"oA" : 0,
"oAP" : "\/assets\/video-carousel-min-min.js",
"oF" : 0,
"sC" : 3,
"tS" : 0
},
"\/assets\/scss\/blocks\/_affiliate-landing.scss" : {
"aP" : 0,
"bl" : 0,
Expand Down
53 changes: 14 additions & 39 deletions inc/helper-functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -465,51 +465,26 @@ function eqd_logo_setup() {
}
add_action( 'after_setup_theme', 'eqd_logo_setup' );

function eqd_enqueue_swiper_assets() {
function enqueue_block_editor_assets_vc() {

// Only proceed if we're on a singular page and it has content.
if ( is_singular() && have_posts() ) {
the_post(); // Load the post data.
$content = get_the_content();

// Check if our ACF block is in the content.
if ( has_block( 'acf/video-carousel', $content ) ) {
// Enqueue Swiper.js CSS
wp_enqueue_style( 'swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css' );

// Enqueue Swiper.js Script
wp_enqueue_script( 'swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', array(), null, true );
}

// Rewind posts so that the loop can run as expected elsewhere.
rewind_posts();
}
wp_enqueue_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css', array(), '11.0.0');
}

add_action( 'wp_enqueue_scripts', 'eqd_enqueue_swiper_assets' );
add_action('enqueue_block_editor_assets', 'enqueue_block_editor_assets_vc');

function eqd_enqueue_swiper_assets_admin($hook_suffix) {
// Only proceed on post edit screens.
if ('post.php' !== $hook_suffix && 'post-new.php' !== $hook_suffix) {
return;
}

function enqueue_swiper_assets() {
// Global post object to check the current post content
global $post;
if ($post && has_blocks($post->post_content)) {
$blocks = parse_blocks($post->post_content);
foreach ($blocks as $block) {
if ($block['blockName'] === 'acf/video-carousel') {
// Enqueue Swiper.js CSS for Admin
wp_enqueue_style('swiper-css-admin', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');

// Enqueue Swiper.js Script for Admin
wp_enqueue_script('swiper-js-admin', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', array(), null, true);

// No need to check further blocks
break;
}
}

// Check if the post is loaded and contains the specific block
if (is_a($post, 'WP_Post') && has_block('acf/video-carousel', $post)) {
// Enqueue Swiper CSS
wp_enqueue_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css', array(), '11.0.0');

// Enqueue your custom JS to initialize Swiper
wp_enqueue_script('custom-swiper-initialization', get_template_directory_uri() . '/assets/js/video-carousel-min.js', array(), '1.0.0', true);
}
}

add_action('admin_enqueue_scripts', 'eqd_enqueue_swiper_assets_admin');
add_action('wp_enqueue_scripts', 'enqueue_swiper_assets');
Loading

0 comments on commit fa79c67

Please sign in to comment.