Began to add global toolbar

client/components/control/control.js

@@ -0,0 +1,62 @@
+class Control extends HTMLElement{
+
+    constructor(imgSrcMain, imgSrcAlt, tooltipDescription, callbackMain, callbackAlt = undefined){
+        super();
+        this.imgSrcMain = imgSrcMain;
+        this.imgSrcAlt = imgSrcAlt;
+        this.tooltipDescription = tooltipDescription;
+        this.callbackMain = callbackMain;
+        this.callbackAlt = callbackAlt;
+    }
+
+    changeToMain(){
+        this.permute("control-global-alt", "control-global-main");
+    }
+
+    changeToAlt(){
+        this.permute("control-global-main", "control-global-alt");
+    }
+
+    permute(from, to){
+        let fromElm = this.getElementsByClassName(from)[0];
+        let toElm = this.getElementsByClassName(to)[0];
+
+        fromElm.classList.remove("control-global-active");
+        toElm.classList.remove("control-global-inactive");
+        
+        fromElm.classList.add("control-global-inactive");    
+        toElm.classList.add("control-global-active");
+
+        this.getAnimations()
+    }
+
+    connectedCallback(){
+        this.render();
+        this.getElementsByClassName("control-global-active")[0].onclick = this.callbackMain;
+        if (this.callbackAlt !== undefined){
+            let altElm = this.getElementsByClassName("control-global-inactive")[0];
+            altElm.onclick = this.callbackAlt;
+            altElm.classList.add("animated");
+        }
+    }
+
+    render(){
+        this.innerHTML = `
+        <link rel="stylesheet" href="components/control/control.css">
+        <div class="tooltip">
+            <img class="control-global control-global-main control-global-active animated" src="${this.imgSrcMain}"/>
+            <img class="control-global control-global-alt control-global-inactive" src="${this.imgSrcAlt}"/>
+            <span class="tooltiptext">${this.tooltipDescription}</span>
+        </div>
+        `;
+
+    }
+}
+
+customElements.define("sea-control", Control)
+
+/*
+connectedCallback : called when first added
+disconnectedCallback : called when removed
+attributeChangedCallback : called when attribute changes. attribute to be added in observedAttributes
+*/