initial commit

dev/tekton/examples/example-bank/public/javascript/navigation.js

@@ -0,0 +1,70 @@
+class Navigation extends HTMLElement {
+
+    activeview = '';
+
+    getMobileView(){
+        var sr = this.shadowRoot;
+
+         // I don't like this being hard coded, but have stuggled to find a dynamic way for exampe: .childNodes.item("mobileview");
+
+        var mobileview = sr.host.parentElement.childNodes[3];
+        return mobileview;
+    }
+
+    constructor() {
+        super();
+
+        let template = document.getElementById('navigationview');
+        let templateContent = template.content;
+
+        const shadow = this.attachShadow({
+                mode: 'open'
+            })
+            .appendChild(templateContent.cloneNode(true));
+    }
+
+    setAllButtonsDisabled(){
+        var sr = this.shadowRoot;
+        this.buttonRow = sr.getElementById('buttonrow');
+
+        const buttonlist = Array.from(this.buttonRow.children);
+
+
+        buttonlist.forEach(function(node){
+            node.setDisabled();
+        })
+    }
+
+    connectedCallback(){
+        var sr = this.shadowRoot;
+        this.buttonRow = sr.getElementById('buttonrow');
+
+        var navelement = this;
+
+        this.buttonRow.addEventListener('NAV', e => {
+
+            console.log(e)
+
+            var id = e.detail.eventData.id;
+
+            // console.log('HOMESCREEN RECIEVED EVENT FROM NAV BUTTON: ' + id.toLocaleUpperCase());
+
+            this.setAllButtonsDisabled();
+
+            var button = sr.getElementById(id);
+            button.setEnabled();
+            navelement.activeview = id;
+
+            var mobileview = this.getMobileView();
+            mobileview.innerHTML = "<" + id + "-element></" + id +"-element>";
+        });
+    }
+}
+
+try {
+    customElements.define('navigation-element', Navigation);
+} catch (err) {
+    const h3 = document.createElement('h3')
+    h3.innerHTML = err
+    document.body.appendChild(h3)
+}