diff --git a/umap/static/umap/js/modules/sync/engine.js b/umap/static/umap/js/modules/sync/engine.js index 05994544..62106352 100644 --- a/umap/static/umap/js/modules/sync/engine.js +++ b/umap/static/umap/js/modules/sync/engine.js @@ -146,9 +146,8 @@ export class SyncEngine { updater.applyMessage(operation) } - getNumberOfConnectedPeers() { - if (this.peers) return Object.keys(this.peers).length - return 0 + getPeers() { + return this.peers || {} } /** diff --git a/umap/static/umap/js/modules/ui/bar.js b/umap/static/umap/js/modules/ui/bar.js index 80202616..b929c8e5 100644 --- a/umap/static/umap/js/modules/ui/bar.js +++ b/umap/static/umap/js/modules/ui/bar.js @@ -2,6 +2,7 @@ import { DomEvent } from '../../../vendors/leaflet/leaflet-src.esm.js' import { translate } from '../i18n.js' import { WithTemplate } from '../utils.js' import ContextMenu from './contextmenu.js' +import * as Utils from '../utils.js' const TOP_BAR_TEMPLATE = `
@@ -96,13 +97,16 @@ export class TopBar extends WithTemplate { } }) - const connectedPeers = this._umap.sync.getNumberOfConnectedPeers() this.elements.peers.addEventListener('mouseover', () => { - if (!connectedPeers) return + const connectedPeers = this._umap.sync.getPeers() + if (!Object.keys(connectedPeers).length) return + const ul = Utils.loadTemplate( + `` + ) this._umap.tooltip.open({ - content: translate('{connectedPeers} peer(s) currently connected to this map', { - connectedPeers: connectedPeers, - }), + content: ul, anchor: this.elements.peers, position: 'bottom', delay: 500, diff --git a/umap/static/umap/js/modules/ui/tooltip.js b/umap/static/umap/js/modules/ui/tooltip.js index 579afc09..277eea73 100644 --- a/umap/static/umap/js/modules/ui/tooltip.js +++ b/umap/static/umap/js/modules/ui/tooltip.js @@ -21,7 +21,11 @@ export default class Tooltip extends Positioned { open(opts) { const showIt = () => { - this.container.innerHTML = Utils.escapeHTML(opts.content) + if (opts.content.nodeType === 1) { + this.container.appendChild(opts.content) + } else { + this.container.innerHTML = Utils.escapeHTML(opts.content) + } this.parent.classList.add('umap-tooltip') this.openAt(opts) } diff --git a/umap/static/umap/js/modules/umap.js b/umap/static/umap/js/modules/umap.js index ab4d94fe..db75d79f 100644 --- a/umap/static/umap/js/modules/umap.js +++ b/umap/static/umap/js/modules/umap.js @@ -1351,7 +1351,7 @@ export default class Umap extends ServerStored { numberOfConnectedPeers: () => { Utils.eachElement('.connected-peers span', (el) => { if (this.sync.websocketConnected) { - el.textContent = this.sync.getNumberOfConnectedPeers() + el.textContent = Object.keys(this.sync.getPeers()).length } else { el.textContent = translate('Disconnected') }