custom element

README.md

@@ -11,16 +11,26 @@ So the steps to generate a unique picture for the key are like that:
 3. Circles from the first part of the key are bigger and are placed with normal composite mode. Circles from the second part are smaller and placed with 'lighten' composite mode.
 4. Then half of the canvas gets reflected to create a nice symmetric 'portrait' to be used as an avatar of a SEA public key.
 
-## Installation
+## How to install?
+
 ### npm / pnpm
-`npm i gun-avatar` in a build environment 
+Run `npm i gun-avatar` in a build environment. Then you can `import {gunAvatar} from 'gun-avatar'` and use the function to render the avatar. Or just `import 'gun-avatar'` for custom element use.
 
-### browser
+### Browser
 Add `<script src="https://unpkg.com/gun-avatar"></script>` to your html
 
-## Usage
+## How to use?
+
+### 1. Custom HTML element
+
+After you add the script to the page you get a custom element `<gun-avatar />` for ease of use. The attributes are reactive to changes. Set `dark` attribute if you need a dark version of the avatar. Set `round` attribute to get a rounded image. Also `size` in pixels is available. 
+
+```html
+<script src="https://unpkg.com/gun-avatar"></script>
+<gun-avatar pub="0000000kw75Ute2tFhdjDQgzR-GsGhlfSlZxgEZKuquI.2F-j9ItJY44U8vcRAsj-5lxnECG5TDyuPD8gEiuInp8" size="300" round dark />
+```
 
-### 1. HTML img tag with `data-pub` attribute
+### 2. HTML img tag with `data-pub` attribute
 
 Add the script to the page and then add `gun-avatar` class to an img tag along with add `data-pub` attribute with the pub key. `gun-avatar` automatically finds them on page and fills with corresponding base64 picture data. You can set `data-size` in px and style the avatar with css as you want. Also there's `data-dark` option to generate a dark version of the same avatar. You can add `.gun-avatar {border-radius: 100%}` to tour css to make it round.
 
@@ -29,7 +39,7 @@ Add the script to the page and then add `gun-avatar` class to an img tag along w
 <img class="gun-avatar" data-size="200" data-pub="YZOBPSkw75Ute2tFhdjDQgzR-GsGhlfSlZxgEZKuquI.2F-j9ItJY44U8vcRAsj-5lxnECG5TDyuPD8gEiuInp8">
 ```
 
-### 2. JS function
+### 3. JS function
 
 Install the `gun-avatar` package and import the `gunAvatar` function. Then you can use it to generate the base64 string to place into the src attribute with your favourite library or vanilla js. Function get two parameters: `pub` and `size` in px.
 

index.html

@@ -16,6 +16,8 @@
   <img class="gun-avatar" data-dark="true" data-size="300"
     data-pub="YZOBPSkw75Ute2tFhdjDQgzR-GsGhlfSlZxgEZKuquI.2F-j9ItJY44U8vcRAsj-5lxnECG5TDyuPD8gEiuInp8">
 
+  <gun-avatar pub="0000000kw75Ute2tFhdjDQgzR-GsGhlfSlZxgEZKuquI.2F-j9ItJY44U8vcRAsj-5lxnECG5TDyuPD8gEiuInp8" size="600"
+    dark round />
 
   <script type="module" src="/main.js"></script>
   <style>

main.js

@@ -2,18 +2,56 @@ const cache = {} // stores already generated avatars
 
 import './patch.js'
 
-// add src base64 to every <img class="avatar" data-pub="YourUserPub">
-
-document.addEventListener('DOMContentLoaded', () => {
-  let avatars = document.getElementsByClassName('gun-avatar')
-  for (let img of avatars) {
-    img.src = gunAvatar(
-      img.dataset.pub,
-      img.dataset.size || 200,
-      img.dataset.dark,
-    )
+if (document) {
+  // <gun-avatar pub="***" custom element
+  class Avatar extends HTMLElement {
+    constructor() {
+      super()
+      this.attachShadow({ mode: 'open' })
+      this.img = document.createElement('img')
+      this.shadowRoot.append(this.img)
+    }
+    render() {
+      this.pub = this.hasAttribute('pub')
+        ? this.getAttribute('pub')
+        : '1234123455Ute2tFhdjDQgzR-1234lfSlZxgEZKuquI.2F-j1234434U1234Asj-5lxnECG5TDyuPD8gEiuI123'
+      this.size = this.hasAttribute('size') ? this.getAttribute('size') : 400
+      this.round =
+        this.hasAttribute('round') || this.getAttribute('round') == ''
+          ? true
+          : false
+      if (this.round) {
+        this.img.style.borderRadius = '100%'
+      } else {
+        this.img.style.borderRadius = '0%'
+      }
+      this.dark =
+        this.hasAttribute('dark') || this.getAttribute('dark') == ''
+          ? true
+          : false
+      this.img.src = gunAvatar(this.pub, this.size, this.dark)
+    }
+    connectedCallback() {
+      this.render()
+    }
+    static get observedAttributes() {
+      return ['pub', 'round', 'size', 'dark']
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+      this.render()
+    }
   }
-})
+
+  customElements.define('gun-avatar', Avatar)
+
+  // add src base64 to every <img class="avatar" data-pub="YourUserPub">
+  document.addEventListener('DOMContentLoaded', () => {
+    let avatars = document.getElementsByClassName('gun-avatar')
+    for (let img of avatars) {
+      img.src = gunAvatar(img.dataset.pub, img.dataset.size, img.dataset.dark)
+    }
+  })
+}
 
 // actual generator function, returns the base64 string