conservatorio-tomadini/templates/joomla-italia-theme/html/mod_highlights/countdown.php

<?php

/**
 * @version     CVS: 1.0.0
 * @package     com_highlights
 * @subpackage  mod_highlights
 * @author      Eddy Prosperi <eddy.prosperi@protocollicreativi.it>
 * @copyright   2024 Eddy Prosperi
 * @license     GNU General Public License versione 2 o successiva; vedi LICENSE.txt
 */
defined('_JEXEC') or die;

use Pcrt\Module\Highlights\Site\Helper\HighlightsHelper;
use Joomla\CMS\Uri\Uri;

$elements = HighlightsHelper::getList($params);

$tableField = explode(':', $params->get('field'));
$table_name = !empty($tableField[0]) ? $tableField[0] : '';
$field_name = !empty($tableField[1]) ? $tableField[1] : '';

//Come accedere alle variabili generali:
$opacita = $params->get('opacita', []);
$sfondo = $params->get('sfondo', []);
$baseImagePath = Uri::root(false) . "media/templates/site/joomla-italia-theme/images/";

$nelementi = 1;

?>

<?php if (!empty($elements)) : ?>

<div class="gx-5 container-lg my-0 my-lg-5">
    <?php foreach ($elements as $index => $element) : ?>
        <div class="contatore">
            <div class="wrap-contatore row justify-content-center py-3 py-lg-5">
                <div class="col-12 col-lg-6 order-2 order-lg-1">
					<div class="wrap-contatore">
						<?php if (!empty($element->titolo)) : ?>
							<div class="h2"><?= $element->titolo; ?></div>
						<?php endif; ?>
						<?php if (!empty($element->sottotitolo)) : ?>
							<p class="sottotitolo"><?= $element->sottotitolo; ?></p>
						<?php endif; ?>
						
						<?php if (!empty($element->descrizione)) : ?>
							<p><?= $element->descrizione; ?></p>
						<?php endif; ?>
						<?php if (!empty($element->link_pulsante)) : ?>
							<a href="<?= $element->link_pulsante; ?>" class="mb-3 text-uppercase btn btn-primary" title="<?= $element->testo_pulsante; ?>">
								<?= $element->testo_pulsante; ?>
								<svg class="icon icon-sm d-inline-block">
									<use xlink:href="<?= $baseImagePath ?>sprites.svg#it-arrow-right"></use>
								</svg>
							</a>
						<?php endif; ?>
					</div>
                </div>
                <div class="col-12 col-lg-6 order-1 order-lg-2">
                    <div class="countdown<?= $nelementi; ?>"></div>
                </div>
            </div>
        </div>

        <script>
            console.clear();

            function CountdownTracker(label, value) {
                var el = document.createElement('span');
                el.className = 'flip-clock__piece';
                el.innerHTML = '<b class="flip-clock__card cardcontatore"><b class="cardcontatore__top"></b><b class="cardcontatore__bottom"></b><b class="cardcontatore__back"><b class="cardcontatore__bottom"></b></b></b>' + 
                    '<span class="flip-clock__slot">' + label + '</span>';
                this.el = el;

                var top = el.querySelector('.cardcontatore__top'),
                    bottom = el.querySelector('.cardcontatore__bottom'),
                    back = el.querySelector('.cardcontatore__back'),
                    backBottom = el.querySelector('.cardcontatore__back .cardcontatore__bottom');

                this.update = function(val) {
                    val = ('0' + val).slice(-2);
                    if (val !== this.currentValue) {
                        if (this.currentValue >= 0) {
                            back.setAttribute('data-value', this.currentValue);
                            bottom.setAttribute('data-value', this.currentValue);
                        }
                        this.currentValue = val;
                        top.innerText = this.currentValue;
                        backBottom.setAttribute('data-value', this.currentValue);

                        this.el.classList.remove('flip');
                        void this.el.offsetWidth;
                        this.el.classList.add('flip');
                    }
                }

                this.update(value);
            }

            function getTimeRemaining(endtime) {
                var t = Date.parse(endtime) - Date.parse(new Date());
                return {
                    'Giorni': Math.floor(t / (1000 * 60 * 60 * 24)),
                    'Giorni': Math.floor(t / (1000 * 60 * 60 * 24)),
                    'Ore': Math.floor((t / (1000 * 60 * 60)) % 24),
                    'Minuti': Math.floor((t / 1000 / 60) % 60),
                    'Secondi': Math.floor((t / 1000) % 60)
                };
            }

            function Clock(countdown, callback) {
                countdown = countdown ? new Date(Date.parse(countdown)) : false;
                callback = callback || function() {};

                var updateFn = countdown ? getTimeRemaining : getTime;

                this.el = document.createElement('div');
                this.el.className = 'flip-clock';

                var trackers = {},
                    t = updateFn(countdown),
                    key, timeinterval;

                for (key in t) {
                    if (key === 'Total') { continue; }
                    trackers[key] = new CountdownTracker(key, t[key]);
                    this.el.appendChild(trackers[key].el);
                }

                var i = 0;
                function updateClock() {
                    timeinterval = requestAnimationFrame(updateClock);

                    // throttle so it's not constantly updating the time.
                    if (i++ % 10) { return; }

                    var t = updateFn(countdown);
                    if (t.Total < 0) {
                        cancelAnimationFrame(timeinterval);
                        for (key in trackers) {
                            trackers[key].update(0);
                        }
                        callback();
                        return;
                    }

                    for (key in trackers) {
                        trackers[key].update(t[key]);
                    }
                }

                setTimeout(updateClock, 500);
            }

            // Imposta la scadenza per il countdown usando la data dell'elemento
            var deadline = '<?= $element->data; ?>'; // Usa la data dell'elemento come deadline
            var c = new Clock(deadline, function() { alert('countdown complete'); });

            // Aggiungi il contatore al div con classe countdown
            var countdownDiv = document.querySelector('.countdown<?= $nelementi; ?>');
            if (countdownDiv) {
                countdownDiv.appendChild(c.el);
            }
        </script>
        <?php $nelementi++;?>
    <?php endforeach; ?>
</div>
<?php endif; ?>