Profile Stack
The profile stack shows the list of users currently accessing the Document. Try adding and deleting users to see how the profile stack changes.
main.js
1import yorkie, { DocEventType } from 'yorkie-js-sdk';2import { getRandomName, getRandomColor } from './util.js';34async function main() {5 const client = new yorkie.Client(import.meta.env.VITE_YORKIE_API_ADDR, {6 apiKey: import.meta.env.VITE_YORKIE_API_KEY,7 });8 await client.activate();9 const doc = new yorkie.Document('profile-stack');10 doc.subscribe('presence', (event) => {11 if (event.type !== DocEventType.PresenceChanged) {12 displayPeerList(doc.getPresences(), client.getID());13 }14 });15 await client.attach(doc, {16 // set the client's name and color to presence.17 initialPresence: {18 name: getRandomName(),19 color: getRandomColor(),20 },21 });2223 window.addEventListener('beforeunload', () => {24 client.deactivate();25 });26}2728const MAX_PEER_VIEW = 4;29const createPeer = (name, color, type) => {30 const $peer = document.createElement('div');31 $peer.className = 'peer';3233 if (type === 'main') {34 $peer.innerHTML = `35 <div class="profile">36 <img src="./images/profile-${color}.svg" alt="profile" class="profile-img"/>37 </div>38 <div class="name speech-bubbles">${name}</div>39 `;40 } else if (type === 'more') {41 $peer.innerHTML = `42 <img src="./images/profile-${color}.svg" alt="profile" class="profile-img"/>43 <span class="name">${name}</span>44 `;45 }46 return $peer;47};4849const displayPeerList = (peers, myClientID) => {50 const peerList = peers.filter(51 ({ clientID: id, presence }) =>52 id !== myClientID && presence.name && presence.color,53 );54 const peerCount = peerList.length + 1;55 const hasMorePeers = peerCount > MAX_PEER_VIEW;56 const $peerList = document.getElementById('peerList');57 $peerList.innerHTML = '';58 const $peerMoreList = document.createElement('div');59 $peerMoreList.className = 'peer-more-list speech-bubbles';6061 const myPresence = peers.find(62 ({ clientID: id }) => id === myClientID,63 ).presence;64 const $me = createPeer(`${myPresence.name} (me)`, myPresence.color, 'main');65 $me.classList.add('me');66 $peerList.appendChild($me);67 peerList.forEach((peer, i) => {68 const { name, color } = peer.presence;69 if (i < MAX_PEER_VIEW - 1) {70 const $peer = createPeer(name, color, 'main');71 $peerList.appendChild($peer);72 return;73 }74 const $peer = createPeer(name, color, 'more');75 $peerMoreList.appendChild($peer);76 });7778 if (hasMorePeers) {79 const $peer = document.createElement('div');80 $peer.className = 'peer more';81 $peer.innerHTML = `82 <div class="profile">83 +${peerCount - MAX_PEER_VIEW}84 </div>85 `;86 $peer.appendChild($peerMoreList);87 $peerList.appendChild($peer);88 }89};9091main();
- User 1
- User 2
- User 1
- User 2
Event Log