diff --git a/examples/browser/browser.css b/examples/browser/browser.css
index 0fbd2b7..2b43fef 100644
--- a/examples/browser/browser.css
+++ b/examples/browser/browser.css
@@ -20,6 +20,15 @@ body {
padding: 0.5em;
}
+#output-header > p {
+ margin: 0;
+ font-style: italic;
+}
+
+#output {
+ padding-top: 1em;
+}
+
#writerText {
padding-top: 0.5em;
}
diff --git a/examples/browser/browser.html b/examples/browser/browser.html
index 0acff4f..f7cd242 100644
--- a/examples/browser/browser.html
+++ b/examples/browser/browser.html
@@ -45,7 +45,10 @@
Read-only
Init
-
+
diff --git a/examples/browser/example.js b/examples/browser/example.js
index b9a3758..7f26b25 100644
--- a/examples/browser/example.js
+++ b/examples/browser/example.js
@@ -5,7 +5,8 @@ const creatures = [
'🐼', '🐰', '🐶', '🐥'
]
-const elm = document.getElementById("output")
+const outputHeaderElm = document.getElementById("output-header")
+const outputElm = document.getElementById("output")
const statusElm = document.getElementById("status")
const dbnameField = document.getElementById("dbname")
const dbAddressField = document.getElementById("dbaddress")
@@ -26,6 +27,7 @@ const main = (IPFS, ORBITDB) => {
let count = 0
let interval = Math.floor((Math.random() * 300) + (Math.random() * 2000))
let updateInterval
+ let dbType, dbAddress
// If we're building with Webpack, use the injected IPFS module.
// Otherwise use 'Ipfs' which is exposed by ipfs.min.js
@@ -123,7 +125,8 @@ const main = (IPFS, ORBITDB) => {
const resetDatabase = async (db) => {
writerText.innerHTML = ""
- elm.innerHTML = ""
+ outputElm.innerHTML = ""
+ outputHeaderElm.innerHTML = ""
clearInterval(updateInterval)
@@ -238,11 +241,18 @@ const main = (IPFS, ORBITDB) => {
const result = query(db)
- const output = `
- ${db.type.toUpperCase()}
- ${db.address}
- Copy this address and use the 'Open Remote Database' in another browser to replicate this database between peers.
-
+ if (dbType !== db.type || dbAddress !== db.address) {
+ dbType = db.type;
+ dbAddress = db.address;
+
+ outputHeaderElm.innerHTML = `
+ ${dbType.toUpperCase()}
+ ${dbAddress}
+ Copy this address and use the 'Open Remote Database' in another browser to replicate this database between peers.
+ `
+ }
+
+ outputElm.innerHTML = `
Peer ID: ${orbitdb.id}
Peers (database/network): ${databasePeers.length} / ${networkPeers.length}
Oplog Size: ${db._replicationInfo.progress} / ${db._replicationInfo.max}
@@ -256,9 +266,8 @@ const main = (IPFS, ORBITDB) => {
: result ? result.toString().replace('"', '').replace('"', '') : result
}
-
- `
- elm.innerHTML = output
+
+ `
}
openButton.addEventListener('click', openDatabase)