regulus landing page

assets/scripts/behavior.js

@@ -0,0 +1,145 @@
+;(function () {
+  'use strict'
+
+  var hash = window.location.hash
+  find('.tabset').forEach(function (tabset) {
+    var active
+    var tabs = tabset.querySelector('.tabs')
+    if (tabs) {
+      var first
+      find('li', tabs).forEach(function (tab, idx) {
+        var id = (tab.querySelector('a[id]') || tab).id
+        var label = (tab.querySelector('a[id]') || tab).parentElement.innerText
+        if (!id) return
+        var pane = getPane(id, tabset)
+        if (!idx) first = { tab: tab, pane: pane }
+        if (!active && hash === '#' + id && (active = true)) {
+          tab.classList.add('is-active')
+          if (pane) pane.classList.add('is-active')
+        } else if (!idx) {
+          tab.classList.remove('is-active')
+          if (pane) pane.classList.remove('is-active')
+        }
+        tab.addEventListener('click', activateTab.bind({ tabset: tabset, tab: tab, pane: pane, label: label }))
+      })
+      if (!active && first) {
+        first.tab.classList.add('is-active')
+        if (first.pane) first.pane.classList.add('is-active')
+      }
+    }
+    tabset.classList.remove('is-loading')
+  })
+
+  function activateTab (e) {
+    var tab = this.tab
+    var pane = this.pane
+    var label = this.label
+    find('.tabs li').forEach(function (it) {
+      if (it.children[0].innerText === label) {
+        it.classList.add('is-active');
+      } else {
+        it.classList.remove('is-active');
+      }
+    })
+    find('.tab-pane').forEach(function (it) {
+      if (it.getAttribute('aria-labelledby').includes(label.toLowerCase())) {
+        it.classList.add('is-active');
+      } else {
+        it.classList.remove('is-active');
+      }
+    })
+    e.preventDefault()
+  }
+
+  function find (selector, from) {
+    return Array.prototype.slice.call((from || document).querySelectorAll(selector))
+  }
+
+  function getPane (id, tabset) {
+    return find('.tab-pane', tabset).find(function (it) {
+      return it.getAttribute('aria-labelledby') === id
+    })
+  }
+
+  var pageReady = function(callback) {
+    document.readyState !== 'loading' ? callback() : document.addEventListener('DOMContentLoaded', callback);
+  }
+
+  pageReady(function() {
+    enableMobileMenu();
+    enableTermsModal();
+  });
+
+  function enableMobileMenu() {
+    var navbar = document.querySelector('.navbar');
+    var mobileMenuButton = document.querySelector('.header-nav-mobile__menu-icon');
+    var pageBody = document.querySelector('body');
+    var pageBlackout = document.querySelector('.page-blackout');
+
+    function resetClasses() {
+      mobileMenuButton.classList.remove('active');
+      pageBody.classList.remove('menu-open');
+      pageBlackout.classList.remove('active');
+      navbar.classList.remove('active');
+    }
+    resetClasses();
+
+    mobileMenuButton.addEventListener('click', function(e) {
+      e.preventDefault();
+
+      this.classList.toggle('active');
+      pageBody.classList.toggle('menu-open');
+      pageBlackout.classList.toggle('active');
+      navbar.classList.toggle('active');
+    })
+
+    var dropdowns = document.querySelectorAll('.header-nav-mobile__menu-item.has-sub-items > header'), i;
+
+    for (i = 0; i < dropdowns.length; ++i) {
+      dropdowns[i].addEventListener('click', function (e) {
+        if(this == e.target) {
+          e.stopPropagation();
+          this.parentElement.classList.toggle('active');
+          this.nextElementSibling.classList.toggle('dropdown-open');
+        } else {
+          return true;
+        }
+      })
+    }
+
+    function checkWidth() {
+      var currentWidth = window.innerWidth;
+      var desktopBreakpoint = 1024;
+
+      if (pageBody.classList.contains('menu-open') && currentWidth >= desktopBreakpoint) {
+        resetClasses();
+      }
+    }
+    window.addEventListener('resize', checkWidth);
+  }
+
+  function enableTermsModal() {
+    var termsLink = document.querySelector('#open-terms');
+    var termsModal = document.querySelector('#terms-modal');
+    var modalBody = document.querySelector('.modal-body');
+    var termsContainer = document.querySelector('.terms-container');
+    var closeBtns = document.querySelectorAll('#modal-close, #modal-cancel, #modal-confirm');
+
+    termsLink.addEventListener('click', function(e) {
+      e.preventDefault();
+      termsModal.style.display = "flex";
+    });
+
+    modalBody.addEventListener('scroll', function() {
+      var scrolled = (termsContainer.scrollHeight - this.scrollTop) <= (this.clientHeight + 1);
+      document.querySelector('#modal-confirm').disabled = !scrolled;
+    });
+
+    closeBtns.forEach(function(btn) {
+      btn.addEventListener('click', function(e) {
+        e.preventDefault();
+        termsModal.style.display = "none";
+      });
+    });
+  }
+})()

index.html

@@ -165,6 +165,21 @@
               </div>
             </div>
           </li>
+          <li class="header-nav-mobile__menu-item has-sub-items">
+            <header class="header-nav-mobile__menu-item__header i-alignment">
+              <a href="https://support.teradata.com/community ">Trials</a>
+              <img class="navbar-arrow" src="https://developers.teradata.com/assets/images/icons/arrow_drop_down.svg" alt="down arrow" title="Community">
+            </header>
+            <div>
+              <div class="header-nav-mobile__menu-item__links">
+                <ul class="ul-color">
+                  <li>
+                    <a href="https://developers.teradata.com/Regulus" class="dropdown-item">Teradata Regulus</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </li>
         </ul>
       </div>
     </section>
@@ -194,7 +209,6 @@
         </a>         
       </div>
     </div>
-    <!--
     <div class="mySlides fade" style="display: block;">
       <div class="slideimage2">
         <img src="assets/images/icons/play.svg">
@@ -215,7 +229,6 @@
         <button class="slide-button">learn more</button>  
       </div>
     </div>  
-    -->  
     <!--
     <div style="text-align:center">
       <span class="dot" onclick="currentSlide(1)"></span>