engelsystem/resources/assets/js/countdown.js

82 lines
1.9 KiB
JavaScript

import { ready } from './ready';
const lang = document.documentElement.getAttribute('lang');
const templateFuture = 'in %value %unit';
const templatePast = lang === 'en'
? '%value %unit ago'
: 'vor %value %unit';
const yearUnits = lang === 'en'
? ['year', 'years']
: ['Jahr', 'Jahren'];
const monthUnits = lang === 'en'
? ['month', 'months']
: ['Monat', 'Monaten'];
const dayUnits = lang === 'en'
? ['day', 'days']
: ['Tag', 'Tagen'];
const hourUnits = lang === 'en'
? ['hour', 'hours']
: ['Stunde', 'Stunden'];
const minuteUnits = lang === 'en'
? ['minute', 'minutes']
: ['Minute', 'Minuten'];
const secondUnits = lang === 'en'
? ['second', 'seconds']
: ['Sekunde', 'Sekunden'];
const nowString = lang === 'en' ? 'now' : 'jetzt';
const secondsHour = 60 * 60;
const timeFrames = [
[365 * 24 * 60 * 60, yearUnits],
[30 * 24 * 60 * 60, monthUnits],
[24 * 60 * 60, dayUnits],
[secondsHour, hourUnits],
[60, minuteUnits],
[1, secondUnits],
];
function formatFromNow(timestamp) {
const now = Date.now() / 1000;
const diff = Math.abs(timestamp - now);
const ago = now > timestamp;
for (const [duration, [singular, plural]] of timeFrames) {
const value = diff < secondsHour
? Math.floor(diff / duration)
: Math.round(diff / duration);
if (value) {
const template = ago ? templatePast : templateFuture;
const unit = value === 1 ? singular : plural;
return template
.replace('%value', value)
.replace('%unit', unit);
}
}
return nowString;
}
/**
* Initialises all countdown fields on the page.
*/
ready(() => {
document.querySelectorAll('[data-countdown-ts]').forEach((element) => {
const timestamp = element.dataset.countdownTs;
const template = element.innerHTML;
element.innerHTML = template.replace('%c', formatFromNow(timestamp));
setInterval(() => {
element.innerHTML = template.replace('%c', formatFromNow(timestamp));
}, 1000);
});
});