diff --git a/static/js/components/LoraModal.js b/static/js/components/LoraModal.js
index 5a333c99..cf10f910 100644
--- a/static/js/components/LoraModal.js
+++ b/static/js/components/LoraModal.js
@@ -706,9 +706,10 @@ function initLazyLoading(container) {
}
export function setupShowcaseScroll() {
- // Change from modal-content to window/document level
+ // Add event listener to document for wheel events
document.addEventListener('wheel', (event) => {
- const modalContent = document.querySelector('.modal-content');
+ // Find the active modal content
+ const modalContent = document.querySelector('#loraModal .modal-content');
if (!modalContent) return;
const showcase = modalContent.querySelector('.showcase-section');
@@ -725,24 +726,52 @@ export function setupShowcaseScroll() {
event.preventDefault();
}
}
- }, { passive: false }); // Add passive: false option here
+ }, { passive: false });
- // Keep the existing scroll tracking code
- const modalContent = document.querySelector('.modal-content');
- if (modalContent) {
- modalContent.addEventListener('scroll', () => {
- const backToTopBtn = modalContent.querySelector('.back-to-top');
- if (backToTopBtn) {
- if (modalContent.scrollTop > 300) {
- backToTopBtn.classList.add('visible');
- } else {
- backToTopBtn.classList.remove('visible');
+ // Use MutationObserver instead of deprecated DOMNodeInserted
+ const observer = new MutationObserver((mutations) => {
+ for (const mutation of mutations) {
+ if (mutation.type === 'childList' && mutation.addedNodes.length) {
+ // Check if loraModal content was added
+ const loraModal = document.getElementById('loraModal');
+ if (loraModal && loraModal.querySelector('.modal-content')) {
+ setupBackToTopButton(loraModal.querySelector('.modal-content'));
}
}
- });
+ }
+ });
+
+ // Start observing the document body for changes
+ observer.observe(document.body, { childList: true, subtree: true });
+
+ // Also try to set up the button immediately in case the modal is already open
+ const modalContent = document.querySelector('#loraModal .modal-content');
+ if (modalContent) {
+ setupBackToTopButton(modalContent);
}
}
+// New helper function to set up the back to top button
+function setupBackToTopButton(modalContent) {
+ // Remove any existing scroll listeners to avoid duplicates
+ modalContent.onscroll = null;
+
+ // Add new scroll listener
+ modalContent.addEventListener('scroll', () => {
+ const backToTopBtn = modalContent.querySelector('.back-to-top');
+ if (backToTopBtn) {
+ if (modalContent.scrollTop > 300) {
+ backToTopBtn.classList.add('visible');
+ } else {
+ backToTopBtn.classList.remove('visible');
+ }
+ }
+ });
+
+ // Trigger a scroll event to check initial position
+ modalContent.dispatchEvent(new Event('scroll'));
+}
+
export function scrollToTop(button) {
const modalContent = button.closest('.modal-content');
if (modalContent) {
diff --git a/static/js/managers/RecipeSearchManager.js b/static/js/managers/RecipeSearchManager.js
index bd72bf26..dac6ee88 100644
--- a/static/js/managers/RecipeSearchManager.js
+++ b/static/js/managers/RecipeSearchManager.js
@@ -111,13 +111,11 @@ export class RecipeSearchManager extends SearchManager {
}
resetAndReloadRecipes() {
- // This function would be implemented in the recipes page
- // Similar to resetAndReload for loras
- if (typeof window.loadRecipes === 'function') {
- window.loadRecipes();
+ if (window.recipeManager && typeof window.recipeManager.loadRecipes === 'function') {
+ window.recipeManager.loadRecipes();
} else {
// Fallback to reloading the page
- window.location.reload();
+ window.location.reload();
}
}
diff --git a/templates/components/lora_modals.html b/templates/components/lora_modals.html
new file mode 100644
index 00000000..a6ab03d1
--- /dev/null
+++ b/templates/components/lora_modals.html
@@ -0,0 +1,114 @@
+
+
+
+
+
+
+
+
Download LoRA from URL
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Select a LoRA root directory
+
+
+
+
+
+
+
+
+
+
+ {% for folder in folders %}
+ {% if folder %}
+
+ {{ folder }}
+
+ {% endif %}
+ {% endfor %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Move Model
+ ×
+
+
+
+
+
+ Select a LoRA root directory
+
+
+
+
+
+
+
+
+
+
+ {% for folder in folders %}
+ {% if folder %}
+
+ {{ folder }}
+
+ {% endif %}
+ {% endfor %}
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/templates/components/modals.html b/templates/components/modals.html
index 2f14fdce..f6102eff 100644
--- a/templates/components/modals.html
+++ b/templates/components/modals.html
@@ -1,6 +1,3 @@
-
-
-
@@ -14,118 +11,6 @@
-
-
-
-
-
Download LoRA from URL
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Select a LoRA root directory
-
-
-
-
-
-
-
-
-
-
- {% for folder in folders %}
- {% if folder %}
-
- {{ folder }}
-
- {% endif %}
- {% endfor %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Move Model
- ×
-
-
-
-
-
- Select a LoRA root directory
-
-
-
-
-
-
-
-
-
-
- {% for folder in folders %}
- {% if folder %}
-
- {{ folder }}
-
- {% endif %}
- {% endfor %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/templates/loras.html b/templates/loras.html
index a4c57ce8..6e1ee336 100644
--- a/templates/loras.html
+++ b/templates/loras.html
@@ -11,6 +11,10 @@
{% block init_message %}Scanning and building LoRA cache. This may take a few minutes...{% endblock %}
{% block init_check_url %}/api/loras?page=1&page_size=1{% endblock %}
+{% block additional_components %}
+{% include 'components/lora_modals.html' %}
+{% endblock %}
+
{% block content %}
{% include 'components/controls.html' %}