Deelknoppen met kopieerbevestiging Nieuw

<!-- Deelknoppen met kopieerbevestiging · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="dlk" data-url="https://www.voorbeeld.nl/vacatures/servicemonteur-apeldoorn" data-title="Vacature: servicemonteur cv en warmtepomp in Apeldoorn"><p class="dlk__k">Vacature · Apeldoorn · 32 tot 40 uur</p><p class="dlk__t">Servicemonteur cv en warmtepomp</p><p class="dlk__l" id="dlk-l">Deel deze vacature</p>
<ul class="dlk__row" aria-labelledby="dlk-l"><li><button type="button" class="dlk__b dlk__copy"><svg viewBox="0 0 20 20" aria-hidden="true"><g class="dlk__ic-c"><rect x="7" y="7" width="10" height="10" rx="1.5"/><path d="M13 7V4.5A1.5 1.5 0 0 0 11.5 3h-7A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13H7"/></g><path class="dlk__ic-ok" d="M4.5 10.5l3.5 3.5 7.5-8"/></svg><span>Kopieer link</span></button></li>
<li><a class="dlk__b" data-k="wa" target="_blank" rel="noopener"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3.5 16.5l1-3.2A7 7 0 1 1 7 15.8z"/><path d="M7.7 7.3c.2 2.4 2.4 4.7 5 5l.9-1.1-1.6-.8-.6.6c-.8-.3-1.8-1.2-2.2-2.1l.6-.6-.7-1.6z"/></svg><span>WhatsApp</span></a></li>
<li><a class="dlk__b" data-k="li" target="_blank" rel="noopener"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="3" y="3" width="14" height="14" rx="2"/><path d="M6.8 9v4.5M6.8 6.6v.1M9.6 13.5V9m0 2c0-1.3.8-2 1.9-2s1.7.7 1.7 2v2.5"/></svg><span>LinkedIn</span></a></li>
<li><a class="dlk__b" data-k="mail"><svg viewBox="0 0 20 20" aria-hidden="true"><rect x="2.5" y="4.5" width="15" height="11" rx="1.5"/><path d="M3 5.5l7 5.5 7-5.5"/></svg><span>Mail</span></a></li>
<li class="dlk__more" hidden><button type="button" class="dlk__b dlk__share"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 12.5V3M6.5 6.5 10 3l3.5 3.5M5 10.5v5.5h10v-5.5"/></svg><span>Meer</span></button></li></ul>
<div class="dlk__fb" hidden><label class="dlk__fl" for="dlk-in">Kopiëren lukte niet. Selecteer en kopieer de link:</label><input class="dlk__in" id="dlk-in" type="text" readonly></div>
<p class="dlk__st" role="status" aria-live="polite"></p></div>
</div>

/* Deelknoppen met kopieerbevestiging · NedDev · eigen werk. */
.dlk{position:absolute;inset:0;box-sizing:border-box;padding:16px 14px 12px;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;display:flex;flex-direction:column;justify-content:center}
.dlk__k{margin:0;font:500 10px 'JetBrains Mono',monospace;color:#5f5e5a}
.dlk__t{margin:3px 0 12px;font-size:17px;font-weight:650;line-height:1.2;letter-spacing:-.01em}
.dlk__l{margin:0 0 7px;font-size:11.5px;font-weight:600;color:#3d3c39}
.dlk__row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.dlk__b{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 9px;box-sizing:border-box;border:1px solid rgba(10,10,10,.18);border-radius:4px;background:#fff;color:#0a0a0a;font:600 11.5px 'Switzer',system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.dlk__b:hover{border-color:#0a0a0a;background:#f4f3f1}
.dlk__b:active{transform:translateY(1px)}
.dlk__b:focus-visible,.dlk__in:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.dlk__b svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dlk__ic-ok{display:none}
.dlk__copy.is-ok{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.dlk__copy.is-ok .dlk__ic-c{display:none}.dlk__copy.is-ok .dlk__ic-ok{display:inline;stroke-dasharray:20;stroke-dashoffset:20;animation:dlk-ck .3s ease-out forwards}
@keyframes dlk-ck{to{stroke-dashoffset:0}}
.dlk__copy.is-err{border-color:#a8200d;color:#a8200d}
.dlk__fb{margin-top:8px}.dlk__fl{display:block;font-size:11px;color:#a8200d;margin-bottom:3px}
.dlk__in{width:100%;box-sizing:border-box;font:500 11px 'JetBrains Mono',monospace;padding:6px 8px;border:1px solid rgba(10,10,10,.25);border-radius:4px;background:#f4f3f1;color:#0a0a0a}
.dlk__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.dlk__st{margin:7px 0 0;min-height:15px;font-size:11px;color:#13663b;font-weight:600}
@media(max-width:420px){.dlk{padding:10px 12px 8px}.dlk__t{font-size:15px;margin-bottom:8px}.dlk__b{height:30px;padding:0 8px;font-size:11px;gap:4px}.dlk__b svg{width:14px;height:14px}.dlk__row{gap:5px}}
@media(prefers-reduced-motion:reduce){.dlk__copy.is-ok .dlk__ic-ok{animation:none;stroke-dashoffset:0}.dlk__b:active{transform:none}}

// Deelknoppen met kopieerbevestiging · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.dlk');if(!w)return;var url=w.dataset.url,title=w.dataset.title,u=encodeURIComponent(url),tt=encodeURIComponent(title);
var H={wa:'https://wa.me/?text='+tt+'%20'+u,li:'https://www.linkedin.com/sharing/share-offsite/?url='+u,mail:'mailto:?subject='+tt+'&body='+encodeURIComponent('Misschien iets voor jou: '+url)};
w.querySelectorAll('a[data-k]').forEach(function(a){a.href=H[a.dataset.k];if(a.target)a.insertAdjacentHTML('beforeend','<span class="dlk__sr"> (opent nieuw venster)</span>');});
var cp=w.querySelector('.dlk__copy'),lab=cp.querySelector('span'),st=w.querySelector('.dlk__st'),fb=w.querySelector('.dlk__fb'),inp=w.querySelector('.dlk__in'),tm;
function ok(){fb.hidden=true;cp.classList.remove('is-err');cp.classList.add('is-ok');lab.textContent='Gekopieerd';st.textContent='Link gekopieerd naar het klembord.';clearTimeout(tm);tm=setTimeout(function(){cp.classList.remove('is-ok');lab.textContent='Kopieer link';st.textContent='';},2400);}
function fail(){cp.classList.add('is-err');st.textContent='';fb.hidden=false;inp.value=url;inp.focus();inp.select();}
cp.addEventListener('click',function(){if(navigator.clipboard&&window.isSecureContext){navigator.clipboard.writeText(url).then(ok,fail);}else{fail();}});
if(navigator.share){var m=w.querySelector('.dlk__more');m.hidden=false;m.querySelector('button').addEventListener('click',function(){navigator.share({title:title,url:url}).catch(function(){});});}
}
init(document.querySelector('.jouw-container'));