tabs feature, sass and javascript basic

Resources/public/modules/tabs/tabs.js

@@ -1 +1,77 @@
-alert('coucou');
+/*
+ * Remove active class on both elements: link and content
+ */
+let resetActive = function(links, contents)
+{
+    for (items of [links, contents]) {
+        items.forEach(function(item) {
+            if (item.classList.contains('active')) {
+                item.classList.remove('active');
+            }
+        });
+    }
+}
+
+/*
+ * Count links array and return rank of given link
+ */
+let countNewActive = function(links, link)
+{
+    let rank = 0;
+    for (let i = 0; i < links.length; ++i) {
+        rank++;
+        if(links[i] == link) {
+            return rank;
+        }
+    }
+}
+
+/*
+ * Set class active on both new elements: link and content
+ */
+let setNewActive = function(link, contents, rank)
+{
+    link.classList.add('active');
+
+    count = 0;
+    contents.forEach(function(pane) {
+        count++;
+        if (rank == count) {
+            pane.classList.add('active');
+        }
+    });
+}
+
+/*
+ * Main function
+ */
+window.addEventListener('load', function()
+{
+    tabParams.forEach(function(unit) {
+
+        let
+            tabPanel = document.querySelector('#'+ unit.id ),
+            nav = tabPanel.querySelector('nav'),
+            tabs = nav.querySelectorAll('ul.nav-tabs li.nav-item'),
+            links = nav.querySelectorAll('ul.nav-tabs li.nav-item a.nav-link'),
+            contents = tabPanel.querySelectorAll('div.tab-content div.tab-pane')
+        ;
+
+        if (unit.type == 'pill') {
+            tabPanel.classList.add('pills');
+        }
+
+        // initial position
+        setNewActive(links[unit.startPanel-1], contents, unit.startPanel);
+
+        // listen
+        links.forEach(function(link) {
+            link.addEventListener('click', function()
+            {
+                resetActive(links, contents);
+                setNewActive(link, contents, countNewActive(links, link));
+            });
+        });
+
+    });
+});

Resources/public/modules/tabs/tabs.scss

@@ -1,6 +1,98 @@
 
+$navigation-color: #334d5c;
+$body-font-color: #ffffff;
+$tab-font-color: #495057;
+$border-color: #dee2e6;
+$pills-color: #ed9345;
+$radius : .25rem;
 
-div.tabs.test {
+div.tabs {
+  margin: 3em;
 
-  font-size: 300%;
+  nav {
+    ul.nav-tabs {
+
+      display: flex;
+        display: -ms-flexbox;
+      flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+
+      list-style: none;
+      padding-left: 0;
+      margin-bottom: 0;
+
+      li.nav-item {
+        margin-bottom: -1px;
+
+        a.nav-link {
+          display: block;
+          padding: .5rem 1rem;
+        }
+      }
+
+    }
+  }
+
+  div.tab-content {
+
+    div.tab-pane {
+      display: none;
+
+      &.fade {
+        transition: opacity .15s linear;
+      }
+      &.active {
+        display: block;
+      }
+    }
+  }
+
+  &:not(.pills) {
+    nav {
+      ul.nav-tabs {
+        border-bottom: 1px solid $border-color;
+
+        li.nav-item {
+
+          a.nav-link {
+            border: 1px solid transparent;
+            border-top-left-radius: $radius;
+            border-top-right-radius: $radius;
+            color: $navigation-color;
+          }
+
+          &.show a.nav-link,
+          & a.nav-link.active {
+
+            color: $tab-font-color;
+            background-color: $body-font-color;
+            border-color: $border-color $border-color $body-font-color;
+
+          }
+        }
+      }
+    }
+  }
+
+  &.pills {
+    nav {
+      ul.nav-tabs {
+
+        border-bottom: 0;
+        li.nav-item {
+
+          & a.nav-link {
+            border: 0;
+            border-radius: $radius;
+          }
+
+          &.show > a.nav-link,
+          & a.nav-link.active {
+            color: $body-font-color;
+            background-color: $pills-color;
+          }
+        }
+      }
+    }
+  }
 }