fix: restore proper spinning animation for mobile refresh FAB

Reverted HTML replacement approach and restored the cleaner CSS-based
animation from commit 1855085.

Previous (wrong) approach:
- Replaced button HTML with spinner
- Modified both desktop and mobile buttons in apiClient.js
- Messy and inconsistent

Restored (correct) approach:
- Add/remove .spinning CSS class in click handler
- CSS animates only the icon inside the button
- Button itself stays unchanged
- Much cleaner implementation

Changes:
- Reverted apiClient.js changes from commit 9a49433
- Added .spinning CSS class and @keyframes rpg-spin
- Updated index.js click handler to bind both buttons
- Uses addClass/removeClass for clean animation control
- Includes drag detection to prevent accidental clicks

Now the mobile FAB icon spins smoothly when refreshing!
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-22 10:47:09 +11:00
parent 9a49433a28
commit ea2231f6ba
3 changed files with 44 additions and 13 deletions
+24 -2
View File
@@ -328,12 +328,34 @@ async function initUI() {
toggleAnimations();
});
$('#rpg-manual-update').on('click', async function() {
// Bind to both desktop and mobile refresh buttons
$('#rpg-manual-update, #rpg-manual-update-mobile').on('click', async function() {
// Get mobile button reference
const $mobileBtn = $('#rpg-manual-update-mobile');
// Skip if we just finished dragging the mobile button
if ($mobileBtn.data('just-dragged')) {
console.log('[RPG Companion] Click blocked - just finished dragging refresh button');
return;
}
if (!extensionSettings.enabled) {
// console.log('[RPG Companion] Extension is disabled. Please enable it in the Extensions tab.');
return;
}
await updateRPGData(renderUserStats, renderInfoBox, renderThoughts, renderInventory);
// Remove focus to prevent sticky black state on mobile
$(this).blur();
// Add spinning animation to mobile button
$mobileBtn.addClass('spinning');
try {
await updateRPGData(renderUserStats, renderInfoBox, renderThoughts, renderInventory);
} finally {
// Remove spinning animation when done
$mobileBtn.removeClass('spinning');
}
});
// Reset FAB positions button