Update -> refactor and optimize UI , code ,...
This commit is contained in:
@@ -1,38 +1,106 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
const form = document.getElementById("pasteForm");
|
||||
const resultBox = document.getElementById("result");
|
||||
/* ── Create-paste page ── */
|
||||
const pasteForm = document.getElementById('pasteForm');
|
||||
const resultBox = document.getElementById('result');
|
||||
const pasteText = document.getElementById('pasteText');
|
||||
const charCount = document.getElementById('charCount');
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
|
||||
form.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
if (pasteText && charCount) {
|
||||
const update = () => {
|
||||
charCount.textContent = pasteText.value.length.toLocaleString();
|
||||
pasteText.style.height = 'auto';
|
||||
pasteText.style.height = Math.max(280, pasteText.scrollHeight) + 'px';
|
||||
};
|
||||
pasteText.addEventListener('input', update);
|
||||
update();
|
||||
}
|
||||
|
||||
const formData = new FormData(form);
|
||||
if (pasteForm) {
|
||||
pasteForm.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const response = await fetch("/index.php?action=save", {
|
||||
method: "POST",
|
||||
body: formData
|
||||
if (!pasteText || pasteText.value.trim() === '') {
|
||||
pasteText.focus();
|
||||
pasteText.style.borderColor = 'var(--error)';
|
||||
setTimeout(() => pasteText.style.borderColor = '', 1200);
|
||||
return;
|
||||
}
|
||||
|
||||
submitBtn.classList.add('loading');
|
||||
submitBtn.querySelector('span').textContent = 'Creating...';
|
||||
|
||||
try {
|
||||
const res = await fetch('/index.php?action=save', {
|
||||
method: 'POST',
|
||||
body: new FormData(pasteForm),
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (!data.success) {
|
||||
showError(data.message || 'Something went wrong.');
|
||||
return;
|
||||
}
|
||||
|
||||
const linkInput = document.getElementById('pasteLink');
|
||||
const viewLink = document.getElementById('viewLink');
|
||||
linkInput.value = data.url;
|
||||
viewLink.href = data.url;
|
||||
resultBox.removeAttribute('hidden');
|
||||
resultBox.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
|
||||
pasteText.value = '';
|
||||
if (charCount) charCount.textContent = '0';
|
||||
|
||||
} catch {
|
||||
showError('Network error. Please try again.');
|
||||
} finally {
|
||||
submitBtn.classList.remove('loading');
|
||||
submitBtn.querySelector('span').textContent = 'Create Secure Link';
|
||||
}
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!data.success) {
|
||||
resultBox.innerHTML = "<div class='error'>" + data.message + "</div>";
|
||||
return;
|
||||
function showError(msg) {
|
||||
resultBox.removeAttribute('hidden');
|
||||
resultBox.style.borderLeftColor = 'var(--error)';
|
||||
resultBox.innerHTML = `
|
||||
<div class="alert alert-error">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||
${msg}
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
resultBox.innerHTML = `
|
||||
<h3>Paste Created</h3>
|
||||
|
||||
<input type="text" id="pasteLink" value="${data.url}" readonly style="width:100%; padding:8px;">
|
||||
|
||||
<button id="copyBtn">Copy Link</button>
|
||||
`;
|
||||
|
||||
document.getElementById("copyBtn").addEventListener("click", () => {
|
||||
const input = document.getElementById("pasteLink");
|
||||
navigator.clipboard.writeText(input.value);
|
||||
alert("Link copied!");
|
||||
});
|
||||
/* ── Copy link button (result box) ── */
|
||||
document.addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('#copyLinkBtn');
|
||||
if (!btn) return;
|
||||
const val = document.getElementById('pasteLink')?.value;
|
||||
if (!val) return;
|
||||
copyToClipboard(val, btn, 'Copied!', 'Copy');
|
||||
});
|
||||
|
||||
/* ── View-paste page: copy content ── */
|
||||
const copyBtn = document.getElementById('copyBtn');
|
||||
if (copyBtn) {
|
||||
copyBtn.addEventListener('click', () => {
|
||||
const content = document.getElementById('pasteContent')?.innerText;
|
||||
if (!content) return;
|
||||
copyToClipboard(content, copyBtn, 'Copied!', 'Copy');
|
||||
});
|
||||
}
|
||||
|
||||
/* ── Shared helper ── */
|
||||
function copyToClipboard(text, btn, successLabel, defaultLabel) {
|
||||
navigator.clipboard.writeText(text).then(() => {
|
||||
const span = btn.querySelector('span') || btn;
|
||||
btn.classList.add('copied');
|
||||
span.textContent = successLabel;
|
||||
setTimeout(() => {
|
||||
btn.classList.remove('copied');
|
||||
span.textContent = defaultLabel;
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,40 +1 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
const textarea = document.querySelector("textarea");
|
||||
const form = document.querySelector("form");
|
||||
const copyBtn = document.getElementById("copyBtn");
|
||||
|
||||
|
||||
if (textarea) {
|
||||
textarea.addEventListener("input", () => {
|
||||
textarea.style.height = "auto";
|
||||
textarea.style.height = textarea.scrollHeight + "px";
|
||||
});
|
||||
}
|
||||
|
||||
if (form && textarea) {
|
||||
form.addEventListener("submit", (e) => {
|
||||
if (textarea.value.trim() === "") {
|
||||
e.preventDefault();
|
||||
alert("Paste cannot be empty");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (copyBtn) {
|
||||
copyBtn.addEventListener("click", () => {
|
||||
const paste = document.getElementById("pasteContent");
|
||||
|
||||
if (!paste) return;
|
||||
|
||||
navigator.clipboard.writeText(paste.innerText)
|
||||
.then(() => {
|
||||
copyBtn.textContent = "Copied!";
|
||||
setTimeout(() => {
|
||||
copyBtn.textContent = "Copy";
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
/* merged into app.js */
|
||||
|
||||
Reference in New Issue
Block a user