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;

$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', []);


?>

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


<div class="container">
	<?php foreach ($elements as $index => $element) : ?>
		<div class="contatore">
			<div class="row justify-content-center">
				<div class="col-5">
					<div class="h2"><?= $element->titolo; ?></div>
					<?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="btn btn-slide" title="<?= $element->testo_pulsante; ?>"><?= $element->testo_pulsante; ?></a>
					<?php endif; ?>
				</div>
				<div class="col-5">
					<div class="countdown"></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 {
				//'Totale': t,
				'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 getTime() {
			var t = new Date();
			return {
				//'Totale': t,
				'Ore': t.getHours() % 12,
				'Minuti': t.getMinutes(),
				'Secondi': t.getSeconds()
			};
			}

			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
			var deadline = new Date(Date.parse(new Date()) + 12 * 24 * 60 * 60 * 1000);
			var c = new Clock(deadline, function() { alert('countdown complete'); });

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