- xtesini.gr

Σχετικά Άρθρα

.theme-article-recommendations { position: relative; margin: 40px 0; } .theme-related-articles-loading { text-align: center; padding: 20px; color: #777; } .theme-related-articles-carousel { position: relative; overflow: hidden; margin: 0 auto; touch-action: pan-y; /* Allow vertical scrolling by default */ } .theme-carousel-container { display: flex; transition: transform 0.3s ease; will-change: transform; } .theme-carousel-item { flex: 0 0 auto; width: calc(33.333% - 20px); margin-right: 20px; user-select: none; /* Prevent text selection while dragging */ } .recommendation-item { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 5px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .recommendation-image { position: relative; overflow: hidden; } .recommendation-image img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; pointer-events: none; /* Prevent image drag */ } .recommendation-content { display: flex; flex-direction: column; flex: 1; padding: 15px; } .recommendation-title { margin: 8px 0; line-height: 1.3; } .recommendation-category { font-size: 12px; margin-bottom: 5px; } .recommendation-meta { margin-top: auto; font-size: 12px; padding-top: 10px; } .theme-carousel-nav { text-align: center; margin-top: 20px; padding: 10px 0; margin-top: -19px; z-index: 1000; } .theme-carousel-nav button { background: #4db2ec; color: white; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; margin: 0 5px; font-size: 18px; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.2); } .theme-carousel-nav button:hover:not([style*="opacity: 0.5"]) { background: #2e95d3; transform: scale(1.1); } .theme-carousel-nav button:active { transform: scale(0.95); } .theme-carousel-nav button[style*="opacity: 0.5"] { cursor: not-allowed; box-shadow: none; } @media (max-width: 768px) { .theme-carousel-item { width: calc(50% - 15px); } .theme-carousel-nav button { width: 36px; height: 36px; font-size: 18px; } } @media (max-width: 480px) { .theme-carousel-item { width: calc(100% - 10px); } .theme-carousel-nav button { width: 32px; height: 32px; font-size: 16px; margin: 0 5px; } } jQuery(document).ready(function($) { var relatedContainer = $("#related-articles-container"); var postId = relatedContainer.data("post-id"); // Load related articles via AJAX $.ajax({ url: "https://www.xtesini.gr/wp-admin/admin-ajax.php", type: "POST", data: { action: "load_related_articles", post_id: postId }, success: function(response) { // Replace loading indicator with related articles relatedContainer.html(response); // Initialize carousel after content is loaded initializeCarousel(); }, error: function() { relatedContainer.html("<p>Δεν ήταν δυνατή η φόρτωση των σχετικών άρθρων.</p>"); } }); // Function to initialize carousel function initializeCarousel() { var container = $(".theme-carousel-container"); var carousel = $(".theme-related-articles-carousel"); var items = $(".theme-carousel-item"); var prevBtn = $(".theme-prev-arrow"); var nextBtn = $(".theme-next-arrow"); if (items.length === 0) return; var itemWidth = items.first().outerWidth(true); var visibleItems = Math.floor(container.width() / itemWidth); var position = 0; var maxPosition = Math.max(0, items.length - visibleItems); // Touch handling variables var isDragging = false; var startX = 0; var startY = 0; var currentX = 0; var currentTranslate = 0; var startTranslate = 0; var threshold = 10; // Minimum distance before we decide if horizontal or vertical var isScrolling = null; // null = undecided, true = vertical scroll, false = horizontal scroll // Hide prev button initially prevBtn.css("opacity", "0.5"); // Track article clicks items.on("click touchstart", "a", function() { var postId = $(this).closest(".theme-carousel-item").data("post-id"); if (postId && window.RecommendationTracker) { window.RecommendationTracker.sendTrackingData({ action_type: "carousel_related_click", action_value: postId }); } }); // Click handlers for navigation buttons nextBtn.click(function() { if (position < maxPosition) { position++; updateCarouselPosition(); if (window.RecommendationTracker) { window.RecommendationTracker.sendTrackingData({ action_type: "carousel_related_interaction", action_value: "next" }); } } }); prevBtn.click(function() { if (position > 0) { position--; updateCarouselPosition(); if (window.RecommendationTracker) { window.RecommendationTracker.sendTrackingData({ action_type: "carousel_related_interaction", action_value: "prev" }); } } }); // IMPROVED Touch handling carousel.on("touchstart", function(e) { var touch = e.originalEvent.touches[0]; startX = touch.clientX; startY = touch.clientY; isDragging = true; isScrolling = null; // Reset scroll direction // Get current transform var transform = container.css("transform"); var matrix = transform.replace(/[^0-9\-.,]/g, "").split(","); startTranslate = currentTranslate = matrix[4] ? parseInt(matrix[4]) : 0; container.css("transition", "none"); }); carousel.on("touchmove", function(e) { if (!isDragging) return; var touch = e.originalEvent.touches[0]; var deltaX = touch.clientX - startX; var deltaY = touch.clientY - startY; // Determine scroll direction on first significant move if (isScrolling === null) { if (Math.abs(deltaX) > threshold || Math.abs(deltaY) > threshold) { // Decide if horizontal or vertical scroll // More lenient for vertical scrolling isScrolling = Math.abs(deltaY) > Math.abs(deltaX) * 0.7; } } // If vertical scrolling, let it pass through if (isScrolling === true) { isDragging = false; container.css("transition", "transform 0.3s ease"); return; // Let the browser handle vertical scroll } // If horizontal scrolling, handle the carousel if (isScrolling === false) { e.preventDefault(); // Only prevent default for horizontal currentX = deltaX; var newTranslate = startTranslate + deltaX; // Add boundaries with elastic effect var minTranslate = -maxPosition * itemWidth; var maxTranslate = 0; if (newTranslate > maxTranslate) { newTranslate = maxTranslate + (newTranslate - maxTranslate) * 0.3; } else if (newTranslate < minTranslate) { newTranslate = minTranslate + (newTranslate - minTranslate) * 0.3; } container.css("transform", "translateX(" + newTranslate + "px)"); } }); carousel.on("touchend", function(e) { if (!isDragging || isScrolling === true) return; isDragging = false; container.css("transition", "transform 0.3s ease"); var prevPosition = position; // Snap to position if (Math.abs(currentX) > itemWidth * 0.25) { if (currentX > 0 && position > 0) { position--; } else if (currentX < 0 && position < maxPosition) { position++; } } if (position !== prevPosition && window.RecommendationTracker) { window.RecommendationTracker.sendTrackingData({ action_type: "carousel_related_interaction", action_value: position > prevPosition ? "next" : "prev" }); } updateCarouselPosition(); // Reset isScrolling = null; currentX = 0; }); // Mouse drag for desktop (simplified) var mouseDown = false; container.on("mousedown", function(e) { mouseDown = true; startX = e.clientX; var transform = container.css("transform"); var matrix = transform.replace(/[^0-9\-.,]/g, "").split(","); startTranslate = currentTranslate = matrix[4] ? parseInt(matrix[4]) : 0; container.css("transition", "none"); e.preventDefault(); }); $(document).on("mousemove", function(e) { if (!mouseDown) return; var deltaX = e.clientX - startX; var newTranslate = startTranslate + deltaX; // Boundaries var minTranslate = -maxPosition * itemWidth; var maxTranslate = 0; newTranslate = Math.max(minTranslate, Math.min(maxTranslate, newTranslate)); container.css("transform", "translateX(" + newTranslate + "px)"); e.preventDefault(); }); $(document).on("mouseup", function(e) { if (!mouseDown) return; mouseDown = false; container.css("transition", "transform 0.3s ease"); var deltaX = e.clientX - startX; var prevPosition = position; if (Math.abs(deltaX) > itemWidth * 0.25) { if (deltaX > 0 && position > 0) { position--; } else if (deltaX < 0 && position < maxPosition) { position++; } } if (position !== prevPosition && window.RecommendationTracker) { window.RecommendationTracker.sendTrackingData({ action_type: "carousel_related_interaction", action_value: position > prevPosition ? "next" : "prev" }); } updateCarouselPosition(); }); // Update carousel position function updateCarouselPosition() { var translateX = -position * itemWidth; currentTranslate = translateX; container.css({ "transition": "transform 0.3s ease", "transform": "translateX(" + translateX + "px)" }); // Update button states prevBtn.css("opacity", position <= 0 ? "0.5" : "1"); nextBtn.css("opacity", position >= maxPosition ? "0.5" : "1"); } // Responsive handling $(window).resize(function() { itemWidth = items.first().outerWidth(true); visibleItems = Math.floor(container.width() / itemWidth); maxPosition = Math.max(0, items.length - visibleItems); if (position > maxPosition) { position = maxPosition; } updateCarouselPosition(); }); // Initial setup updateCarouselPosition(); } });