adding event handler code and new components to showcase data-sharing using events

Fernando Doglio · Fernando Doglio · commit ab91f718171a · 2022-09-08T06:10:49.000+02:00
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     </head>
     <body>
         <hm-card withShadow>
-            <hm-card>test</hm-card>
+            <hm-card>Test</hm-card>
 
             <h1>This is a title</h1>
 
diff --git a/index2.html b/index2.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="./src/index.js" type="module"></script>
+    </head>
+    <body>
+        <hm-card withShadow width="50" centered>
+            <hm-list-random-people></hm-list-random-people>
+        </hm-card>
+    </body>
+</html>
diff --git a/src/Button.js b/src/Button.js
@@ -1,6 +1,8 @@
 import * as CC from './CustomComponent.js'
+import * as EH from './EvenHandler.js'
 
 const CustomComponent = CC.default
+const EventHandler = EH.default
 
 export default class HMButton extends CustomComponent{
     static observedAttributes = [];
@@ -20,6 +22,8 @@ export default class HMButton extends CustomComponent{
                 margin: 5px;
             }
         `;
+
+        EventHandler.subscribeToEvent('show', this)
     }                 
 
    
diff --git a/src/Card.js b/src/Card.js
@@ -18,6 +18,20 @@ export default class HMCard extends CustomComponent{
             .hm-card.with-shadow {
                 box-shadow: 5px 10px #cbbaba
             }
+
+            .centered {
+                margin: 0 auto;
+            }
+
+            .w-80 {
+                width: 80%;
+            }
+            .w-50 {
+                width: 50%;
+            }
+            .w-70 {
+                width: 70%;
+            }
         `;
     }                 
 
