masterdraco/transmission-rss-manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add extreme measures to ensure update button visibility

Browse Source 
- Implemented an aggressive 1-second interval to force-check & show update button
- Added bold red styling with \!important flags to make button impossible to miss
- Implemented MutationObserver to detect & counteract any hiding attempts
- Added detailed console logging for debugging visibility issues
- Applied inline styles with \!important flags to override any CSS cascades
- Increased z-index to 9999 to ensure button appears above all other elements
- Set multiple CSS properties (display, visibility, opacity) to ensure visibility

🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
MasterDraco 2025-03-10 17:51:01 +00:00
parent 5261f7b4f4
commit dc4131f04c
1 changed files with 95 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
public/js/system-status.js
View File

@ -65,15 +65,37 @@ function initSystemStatus() {
// Set status text
updateStatusElement.innerHTML = '<i class="fas fa-exclamation-circle text-warning"></i> Update available';
// Show alert box
// Show alert box with extreme prejudice
const alertBox = updateAvailableDiv.querySelector('.alert');
if (alertBox) {
alertBox.style.display = 'block';
// Update message
// Add important inline styles to override any CSS
alertBox.setAttribute('style',
'display: block !important; ' +
'visibility: visible !important; ' +
'opacity: 1 !important; ' +
'margin-top: 10px !important; ' +
'border: 3px solid red !important; ' +
'background-color: #ffeeee !important; ' +
'color: #990000 !important; ' +
'font-weight: bold !important; ' +
'box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important; ' +
'position: relative !important; ' +
'z-index: 9999 !important;'
);
// Update message with important style
const spanElement = alertBox.querySelector('span');
if (spanElement) {
spanElement.textContent = `A new version is available: ${currentVersion} → ${remoteVersion}`;
spanElement.setAttribute('style', 'color: #990000 !important; font-weight: bold !important;');
}
// Also ensure the parent div is visible
updateAvailableDiv.style.display = 'block';
updateAvailableDiv.style.visibility = 'visible';
// Log that we've shown the update button
console.log('Update alert shown:', currentVersion, '->', remoteVersion);
}
// Store in localStorage
@ -95,7 +117,7 @@ function initSystemStatus() {
localStorage.removeItem(REMOTE_VERSION_KEY);
}
// Check localStorage on init
// Check localStorage on init and set up MutationObserver to prevent hiding
(function checkStoredUpdateStatus() {
const isUpdateAvailable = localStorage.getItem(UPDATE_KEY) === 'true';
if (isUpdateAvailable) {
@ -103,6 +125,38 @@ function initSystemStatus() {
const remoteVersion = localStorage.getItem(REMOTE_VERSION_KEY);
if (currentVersion && remoteVersion) {
showUpdateAlert(currentVersion, remoteVersion);
// Set up mutation observer to detect and revert any attempts to hide the update alert
const alertBox = updateAvailableDiv.querySelector('.alert');
if (alertBox) {
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'attributes' &&
(mutation.attributeName === 'style' ||
mutation.attributeName === 'class')) {
// If display is being changed to hide the element, force it back to visible
if (alertBox.style.display !== 'block' ||
alertBox.classList.contains('d-none') ||
alertBox.style.visibility === 'hidden' ||
alertBox.style.opacity === '0') {
console.log('Detected attempt to hide update button, forcing display');
showUpdateAlert(currentVersion, remoteVersion);
}
}
});
});
// Observe style and class attribute changes
observer.observe(alertBox, {
attributes: true,
attributeFilter: ['style', 'class']
});
// Store observer in window object to prevent garbage collection
window._updateButtonObserver = observer;
}
}
}
})();
@ -342,10 +396,47 @@ function initSystemStatus() {
});
}
// Persistent update button - force display every second if update is available
function forceShowUpdateButton() {
const isUpdateAvailable = localStorage.getItem(UPDATE_KEY) === 'true';
if (isUpdateAvailable) {
const alertBox = updateAvailableDiv.querySelector('.alert');
if (alertBox && alertBox.style.display !== 'block') {
console.log('Forcing update button display');
alertBox.style.display = 'block';
alertBox.style.visibility = 'visible';
alertBox.style.opacity = '1';
// Add important inline styles to override any CSS
alertBox.setAttribute('style',
'display: block !important; ' +
'visibility: visible !important; ' +
'opacity: 1 !important; ' +
'margin-top: 10px !important; ' +
'border: 3px solid red !important; ' +
'background-color: #ffeeee !important; ' +
'color: #990000 !important; ' +
'font-weight: bold !important; ' +
'box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important; ' +
'position: relative !important; ' +
'z-index: 9999 !important;'
);
// Also ensure the parent div is visible
updateAvailableDiv.style.display = 'block';
updateAvailableDiv.style.visibility = 'visible';
}
}
}
// Initialize
loadSystemStatus();
checkForUpdates();
// Force check the update button status every second
setInterval(forceShowUpdateButton, 1000);
// Set interval to refresh uptime every minute
setInterval(loadSystemStatus, 60000);
}