https://portfolio.gateaux-09suntan.workers.dev/contact-button-group.js?v=1

1const TEMPLATE=`
2<div class="btn-group">
3  <a href="mailto:[email protected]" class="btn btn-group__email">
4    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor" aria-hidden="true">
5      <path d="M8.88,8.827c.074,.042,.166,.042,.24,0l7.777-4.283c-.314-1.173-1.376-2.044-2.647-2.044H3.75c-1.267,0-2.326,.865-2.643,2.033l7.773,4.293Z"/>
6      <path d="M9.845,10.14c-.264,.146-.554,.219-.844,.219s-.582-.073-.846-.22L1,6.188v6.562c0,1.517,1.233,2.75,2.75,2.75H14.25c1.517,0,2.75-1.233,2.75-2.75V6.2l-7.155,3.94Z"/>
7    </svg>
8    <span class="btn__label btn-group__email-label">
9      <span class="btn-group__email-label-default">[email protected]</span>
10      <span class="btn-group__email-label-opening" aria-hidden="true">Opening email app&hellip;</span>
11    </span>
12    <span class="btn__label btn-group__email-label-mobile">
13      <span class="btn-group__email-label-default-mobile">Email</span>
14      <span class="btn-group__email-label-opening-mobile" aria-hidden="true">Opening&hellip;</span>
15    </span>
16  </a>
17  <button type="button" class="btn btn-group__copy" aria-label="Copy email address" title="Copy email">
18    <span class="btn-group__copy-icon" aria-hidden="true">
19      <svg class="icon-copy" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
20        <path d="M11.75 14.5H4.25C3.5605 14.5 3 13.9395 3 13.25V6.75C3 6.3359 2.6641 6 2.25 6C1.8359 6 1.5 6.3359 1.5 6.75V13.25C1.5 14.7666 2.7334 16 4.25 16H11.75C12.1641 16 12.5 15.6641 12.5 15.25C12.5 14.8359 12.1641 14.5 11.75 14.5Z"/>
21        <path d="M13.75 2H7.25C5.73122 2 4.5 3.23122 4.5 4.75V10.25C4.5 11.7688 5.73122 13 7.25 13H13.75C15.2688 13 16.5 11.7688 16.5 10.25V4.75C16.5 3.23122 15.2688 2 13.75 2Z"/>
22      </svg>
23      <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
24        <path d="M6.75,15h-.002c-.227,0-.442-.104-.583-.281L2.165,9.719c-.259-.324-.207-.795,.117-1.054,.325-.259,.796-.206,1.054,.117l3.418,4.272L14.667,3.278c.261-.322,.732-.373,1.055-.111,.322,.261,.372,.733,.111,1.055L7.333,14.722c-.143,.176-.357,.278-.583,.278Z"/>
25      </svg>
26    </span>
27    <span class="btn__label btn-group__copy-label">
28      <span class="btn-group__copy-label-default">Copy</span>
29      <span class="btn-group__copy-label-copied" aria-hidden="true">Copied</span>
30    </span>
31  </button>
32</div>
33`;class ContactButtonGroup extends HTMLElement{connectedCallback(){if(this._upgraded)return;this._upgraded=!0,this.innerHTML=TEMPLATE;const e=this.querySelector(".btn-group__copy");e?.addEventListener("click",()=>this._handleCopy(e));const t=this.querySelector(".btn-group__email");t?.addEventListener("click",()=>this._handleEmail(t)),this._measureAll(),this._fontMQ=matchMedia("(min-width: 1200px)"),this._fontMQHandler=()=>this._measureAll(),this._fontMQ.addEventListener("change",this._fontMQHandler)}disconnectedCallback(){this._fontMQ?.removeEventListener("change",this._fontMQHandler)}async _measureAll(){if(document.fonts?.ready)try{await document.fonts.ready}catch{}this._measurePair(".btn-group__copy-label",".btn-group__copy-label-default",".btn-group__copy-label-copied",(e,t)=>{this._copyDefW=e,this._copyAltW=t}),this._measurePair(".btn-group__email-label",".btn-group__email-label-default",".btn-group__email-label-opening",(e,t)=>{this._emailDefW=e,this._emailAltW=t}),this._measurePair(".btn-group__email-label-mobile",".btn-group__email-label-default-mobile",".btn-group__email-label-opening-mobile",(e,t)=>{this._emailMobileDefW=e,this._emailMobileAltW=t})}_measurePair(e,t,s,i){const n=this.querySelector(e);if(!n)return;const l=n.querySelector(t),o=n.querySelector(s);if(!l||!o)return;const a=getComputedStyle(l),c=document.createElement("span");c.style.cssText=`
34      position: fixed; top: -9999px; left: -9999px;
35      visibility: hidden; white-space: nowrap;
36      font-family: ${a.fontFamily};
37      font-size: ${a.fontSize};
38      font-weight: ${a.fontWeight};
39      font-style: ${a.fontStyle};
40      letter-spacing: ${a.letterSpacing};
41    `,document.body.appendChild(c),c.textContent=l.textContent;const r=c.getBoundingClientRect().width;c.textContent=o.textContent;const m=c.getBoundingClientRect().width;c.remove();const p=getComputedStyle(n),d=parseFloat(p.paddingLeft)+parseFloat(p.paddingRight),u=r+d,h=m+d,_=n.closest(".btn-group__copy, .btn-group__email"),b=_?.classList.contains("copied")||_?.classList.contains("opening");n.style.width=`${b?h:u}px`,i(u,h)}_handleCopy(e){navigator.clipboard.writeText("[email protected]").then(()=>{this._setCopied(e,!0),clearTimeout(this._copiedTimer),this._copiedTimer=setTimeout(()=>this._setCopied(e,!1),2e3)})}_handleEmail(e){this._cleanupEmail?.(),this._setOpening(e,!0);let t=!1;const s=()=>{this._setOpening(e,!1),this._cleanupEmail?.()},i=()=>{t&&s()},n=()=>{t&&document.visibilityState==="visible"&&s()};window.addEventListener("focus",i),document.addEventListener("visibilitychange",n),window.addEventListener("pageshow",i);const l=setTimeout(s,1e4),o=setTimeout(()=>{t=!0},250);this._cleanupEmail=()=>{window.removeEventListener("focus",i),document.removeEventListener("visibilitychange",n),window.removeEventListener("pageshow",i),clearTimeout(l),clearTimeout(o),this._cleanupEmail=null}}_morph(e){const t={opacity:0,transform:"scale(0.25)",filter:"blur(4px)"},s={opacity:1,transform:"scale(1)",filter:"blur(0px)"},i=globalThis.Motion?.animate,n=matchMedia("(prefers-reduced-motion: reduce)").matches,l=(o,a)=>{o&&(i&&!n?i(o,a,{type:"spring",duration:.2,bounce:0}):Object.assign(o.style,a))};

41for(const[o,a]of e)a==="iconHidden"?l(o,t):a==="iconShown"?l(o,s):l(o,a)}async _morphLabels(e,t){const s={opacity:0,transform:"scale(0.7)"},i={opacity:1,transform:"scale(1)"},n=globalThis.Motion?.animate,l=matchMedia("(prefers-reduced-motion: reduce)").matches;if(!n||l){e&&Object.assign(e.style,s),t&&Object.assign(t.style,i);return}e&&await n(e,s,{type:"spring",duration:.08,bounce:0}),await new Promise(o=>setTimeout(o,35)),t&&n(t,i,{type:"spring",duration:.085,bounce:0})}_setCopied(e,t){e.classList.toggle("copied",t);const s=e.querySelector(".btn-group__copy-label"),i=e.querySelector(".icon-copy"),n=e.querySelector(".icon-check"),l=s.querySelector(".btn-group__copy-label-default"),o=s.querySelector(".btn-group__copy-label-copied"),a=[[i,t?"iconHidden":"iconShown"],[n,t?"iconShown":"iconHidden"]];this._copyDefW&&this._copyAltW&&a.push([s,{width:`${t?this._copyAltW:this._copyDefW}px`}]),this._morph(a);const c=t?l:o,r=t?o:l;this._morphLabels(c,r)}_setOpening(e,t){e.classList.toggle("opening",t);const i=[{wrap:e.querySelector(".btn-group__email-label"),def:e.querySelector(".btn-group__email-label-default"),open:e.querySelector(".btn-group__email-label-opening"),defW:this._emailDefW,altW:this._emailAltW},{wrap:e.querySelector(".btn-group__email-label-mobile"),def:e.querySelector(".btn-group__email-label-default-mobile"),open:e.querySelector(".btn-group__email-label-opening-mobile"),defW:this._emailMobileDefW,altW:this._emailMobileAltW}].find(a=>a.wrap&&getComputedStyle(a.wrap).display!=="none");if(!i)return;const n=[];i.defW&&i.altW&&n.push([i.wrap,{width:`${t?i.altW:i.defW}px`}]),this._morph(n);const l=t?i.def:i.open,o=t?i.open:i.def;this._morphLabels(l,o)}}customElements.define("contact-button-group",ContactButtonGroup);