brozek/website-theme
1
0
Fork 0
mirror of https://github.com/Brandon-Rozek/website-theme.git synced 2025-07-31 14:12:01 +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 { .highfive-btn {
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
} }
.highfive-btn.no-js {
opacity: 0.6;
pointer-events: none;
cursor: not-allowed;
}
</style> </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"> <div class="highfive-container">
<p> <p>
Give me a high five (it's free): 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"> <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> <i class="fa fa-hand-paper" style="margin-right: 0.5rem;" aria-hidden="true"></i>(<span id="highfive-count" aria-live="polite">{{ $initialCount }}</span>)
(<span id="highfive-count" aria-live="polite">0</span>)
</a> </a>
<span id="highfive-message" class="highfive-message" role="status" aria-live="polite"></span> <span id="highfive-message" class="highfive-message" role="status" aria-live="polite"></span>
</p> </p>
@ -62,7 +77,7 @@
// State // State
let isLoading = false; let isLoading = false;
let currentCount = 0; let currentCount = {{ $initialCount }};
/** /**
* Initialize the high five functionality * Initialize the high five functionality
@ -78,8 +93,9 @@
return; return;
} }
// Enable button now that JavaScript is available
elements.button.classList.remove('no-js');
elements.button.addEventListener('click', handleHighFiveClick); elements.button.addEventListener('click', handleHighFiveClick);
loadHighFiveCount();
} }
/** /**
@ -92,6 +108,12 @@
headers: { 'Content-Type': 'application/json' } 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) { if (!response.ok) {
throw new Error(`HTTP ${response.status}: ${response.statusText}`); throw new Error(`HTTP ${response.status}: ${response.statusText}`);
} }
@ -128,8 +150,8 @@
const newCount = data.count || 0; const newCount = data.count || 0;
currentCount = newCount; currentCount = newCount;
// Check if user already gave a high five // Check if user already gave a high five (HTTP 409 response)
if (data.message === 'Already logged') { if (data.alreadyHighFived) {
updateButtonContent('check', newCount); updateButtonContent('check', newCount);
showMessage('👋 Already high-fived!', 'success'); showMessage('👋 Already high-fived!', 'success');
setButtonState('disabled'); setButtonState('disabled');