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 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 // set the client's name and color to presence.8 presence: {9 name: getRandomName(),10 color: getRandomColor(),11 },12 });13 await client.activate();1415 client.subscribe((event) => {16 if (event.type === 'peers-changed') {17 // show peer list18 displayPeerList(client.getPeersByDocKey(doc.getKey()), client.getID());19 }20 });2122 const doc = new yorkie.Document('profile-stack');23 await client.attach(doc);2425 window.addEventListener('beforeunload', () => {26 client.deactivate();27 });28}2930const MAX_PEER_VIEW = 4;31const createPeer = (name, color, type) => {32 const $peer = document.createElement('div');33 $peer.className = 'peer';3435 if (type === 'main') {36 $peer.innerHTML = `37 <div class="profile">38 <img src="./images/profile-${color}.svg" alt="profile" class="profile-img"/>39 </div>40 <div class="name speech-bubbles">${name}</div>41 `;42 } else if (type === 'more') {43 $peer.innerHTML = `44 <img src="./images/profile-${color}.svg" alt="profile" class="profile-img"/>45 <span class="name">${name}</span>46 `;47 }48 return $peer;49};5051const displayPeerList = (peers, myClientID) => {52 const peerList = peers.filter(53 ({ clientID: id, presence }) =>54 id !== myClientID && presence.name && presence.color,55 );56 const peerCount = peerList.length + 1;57 const hasMorePeers = peerCount > MAX_PEER_VIEW;58 const $peerList = document.getElementById('peerList');59 $peerList.innerHTML = '';60 const $peerMoreList = document.createElement('div');61 $peerMoreList.className = 'peer-more-list speech-bubbles';6263 const myPresence = peers.find(64 ({ clientID: id }) => id === myClientID,65 ).presence;66 const $me = createPeer(`${myPresence.name} (me)`, myPresence.color, 'main');67 $me.classList.add('me');68 $peerList.appendChild($me);69 peerList.forEach((peer, i) => {70 const { name, color } = peer.presence;71 if (i < MAX_PEER_VIEW - 1) {72 const $peer = createPeer(name, color, 'main');73 $peerList.appendChild($peer);74 return;75 }76 const $peer = createPeer(name, color, 'more');77 $peerMoreList.appendChild($peer);78 });7980 if (hasMorePeers) {81 const $peer = document.createElement('div');82 $peer.className = 'peer more';83 $peer.innerHTML = `84 <div class="profile">85 +${peerCount - MAX_PEER_VIEW}86 </div>87 `;88 $peer.appendChild($peerMoreList);89 $peerList.appendChild($peer);90 }91};9293main();
- User 1
- User 2
- User 1
- User 2
Event Log