@@ -31,9 +45,17 @@ export default class HMCard extends CustomComponent{
         if(this._attributes.withshadow != null) {
             elemClass.push("with-shadow")
         }
+
+        if(this._attributes.width != null) {
+            elemClass.push("w-" + this._attributes.width)
+        }
+
+        if(this._attributes.centered != null) {
+            elemClass.push('centered')
+        }
+
         elemClass.push("hm-card")
 
-        let mySlotID = Date.now()
         wrapper.innerHTML = `
         <div class="${elemClass.join(" ")}">
             <slot ></slot>
diff --git a/src/CustomComponent.js b/src/CustomComponent.js
@@ -1,3 +1,7 @@
+import * as EH from './EvenHandler.js'
+
+const EventHandler = EH.default
+
 export default class CustomComponent extends HTMLElement {
     static ID = 0;
     constructor(){
@@ -22,6 +26,10 @@ export default class CustomComponent extends HTMLElement {
         console.log("My custom component got instantiated! (", this.compID, ")")
     }
 
+    handleEvent(event, params) {
+        console.log("The event ", event, " was triggered with params", params)
+    }
+
     /**
      * Lifecycle method, called whenever an observed property changes
      */
@@ -36,9 +44,14 @@ export default class CustomComponent extends HTMLElement {
         return null;
     }
 
-    display() {
+    display(force=false) {
+        if(force) {
+            [...this.mainComp.children]
+                .forEach(this.mainComp.removeChild.bind(this.mainComp))
+            this.isAttached = false;
+        }
         if(this.isAttached) {
-            console.log("already rendered...")
+            console.log("Already rendered...")
             return;
         }
         console.log("Displaying...", this.compName)
@@ -82,6 +95,7 @@ export default class CustomComponent extends HTMLElement {
     connectedCallback() {
         this.setUpAccessors()
         this.display()
+        EventHandler.triggerEvent('show') 
         for(let i = 0; i < this.childNodes.length; i++) {
             let child = this.childNodes[i]
             this.append(child)
diff --git a/src/EvenHandler.js b/src/EvenHandler.js
@@ -0,0 +1,20 @@
+
+export default class EventHandler {
+    static events = {}
+
+    static subscribeToEvent(event, elem) {
+        if(!EventHandler.events[event]) {
+            EventHandler.events[event] = []
+        } 
+        EventHandler.events[event].push(elem)
+    }
+
+    static triggerEvent(event, params) {
+        if(!EventHandler.events[event]) return;
+        EventHandler.events[event].forEach(elem => {
+            if(elem.handleEvent) {
+                elem.handleEvent(event, params)
+            }
+        })
+    }
+}
diff --git a/src/Stack.js b/src/Stack.js
@@ -27,11 +27,7 @@ export default class HMStack extends CustomComponent{
         // the wrapper element
         const wrapper = document.createElement("div")
 
-
-
-      
-
-        const direction = this._attributes.dir // this.getAttribute("dir")
+        const direction = this._attributes.dir
         let elemClasses = []
 
         switch(direction) {
diff --git a/src/customWC/ListPeople.js b/src/customWC/ListPeople.js
@@ -0,0 +1,60 @@
+import * as CC from '../CustomComponent.js'
+import * as EH from '../EvenHandler.js'
+
+const CustomComponent = CC.default
+const EventHandler = EH.default
+
+
+
+export default class HMListPeople extends CustomComponent{
+    static observedAttributes = [];
+    constructor() {
+        super()
+        this.compName = "ListPeople"
+        this.customStyle = `
+            .custom-comp{
+                padding: 10px;
+                display: block;
+            }
+            li {
+                padding: 5px;
+                border: 2px solid #aaa;
+                margin-top: 3px;
+            }
+            ul {
+                list-style-type: none;
+            }
+        `;
+
+        this.people = []
+        EventHandler.subscribeToEvent('person-added', this)
+    }                 
+
+    handleEvent(event, data) {
+        if(event !== 'person-added') return;
+        this.people.push(data)
+        this.display(true)
+    }
+
+    render() {
+
+        // the wrapper element
+        const wrapper = document.createElement("div")
+
+        const list = document.createElement("ul")
+
+        this.people.forEach( p => {
+            const elem = document.createElement('li')
+            elem.textContent = p
+            list.appendChild(elem)
+        })
+
+        wrapper.appendChild(list)
+
+        return wrapper
+    }
+
+    
+}
+
+customElements.define("hm-list-people", HMListPeople)
diff --git a/src/customWC/ListRandomPeople.js b/src/customWC/ListRandomPeople.js
@@ -0,0 +1,61 @@
+import * as CC from '../CustomComponent.js'
+import * as EH from '../EvenHandler.js'
+
+const CustomComponent = CC.default
+const EventHandler = EH.default
+
+
+const randomFirstNames = ["John", "Daniel", "Jonathan",  "Steve", "Bruce", "Sarah", "Maria", "Laura"]
+const randomLastNames = ["Meyers", "Reyes", "Toriro", "Jhons", "Rogers", "Banner", "Parker"]
+
+export default class HMListRandomPeople extends CustomComponent{
+    static observedAttributes = [];
+    constructor() {
+        super()
+        this.compName = "ListRandomPeople"
+        this.customStyle = `
+            .custom-comp{
+                padding: 10px;
+                display: block;
+                color: red;
+            }
+            .legend {
+                display: block;
+            }
+            button {
+                margin: 5px;
+            }
+        `;
+
+    }                 
+
+    generateRandomPerson() {
+        const nIndex = Math.round(Math.random() * (randomFirstNames.length - 1))
+        const lnIndex = Math.round(Math.random() * (randomLastNames.length - 1))
+        const name = randomFirstNames[nIndex] + " " + randomLastNames[lnIndex]
+        EventHandler.triggerEvent('person-added', name)
+    }
+
+   
+    render() {
+
+        // the wrapper element
+        const wrapper = document.createElement("div")
+
+        const buttonElem = document.createElement('button')
+        buttonElem.textContent = "Generate new person"
+
+        buttonElem.addEventListener("click", this.generateRandomPerson.bind(this))
+
+        const list = document.createElement('hm-list-people')
+
+        wrapper.appendChild(buttonElem)
+        wrapper.appendChild(list)
+
+        return wrapper
+    }
+
+    
+}
+
+customElements.define("hm-list-random-people", HMListRandomPeople)
diff --git a/src/index.js b/src/index.js
@@ -2,4 +2,7 @@
 export * as HMButtom from './Button.js'
 export * as HMCard from './Card.js'
 export * as HMStack from './Stack.js'
-export * as HMTextInput from './TextInput.js'
+export * as HMTextInput from './TextInput.js'
+
+export * as HMListPeople from './customWC/ListPeople.js'
+export * as HMListRandomPeople from './customWC/ListRandomPeople.js'

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,8 @@`
`1`	`1`	`import * as CC from './CustomComponent.js'`
	`2`	`+import * as EH from './EvenHandler.js'`
`2`	`3`
`3`	`4`	`const CustomComponent = CC.default`
	`5`	`+const EventHandler = EH.default`
`4`	`6`
`5`	`7`	`export default class HMButton extends CustomComponent{`
`6`	`8`	`static observedAttributes = [];`
`@@ -20,6 +22,8 @@ export default class HMButton extends CustomComponent{`
`20`	`22`	`margin: 5px;`
`21`	`23`	`}`
`22`	`24`	`;
	`25`	`+`
	`26`	`+ EventHandler.subscribeToEvent('show', this)`
`23`	`27`	`}`
`24`	`28`
`25`	`29`