brozek/website-theme
1
0
Fork 0
mirror of https://github.com/Brandon-Rozek/website-theme.git synced 2025-07-30 21:52:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

Make nojs friendly, and fix already logged state

Browse source
This commit is contained in:
Brandon Rozek 2025-06-11 21:49:39 -04:00
parent 0007b4241b
commit 51b780c021
No known key found for this signature in database
GPG key ID: DFB0E78F805F4567
1 changed files with 29 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
layouts/partials/highfive.html
View file

@ -26,14 +26,29 @@
.highfive-btn {
transition: opacity 0.2s ease;
}
.highfive-btn.no-js {
opacity: 0.6;
pointer-events: none;
cursor: not-allowed;
}
</style>
{{ $apiUrl := printf "https://api.brandonrozek.com/highfive%s" .RelPermalink }}
{{ $resource := resources.GetRemote $apiUrl }}
{{ $initialCount := 0 }}
{{ if $resource }}
{{ $highfiveData := $resource | transform.Unmarshal }}
{{ if $highfiveData.count }}
{{ $initialCount = $highfiveData.count }}
{{ end }}
{{ end }}
<div class="highfive-container">
<p>
Give me a high five (it's free):
<a href="#" id="highfive-btn" class="reply-button highfive-btn" role="button" aria-label="Give high five">
<i class="fa fa-hand-paper" style="margin-right: 0.5rem;" aria-hidden="true"></i>
(<span id="highfive-count" aria-live="polite">0</span>)
<a href="#" id="highfive-btn" class="reply-button highfive-btn no-js" role="button" aria-label="Give high five">
<i class="fa fa-hand-paper" style="margin-right: 0.5rem;" aria-hidden="true"></i>(<span id="highfive-count" aria-live="polite">{{ $initialCount }}</span>)
</a>
<span id="highfive-message" class="highfive-message" role="status" aria-live="polite"></span>
</p>
@ -62,7 +77,7 @@
// State
let isLoading = false;
let currentCount = 0;
let currentCount = {{ $initialCount }};
/**
* Initialize the high five functionality
@ -78,8 +93,9 @@
return;
}
// Enable button now that JavaScript is available
elements.button.classList.remove('no-js');
elements.button.addEventListener('click', handleHighFiveClick);
loadHighFiveCount();
}
/**
@ -92,6 +108,12 @@
headers: { 'Content-Type': 'application/json' }
});
// Handle 409 Conflict (already high-fived) as a special case
if (response.status === 409) {
const data = await response.json();
return { ...data, alreadyHighFived: true };
}
if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}
@ -128,8 +150,8 @@
const newCount = data.count || 0;
currentCount = newCount;
// Check if user already gave a high five
if (data.message === 'Already logged') {
// Check if user already gave a high five (HTTP 409 response)
if (data.alreadyHighFived) {
updateButtonContent('check', newCount);
showMessage('👋 Already high-fived!', 'success');
setButtonState('disabled');