https://selebox.com/js/profile-public-details.js?v=2026-09-21-1

1const paths={
2 books:'<path d="M12 5v16M3 4h5a4 4 0 0 1 4 2 4 4 0 0 1 4-2h5v15h-5a4 4 0 0 0-4 2 4 4 0 0 0-4-2H3Z"/>',
3 movies:'<rect x="3" y="5" width="18" height="15" rx="2"/><path d="M3 10h18M7 5l3 5m4-5 3 5m-7 3 5 3-5 3Z"/>',
4 games:'<path d="M7 7h10c3 0 5 11 3 12s-4-4-5-4H9c-1 0-3 5-5 4S4 7 7 7Z"/><path d="M7 9v5m-2-2h4m6-1h.01m3 2h.01"/>',
5 music:'<path d="M9 18V5l11-2v13M9 8l11-2"/><ellipse cx="6" cy="18" rx="3" ry="3"/><ellipse cx="17" cy="16" rx="3" ry="3"/>',
6 art:'<path d="M12 3a9 9 0 1 0 0 18h1a2 2 0 0 0 0-4 2 2 0 0 1 0-4h3a5 5 0 0 0 0-10Z"/><path d="M7 8h.01M11 6h.01M6 13h.01"/>',
7 writer:'<path d="m4 20 4-1L21 6l-3-3L5 16Zm11-14 3 3M4 21h16"/>',
8 creator:'<rect x="3" y="5" width="18" height="14" rx="3"/><path d="m10 9 6 3-6 3Z"/>',
9 education:'<path d="m2 9 10-6 10 6-10 6Zm4 3v6l6 3 6-3v-6m4-3v9"/>',
10 nonprofit:'<path d="M20 5c-3-3-6-1-8 1-2-2-5-4-8-1-4 4 2 9 8 14 6-5 12-10 8-14Z"/>',
11 community:'<circle cx="9" cy="8" r="3"/><path d="M3 21v-3a6 6 0 0 1 12 0v3M16 5a3 3 0 0 1 0 6m2 4a5 5 0 0 1 3 5"/>',
12 business:'<rect x="3" y="7" width="18" height="14" rx="2"/><path d="M8 7V3h8v4M3 12l9 3 9-3"/>',
13 personal:'<circle cx="12" cy="7" r="4"/><path d="M4 21v-2a8 8 0 0 1 16 0v2"/>',
14 email:'<rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 6 9 7 9-7"/>',
15 link:'<path d="m10 13 4-4m-6 6-1 1a4 4 0 0 1-6-6l4-4a4 4 0 0 1 6 0m2 3 1-1a4 4 0 0 1 6 6l-4 4a4 4 0 0 1-6 0"/>',
16};
17export const PROFILE_CATEGORIES=[['books','Books'],['movies','Movies'],['games','Games'],['music','Music'],['art','Art & design'],['writer','Writer'],['creator','Digital creator'],['education','Education'],['nonprofit','Nonprofit organization'],['community','Community'],['business','Business'],['personal','Personal blog']];
18const esc=value=>String(value??'').replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
19const icon=key=>`<svg aria-hidden="true" data-category-icon="${key}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${paths[key]||paths.link}</svg>`;
20export function publicProfileLink(value){
21 const raw=String(value||'').trim();if(!raw)return '';
22 if(raw.length>500||/[\s<>"'\\\u0000-\u001f\u007f]/.test(raw))throw Error('Enter a valid website or social link.');
23 const withScheme=/^[a-z][a-z0-9+.-]*:/i.test(raw)?raw:`https://${raw}`;
24 let url;try{url=new URL(withScheme);}catch{throw Error('Enter a valid website or social link.');}
25 if(!['https:','http:'].includes(url.protocol)||url.username||url.password||!url.hostname.includes('.')||url.href.length>500)throw Error('Use an http or https link, such as https://instagram.com/yourname.');
26 return url.href;
27}
28export function normalizePublicDetails(value={}){
29 const category=String(value.profile_category||'').trim();
30 if(category&&!PROFILE_CATEGORIES.some(([key])=>key===category))throw Error('Choose a profile category from the list.');
31 const email=String(value.public_contact_email||'').trim();
32 if(email&&(email.length>254||! /^[^\s@<>";,]+@[^\s@<>";,]+\.[^\s@<>";,]+$/.test(email)))throw Error('Enter a valid public contact email.');
33 if(value.social_links!=null&&!Array.isArray(value.social_links))throw Error('Add social links one at a time.');
34 const links=(value.social_links||[]).map(publicProfileLink).filter(Boolean);
35 if(links.length>5)throw Error('You can add up to five links.');
36 return {profile_category:category||null,public_contact_email:email||null,social_links:[...new Set(links)]};
37}
38function linkLabel(url){const u=new URL(url),host=u.hostname.replace(/^www\./,'');const brands={'instagram.com':'Instagram','facebook.com':'Facebook','x.com':'X','twitter.com':'X','youtube.com':'YouTube','youtu.be':'YouTube','tiktok.com':'TikTok','discord.gg':'Discord','discord.com':'Discord','linkedin.com':'LinkedIn','threads.net':'Threads','threads.com':'Threads'};return brands[host]?`${brands[host]} · ${u.pathname.replace(/^\//,'').replace(/\/$/,'')||host}`:host;}
39export function renderPublicDetails(profile){
40 const el=document.getElementById('profilePublicDetails');if(!el)return;el.replaceChildren();

41 const category=PROFILE_CATEGORIES.find(([key])=>key===profile.profile_category);
42 if(category){const row=document.createElement('span');row.className='pp-category';row.innerHTML=icon(category[0]);row.append(document.createTextNode(category[1]));el.append(row);}
43 let email=null;try{email=normalizePublicDetails({public_contact_email:profile.public_contact_email}).public_contact_email;}catch{}
44 function link(href,label,key){const a=document.createElement('a');a.href=href;a.innerHTML=icon(key);const span=document.createElement('span');span.textContent=label;a.append(span);if(key!=='email'){a.target='_blank';a.rel='noopener noreferrer';}el.append(a);}
45 if(email)link(`mailto:${encodeURIComponent(email)}`,email,'email');
46 for(const raw of (Array.isArray(profile.social_links)?profile.social_links:[]).slice(0,5)){try{const url=publicProfileLink(raw);if(url)link(url,linkLabel(url),'link');}catch{}}
47 el.hidden=!el.childElementCount;
48}
49export function mountPublicDetailsEditor(profile){
50 const select=document.getElementById('editProfileCategory');
51 select.innerHTML='<option value="">No category</option>'+PROFILE_CATEGORIES.map(([key,label])=>`<option value="${key}">${esc(label)}</option>`).join('');select.value=profile.profile_category||'';
52 const preview=document.getElementById('editCategoryPreview');const update=()=>{const row=PROFILE_CATEGORIES.find(([key])=>key===select.value);preview.innerHTML=row?icon(row[0])+`<span>${esc(row[1])}</span>`:'';preview.hidden=!row;};select.onchange=update;update();
53 document.getElementById('editPublicEmail').value=profile.public_contact_email||'';
54 const list=document.getElementById('editSocialLinks'),add=document.getElementById('editSocialAdd');list.replaceChildren();
55 function renumber(){[...list.children].forEach((row,i)=>{row.querySelector('input').setAttribute('aria-label',`Social or website link ${i+1}`);row.querySelector('button').setAttribute('aria-label',`Remove link ${i+1}`);});add.disabled=list.children.length>=5;}
56 function append(value=''){const row=document.createElement('div');row.className='ep-social-row';const input=document.createElement('input');input.className='form-input';input.type='url';input.inputMode='url';input.maxLength=500;input.placeholder='https://instagram.com/yourname';input.value=value;const remove=document.createElement('button');remove.type='button';remove.className='ep-social-remove';remove.innerHTML='<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 6 12 12M18 6 6 18"/></svg>';remove.onclick=()=>{row.remove();renumber();add.focus();};row.append(input,remove);list.append(row);renumber();return input;}
57 const links=Array.isArray(profile.social_links)?profile.social_links.slice(0,5):[];if(links.length)links.forEach(append);else append();
58 add.onclick=()=>{if(list.children.length<5)append().focus();};
59}
60export function readPublicDetailsEditor(){return normalizePublicDetails({profile_category:document.getElementById('editProfileCategory').value,public_contact_email:document.getElementById('editPublicEmail').value,social_links:[...document.querySelectorAll('#editSocialLinks input')].map(el=>el.value)});}