]> zoso.dev Git - nemo-wallet.git/commitdiff
Show multiple notifications in single bubble using child label nodes. Observe animati...
authorChris Duncan <chris@zoso.dev>
Tue, 15 Oct 2024 07:40:49 +0000 (00:40 -0700)
committerChris Duncan <chris@zoso.dev>
Tue, 15 Oct 2024 07:40:49 +0000 (00:40 -0700)
app/pages/nemo-wallet.html

index b8f1ab7b737f75989d2157aed3bf4f08ad17a385..20127a9aa653773f49cecad9fe717cc717a837b0 100644 (file)
@@ -4,8 +4,15 @@
   <meta lang="en">
   <script>
     let Account, Bip44Wallet, Blake2bWallet, LedgerWallet, SendBlock, ReceiveBlock, ChangeBlock, rpc, Rolodex, Xel
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "attributes") {
+          mutation.target.dispatchEvent(new Event('attributeschanged'))
+        }
+      }
+    })
     function load () {
-      loadUi().then(loadNemo).then(() => { console.log('done') })
+      loadUi().then(loadNemo).then(loadUx).then(() => { console.log('done') })
     }
     async function loadUi () {
       console.log('loading xel')
       await ({ Account, Bip44Wallet, Blake2bWallet, LedgerWallet, SendBlock, ReceiveBlock, ChangeBlock, Node: rpc, Rolodex } = await import('https://unpkg.com/libnemo@latest'))
       console.log('loaded libnemo')
     }
+    async function loadUx () {
+      const notification = document.getElementById('notification')
+      observer.observe(notification, { attributes: true })
+    }
     async function createBip44Wallet () {
       const wallet = await Bip44Wallet.create('password')
       try {
     async function clearStorage () {
       console.log('clear()')
       sessionStorage.clear()
-      notify.ok('Session storage cleared')
+      notify.ok(`Session storage cleared ${Math.random()}`)
     }
     const notify = {
       show: (msg, color) => {
-        const notification = document.createElement('x-notification')
-        notification.timeout = "5000"
-        notification.style.backgroundColor = color ?? notification.style.backgroundColor
-        notification.innerText = msg
+        const notification = document.getElementById('notification')
+        const text = document.createElement('x-label')
+        text.innerText = msg
+        text.style.color = color ?? text.style.color
+        text.addEventListener('click', () => {
+          if (notification.childElementCount > 1) {
+            text.remove()
+          } else {
+            notification.addEventListener('attributeschanged', () => {
+              if (
+                notification.getAttribute('animating') === null
+                && notification.childElementCount === 1
+                && !notification.opened
+              ) {
+                text.remove()
+              }
+            })
+            notification.opened = false
+          }
+        }, { once: true })
+        notification.appendChild(text)
         notification.opened = true
-        console.log(notification)
-        const notifications = document.getElementById('notifications')
-        notifications.appendChild(notification)
       },
       info: (msg) => notify.show(msg),
       ok: (msg) => notify.show(msg, 'DarkCyan'),
 
 <body onload="load()" style="visibility:hidden;">
   <x-box id="main">
-    <x-box id="notifications"></x-box>
+    <x-notification id="notification"></x-notification>
     <x-button onclick="createBip44Wallet().then(w => { console.log(w);showWallets() })">
       <x-label>Create BIP-44 Wallet</x-label>
     </x-button>