| 1 |
<?php |
| 2 |
/** |
| 3 |
* Multi-Form Goals block/shortcode template |
| 4 |
* Styles for this template are defined in 'blocks/multi-form-goals/common.scss' |
| 5 |
* |
| 6 |
* @since 3.19.1 Format the donation count |
| 7 |
* |
| 8 |
* @var Give\MultiFormGoals\ProgressBar\Model $this |
| 9 |
*/ |
| 10 |
|
| 11 |
$uniqueId = uniqid('', true); |
| 12 |
?> |
| 13 |
|
| 14 |
<div id="<?= esc_attr($uniqueId) ?>" class="give-progress-bar-block"> |
| 15 |
<style> |
| 16 |
<?php echo file_get_contents( GIVE_PLUGIN_DIR . 'build/assets/dist/css/multi-form-goal-block.css' ); ?> |
| 17 |
</style> |
| 18 |
<!-- Target the Progress Bar Block elements using CSS "parts", see https://developer.mozilla.org/en-US/docs/Web/CSS/::part --> |
| 19 |
<div part="goal" class="give-progress-bar-block__goal"> |
| 20 |
<div part="progress" class="give-progress-bar-block__progress"> |
| 21 |
<?php |
| 22 |
$percent = ($this->getTotal() / $this->getGoal()) * 100; ?> |
| 23 |
<div part="progress-bar" class="give-progress-bar-block__progress-bar" style="width: <?php |
| 24 |
echo esc_attr(min([$percent, 100])); ?>%; background: linear-gradient(180deg, <?php |
| 25 |
echo esc_attr($this->getColor()); ?> 0%, <?php |
| 26 |
echo esc_attr($this->getColor()); ?> 100%), linear-gradient(180deg, #fff 0%, #ccc 100%);"></div> |
| 27 |
</div> |
| 28 |
</div> |
| 29 |
<div part="stats" class="give-progress-bar-block__stats"> |
| 30 |
<div part="stat-total" class="give-progress-bar-block__stat"> |
| 31 |
<div part="stat-total-value"><?php |
| 32 |
echo esc_html($this->getFormattedTotal()); ?></div> |
| 33 |
<div part="stat-total-label"><?php |
| 34 |
echo __('raised', 'give'); ?></div> |
| 35 |
</div> |
| 36 |
<div part="stat-count" class="give-progress-bar-block__stat"> |
| 37 |
<div part="stat-count-value"><?php |
| 38 |
echo esc_html($this->getFormattedDonationCount()); ?></div> |
| 39 |
<div part="stat-count-label"><?php |
| 40 |
echo _n('donation', 'donations', $this->getDonationCount(), 'give'); ?></div> |
| 41 |
</div> |
| 42 |
<div part="stat-goal" class="give-progress-bar-block__stat"> |
| 43 |
<div part="stat-goal-value"><?php |
| 44 |
echo esc_html($this->getFormattedGoal()); ?></div> |
| 45 |
<div part="stat-goal-label"><?php |
| 46 |
echo __('goal', 'give'); ?></div> |
| 47 |
</div> |
| 48 |
<?php |
| 49 |
if ( ! empty($this->getEndDate()) && $this->getMinutesRemaining()) : ?> |
| 50 |
<div part="stat-time" class="give-progress-bar-block__stat"> |
| 51 |
<div part="stat-time-value"><?php |
| 52 |
echo esc_html($this->getTimeToGo()); ?></div> |
| 53 |
<div part="stat-time-label"><?php |
| 54 |
echo esc_html($this->getTimeToGoLabel()); ?></div> |
| 55 |
</div> |
| 56 |
<?php |
| 57 |
endif; ?> |
| 58 |
</div> |
| 59 |
</div> |
| 60 |
<script> |
| 61 |
(function() { |
| 62 |
const container = document.getElementById('<?php echo $uniqueId; ?>'); |
| 63 |
const content = container.innerHTML; |
| 64 |
const shadow = container.attachShadow({mode: 'open'}); |
| 65 |
shadow.innerHTML = content; |
| 66 |
})(); |
| 67 |
</script> |
| 68 |
|
