'',
'id' => 'interactive-map-' . mt_rand( 1000, 9999 ),
), $atts );
// Reset global map points array
global $bw_hotspot_map_points;
$bw_hotspot_map_points = array();
// Process nested shortcodes first to populate $bw_hotspot_map_points
do_shortcode( $content );
// Use the points from the global variable
$points = $bw_hotspot_map_points;
// Start output buffer
ob_start();
// Instance-specific styles
?>
(function($) {
$(document).ready(function() {
if ($('#" . $map_id . "').length === 0) {
return;
}
// Adjust tooltip positions for edge cases
$('#" . $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();
\$tooltip.css({
'left': '50%',
'right': 'auto',
'transform': 'translateX(-50%)'
});
if (tooltipRight > windowWidth) {
\$tooltip.css({
'left': 'auto',
'right': '0',
'transform': 'none'
});
}
if (tooltipLeft < 0) {
\$tooltip.css({
'left': '0',
'right': 'auto',
'transform': 'none'
});
}
});
});
// Sequential animation function
function initSequentialAnimation() {
var \$points = $('#" . $map_id . " .map-point');
var totalPoints = \$points.length;
var animationDelay = 3000;
var currentIndex = 0;
var animationPaused = false;
var animationTimer = null;
if (totalPoints === 0) return;
\$points.removeClass('active');
\$points.on('mouseenter', function() {
animationPaused = true;
clearTimeout(animationTimer);
});
\$points.on('mouseleave', function() {
setTimeout(function() {
animationPaused = false;
activatePoint(currentIndex);
}, 500);
});
function activatePoint(index) {
if (animationPaused) return;
clearTimeout(animationTimer);
\$points.removeClass('active');
var \$currentPoint = \$points.eq(index);
\$currentPoint.addClass('active');
var \$tooltip = \$currentPoint.find('.map-tooltip');
\$tooltip.css({
'opacity': 1,
'visibility': 'visible'
});
setTimeout(function() {
if (!animationPaused) {
\$tooltip.css({
'opacity': '',
'visibility': ''
});
}
}, animationDelay - 500);
currentIndex = (index + 1) % totalPoints;
animationTimer = setTimeout(function() {
activatePoint(currentIndex);
}, animationDelay);
}
setTimeout(function() {
activatePoint(0);
}, 500);
}
setTimeout(initSequentialAnimation, 1000);
});
})(jQuery);
";
// Enqueue jQuery
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_hotspot_interactive_map_shortcode' );
/**
* Map Point Shortcode
*/
function bw_hotspot_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_hotspot_map_points;
if ( ! is_array( $bw_hotspot_map_points ) ) {
$bw_hotspot_map_points = array();
}
// Get attributes
$atts = shortcode_atts( array(
'x' => '50',
'y' => '50',
'title' => '',
'description' => $content,
), $atts );
// Add to points array
$bw_hotspot_map_points[] = array(
'x' => $atts['x'],
'y' => $atts['y'],
'title' => $atts['title'],
'description' => ! empty( $content ) ? $content : $atts['description'],
);
return '';
}
add_shortcode( 'map_point', 'bw_hotspot_map_point_shortcode' );