Began to add global toolbar

client/components/control/control.css

@@ -0,0 +1,53 @@
+.control-global{
+    width: 30px;
+    height: 30px;
+    border: 1px solid dimgray;
+    box-sizing: border-box;
+    transition: border 0.25s;
+    background-color: white;
+}
+
+.animated:hover{
+    border: 3px solid dimgray;
+    cursor: pointer;
+}
+
+.control-global:hover~.tooltiptext{
+    visibility: visible;
+    opacity: 1;
+    transition-delay: 2s;
+}
+
+.control-global-active{
+    display: block;
+}
+
+.control-global-inactive{
+    display: none;
+}
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.tooltiptext {
+    visibility:hidden;
+    opacity: 0;
+    background-color:gray;
+    color: #fff;
+    text-align: center;
+    padding: 2px 0;
+    border-radius: 6px;
+   
+    /* Position the tooltip text - see examples below! */
+    width: 130px;
+    height: 20px;
+    left: 100%;
+    top:3px;
+
+    position: absolute;
+    z-index: 1;
+
+    transition: opacity 0.25s;
+}

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
+*/