runtimeterror/assets/js/kudos.js

26 lines
894 B
JavaScript
Raw Normal View History

2024-06-25 02:58:22 +00:00
// manipulates the post upvote "kudos" button behavior
2024-06-25 00:30:57 +00:00
2024-06-25 02:58:22 +00:00
window.onload = function() {
// get the button and text elements
2024-06-26 02:13:32 +00:00
const kudosButton = document.querySelector('.kudos-button');
const kudosText = document.querySelector('.kudos-text');
const emojiSpan = kudosButton.querySelector('.emoji');
2024-06-25 00:30:57 +00:00
2024-06-25 02:58:22 +00:00
kudosButton.addEventListener('click', function(event) {
// send the event to Cabin
2024-06-25 01:56:55 +00:00
cabin.event('kudos')
2024-06-25 02:58:22 +00:00
// disable the button
2024-06-25 00:30:57 +00:00
kudosButton.disabled = true;
kudosButton.classList.add('clicked');
2024-06-25 02:58:22 +00:00
// change the displayed text
2024-06-25 00:30:57 +00:00
kudosText.textContent = 'Thanks!';
kudosText.classList.add('thanks');
2024-06-25 02:58:22 +00:00
// spin the emoji
2024-06-25 00:30:57 +00:00
emojiSpan.style.transform = 'rotate(360deg)';
2024-06-25 02:58:22 +00:00
// change the emoji to celebrate
setTimeout(function() {
2024-06-25 00:30:57 +00:00
emojiSpan.textContent = '🎉';
2024-06-25 02:58:22 +00:00
}, 150); // half of the css transition time for a smooth mid-rotation change
2024-06-25 00:30:57 +00:00
});
2024-06-25 02:58:22 +00:00
}