initial commit

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

@@ -0,0 +1,54 @@
+class Phone extends HTMLElement {
+
+    constructor() {
+        super();
+
+        console.log('INITIALIZING MOBILE PHONE');
+
+        let template = document.getElementById('phone');
+        let templateContent = template.content;
+        const shadow = this.attachShadow({
+                mode: 'open'
+            })
+            .appendChild(templateContent.cloneNode(true));            
+    }
+
+    getMobileView(){
+        var sr = this.shadowRoot;
+        var mobileview = sr.getElementById('mobileview');
+        return mobileview;
+    }
+
+    showNavigation(){
+        var sr = this.shadowRoot;
+        var nav = sr.getElementById("mobilenavigation");
+        nav.style.display = "flex";
+    }
+
+    hideNavigation(){
+        var sr = this.shadowRoot;
+        var nav = sr.getElementById("mobilenavigation");
+        nav.style.display = "none";
+    }
+    
+    connectedCallback() {
+        var sr = this.shadowRoot;
+        var phone = this;
+        var basebutton = sr.getElementById('basebutton');
+        var mobileview = sr.getElementById('mobileview');
+        var navigation = sr.getElementById('mobilenavigation');
+        var apptiles = sr.getElementById('APPTILES');
+        basebutton.addEventListener('click', e => {
+            mobileview.innerHTML = '<homescreen-element id="HOMESCREEN"></homescreen-element>';
+            phone.hideNavigation();
+        });
+    }
+}
+
+try {
+    customElements.define('phone-element', Phone);
+} catch (err) {
+    const h3 = document.createElement('h3')
+    h3.innerHTML = err
+    document.body.appendChild(h3)
+}