'',
'id' => 'interactive-map-' . mt_rand(1000, 9999),
), $atts);
// Start output buffer
ob_start();
// Add CSS styles
$styles = "
";
echo $styles;
// Reset global map points array
global $bw_map_points;
$bw_map_points = array();
// Process nested shortcodes first to populate $bw_map_points
do_shortcode($content);
// Use the points from the global variable
$points = $bw_map_points;
// Start output buffer
ob_start();
// Generate HTML for the map
?>
(function($) {
// Wait for the document to be fully ready
$(document).ready(function() {
// Make sure map exists
if ($('#" . $map_id . "').length === 0) {
console.log('Map with ID " . $map_id . " not found');
return;
}
// Adjust tooltip positions for edge cases for this specific map
$('#" . $map_id . " .map-point').each(function() {
$(this).on('mouseenter', function() {
var \$tooltip = $(this).find('.map-tooltip');
if (!\$tooltip.length) return;
var tooltipWidth = \$tooltip.outerWidth();
var tooltipLeft = \$tooltip.offset().left;
var tooltipRight = tooltipLeft + tooltipWidth;
var windowWidth = $(window).width();
// Reset position
\$tooltip.css({
'left': '50%',
'right': 'auto',
'transform': 'translateX(-50%)'
});
// Check right edge
if (tooltipRight > windowWidth) {
\$tooltip.css({
'left': 'auto',
'right': '0',
'transform': 'none'
});
}
// Check left edge
if (tooltipLeft < 0) {
\$tooltip.css({
'left': '0',
'right': 'auto',
'transform': 'none'
});
}
});
});
// Sequential animation function for this specific map
function initSequentialAnimation() {
var \$points = $('#" . $map_id . " .map-point');
var totalPoints = \$points.length;
var animationDelay = 3000; // 3 second delay
var currentIndex = 0;
var animationPaused = false;
var animationTimer = null;
console.log('Initializing animation for map #" . $map_id . " with ' + totalPoints + ' points');
if (totalPoints === 0) return;
// Initially hide all tooltips and remove active state
\$points.removeClass('active');
// Add pause/resume on hover
\$points.on('mouseenter', function() {
// Pause the animation when user interacts
animationPaused = true;
clearTimeout(animationTimer);
});
\$points.on('mouseleave', function() {
// Resume animation after a brief delay
setTimeout(function() {
animationPaused = false;
activatePoint(currentIndex);
}, 500);
});
// Function to activate a single point
function activatePoint(index) {
// If animation is paused, don't proceed
if (animationPaused) return;
// Clear any existing timer
clearTimeout(animationTimer);
console.log('Activating point ' + index + ' on map #" . $map_id . "');
// Deactivate all points
\$points.removeClass('active');
// Activate the current point
var \$currentPoint = \$points.eq(index);
\$currentPoint.addClass('active');
// Show tooltip for active point and hide after a short delay
var \$tooltip = \$currentPoint.find('.map-tooltip');
\$tooltip.css({
'opacity': 1,
'visibility': 'visible'
});
// Hide tooltip before moving to next point
setTimeout(function() {
if (!animationPaused) {
\$tooltip.css({
'opacity': '',
'visibility': ''
});
}
}, animationDelay - 500); // Hide 0.5s before next activation
// Schedule the next point activation
currentIndex = (index + 1) % totalPoints;
animationTimer = setTimeout(function() {
activatePoint(currentIndex);
}, animationDelay);
}
// Start the animation sequence with a slight delay to ensure DOM is ready
setTimeout(function() {
activatePoint(0);
}, 500);
}
// Initialize animation with a delay to ensure everything is loaded
setTimeout(initSequentialAnimation, 1000);
});
})(jQuery);
";
// Add the generic script for all maps
wp_enqueue_script('jquery');
// Get the buffered content
$html_output = ob_get_clean();
// Return the HTML with the script appended
return $html_output . $inline_js;
}
add_shortcode('interactive_map', 'bw_interactive_map_shortcode');
// Helper shortcode for map points with HTML support
function bw_map_point_shortcode($atts, $content = '') {
// During REST API or AJAX requests, return empty string
if ((defined('REST_REQUEST') && REST_REQUEST) || wp_doing_ajax()) {
return '';
}
// Store in global variable for the parent shortcode to use
global $bw_map_points;
if (!is_array($bw_map_points)) {
$bw_map_points = array();
}
// Get attributes
$atts = shortcode_atts(array(
'x' => '50',
'y' => '50',
'title' => '',
'description' => $content, // Get description from content if available
), $atts);
// Add to points array
$bw_map_points[] = array(
'x' => $atts['x'],
'y' => $atts['y'],
'title' => $atts['title'],
'description' => !empty($content) ? $content : $atts['description'],
);
return ''; // Just a marker for the parent shortcode
}
add_shortcode('map_point', 'bw_map_point_shortcode');