- Regular price
- $0.00
- Sale price
- $0.00
- Regular price
-
- Unit price
- per
Sold out
// Initialize Quill Editors
const introEditor = new Quill('#intro-editor', {
theme: 'snow',
modules: {
toolbar: [['bold', 'italic', 'underline'], [{ 'color': [] }], ['link']]
}
});
let serviceCounter = 0;
let addonCounter = 0;
// Utility Function to Initialize Quill Editor for Panels
function initializeQuillEditor(panelSelector) {
const panel = document.querySelector(panelSelector);
return new Quill(panel, {
theme: 'snow',
modules: {
toolbar: [['bold', 'italic', 'underline'], [{ 'color': [] }], ['link']]
}
});
}
// Add Service Section
function addServiceSection() {
createSection(
'services',
`service-${serviceCounter++}`,
'New Service',
'Service Name',
true
);
}
// Add Add-On Section
function addAddonSection() {
createSection(
'addons',
`addon-${addonCounter++}`,
'New Add-On',
'Add-On Name',
true
);
}
// Generic Function to Create Sections
function createSection(containerId, sectionId, buttonLabel, inputPlaceholder, addCheckboxes) {
const containerDiv = document.getElementById(containerId);
const checkboxesHTML = `
`;
const compatibilityHTML = `
`;
const sectionHTML = `
`;
containerDiv.insertAdjacentHTML('beforeend', sectionHTML);
initializeQuillEditor(`#${sectionId}-panel .quill-editor`);
// Event listener for compatibility toggle
document.querySelector(`#${sectionId} .compatibility-toggle`).addEventListener('change', function () {
const target = document.getElementById(this.dataset.target);
target.style.display = this.checked ? 'block' : 'none';
});
// Show/Hide custom details textarea based on selection
document.querySelectorAll(`#${sectionId} input[name="${sectionId}-parts-provided"]`).forEach((radio) => {
radio.addEventListener('change', function () {
const customDetails = document.querySelector(`.${sectionId}-custom-details`);
customDetails.style.display = this.value === 'custom' ? 'block' : 'none';
});
});
}
// Load Content from HTML File
function loadContent(targetDivId, fileName) {
fetch(fileName)
.then((response) => response.text())
.then((html) => {
const targetDiv = document.getElementById(targetDivId);
targetDiv.innerHTML = html;
})
.catch((err) => console.error(`Failed to load ${fileName}:`, err));
}
// Load Disclaimer Content
function loadDisclaimer() {
loadContent('disclaimer-content', 'disclaimer.html');
}
// Load Additional Content
function loadAdditional() {
loadContent('additional-content', 'additional.html');
}
// Toggle Accordion
function toggleAccordion(panelId) {
const panel = document.getElementById(panelId);
const isExpanded = panel.style.maxHeight;
panel.style.maxHeight = isExpanded ? null : `${panel.scrollHeight}px`;
}
// Generate HTML
function generateHTML() {
const disclaimerText =
document.getElementById('disclaimer-content').innerHTML || '';
const additionalText =
document.getElementById('additional-content').innerHTML || '';
const html = `
Enter ${inputPlaceholder.toLowerCase()}:
${checkboxesHTML} ${compatibilityHTML}Generated HTML
${introEditor.root.innerHTML}
Services
${generateSectionHTML('services')}Add-On Services
${generateSectionHTML('addons')}Additional Info
${additionalText}Disclaimer
${disclaimerText} `; console.log(html); alert('HTML Generated! Check the console for output.'); } // Generate HTML for Sections function generateSectionHTML(sectionId) { const sectionDiv = document.getElementById(sectionId); const items = sectionDiv.querySelectorAll('.accordion-section'); return Array.from(items) .map((item) => { const name = item.querySelector('input.section-name').value || 'Untitled'; const content = item.querySelector('.ql-editor').innerHTML || ''; const compatibilityText = item.querySelector('.compatibility-section')?.value || ''; const compatibilityHTML = compatibilityText ? `Compatibility
${compatibilityText}
` : ''; const partsProvided = Array.from( item.querySelectorAll(`input[name="${item.id}-parts-provided"]:checked`) ) .map((el) => el.nextElementSibling.textContent.trim()) .join(', '); const customDetails = item.querySelector(`.${item.id}-custom-details`)?.value || ''; const partsHTML = partsProvided ? `Parts Provided: ${partsProvided}
${customDetails ? `${customDetails}
` : ''}` : ''; return `
${partsHTML}
${content}
${compatibilityHTML}
`;
})
.join('');
}
// Initialize Content on Load
window.onload = () => {
loadDisclaimer();
loadAdditional();
};