slide countdown e highlist modulo aggiornato 5 v

This commit is contained in:
2025-01-03 18:30:52 +01:00
parent 8779fa0b74
commit 024ea6956d
37 changed files with 1965 additions and 282 deletions

View File

@ -22,35 +22,148 @@ $field_name = !empty($tableField[1]) ? $tableField[1] : '';
$opacita = $params->get('opacita', []);
$sfondo = $params->get('sfondo', []);
?>
<?php if (!empty($elements)) : ?>
<div class="bd-example w-100">
<div class="bd-example-tabs">
<div class="row">
<!-- Macro a sinistra -->
<div class="col-4 col-md-3">
<div class="nav nav-tabs nav-tabs-vertical nav-tabs-vertical-background" id="nav-vertical-tab-bg" role="tablist" aria-orientation="vertical">
<?php foreach ($elements as $index => $element) : ?>
<a class="nav-link <?php echo $index === 0 ? 'active' : ''; ?>" id="nav-vertical-tab-<?php echo $index; ?>-tab" data-bs-toggle="tab" href="#nav-vertical-tab-<?php echo $index; ?>" role="tab" aria-controls="nav-vertical-tab-<?php echo $index; ?>" aria-selected="<?php echo $index === 0 ? 'true' : 'false'; ?>">
<?php echo $element->sottotitolo; ?>
</a>
<?php endforeach; ?>
</div>
<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>
<!-- Contenuto a destra -->
<div class="col-8 col-md-9">
<div class="tab-content" id="nav-vertical-tab-bgContent">
<?php foreach ($elements as $index => $element) : ?>
<div class="tab-pane p-3 fade <?php echo $index === 0 ? 'active show' : ''; ?>" id="nav-vertical-tab-<?php echo $index; ?>" role="tabpanel" aria-labelledby="nav-vertical-tab-<?php echo $index; ?>-tab">
<div><?php echo $element->titolo; ?></div>
<div><?php echo $element->sottotitolo; ?></div>
<div><?php echo $element->descrizione; ?></div>
</div>
<?php endforeach; ?>
</div>
<div class="col-5">
<div class="countdown"></div>
</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; ?>

View File

@ -79,7 +79,7 @@ var swiper = new Swiper(".sliderfull'. $module->id . '", {
</div>
</div>
<div class="row m-0">
<div class="row m-0 row50slide">
<div class="col-12 col-lg-6 order-lg-1 order-2">
</div>