85 lines
2.8 KiB
JavaScript
85 lines
2.8 KiB
JavaScript
window.addEventListener('DOMContentLoaded', () => {
|
|
displayLocalTimestamps();
|
|
for (const el of document.querySelectorAll('.option input[type=checkbox], .option input[type=radio]')) {
|
|
el.onclick = updateVotesRemaining;
|
|
}
|
|
const banner = document.querySelector('.banner');
|
|
if (banner) {
|
|
banner.onclick = hideBanner;
|
|
}
|
|
});
|
|
|
|
function displayLocalTimestamps() {
|
|
for (const el of document.getElementsByTagName('time')) {
|
|
const dateObj = new Date(el.getAttribute('datetime'));
|
|
const relDate = compareDateToToday(dateObj);
|
|
el.innerText = relDate === 0
|
|
? `Today, ${dateObj.toLocaleTimeString()}`
|
|
: dateObj.toLocaleDateString();
|
|
}
|
|
}
|
|
|
|
function compareDateToToday(date) {
|
|
const today = new Date();
|
|
if (today.getDate() === date.getDate()
|
|
&& today.getMonth() === date.getMonth()
|
|
&& date.getFullYear() === today.getFullYear()) {
|
|
return 0;
|
|
}
|
|
today.setHours(0, 0, 0, 0);
|
|
return today > date ? -1 : 1;
|
|
}
|
|
|
|
function updateVotesRemaining() {
|
|
const numChecked = document
|
|
.querySelectorAll('.option input[type=checkbox]:checked, .option input[type=radio]:checked')
|
|
.length;
|
|
const votesRemainingElement = document.querySelector('.votes-remaining');
|
|
const total = votesRemainingElement.dataset.maxVotes;
|
|
const remaining = Math.max(0, total - numChecked);
|
|
const plural = remaining === 1 ? '' : 's';
|
|
votesRemainingElement.innerText = `${remaining} Vote${plural} remaining`;
|
|
const voteButton = document.querySelector('button[name=submit_vote]');
|
|
const canVoteInitial = voteButton.dataset.canVote === 'true';
|
|
voteButton.disabled = !canVoteInitial || (total - numChecked) < 0 || numChecked === 0;
|
|
}
|
|
|
|
function hideBanner() {
|
|
//const banner = document.querySelector('.success-banner');
|
|
const banner = document.querySelector('.banner-wrapper');
|
|
const animationEnd = findTransitionEnd();
|
|
banner.addEventListener(animationEnd, animationEnded);
|
|
const rect = banner.getBoundingClientRect();
|
|
console.log('Setting height to ', `${rect.height}px`);
|
|
banner.style.height = `${rect.height}px`;
|
|
banner.classList.add('hiding');
|
|
}
|
|
|
|
function animationEnded(event) {
|
|
const banner = event.target;
|
|
const isPhase1End = !banner.classList.contains('resizing');
|
|
banner.innerText = '';
|
|
if (isPhase1End) {
|
|
console.log('Resizing');
|
|
banner.classList.add('resizing');
|
|
banner.style.height = '0';
|
|
} else {
|
|
event.target.removeEventListener(findTransitionEnd(), animationEnded);
|
|
event.target.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
function findTransitionEnd() {
|
|
const e = document.createElement('div');
|
|
const animations = {
|
|
'transition': 'transitionend',
|
|
'OTransition': 'oTransitionEnd',
|
|
'MozTransition': 'transitionend',
|
|
'WebkitTransition': 'webkitTransitionEnd'
|
|
};
|
|
for (const a in animations) {
|
|
if (e.style[a] !== undefined) {
|
|
return animations[a];
|
|
}
|
|
}
|
|
} |