| 1 |
<?php |
| 2 |
/** |
| 3 |
* Welcome Tour's Spotlight component. |
| 4 |
* |
| 5 |
* @since 6.25.1 |
| 6 |
* |
| 7 |
* @package Formidable |
| 8 |
*/ |
| 9 |
|
| 10 |
if ( ! defined( 'ABSPATH' ) ) { |
| 11 |
die( 'You are not allowed to call this page directly.' ); |
| 12 |
} |
| 13 |
|
| 14 |
if ( empty( $spotlight['target'] ) ) { |
| 15 |
return; |
| 16 |
} |
| 17 |
|
| 18 |
$placement = $spotlight['placement'] ?? 'right'; |
| 19 |
$spotlight_attributes = array( |
| 20 |
'class' => 'frm-spotlight frm-welcome-tour-spotlight frm-gap-xs frm-items-center frm-force-hidden frm-fadein', |
| 21 |
'data-target' => $spotlight['target'], |
| 22 |
'data-left-position' => $spotlight['left-position'] ?? 'end', |
| 23 |
'data-placement' => $placement, |
| 24 |
'style' => '', |
| 25 |
); |
| 26 |
$spotlight_attributes['class'] .= 'bottom' === $placement ? ' frm-flex-col' : ' frm-flex'; |
| 27 |
|
| 28 |
if ( ! empty( $spotlight['offset']['top'] ) ) { |
| 29 |
$spotlight_attributes['style'] .= 'margin-top: ' . $spotlight['offset']['top'] . 'px;'; |
| 30 |
} |
| 31 |
|
| 32 |
if ( ! empty( $spotlight['offset']['left'] ) ) { |
| 33 |
$spotlight_attributes['style'] .= 'margin-left: ' . $spotlight['offset']['left'] . 'px;'; |
| 34 |
} |
| 35 |
?> |
| 36 |
<div <?php FrmAppHelper::array_to_html_params( $spotlight_attributes, true ); ?>> |
| 37 |
<div class="frm-spotlight__pointer frm-flex-center frm-fadein-up-back frm-pulse"></div> |
| 38 |
|
| 39 |
<div class="frm-spotlight__content frm-flex-col frm-justify-center frm-gap-xs frmcenter frm-bg-white frm-p-sm frm-rounded-md frm-box-shadow-xxl frm-fadein-up-back"> |
| 40 |
<?php if ( ! empty( $spotlight['title'] ) ) { ?> |
| 41 |
<h3 class="frm-text-xs frm-font-bold frm-text-grey-800 frm-m-0"> |
| 42 |
<?php echo esc_html( $spotlight['title'] ); ?> |
| 43 |
</h3> |
| 44 |
<?php } ?> |
| 45 |
|
| 46 |
<?php if ( ! empty( $spotlight['description'] ) ) { ?> |
| 47 |
<p class="frm-text-xs frm-text-grey-700 frm-m-0"> |
| 48 |
<?php echo esc_html( $spotlight['description'] ); ?> |
| 49 |
</p> |
| 50 |
<?php } ?> |
| 51 |
</div> |
| 52 |
</div> |
| 53 |
|
