iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(constants): introduce constants.js and wire timing/selector constants into framework transitions and navigation

Browse Source
This commit is contained in:
0x1d
2025-08-31 11:22:22 +02:00
parent f18907d9e4
commit b757cb68da
3 changed files with 36 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/index.html
View File

@@ -143,6 +143,7 @@
</div> </div>
<script src="./vendor/d3.v7.min.js"></script> <script src="./vendor/d3.v7.min.js"></script>
<script src="./scripts/constants.js"></script>
<script src="./scripts/framework.js"></script> <script src="./scripts/framework.js"></script>
<script src="./scripts/api-client.js"></script> <script src="./scripts/api-client.js"></script>
<script src="./scripts/view-models.js"></script> <script src="./scripts/view-models.js"></script>

27
public/scripts/constants.js Normal file
View File

@@ -0,0 +1,27 @@
(function(){
const TIMING = {
NAV_COOLDOWN_MS: 300,
VIEW_FADE_OUT_MS: 150,
VIEW_FADE_IN_MS: 200,
VIEW_FADE_DELAY_MS: 50,
AUTO_REFRESH_MS: 30000,
PRIMARY_NODE_REFRESH_MS: 10000,
LOAD_GUARD_MS: 10000
};
const SELECTORS = {
NAV_TAB: '.nav-tab',
VIEW_CONTENT: '.view-content',
CLUSTER_STATUS: '.cluster-status'
};
const CLASSES = {
CLUSTER_STATUS_ONLINE: 'cluster-status-online',
CLUSTER_STATUS_OFFLINE: 'cluster-status-offline',
CLUSTER_STATUS_CONNECTING: 'cluster-status-connecting',
CLUSTER_STATUS_ERROR: 'cluster-status-error',
CLUSTER_STATUS_DISCOVERING: 'cluster-status-discovering'
};
window.CONSTANTS = window.CONSTANTS || { TIMING, SELECTORS, CLASSES };
})();

16
public/scripts/framework.js
View File

@@ -614,7 +614,7 @@ class App {
this.navigationInProgress = false; this.navigationInProgress = false;
this.navigationQueue = []; this.navigationQueue = [];
this.lastNavigationTime = 0; this.lastNavigationTime = 0;
this.navigationCooldown = 300; // 300ms cooldown between navigations this.navigationCooldown = (window.CONSTANTS && window.CONSTANTS.TIMING.NAV_COOLDOWN_MS) || 300; // cooldown between navigations
// Component cache to keep components alive // Component cache to keep components alive
this.componentCache = new Map(); this.componentCache = new Map();
@@ -750,11 +750,11 @@ class App {
// Fade out the container // Fade out the container
if (this.currentView.container) { if (this.currentView.container) {
this.currentView.container.style.opacity = '0'; this.currentView.container.style.opacity = '0';
this.currentView.container.style.transition = 'opacity 0.15s ease-out'; this.currentView.container.style.transition = `opacity ${(window.CONSTANTS && window.CONSTANTS.TIMING.VIEW_FADE_OUT_MS) || 150}ms ease-out`;
} }
// Wait for fade out to complete // Wait for fade out to complete
await new Promise(resolve => setTimeout(resolve, 150)); await new Promise(resolve => setTimeout(resolve, (window.CONSTANTS && window.CONSTANTS.TIMING.VIEW_FADE_OUT_MS) || 150));
} }
// Show view smoothly // Show view smoothly
@@ -772,10 +772,10 @@ class App {
// Fade in the container // Fade in the container
container.style.opacity = '0'; container.style.opacity = '0';
container.style.transition = 'opacity 0.2s ease-in'; container.style.transition = `opacity ${(window.CONSTANTS && window.CONSTANTS.TIMING.VIEW_FADE_IN_MS) || 200}ms ease-in`;
// Small delay to ensure smooth transition // Small delay to ensure smooth transition
await new Promise(resolve => setTimeout(resolve, 50)); await new Promise(resolve => setTimeout(resolve, (window.CONSTANTS && window.CONSTANTS.TIMING.VIEW_FADE_DELAY_MS) || 50));
// Fade in // Fade in
container.style.opacity = '1'; container.style.opacity = '1';
@@ -784,7 +784,7 @@ class App {
// Update navigation state // Update navigation state
updateNavigation(activeRoute) { updateNavigation(activeRoute) {
// Remove active class from all nav tabs // Remove active class from all nav tabs
document.querySelectorAll('.nav-tab').forEach(tab => { document.querySelectorAll((window.CONSTANTS && window.CONSTANTS.SELECTORS.NAV_TAB) || '.nav-tab').forEach(tab => {
tab.classList.remove('active'); tab.classList.remove('active');
}); });
@@ -795,7 +795,7 @@ class App {
} }
// Hide all view contents with smooth transition // Hide all view contents with smooth transition
document.querySelectorAll('.view-content').forEach(view => { document.querySelectorAll((window.CONSTANTS && window.CONSTANTS.SELECTORS.VIEW_CONTENT) || '.view-content').forEach(view => {
view.classList.remove('active'); view.classList.remove('active');
view.style.opacity = '0'; view.style.opacity = '0';
view.style.transition = 'opacity 0.15s ease-out'; view.style.transition = 'opacity 0.15s ease-out';
@@ -838,7 +838,7 @@ class App {
// Setup navigation // Setup navigation
setupNavigation() { setupNavigation() {
document.querySelectorAll('.nav-tab').forEach(tab => { document.querySelectorAll((window.CONSTANTS && window.CONSTANTS.SELECTORS.NAV_TAB) || '.nav-tab').forEach(tab => {
tab.addEventListener('click', () => { tab.addEventListener('click', () => {
const routeName = tab.dataset.view; const routeName = tab.dataset.view;
this.navigateTo(routeName); this.navigateTo(routeName);