${user.display_name || user.username}
${roleBadge}
@${user.username}${data.anon_number ? ` · Anon #${data.anon_number}` : ''}
${user.bio ? `
${user.bio}
` : ''}
${services ? `
${services}
` : ''}
${actions}
`;
// Position
const vw = window.innerWidth, vh = window.innerHeight;
card.style.left = Math.min(x, vw - 320) + 'px';
card.style.top = Math.min(y, vh - 400) + 'px';
// Overlay to close on click-outside
const overlay = document.createElement('div');
overlay.className = 'openvibe-usercard-overlay';
overlay.addEventListener('click', closeCard);
overlay.addEventListener('contextmenu', e => { e.preventDefault(); closeCard(); });
document.body.appendChild(overlay);
document.body.appendChild(card);
_cardEl = { card, overlay };
// Action handlers
card.querySelectorAll('[data-act]').forEach(btn => {
btn.addEventListener('click', () => {
const act = btn.dataset.act;
const siteItem = act === 'site' ? _menuItems.get(btn.dataset.siteId) : null;
closeCard();
if (siteItem) {
try { siteItem.onSelect(user); } catch (err) { console.error('[OpenVibeUserMenu] item failed:', err); }
} else if (act === 'profile') {
const url = isSelf ? `${_config.apiBase}/my`
: `${_config.apiBase}/user/${user.username}`;
window.open(url, '_blank');
} else if (act === 'message') {
// Dispatch custom event for the host app to handle
document.dispatchEvent(new CustomEvent('openvibe-user-action', {
detail: { action: act, user }
}));
} else {
document.dispatchEvent(new CustomEvent('openvibe-user-action', {
detail: { action: act, user }
}));
}
});
});
}
function closeCard() {
if (_cardEl) {
_cardEl.card.remove();
_cardEl.overlay.remove();
_cardEl = null;
}
}
// ── Public API ───────────────────────────────────────────
const OpenVibeUserCard = {
init(opts = {}) {
Object.assign(_config, opts);
injectStyles();
},
/** Attach right-click card to an element. */
attach(el, userId) {
el.style.cursor = 'pointer';
el.addEventListener('contextmenu', async e => {
e.preventDefault();
const data = await fetchUser(userId);
if (data) renderCard(data, e.clientX, e.clientY);
});
// Also support click on mobile
el.addEventListener('click', async e => {
if (e.ctrlKey || e.metaKey) {
e.preventDefault();
const data = await fetchUser(userId);
if (data) renderCard(data, e.clientX, e.clientY);
}
});
},
/** Programmatically show a card at position. */
async show(userId, x, y) {
const data = await fetchUser(userId);
if (data) renderCard(data, x, y);
},
close: closeCard,
clearCache() { _cache.clear(); },
/** Apply name effect CSS class to an element. */
applyNameEffect(el, effectName) {
if (!effectName) return;
el.classList.add(`openvibe-name-fx-${effectName}`);
},
};
const OpenVibeUserMenu = {
/** Add a host site's safe action to the shared user card. Returns an unregister function. */
register({ id, label, icon, onSelect } = {}) {
const key = String(id || '');
if (!/^[a-zA-Z0-9_-]{1,48}$/.test(key) || typeof label !== 'string' || !label.trim() || typeof onSelect !== 'function') {
throw new TypeError('register requires an id, label and onSelect function');
}
const item = { id: key, label: label.trim().slice(0, 80), icon: typeof icon === 'string' ? icon.slice(0, 8) : '', onSelect };
_menuItems.set(key, item);
return () => { if (_menuItems.get(key) === item) _menuItems.delete(key); };
},
unregister(id) { return _menuItems.delete(String(id || '')); },
attach: (...args) => OpenVibeUserCard.attach(...args),
show: (...args) => OpenVibeUserCard.show(...args),
close: () => OpenVibeUserCard.close(),
};
if (typeof module !== 'undefined' && module.exports) module.exports = OpenVibeUserCard;
if (typeof module !== 'undefined' && module.exports) module.exports.OpenVibeUserMenu = OpenVibeUserMenu;
root.OpenVibeUserCard = OpenVibeUserCard;
root.OpenVibeUserMenu = OpenVibeUserMenu;
})(typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : this);