fix: add debug toggle as draggable mobile FAB button
PROBLEM: - Debug logs only accessible via browser console (impractical on mobile) - User (Salixfire) reporting parsing issues but can't debug on mobile device - Need mobile-friendly debug mode for troubleshooting data display issues SOLUTION: Implemented debug toggle FAB button following exact pattern of existing mobile FABs: Files Changed: - src/core/state.js: Added debugFabPosition and debugMode to extensionSettings - src/core/config.js: Added debugFabPosition to defaultSettings (reference) - index.js: Created debug toggle button, imported setupDebugButtonDrag - style.css: Added debug toggle CSS matching mobile FAB pattern (44px, grab cursor, theme colors) - src/systems/ui/mobile.js: Added setupDebugButtonDrag() with drag-to-reposition - src/systems/ui/debug.js: Removed button creation, added just-dragged check, updated visibility control Implementation Details: - Button created in index.js (not debug.js) following mobile FAB pattern - CSS matches mobile toggle/refresh buttons (44px, theme colors, grab cursor, user-select: none) - Drag support with touch/mouse handlers, 200ms/10px threshold - Position saved to extensionSettings.debugFabPosition - Just-dragged flag prevents accidental clicks after drag - Mobile (≤1000px): slide from right with rpg-mobile-open/closing classes - Desktop (>1000px): slide from bottom with rpg-debug-open class - Event delegation for reliable click handling - Default position: bottom 140px, left 20px (below other FABs) Bug Fix: - Initial implementation had debugFabPosition only in config.js - extensionSettings uses state.js as source, not config.js - Without debugFabPosition in state.js, button had no position and was invisible - Now properly initialized in both files The debug button is hidden by default (debugMode: false) and shown when user enables debug mode in RPG Companion settings. This allows Salixfire to view parser logs on mobile and troubleshoot the data display issues.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
@@ -947,3 +947,218 @@ export function setupRefreshButtonDrag() {
|
||||
isDragging = false;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up drag functionality for the debug toggle FAB button
|
||||
* Same pattern as refresh button drag
|
||||
*/
|
||||
export function setupDebugButtonDrag() {
|
||||
const $debugBtn = $('#rpg-debug-toggle');
|
||||
|
||||
if ($debugBtn.length === 0) {
|
||||
console.warn('[RPG Mobile] Debug button not found in DOM');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('[RPG Mobile] setupDebugButtonDrag called');
|
||||
|
||||
// Load and apply saved position
|
||||
if (extensionSettings.debugFabPosition) {
|
||||
const pos = extensionSettings.debugFabPosition;
|
||||
console.log('[RPG Mobile] Loading saved debug button position:', pos);
|
||||
|
||||
// Apply saved position
|
||||
if (pos.top) $debugBtn.css('top', pos.top);
|
||||
if (pos.right) $debugBtn.css('right', pos.right);
|
||||
if (pos.bottom) $debugBtn.css('bottom', pos.bottom);
|
||||
if (pos.left) $debugBtn.css('left', pos.left);
|
||||
|
||||
// Constrain to viewport after position is applied
|
||||
requestAnimationFrame(() => constrainFabToViewport($debugBtn));
|
||||
}
|
||||
|
||||
// Touch/drag state
|
||||
let isDragging = false;
|
||||
let touchStartTime = 0;
|
||||
let touchStartX = 0;
|
||||
let touchStartY = 0;
|
||||
let buttonStartX = 0;
|
||||
let buttonStartY = 0;
|
||||
const LONG_PRESS_DURATION = 200;
|
||||
const MOVE_THRESHOLD = 10;
|
||||
let rafId = null;
|
||||
let pendingX = null;
|
||||
let pendingY = null;
|
||||
|
||||
// Update position using requestAnimationFrame
|
||||
function updatePosition() {
|
||||
if (pendingX !== null && pendingY !== null) {
|
||||
$debugBtn.css({
|
||||
left: pendingX + 'px',
|
||||
top: pendingY + 'px',
|
||||
right: 'auto',
|
||||
bottom: 'auto'
|
||||
});
|
||||
pendingX = null;
|
||||
pendingY = null;
|
||||
}
|
||||
rafId = null;
|
||||
}
|
||||
|
||||
// Touch start
|
||||
$debugBtn.on('touchstart', function(e) {
|
||||
const touch = e.originalEvent.touches[0];
|
||||
touchStartTime = Date.now();
|
||||
touchStartX = touch.clientX;
|
||||
touchStartY = touch.clientY;
|
||||
|
||||
const offset = $debugBtn.offset();
|
||||
buttonStartX = offset.left;
|
||||
buttonStartY = offset.top;
|
||||
|
||||
isDragging = false;
|
||||
});
|
||||
|
||||
// Touch move
|
||||
$debugBtn.on('touchmove', function(e) {
|
||||
const touch = e.originalEvent.touches[0];
|
||||
const deltaX = touch.clientX - touchStartX;
|
||||
const deltaY = touch.clientY - touchStartY;
|
||||
const timeSinceStart = Date.now() - touchStartTime;
|
||||
const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
|
||||
|
||||
if (!isDragging && (timeSinceStart > LONG_PRESS_DURATION || distance > MOVE_THRESHOLD)) {
|
||||
isDragging = true;
|
||||
$debugBtn.addClass('dragging');
|
||||
}
|
||||
|
||||
if (isDragging) {
|
||||
e.preventDefault();
|
||||
|
||||
let newX = buttonStartX + deltaX;
|
||||
let newY = buttonStartY + deltaY;
|
||||
|
||||
const buttonWidth = $debugBtn.outerWidth();
|
||||
const buttonHeight = $debugBtn.outerHeight();
|
||||
|
||||
const minX = 10;
|
||||
const maxX = window.innerWidth - buttonWidth - 10;
|
||||
const minY = 10;
|
||||
const maxY = window.innerHeight - buttonHeight - 10;
|
||||
|
||||
newX = Math.max(minX, Math.min(maxX, newX));
|
||||
newY = Math.max(minY, Math.min(maxY, newY));
|
||||
|
||||
pendingX = newX;
|
||||
pendingY = newY;
|
||||
if (!rafId) {
|
||||
rafId = requestAnimationFrame(updatePosition);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Touch end
|
||||
$debugBtn.on('touchend', function(e) {
|
||||
if (isDragging) {
|
||||
// Save new position
|
||||
const offset = $debugBtn.offset();
|
||||
const newPosition = {
|
||||
left: offset.left + 'px',
|
||||
top: offset.top + 'px'
|
||||
};
|
||||
|
||||
extensionSettings.debugFabPosition = newPosition;
|
||||
saveSettings();
|
||||
|
||||
setTimeout(() => {
|
||||
$debugBtn.removeClass('dragging');
|
||||
}, 50);
|
||||
|
||||
// Set flag to prevent click handler from firing
|
||||
$debugBtn.data('just-dragged', true);
|
||||
setTimeout(() => {
|
||||
$debugBtn.data('just-dragged', false);
|
||||
}, 100);
|
||||
|
||||
isDragging = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Mouse support for desktop
|
||||
let mouseDown = false;
|
||||
|
||||
$debugBtn.on('mousedown', function(e) {
|
||||
e.preventDefault();
|
||||
touchStartTime = Date.now();
|
||||
touchStartX = e.clientX;
|
||||
touchStartY = e.clientY;
|
||||
|
||||
const offset = $debugBtn.offset();
|
||||
buttonStartX = offset.left;
|
||||
buttonStartY = offset.top;
|
||||
|
||||
mouseDown = true;
|
||||
isDragging = false;
|
||||
});
|
||||
|
||||
$(document).on('mousemove.rpgDebugDrag', function(e) {
|
||||
if (!mouseDown) return;
|
||||
|
||||
const deltaX = e.clientX - touchStartX;
|
||||
const deltaY = e.clientY - touchStartY;
|
||||
const timeSinceStart = Date.now() - touchStartTime;
|
||||
const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
|
||||
|
||||
if (!isDragging && (timeSinceStart > LONG_PRESS_DURATION || distance > MOVE_THRESHOLD)) {
|
||||
isDragging = true;
|
||||
$debugBtn.addClass('dragging');
|
||||
}
|
||||
|
||||
if (isDragging) {
|
||||
let newX = buttonStartX + deltaX;
|
||||
let newY = buttonStartY + deltaY;
|
||||
|
||||
const buttonWidth = $debugBtn.outerWidth();
|
||||
const buttonHeight = $debugBtn.outerHeight();
|
||||
|
||||
const minX = 10;
|
||||
const maxX = window.innerWidth - buttonWidth - 10;
|
||||
const minY = 10;
|
||||
const maxY = window.innerHeight - buttonHeight - 10;
|
||||
|
||||
newX = Math.max(minX, Math.min(maxX, newX));
|
||||
newY = Math.max(minY, Math.min(maxY, newY));
|
||||
|
||||
pendingX = newX;
|
||||
pendingY = newY;
|
||||
if (!rafId) {
|
||||
rafId = requestAnimationFrame(updatePosition);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$(document).on('mouseup.rpgDebugDrag', function(e) {
|
||||
if (mouseDown && isDragging) {
|
||||
const offset = $debugBtn.offset();
|
||||
const newPosition = {
|
||||
left: offset.left + 'px',
|
||||
top: offset.top + 'px'
|
||||
};
|
||||
|
||||
extensionSettings.debugFabPosition = newPosition;
|
||||
saveSettings();
|
||||
|
||||
setTimeout(() => {
|
||||
$debugBtn.removeClass('dragging');
|
||||
}, 50);
|
||||
|
||||
$debugBtn.data('just-dragged', true);
|
||||
setTimeout(() => {
|
||||
$debugBtn.data('just-dragged', false);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
mouseDown = false;
|
||||
isDragging = false;
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user