document.addEventListener("DOMContentLoaded", (event) => {
const output = document.getElementById("output");
const copy = document.getElementById("copy");
const form = document.getElementById("main-form");
// Debouncing function to limit the frequency of updates
let debounceTimer;
const debounce = (callback, delay) => {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(callback, delay);
};
form.addEventListener("input", (event) => {
console.log(event.target.tagName.toLowerCase());
if (event.target.tagName.toLowerCase() === 'input') {
debounce(() => {
const formData = Object.fromEntries(new FormData(form).entries());
console.log(formData);
const {title, url, author, description, handle} = formData;
console.log(title || url || author || description || handle)
if(!(title || url || author || description || handle)){
output.value = "Please fill all the fields";
}else{
const xml = generateXml({title, url, author, description, handle});
output.rows = xml.split("\n").length +2;
output.value = generateXml({title, url, author, description, handle});
}
}, 100); // Debounce delay of 300ms
}
});
addCopyToClipboardOnButton(copy,()=> output.value)
});
const generateXml = ({title, url, author, description, handle}) => {
const previewUrl = url && (url + "/preview.png").replace(/\/\//g, "/");
const xmlParts = [
title && `${title}`,
url && ``,
``,
author && ``,
description &&``,
handle && ``,
handle && ``,
previewUrl && ``,
``,
description && ``,
previewUrl && ``,
``,
title && ``,
title && ``,
``,
url && ``,
previewUrl && ``,
title && ``,
`