mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-08-07 22:40:14 -03:00
Make the import modal a flex column with a scrollable step area so the Back/Import buttons stay visible on short viewports (1080p / 150% zoom) instead of being cut off at the bottom of the scroll flow. Also reset step scroll positions via class since 'locationStep' has a duplicate id in the download modal template.
58 lines
2.0 KiB
JavaScript
58 lines
2.0 KiB
JavaScript
export class ImportStepManager {
|
|
constructor() {
|
|
this.injectedStyles = null;
|
|
}
|
|
|
|
removeInjectedStyles() {
|
|
if (this.injectedStyles && this.injectedStyles.parentNode) {
|
|
this.injectedStyles.parentNode.removeChild(this.injectedStyles);
|
|
this.injectedStyles = null;
|
|
}
|
|
|
|
// Reset inline styles
|
|
document.querySelectorAll('.import-step').forEach(step => {
|
|
step.style.cssText = '';
|
|
});
|
|
}
|
|
|
|
showStep(stepId) {
|
|
// Remove any injected styles to prevent conflicts
|
|
this.removeInjectedStyles();
|
|
|
|
// Hide all steps first
|
|
document.querySelectorAll('.import-step').forEach(step => {
|
|
step.style.display = 'none';
|
|
});
|
|
|
|
// Show target step with a monitoring mechanism
|
|
const targetStep = document.getElementById(stepId);
|
|
if (targetStep) {
|
|
// Use direct style setting
|
|
targetStep.style.display = 'block';
|
|
|
|
// For the locationStep specifically, we need additional measures
|
|
if (stepId === 'locationStep') {
|
|
// Create a more persistent style to override any potential conflicts
|
|
this.injectedStyles = document.createElement('style');
|
|
this.injectedStyles.innerHTML = `
|
|
#locationStep {
|
|
display: block !important;
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|
|
`;
|
|
document.head.appendChild(this.injectedStyles);
|
|
|
|
// Force layout recalculation
|
|
targetStep.offsetHeight;
|
|
}
|
|
|
|
// Reset scroll via class: 'locationStep' has a duplicate ID in downloadModal's
|
|
// template, so getElementById may not return the import modal's step.
|
|
document.querySelectorAll('.import-step').forEach(step => {
|
|
step.scrollTop = 0;
|
|
});
|
|
}
|
|
}
|
|
}
|