disable kudos button after click

This commit is contained in:
John Bowdre 2024-06-24 19:30:57 -05:00
parent 0332cbaab4
commit f2feafa49b
3 changed files with 54 additions and 13 deletions

23
assets/js/kudos.js Normal file
View file

@ -0,0 +1,23 @@
// disables kudos button after click
document.addEventListener('DOMContentLoaded', () => {
const kudosButton = document.querySelector('.kudos-button');
const kudosText = document.querySelector('.kudos-text');
const emojiSpan = kudosButton.querySelector('.emoji');
kudosButton.addEventListener('click', () => {
kudosButton.disabled = true;
kudosButton.classList.add('clicked');
kudosText.textContent = 'Thanks!';
kudosText.classList.add('thanks');
// Rotate the emoji
emojiSpan.style.transform = 'rotate(360deg)';
// Change the emoji after rotation
setTimeout(() => {
emojiSpan.textContent = '🎉';
}, 150); // Half of the transition time for a smooth mid-rotation change
});
});

View file

@ -41,7 +41,14 @@
{{- end }} {{- end }}
{{- if eq $reply true }} {{- if eq $reply true }}
<hr> <hr>
<span class="post_kudos"><button class="kudos" data-cabin-event="kudos">👍</button>Enjoyed this?</span> <div class="kudos-container">
<button class="kudos-button" data-cabin-event="kudos">
<span class="emoji">👍</span>
</button>
<span class="kudos-text">Enjoyed this?</span>
</div>
{{ $kudos := resources.Get "js/kudos.js" | minify }}
<script src="{{ $kudos.RelPermalink }}"></script>
<span class="post_email_reply"><a href="mailto:wheel.east.brief@clkdmail.com?Subject=Re: {{ .Title }}">📧 Reply by email</a></span> <span class="post_email_reply"><a href="mailto:wheel.east.brief@clkdmail.com?Subject=Re: {{ .Title }}">📧 Reply by email</a></span>
{{- end }} {{- end }}
<footer class="content__footer"></footer> <footer class="content__footer"></footer>

View file

@ -404,26 +404,37 @@ p:has(+ ul) {
} }
/* Cabin kudos styling */ /* Cabin kudos styling */
.post_kudos { .kudos-container {
display: flex; display: flex;
align-items: center;
} }
button.kudos { .kudos-button {
border: 0; background: none;
background-color: transparent; border: none;
cursor: pointer; cursor: pointer;
display: flex;
color: var(--off-fg);
font-size: 1.2rem; font-size: 1.2rem;
padding: 0; padding: 0;
transition: all .2s ease-in-out; margin-right: 0.25rem;
} }
button.kudos:hover { .kudos-button:disabled {
transform: scale(1.1); cursor: default;
text-shadow: var(-off-bg) 0 0 1px;
} }
button.kudos:active { .kudos-button .emoji {
transform: scale(0.9); display: inline-block;
transition: transform 0.3s ease;
}
.kudos-button.clicked .emoji {
transform: rotate(360deg);
}
.kudos-text {
transition: font-style 0.3s ease;
}
.kudos-text.thanks {
font-style: italic;
} }