#260 (fix attempt 2): static-width copy feedback via .swapbtn
CI / test (pull_request) Successful in 23s
CI / docker (pull_request) Skipped

This commit is contained in:
fen
2026-09-17 17:13:28 -05:00
parent 2a55f50d87
commit 75264ee9f4
4 changed files with 24 additions and 17 deletions
+4 -6
View File
@@ -192,18 +192,16 @@ async function create() {
// button, password auto-unlock, then redirect to the paste.
function finishCreate(data) {
const url = location.origin + '/' + (data.custom_slug || data.id);
showResult('<a href="' + url + '">' + url + '</a> <button class="btn btn-icon" id="result-copy" title="Copy URL" type="button">⧉</button>', 'ok');
// #260 attempt 2: .swapbtn markup — label and checkmark share one grid
// cell, so the button width is static and feedback is a class toggle.
showResult('<a href="' + url + '">' + url + '</a> <button class="btn btn-icon swapbtn" id="result-copy" title="Copy URL" type="button"><span class="swap-label">Copy</span><span class="swap-check">✓</span></button>', 'ok');
$('result').dataset.token = data.deletion_token || '';
const copyBtn = document.getElementById('result-copy');
copyBtn.addEventListener('click', () => {
try {
navigator.clipboard.writeText(url);
copyBtn.classList.add('ok'); // in-place success feedback (#53)
// #260: pin the pre-swap width so the wider/narrower glyph never
// shifts neighbouring elements; release it when the label restores.
copyBtn.style.minWidth = Math.ceil(copyBtn.getBoundingClientRect().width) + 'px';
copyBtn.textContent = '✓';
setTimeout(() => { copyBtn.classList.remove('ok'); copyBtn.textContent = '⧉'; copyBtn.style.minWidth = ''; }, 2000);
setTimeout(() => copyBtn.classList.remove('ok'), 2000);
} catch(e) { toast('Copy failed', 'error'); }
});
// token carried via sessionStorage, never in the URL (#143)