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