diff client.js @ 23:e99984564b17

Implement a tab system, thanks Zash!
author Emmanuel Gil Peyrot <linkmauve@linkmauve.fr>
date Sun, 23 Dec 2018 14:00:59 +0100
parents 07543f7f5e89
children d9da5c3e305d
line wrap: on
line diff
--- a/client.js
+++ b/client.js
@@ -12,6 +12,31 @@ document.addEventListener('DOMContentLoa
 
     const avatar_img = document.getElementById('avatar');
 
+    const tabs = ['profile', 'mam', 'pep', 'account'];
+    function onHashChange() {
+        const hash = location.hash.substr(1);
+        if (!tabs.includes(hash))
+            return;
+        for (let tab of tabs) {
+            const tab_name = 'tab-' + tab;
+            const tab_element = document.getElementById(tab_name);
+            if (tab == hash) {
+                tab_element.classList.add('active')
+                const content_elements = document.getElementsByClassName(tab_name);
+                for (let element of content_elements)
+                    element.hidden = false;
+            } else {
+                tab_element.classList.remove('active')
+                const content_elements = document.getElementsByClassName(tab_name);
+                for (let element of content_elements)
+                    element.hidden = true;
+            }
+        }
+    }
+
+    onHashChange();
+    window.addEventListener('hashchange', onHashChange);
+
     function rawInput(data)
     {
         console.log('RECV', data);