#260 (fix attempt 2): static-width copy feedback via .swapbtn
This commit is contained in:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user