eddydesigner/conservatorio-tomadini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

countdown funzionante

Browse Source
This commit is contained in:
Amministratore
2025-01-05 22:42:13 +01:00
parent 7d4bb599b6
commit 9145bcec43
4 changed files with 290 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
templates/joomla-italia-theme/html/mod_highlights/countdown.php
View File

@ -11,6 +11,7 @@
defined('_JEXEC') or die;
use Pcrt\Module\Highlights\Site\Helper\HighlightsHelper;
use Joomla\CMS\Uri\Uri;
$elements = HighlightsHelper::getList($params);
@ -21,153 +22,143 @@ $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/";
?>
<?php if (!empty($elements)) : ?>
<div class="container-xl">
<?php foreach ($elements as $index => $element) : ?>
<div class="contatore">
<div class="row justify-content-center">
<div class="col-12 col-lg-5 order-2 order-lg-1">
<?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="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 class="col-12 col-lg-5 order-1 order-lg-2">
<div class="countdown"></div>
</div>
</div>
</div>
<div class="container">
<?php foreach ($elements as $index => $element) : ?>
<script>
console.clear();
<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; ?>
<p><?= $element->data; ?></p>
<?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>
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');
<script>
console.clear();
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);
function CountdownTracker(label, value) {
var el = document.createElement('span');
this.el.classList.remove('flip');
void this.el.offsetWidth;
this.el.classList.add('flip');
}
}
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.update(value);
}
this.el = el;
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)
};
}
var top = el.querySelector('.cardcontatore__top'),
bottom = el.querySelector('.cardcontatore__bottom'),
back = el.querySelector('.cardcontatore__back'),
backBottom = el.querySelector('.cardcontatore__back .cardcontatore__bottom');
function Clock(countdown, callback) {
countdown = countdown ? new Date(Date.parse(countdown)) : false;
callback = callback || function() {};
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);
var updateFn = countdown ? getTimeRemaining : getTime;
this.el.classList.remove('flip');
void this.el.offsetWidth;
this.el.classList.add('flip');
}
}
this.el = document.createElement('div');
this.el.className = 'flip-clock';
this.update(value);
}
var trackers = {},
t = updateFn(countdown),
key, timeinterval;
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)
};
}
for (key in t) {
if (key === 'Total') { continue; }
trackers[key] = new CountdownTracker(key, t[key]);
this.el.appendChild(trackers[key].el);
}
function getTime() {
var t = new Date();
return {
//'Totale': t,
'Ore': t.getHours() % 12,
'Minuti': t.getMinutes(),
'Secondi': t.getSeconds()
};
}
var i = 0;
function updateClock() {
timeinterval = requestAnimationFrame(updateClock);
function Clock(countdown, callback) {
countdown = countdown ? new Date(Date.parse(countdown)) : false;
callback = callback || function() {};
// throttle so it's not constantly updating the time.
if (i++ % 10) { return; }
var updateFn = countdown ? getTimeRemaining : getTime;
var t = updateFn(countdown);
if (t.Total < 0) {
cancelAnimationFrame(timeinterval);
for (key in trackers) {
trackers[key].update(0);
}
callback();
return;
}
this.el = document.createElement('div');
this.el.className = 'flip-clock';
for (key in trackers) {
trackers[key].update(t[key]);
}
}
var trackers = {},
t = updateFn(countdown),
key, timeinterval;
setTimeout(updateClock, 500);
}
for (key in t) {
if (key === 'Total') { continue; }
trackers[key] = new CountdownTracker(key, t[key]);
this.el.appendChild(trackers[key].el);
}
// 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'); });
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; ?>
// 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; ?>
<?php endif; ?>