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>
|
</header>
|
||||||
|
|
||||||
<form action="/download" method="POST" id="downloadForm">
|
<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">
|
<label class="checkbox-inline">
|
||||||
|
|
||||||
@@ -263,6 +270,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<!-- Scripts -->
|
<!-- Scripts -->
|
||||||
|
<script src="script/clipboardPaste.js"></script>
|
||||||
<script src="script/custompath.js"></script>
|
<script src="script/custompath.js"></script>
|
||||||
<script src="script/settingsPanel.js"></script>
|
<script src="script/settingsPanel.js"></script>
|
||||||
<script src="script/appVersion.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;
|
transition: border-color 0.3s ease, box-shadow 0.3s ease;
|
||||||
background-color: var(--form-input-bg-color);
|
background-color: var(--form-input-bg-color);
|
||||||
color: var(--form-input-text-color);
|
color: var(--form-input-text-color);
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#UrlInput:focus {
|
#UrlInput:focus {
|
||||||
@@ -74,3 +75,39 @@ form#downloadForm {
|
|||||||
#UrlInput::placeholder {
|
#UrlInput::placeholder {
|
||||||
color: var(--form-input-placeholder-color);
|
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