| 1 |
/** |
| 2 |
* Block Countdown |
| 3 |
*/ |
| 4 |
import countDownApi from './api'; |
| 5 |
import { TIMEZONELESS_FORMAT } from './constants'; |
| 6 |
|
| 7 |
const { |
| 8 |
GHOSTKIT: { events, timezone }, |
| 9 |
luxon, |
| 10 |
} = window; |
| 11 |
|
| 12 |
/** |
| 13 |
* Prepare Countdowns. |
| 14 |
*/ |
| 15 |
events.on(document, 'init.blocks.gkt', () => { |
| 16 |
function updateUnits(date, units, unitsElements, $this) { |
| 17 |
const currentDate = new Date( |
| 18 |
luxon.DateTime.now().setZone(timezone).toFormat(TIMEZONELESS_FORMAT) |
| 19 |
); |
| 20 |
|
| 21 |
const dateData = countDownApi(date, currentDate, units, 0); |
| 22 |
const isEnd = dateData.value >= 0; |
| 23 |
|
| 24 |
if (isEnd) { |
| 25 |
$this |
| 26 |
.querySelectorAll(':scope > .ghostkit-countdown-unit') |
| 27 |
.forEach(($unit) => { |
| 28 |
$unit.style.display = 'none'; |
| 29 |
}); |
| 30 |
|
| 31 |
$this.querySelector( |
| 32 |
':scope > .ghostkit-countdown-expire-action' |
| 33 |
).style.display = 'block'; |
| 34 |
return; |
| 35 |
} |
| 36 |
|
| 37 |
Object.keys(unitsElements).forEach((unitName) => { |
| 38 |
let formattedUnit = false; |
| 39 |
|
| 40 |
if (dateData && typeof dateData[unitName] !== 'undefined') { |
| 41 |
formattedUnit = countDownApi.formatUnit( |
| 42 |
dateData[unitName], |
| 43 |
unitName |
| 44 |
); |
| 45 |
} |
| 46 |
|
| 47 |
const newNumber = formattedUnit ? formattedUnit.number : '00'; |
| 48 |
const newLabel = formattedUnit ? formattedUnit.label : unitName; |
| 49 |
|
| 50 |
if (unitsElements[unitName].$number.innerHTML !== newNumber) { |
| 51 |
unitsElements[unitName].$number.innerHTML = newNumber; |
| 52 |
} |
| 53 |
if (unitsElements[unitName].$label.innerHTML !== newLabel) { |
| 54 |
unitsElements[unitName].$label.innerHTML = newLabel; |
| 55 |
} |
| 56 |
}); |
| 57 |
|
| 58 |
setTimeout(() => { |
| 59 |
updateUnits(date, units, unitsElements, $this); |
| 60 |
}, countDownApi.getDelay(units)); |
| 61 |
} |
| 62 |
|
| 63 |
document |
| 64 |
.querySelectorAll('.ghostkit-countdown:not(.ghostkit-countdown-ready)') |
| 65 |
.forEach(($countdown) => { |
| 66 |
events.trigger($countdown, 'prepare.countdown.gkt'); |
| 67 |
|
| 68 |
$countdown.classList.add('ghostkit-countdown-ready'); |
| 69 |
|
| 70 |
const date = new Date($countdown.getAttribute('data-date')); |
| 71 |
|
| 72 |
const unitsElements = []; |
| 73 |
const units = [ |
| 74 |
'years', |
| 75 |
'months', |
| 76 |
'weeks', |
| 77 |
'days', |
| 78 |
'hours', |
| 79 |
'minutes', |
| 80 |
'seconds', |
| 81 |
].filter((unitName) => { |
| 82 |
const $unit = $countdown.querySelector( |
| 83 |
`:scope > .ghostkit-countdown-unit-${unitName}` |
| 84 |
); |
| 85 |
|
| 86 |
if ($unit) { |
| 87 |
unitsElements[unitName] = { |
| 88 |
$number: $unit.querySelector( |
| 89 |
'.ghostkit-countdown-unit-number' |
| 90 |
), |
| 91 |
$label: $unit.querySelector( |
| 92 |
'.ghostkit-countdown-unit-label' |
| 93 |
), |
| 94 |
}; |
| 95 |
return true; |
| 96 |
} |
| 97 |
|
| 98 |
return false; |
| 99 |
}); |
| 100 |
|
| 101 |
events.trigger($countdown, 'prepared.countdown.gkt'); |
| 102 |
|
| 103 |
updateUnits(date, units, unitsElements, $countdown); |
| 104 |
}); |
| 105 |
}); |
| 106 |
|
