Improvements in template handling and loading
This commit is contained in:
Nathan Schneider
@@ -100,6 +100,17 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Make input fields read-only appearance */
|
||||
#community-name, #protocol-summary {
|
||||
border: none !important;
|
||||
background-color: transparent !important;
|
||||
padding: 0 !important;
|
||||
pointer-events: none !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
/* Only show filled textareas */
|
||||
textarea:not(${contentTextareas.join(',')}) {
|
||||
display: none !important;
|
||||
@@ -205,72 +216,129 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
// Load template data
|
||||
let templates = [];
|
||||
|
||||
// Function to fetch templates - simplified approach
|
||||
function fetchTemplates() {
|
||||
console.log('Fetching templates...');
|
||||
// Function to initialize templates - now uses Hugo data
|
||||
function initializeTemplates() {
|
||||
console.log('Initializing template system...');
|
||||
|
||||
// Load all templates at startup
|
||||
try {
|
||||
// First try loading from the standard path
|
||||
fetch('/js/templates/index.js')
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch templates: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
return response.text();
|
||||
})
|
||||
.then(moduleText => {
|
||||
// Add a script element to the document
|
||||
const script = document.createElement('script');
|
||||
script.type = 'module';
|
||||
script.textContent = moduleText;
|
||||
document.head.appendChild(script);
|
||||
|
||||
// Set a timeout to check for templates
|
||||
setTimeout(() => {
|
||||
// See if templates were loaded
|
||||
if (window.allTemplates && Array.isArray(window.allTemplates)) {
|
||||
console.log('Templates loaded successfully:', window.allTemplates.length, 'templates found');
|
||||
templates = window.allTemplates;
|
||||
|
||||
// Populate the template selector
|
||||
populateTemplateSelector(templates);
|
||||
|
||||
// Template selection is now handled by buttons in the template options
|
||||
console.log('Template selection will be handled by buttons in the template options');
|
||||
} else {
|
||||
console.error('Templates not available after loading script');
|
||||
}
|
||||
}, 500);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching templates:', error);
|
||||
|
||||
// Try alternate loading method with ES modules import
|
||||
console.log('Trying alternate loading method with ES modules...');
|
||||
|
||||
import('/js/templates/index.js')
|
||||
.then(module => {
|
||||
templates = module.default;
|
||||
console.log('Templates loaded successfully using ES modules:', templates.length, 'templates found');
|
||||
|
||||
// Populate the template selector
|
||||
populateTemplateSelector(templates);
|
||||
|
||||
// Template selection is now handled by buttons in the template options
|
||||
console.log('Template selection will be handled by buttons in the template options');
|
||||
})
|
||||
.catch(importError => {
|
||||
console.error('ES module import also failed:', importError);
|
||||
console.error('Could not load templates through either method');
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Error in template loading:', e);
|
||||
// Check if templates are loaded from Hugo
|
||||
if (window.allTemplates) {
|
||||
let templatesData;
|
||||
|
||||
// Parse JSON string if needed
|
||||
if (typeof window.allTemplates === 'string') {
|
||||
try {
|
||||
templatesData = JSON.parse(window.allTemplates);
|
||||
console.log('Parsed templates JSON string successfully');
|
||||
} catch (error) {
|
||||
console.error('Failed to parse templates JSON:', error);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
templatesData = window.allTemplates;
|
||||
}
|
||||
|
||||
// Convert Hugo data object to array format
|
||||
if (typeof templatesData === 'object' && !Array.isArray(templatesData)) {
|
||||
// Hugo data comes as an object, convert to array
|
||||
templates = Object.values(templatesData);
|
||||
console.log('Templates loaded from Hugo data:', templates.length, 'templates found');
|
||||
console.log('Template IDs:', templates.map(t => t.id));
|
||||
} else if (Array.isArray(templatesData)) {
|
||||
// Already in array format
|
||||
templates = templatesData;
|
||||
console.log('Templates already in array format:', templates.length, 'templates found');
|
||||
}
|
||||
|
||||
// Templates are already in the HTML, so we don't need to populate
|
||||
// Just add event handlers to existing template options
|
||||
addTemplateEventHandlers();
|
||||
return;
|
||||
}
|
||||
|
||||
// Fallback - check periodically if templates aren't immediately available
|
||||
let checkCount = 0;
|
||||
const maxChecks = 10; // Check for 5 seconds
|
||||
|
||||
const checkForTemplates = setInterval(() => {
|
||||
checkCount++;
|
||||
|
||||
if (window.allTemplates) {
|
||||
let templatesData;
|
||||
|
||||
// Parse JSON string if needed
|
||||
if (typeof window.allTemplates === 'string') {
|
||||
try {
|
||||
templatesData = JSON.parse(window.allTemplates);
|
||||
} catch (error) {
|
||||
console.error('Failed to parse templates JSON in polling:', error);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
templatesData = window.allTemplates;
|
||||
}
|
||||
|
||||
if (typeof templatesData === 'object' && !Array.isArray(templatesData)) {
|
||||
templates = Object.values(templatesData);
|
||||
} else if (Array.isArray(templatesData)) {
|
||||
templates = templatesData;
|
||||
}
|
||||
|
||||
console.log('Templates found via polling:', templates.length, 'templates');
|
||||
addTemplateEventHandlers();
|
||||
clearInterval(checkForTemplates);
|
||||
} else if (checkCount >= maxChecks) {
|
||||
console.error('Templates failed to load after', maxChecks * 500, 'ms');
|
||||
clearInterval(checkForTemplates);
|
||||
}
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// Function to populate the template selector with cards
|
||||
// Function to add event handlers to existing template options in HTML
|
||||
function addTemplateEventHandlers() {
|
||||
console.log('Adding event handlers to template options...');
|
||||
|
||||
// Add click handlers to all template options
|
||||
const templateOptions = document.querySelectorAll('.template-option');
|
||||
templateOptions.forEach(option => {
|
||||
const templateId = option.getAttribute('data-template-id');
|
||||
|
||||
option.addEventListener('click', function() {
|
||||
console.log('Template option clicked for:', templateId);
|
||||
console.log('Available templates:', templates);
|
||||
console.log('Templates array length:', templates.length);
|
||||
|
||||
if (templateId === '') {
|
||||
// "Create Your Own" option
|
||||
clearAllFields();
|
||||
} else {
|
||||
// Find and apply the template
|
||||
const selectedTemplate = templates.find(t => t.id === templateId);
|
||||
console.log('Found template:', selectedTemplate);
|
||||
if (selectedTemplate) {
|
||||
applyTemplate(selectedTemplate);
|
||||
|
||||
// Close the template section after selection
|
||||
const templateSection = document.querySelector('.protocol-template-selector');
|
||||
if (templateSection) {
|
||||
const templateBody = templateSection.querySelector('.template-body');
|
||||
const toggleBtn = templateSection.querySelector('.toggle-btn');
|
||||
if (templateBody && toggleBtn) {
|
||||
templateBody.style.display = 'none';
|
||||
toggleBtn.textContent = '+';
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.error('Template not found:', templateId);
|
||||
console.error('Available template IDs:', templates.map(t => t.id));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Added event handler for template:', templateId || 'Create Your Own');
|
||||
});
|
||||
}
|
||||
|
||||
// Function to populate the template selector with cards (legacy - kept for compatibility)
|
||||
function populateTemplateSelector(templatesList) {
|
||||
if (!templatesList || templatesList.length === 0) {
|
||||
console.error('Cannot populate template selector - missing templates');
|
||||
@@ -565,8 +633,8 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// No helper functions needed anymore as we've simplified the approach
|
||||
|
||||
// Start loading templates
|
||||
fetchTemplates();
|
||||
// Initialize template system
|
||||
initializeTemplates();
|
||||
|
||||
// Protocol data structure
|
||||
let protocol = {
|
||||
|
||||
Reference in New Issue
Block a user