Skip to content

Commit

Permalink
Moved scripts to static file
Browse files Browse the repository at this point in the history
  • Loading branch information
@cyclotruc
cyclotruc committed Dec 7, 2024
1 parent d83c0eb commit 9d9954e
Show file tree
Hide file tree
Showing 3 changed files with 123 additions and 199 deletions.
98 changes: 98 additions & 0 deletions src/static/js/utils.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
// Copy functionality
function copyText(className) {
const textarea = document.querySelector('.' + className);
const button = document.querySelector(`button[onclick="copyText('${className}')"]`);
if (!textarea || !button) return;

// Copy text
navigator.clipboard.writeText(textarea.value)
.then(() => {
// Store original content
const originalContent = button.innerHTML;

// Change button content
button.innerHTML = 'Copied!';

// Reset after 1 second
setTimeout(() => {
button.innerHTML = originalContent;
}, 1000);
})
.catch(err => {
// Show error in button
const originalContent = button.innerHTML;
button.innerHTML = 'Failed to copy';
setTimeout(() => {
button.innerHTML = originalContent;
}, 1000);
});
}

function handleSubmit(event, showLoading = false) {
event.preventDefault();
// Get the form either from event.target or by ID if event.target is null
const form = event.target || document.getElementById('ingestForm');
if (!form) return; // Guard clause in case form isn't found

const submitButton = form.querySelector('button[type="submit"]');
if (!submitButton) return; // Guard clause in case button isn't found

const originalContent = submitButton.innerHTML;
const currentStars = document.getElementById('github-stars')?.textContent;

if (showLoading) {
// Change button to loading state
submitButton.disabled = true;
submitButton.innerHTML = `
<div class="flex items-center justify-center">
<svg class="animate-spin h-5 w-5 text-gray-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span class="ml-2">Processing...</span>
</div>
`;
submitButton.classList.add('bg-[#ffb14d]');
}

// Submit the form
fetch(form.action, {
method: 'POST',
body: new FormData(form)
})
.then(response => response.text())
.then(html => {
// Store the star count before updating the DOM
const starCount = currentStars;

document.documentElement.innerHTML = html;

// Wait for next tick to ensure DOM is updated
setTimeout(() => {
const starsElement = document.getElementById('github-stars');
if (starsElement && starCount) {
starsElement.textContent = starCount;
}

// Scroll to results if they exist
const resultsSection = document.querySelector('[data-results]');
if (resultsSection) {
resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

// Check for error message in the response
const errorMessage = document.getElementById('error-message');
if (errorMessage) {
showToast(errorMessage.dataset.message);
}
}, 0);
})
.catch(error => {
submitButton.disabled = false;
submitButton.innerHTML = originalContent;
});
}

// Export functions if using modules
window.copyText = copyText;
window.handleSubmit = handleSubmit;
139 changes: 20 additions & 119 deletions src/templates/github.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,124 +8,7 @@
<title>Git ingest</title>

<script src="https://cdn.tailwindcss.com"></script>
<script>
function copyText(className) {
const textarea = document.querySelector('.' + className);
const button = document.querySelector(`button[onclick="copyText('${className}')"]`);
if (!textarea || !button) return;

// Copy text
navigator.clipboard.writeText(textarea.value)
.then(() => {
// Store original content
const originalContent = button.innerHTML;

// Change button content
button.innerHTML = 'Copied!';

// Reset after 1 second
setTimeout(() => {
button.innerHTML = originalContent;
}, 1000);
})
.catch(err => {
// Show error in button
const originalContent = button.innerHTML;
button.innerHTML = 'Failed to copy';
setTimeout(() => {
button.innerHTML = originalContent;
}, 1000);
});
}

function submitExample(repoName) {
const input = document.getElementById('input_text');
input.value = repoName;
input.focus();
}

function handleSubmit(event) {
event.preventDefault();
const form = event.target;
const submitButton = form.querySelector('button[type="submit"]');
const originalContent = submitButton.innerHTML;
const currentStars = document.getElementById('github-stars').textContent;

// Change button to loading state
submitButton.disabled = true;
submitButton.innerHTML = `
<div class="flex items-center justify-center">
<svg class="animate-spin h-5 w-5 text-gray-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span class="ml-2">Processing...</span>
</div>
`;
submitButton.classList.add('bg-[#ffb14d]'); // Darker shade of the original color

// Submit the form
fetch(form.action, {
method: 'POST',
body: new FormData(form)
})
.then(response => response.text())
.then(html => {
document.documentElement.innerHTML = html;
// Restore star count after page update
document.getElementById('github-stars').textContent = currentStars;

// Scroll to results if they exist
const resultsSection = document.querySelector('[data-results]');
if (resultsSection) {
resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

// Check for error message in the response
const errorMessage = document.getElementById('error-message');
if (errorMessage) {
showToast(errorMessage.dataset.message);
}
})
.catch(error => {
submitButton.disabled = false;
submitButton.innerHTML = originalContent;
showToast('Error processing request');
});
}

window.onload = function() {
if (!{{ result|tojson }}) { // Only send POST if we're in loading state
const githubUrl = document.getElementById('input_text').value;
const currentStars = document.getElementById('github-stars').textContent; // Store stars before fetch

fetch(window.location.pathname, { // Use the current path for the POST request
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
'input_text': githubUrl
})
})
.then(response => response.text())
.then(html => {
document.documentElement.innerHTML = html;
// Restore star count after page update
document.getElementById('github-stars').textContent = currentStars;
// Re-initialize GitHub stars fetch
fetchGitHubStars();
})
.catch(error => {
console.error('Error:', error);
// Optionally show an error message to the user
});
} else {
// Always fetch stars when page loads
fetchGitHubStars();
}
};
</script>
<script src="/static/js/utils.js"></script>

