mirror of
https://github.com/MasterAcnolo/Freedom-Loader.git
synced 2026-07-29 18:25:47 +02:00
Feat: Add Paste BTN URL Input
This commit is contained in:
@@ -206,7 +206,14 @@
|
||||
</header>
|
||||
|
||||
<form action="/download" method="POST" id="downloadForm">
|
||||
<input name="url" placeholder="URL" id="UrlInput">
|
||||
<div class="url-input-container">
|
||||
<input type="text" name="url" placeholder="URL" id="UrlInput">
|
||||
<button type="button" id="pasteBtn" class="paste-btn" title="Paste from clipboard">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 5H7C5.89543 5 5 5.89543 5 7V19C5 20.1046 5.89543 21 7 21H17C18.1046 21 19 20.1046 19 19V7C19 5.89543 18.1046 5 17 5H15M9 5C9 6.10457 9.89543 7 11 7H13C14.1046 7 15 6.10457 15 5M9 5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5M12 12H15M12 16H15M9 12H9.01M9 16H9.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label class="checkbox-inline">
|
||||
|
||||
@@ -263,6 +270,7 @@
|
||||
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="script/clipboardPaste.js"></script>
|
||||
<script src="script/custompath.js"></script>
|
||||
<script src="script/settingsPanel.js"></script>
|
||||
<script src="script/appVersion.js"></script>
|
||||
|
||||
35
public/script/clipboardPaste.js
Normal file
35
public/script/clipboardPaste.js
Normal file
@@ -0,0 +1,35 @@
|
||||
// Clipboard paste functionality for URL input
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const pasteBtn = document.getElementById('pasteBtn');
|
||||
const urlInput = document.getElementById('UrlInput');
|
||||
|
||||
if (pasteBtn && urlInput) {
|
||||
pasteBtn.addEventListener('click', async () => {
|
||||
try {
|
||||
// Read text from clipboard
|
||||
const text = await navigator.clipboard.readText();
|
||||
|
||||
// Paste into the URL input
|
||||
urlInput.value = text;
|
||||
|
||||
// Trigger input event to ensure any listeners are notified
|
||||
urlInput.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
|
||||
// Optional: Focus the input
|
||||
urlInput.focus();
|
||||
|
||||
// Visual feedback
|
||||
pasteBtn.style.backgroundColor = 'var(--form-button-bg-hover-color)';
|
||||
setTimeout(() => {
|
||||
pasteBtn.style.backgroundColor = '';
|
||||
}, 200);
|
||||
|
||||
} catch (err) {
|
||||
console.error('Failed to read clipboard:', err);
|
||||
|
||||
// Fallback: prompt user if clipboard API fails
|
||||
alert('Unable to access clipboard. Please paste manually using Ctrl+V.');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -62,6 +62,7 @@ form#downloadForm {
|
||||
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||
background-color: var(--form-input-bg-color);
|
||||
color: var(--form-input-text-color);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#UrlInput:focus {
|
||||
@@ -74,3 +75,39 @@ form#downloadForm {
|
||||
#UrlInput::placeholder {
|
||||
color: var(--form-input-placeholder-color);
|
||||
}
|
||||
|
||||
.url-input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.paste-btn {
|
||||
background-color: var(--form-button-bg-color);
|
||||
color: var(--form-button-text-color);
|
||||
border: none;
|
||||
padding: 0.75em;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.paste-btn:hover {
|
||||
background-color: var(--form-button-bg-hover-color);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.paste-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.paste-btn svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user