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