</head>

Expand All @@ -152,7 +35,7 @@
class="absolute md:block hidden left-0 h-[4.5rem] w-[4.5rem] bottom-0 -translate-x-full ml-3">

<form class="flex md:flex-row flex-col w-full h-full justify-center items-stretch space-y-5 md:space-y-0 md:space-x-5"
id="ingestForm" onsubmit="handleRefresh(event)">
id="ingestForm" onsubmit="handleSubmit(event)">
<div class="relative w-full h-full">
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-10">
</div>
Expand Down Expand Up @@ -189,6 +72,24 @@
</main>

{% include 'components/footer.html' %}

<script>
document.addEventListener('DOMContentLoaded', function() {
const urlInput = document.getElementById('input_text');
const form = document.getElementById('ingestForm');
if (urlInput && urlInput.value.trim() && form) {
const submitEvent = new SubmitEvent('submit', {
cancelable: true,
bubbles: true
});
Object.defineProperty(submitEvent, 'target', {
value: form,
enumerable: true
});
handleSubmit(submitEvent, false);
}
});
</script>
</body>

</html>
85 changes: 5 additions & 80 deletions src/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,91 +9,16 @@

<!-- This is the correct way to include Tailwind CSS via CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script src="/static/js/utils.js"></script>

<script>
function copyText(className) {
const textarea = document.querySelector('.' + className);
const button = document.querySelector(`button[onclick="copyText('${className}')"]`);
if (!textarea || !button) return;

// Copy text
navigator.clipboard.writeText(textarea.value)
.then(() => {
// Store original content
const originalContent = button.innerHTML;

// Change button content
button.innerHTML = 'Copied!';

// Reset after 1 second
setTimeout(() => {
button.innerHTML = originalContent;
}, 1000);
})
.catch(err => {
// Show error in button
const originalContent = button.innerHTML;
button.innerHTML = 'Failed to copy';
setTimeout(() => {
button.innerHTML = originalContent;
}, 1000);
});
}

function submitExample(repoName) {
const input = document.getElementById('input_text');
input.value = repoName;
input.focus();
}

function handleSubmit(event) {
event.preventDefault();
const form = event.target;
const submitButton = form.querySelector('button[type="submit"]');
const originalContent = submitButton.innerHTML;
const currentStars = document.getElementById('github-stars').textContent;

// Change button to loading state
submitButton.disabled = true;
submitButton.innerHTML = `
<div class="flex items-center justify-center">
<svg class="animate-spin h-5 w-5 text-gray-900" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span class="ml-2">Processing...</span>
</div>
`;
submitButton.classList.add('bg-[#ffb14d]'); // Darker shade of the original color

// Submit the form
fetch(form.action, {
method: 'POST',
body: new FormData(form)
})
.then(response => response.text())
.then(html => {
document.documentElement.innerHTML = html;
// Restore star count after page update
document.getElementById('github-stars').textContent = currentStars;

// Scroll to results if they exist
const resultsSection = document.querySelector('[data-results]');
if (resultsSection) {
resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

// Check for error message in the response
const errorMessage = document.getElementById('error-message');
if (errorMessage) {
showToast(errorMessage.dataset.message);
}
})
.catch(error => {
submitButton.disabled = false;
submitButton.innerHTML = originalContent;
showToast('Error processing request');
});
}

</script>

</head>
Expand Down Expand Up @@ -150,9 +75,9 @@
<img src="https://cdn.devdojo.com/images/january2023/shape-1.png"
class="absolute md:block hidden left-0 h-[4.5rem] w-[4.5rem] bottom-0 -translate-x-full ml-3">

<form method="post"
<form action="/" method="post"
class="flex md:flex-row flex-col w-full h-full justify-center items-stretch space-y-5 md:space-y-0 md:space-x-5"
id="ingestForm" onsubmit="handleSubmit(event)">
id="ingestForm" onsubmit="handleSubmit(event, true)">
<div class="relative w-full h-full">
<div
class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-10">
Expand Down

0 comments on commit 9d9954e

Please sign in to comment.