support.js 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. document.body.classList.add('support-nav-light');
  2. (function () {
  3. var siteHeader = document.getElementById('siteHeader');
  4. var siteLogoImg = document.getElementById('siteLogoImg');
  5. if (siteHeader) {
  6. var syncSupportHeader = function () {
  7. siteHeader.classList.remove('hero-theme-light');
  8. siteHeader.classList.add('hero-theme-dark', 'page-navbar-solid');
  9. };
  10. syncSupportHeader();
  11. if (siteLogoImg) {
  12. var darkLogo = siteLogoImg.getAttribute('data-logo-dark');
  13. if (darkLogo) siteLogoImg.src = darkLogo;
  14. }
  15. window.addEventListener('scroll', syncSupportHeader, { passive: true });
  16. document.addEventListener('DOMContentLoaded', syncSupportHeader);
  17. }
  18. var tabs = Array.prototype.slice.call(document.querySelectorAll('.support-product-tab'));
  19. var panels = Array.prototype.slice.call(document.querySelectorAll('.support-product-panel'));
  20. if (tabs.length && panels.length) {
  21. tabs.forEach(function (tab) {
  22. tab.addEventListener('click', function () {
  23. var targetId = tab.getAttribute('data-target');
  24. tabs.forEach(function (btn) {
  25. btn.classList.remove('is-active');
  26. btn.setAttribute('aria-selected', 'false');
  27. });
  28. panels.forEach(function (panel) {
  29. var isMatch = panel.id === targetId;
  30. panel.classList.toggle('is-active', isMatch);
  31. if (isMatch) {
  32. panel.removeAttribute('hidden');
  33. } else {
  34. panel.setAttribute('hidden', 'hidden');
  35. }
  36. });
  37. tab.classList.add('is-active');
  38. tab.setAttribute('aria-selected', 'true');
  39. });
  40. });
  41. }
  42. })();