fix: restore proper spinning animation for mobile refresh FAB
Reverted HTML replacement approach and restored the cleaner CSS-based animation from commit1855085. 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 commit9a49433- 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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user