From 393f30f9ac6d60e30edc1bb041e675bb5d3e4f18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rton=20Lente?= <marton@blender.org>
Date: Fri, 29 Nov 2024 14:30:01 +0100
Subject: [PATCH] UI: Upgrade nav-global to latest web-assets v2 component
 v2.0.0-beta

Part of #9
---
 templates/custom/body_inner_pre.tmpl | 176 +++++++++++++++++++--------
 1 file changed, 122 insertions(+), 54 deletions(-)

diff --git a/templates/custom/body_inner_pre.tmpl b/templates/custom/body_inner_pre.tmpl
index b704f65..f4e29a4 100644
--- a/templates/custom/body_inner_pre.tmpl
+++ b/templates/custom/body_inner_pre.tmpl
@@ -1,6 +1,5 @@
 <style>
-  /* This style block is copied across all sites using the developer navbar.
-   * For custom styling on this website, add a <style> block after this one. */
+  /* TODO: @web-assets build and prepend version number to templates */
 
   /* Variables. */
   .nav-global {
@@ -32,8 +31,8 @@
 
     --bwa-transition-speed: 150ms;
 
-    --bwa-zindex-fixed: 1030;
     --bwa-zindex-dropdown: 1040;
+    --bwa-zindex-fixed: 1030;
 
     /* Grid. */
     --bwa-spacer: 16px;
@@ -43,6 +42,9 @@
 
     /* Type. */
     --bwa-fs-base: 14px;
+
+    /* Components. */
+    --bwa-navbar-zindex: calc(var(--bwa-zindex-fixed) + 1);
   }
 
   /* Reset. */
@@ -73,7 +75,7 @@
     color: var(--bwa-color-text);
     display: flex;
     position: relative;
-    z-index: var(--zindex-fixed);
+    z-index: var(--bwa-navbar-zindex);
   }
 
   .nav-global h3,
@@ -220,6 +222,10 @@
   }
 
   /* Apps button. */
+  .nav-global {
+    --bwa-nav-global-btn-height: calc(var(--bwa-spacer) * 2.25);
+  }
+
   .nav-global button,
   .nav-global .nav-global-btn {
     -webkit-appearance: button;
@@ -232,7 +238,7 @@
     cursor: pointer;
     display: inline-flex;
     font: inherit;
-    height: calc(var(--bwa-spacer) * 2.25);
+    height: var(--bwa-nav-global-btn-height);
     margin: 0;
     outline: 0;
     overflow: visible;
@@ -242,6 +248,20 @@
     white-space: nowrap;
   }
 
+  /* Button overrides. */
+  /*
+    *Button overrides for Web Assets button components for BWA projects.
+    */
+  .nav-global button,
+  .nav-global .btn {
+    height: var(--bwa-nav-global-btn-height);
+    line-height: 1;
+  }
+
+  .nav-global .btn-accent {
+    color: white !important;
+  }
+
   .nav-global .nav-global-btn.nav-global-btn-primary {
     padding-left: var(--bwa-spacer);
     padding-right: var(--bwa-spacer);
@@ -498,6 +518,24 @@
       text-decoration: none;
     }
   }
+
+  .nav-global .nav-global-nav-links li a.nav-global-link-active {
+    font-variation-settings: 'wght' 700;
+    font-weight: bold;
+  }
+
+  /* Site-specific tweaks. */
+  /* Make sure to start every line with ".nav-global"
+  * so changes affect the developer navbar only. */
+
+  /* Limit navbar width on large screens (optional). */
+  /*
+  @media (min-width: 1380px) { // grid breakpoint 'xl'
+    .nav-global .nav-global-container {
+      max-width: var(--container-width);
+    }
+  }
+  */
 </style>
 
 <div class="nav-global">
@@ -505,21 +543,29 @@
     <nav>
       <a href="https://developer.blender.org/" class="nav-global-logo">
         <svg fill-rule="nonzero" viewBox="0 0 200 162.05">
-          <path d="M61.1 104.56c.05 2.6.88 7.66 2.12 11.61a61.27 61.27 0 0 0 13.24 22.92 68.39 68.39 0 0 0 23.17 16.64 74.46 74.46 0 0 0 30.42 6.32 74.52 74.52 0 0 0 30.4-6.42 68.87 68.87 0 0 0 23.15-16.7 61.79 61.79 0 0 0 13.23-22.97 58.06 58.06 0 0 0 2.07-25.55 59.18 59.18 0 0 0-8.44-23.1 64.45 64.45 0 0 0-15.4-16.98h.02L112.76 2.46l-.16-.12c-4.09-3.14-10.96-3.13-15.46.02-4.55 3.18-5.07 8.44-1.02 11.75l-.02.02 26 21.14-79.23.08h-.1c-6.55.01-12.85 4.3-14.1 9.74-1.27 5.53 3.17 10.11 9.98 10.14v.02l40.15-.07-71.66 55-.27.2c-6.76 5.18-8.94 13.78-4.69 19.23 4.32 5.54 13.51 5.55 20.34.03l39.1-32s-.56 4.32-.52 6.91zm100.49 14.47c-8.06 8.2-19.34 12.86-31.54 12.89-12.23.02-23.5-4.6-31.57-12.79-3.93-4-6.83-8.59-8.61-13.48a35.57 35.57 0 0 1 2.34-29.25 39.1 39.1 0 0 1 9.58-11.4 44.68 44.68 0 0 1 28.24-9.85 44.59 44.59 0 0 1 28.24 9.77 38.94 38.94 0 0 1 9.58 11.36 35.58 35.58 0 0 1 4.33 14.18 35.1 35.1 0 0 1-1.98 15.05 37.7 37.7 0 0 1-8.61 13.52zm-57.6-27.91a23.55 23.55 0 0 1 8.55-16.68 28.45 28.45 0 0 1 18.39-6.57 28.5 28.5 0 0 1 18.38 6.57 23.57 23.57 0 0 1 8.55 16.67c.37 6.83-2.37 13.19-7.2 17.9a28.18 28.18 0 0 1-19.73 7.79c-7.83 0-14.84-3-19.75-7.8a23.13 23.13 0 0 1-7.19-17.88z"></path>
-        </svg><strong>Developer</strong>
+          <path
+            d="M61.1 104.56c.05 2.6.88 7.66 2.12 11.61a61.27 61.27 0 0 0 13.24 22.92 68.39 68.39 0 0 0 23.17 16.64 74.46 74.46 0 0 0 30.42 6.32 74.52 74.52 0 0 0 30.4-6.42 68.87 68.87 0 0 0 23.15-16.7 61.79 61.79 0 0 0 13.23-22.97 58.06 58.06 0 0 0 2.07-25.55 59.18 59.18 0 0 0-8.44-23.1 64.45 64.45 0 0 0-15.4-16.98h.02L112.76 2.46l-.16-.12c-4.09-3.14-10.96-3.13-15.46.02-4.55 3.18-5.07 8.44-1.02 11.75l-.02.02 26 21.14-79.23.08h-.1c-6.55.01-12.85 4.3-14.1 9.74-1.27 5.53 3.17 10.11 9.98 10.14v.02l40.15-.07-71.66 55-.27.2c-6.76 5.18-8.94 13.78-4.69 19.23 4.32 5.54 13.51 5.55 20.34.03l39.1-32s-.56 4.32-.52 6.91zm100.49 14.47c-8.06 8.2-19.34 12.86-31.54 12.89-12.23.02-23.5-4.6-31.57-12.79-3.93-4-6.83-8.59-8.61-13.48a35.57 35.57 0 0 1 2.34-29.25 39.1 39.1 0 0 1 9.58-11.4 44.68 44.68 0 0 1 28.24-9.85 44.59 44.59 0 0 1 28.24 9.77 38.94 38.94 0 0 1 9.58 11.36 35.58 35.58 0 0 1 4.33 14.18 35.1 35.1 0 0 1-1.98 15.05 37.7 37.7 0 0 1-8.61 13.52zm-57.6-27.91a23.55 23.55 0 0 1 8.55-16.68 28.45 28.45 0 0 1 18.39-6.57 28.5 28.5 0 0 1 18.38 6.57 23.57 23.57 0 0 1 8.55 16.67c.37 6.83-2.37 13.19-7.2 17.9a28.18 28.18 0 0 1-19.73 7.79c-7.83 0-14.84-3-19.75-7.8a23.13 23.13 0 0 1-7.19-17.88z" />
+        </svg>
+        <strong>Developer</strong>
       </a>
 
       <button class="nav-global-logo js-dropdown-toggle" data-toggle-menu-id="nav-global-nav-links">
         <svg fill-rule="nonzero" viewBox="0 0 200 162.05">
-          <path d="M61.1 104.56c.05 2.6.88 7.66 2.12 11.61a61.27 61.27 0 0 0 13.24 22.92 68.39 68.39 0 0 0 23.17 16.64 74.46 74.46 0 0 0 30.42 6.32 74.52 74.52 0 0 0 30.4-6.42 68.87 68.87 0 0 0 23.15-16.7 61.79 61.79 0 0 0 13.23-22.97 58.06 58.06 0 0 0 2.07-25.55 59.18 59.18 0 0 0-8.44-23.1 64.45 64.45 0 0 0-15.4-16.98h.02L112.76 2.46l-.16-.12c-4.09-3.14-10.96-3.13-15.46.02-4.55 3.18-5.07 8.44-1.02 11.75l-.02.02 26 21.14-79.23.08h-.1c-6.55.01-12.85 4.3-14.1 9.74-1.27 5.53 3.17 10.11 9.98 10.14v.02l40.15-.07-71.66 55-.27.2c-6.76 5.18-8.94 13.78-4.69 19.23 4.32 5.54 13.51 5.55 20.34.03l39.1-32s-.56 4.32-.52 6.91zm100.49 14.47c-8.06 8.2-19.34 12.86-31.54 12.89-12.23.02-23.5-4.6-31.57-12.79-3.93-4-6.83-8.59-8.61-13.48a35.57 35.57 0 0 1 2.34-29.25 39.1 39.1 0 0 1 9.58-11.4 44.68 44.68 0 0 1 28.24-9.85 44.59 44.59 0 0 1 28.24 9.77 38.94 38.94 0 0 1 9.58 11.36 35.58 35.58 0 0 1 4.33 14.18 35.1 35.1 0 0 1-1.98 15.05 37.7 37.7 0 0 1-8.61 13.52zm-57.6-27.91a23.55 23.55 0 0 1 8.55-16.68 28.45 28.45 0 0 1 18.39-6.57 28.5 28.5 0 0 1 18.38 6.57 23.57 23.57 0 0 1 8.55 16.67c.37 6.83-2.37 13.19-7.2 17.9a28.18 28.18 0 0 1-19.73 7.79c-7.83 0-14.84-3-19.75-7.8a23.13 23.13 0 0 1-7.19-17.88z"></path>
-        </svg><strong>Developer</strong>
+          <path
+            d="M61.1 104.56c.05 2.6.88 7.66 2.12 11.61a61.27 61.27 0 0 0 13.24 22.92 68.39 68.39 0 0 0 23.17 16.64 74.46 74.46 0 0 0 30.42 6.32 74.52 74.52 0 0 0 30.4-6.42 68.87 68.87 0 0 0 23.15-16.7 61.79 61.79 0 0 0 13.23-22.97 58.06 58.06 0 0 0 2.07-25.55 59.18 59.18 0 0 0-8.44-23.1 64.45 64.45 0 0 0-15.4-16.98h.02L112.76 2.46l-.16-.12c-4.09-3.14-10.96-3.13-15.46.02-4.55 3.18-5.07 8.44-1.02 11.75l-.02.02 26 21.14-79.23.08h-.1c-6.55.01-12.85 4.3-14.1 9.74-1.27 5.53 3.17 10.11 9.98 10.14v.02l40.15-.07-71.66 55-.27.2c-6.76 5.18-8.94 13.78-4.69 19.23 4.32 5.54 13.51 5.55 20.34.03l39.1-32s-.56 4.32-.52 6.91zm100.49 14.47c-8.06 8.2-19.34 12.86-31.54 12.89-12.23.02-23.5-4.6-31.57-12.79-3.93-4-6.83-8.59-8.61-13.48a35.57 35.57 0 0 1 2.34-29.25 39.1 39.1 0 0 1 9.58-11.4 44.68 44.68 0 0 1 28.24-9.85 44.59 44.59 0 0 1 28.24 9.77 38.94 38.94 0 0 1 9.58 11.36 35.58 35.58 0 0 1 4.33 14.18 35.1 35.1 0 0 1-1.98 15.05 37.7 37.7 0 0 1-8.61 13.52zm-57.6-27.91a23.55 23.55 0 0 1 8.55-16.68 28.45 28.45 0 0 1 18.39-6.57 28.5 28.5 0 0 1 18.38 6.57 23.57 23.57 0 0 1 8.55 16.67c.37 6.83-2.37 13.19-7.2 17.9a28.18 28.18 0 0 1-19.73 7.79c-7.83 0-14.84-3-19.75-7.8a23.13 23.13 0 0 1-7.19-17.88z" />
+        </svg>
+        <strong>Developer</strong>
+        <i class="i-chevron-right nav-global-icon-alt"></i>
+        <!--
+        Use nav-global-icon instead of 'nav-global-icon-alt' if fontutti is not present
         <svg class="nav-global-icon nav-global-icon-dropdown-toggle" height="100" width="100" viewBox="0 0 1000 1000">
           <path
             d="m 206.53824,376.41174 a 42,42 0 0 1 71,-29 l 221,220 220,-220 a 42,42 0 1 1 59,59 l -250,250 a 42,42 0 0 1 -59,0 l -250,-250 a 42,42 0 0 1 -12,-30 z" />
         </svg>
+        -->
       </button>
 
-      <ul class="nav-global-nav-links nav-global-dropdown js-dropdown-menu js-nav-global-dropdown" id="nav-global-nav-links">
+      <ul class="nav-global-nav-links nav-global-dropdown" id="nav-global-nav-links">
         <li>
           <a href="https://projects.blender.org" class="is-active">Projects</a>
         </li>
@@ -538,11 +584,32 @@
       </ul>
 
       <ul class="nav-global-links-right">
+        <!-- Use 'navbar-search' only if Web Assets is present -->
+        <li class="d-lg-inline-flex d-none">
+          <search>
+            <form class="navbar-search">
+              <input aria-label="Search" aria-describedby="nav-search-button" class="form-control" type="text" placeholder="Search...">
+                <button id="nav-search-button" type="submit">
+                  <i class="i-search"></i>
+                </button>
+            </form>
+          </search>
+        </li>
+        <li class="d-lg-inline-flex d-none">
+          <a class="nav-global-btn nav-global-btn-primary"><i class="i-blender"></i><span>Call to action</span></a>
+        </li>
+        <li>
+          <button class="js-toggle-theme-btn"><i class="i-adjust js-toggle-theme-btn-icon"></i></button>
+        </li>
+        <li>
+          <a class="nav-global-btn" href="#"><i class="i-bell"></i></a>
+        </li>
         <li>
           <div class="nav-global-apps-dropdown-container">
             <button class="js-dropdown-toggle" data-toggle-menu-id="nav-global-apps-menu">
               <svg class="nav-global-icon" height="100" width="100" viewBox="0 0 1000 1000">
-                <path d="m 150.5,899 a 50,50 0 0 1 -49,-50 V 749 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 749 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 749 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m -598,-299 a 50,50 0 0 1 -49,-50 V 450 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 450 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 450 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m -598,-299 a 50,50 0 0 1 -49,-50 V 151 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 151 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 151 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z"></path>
+                <path
+                  d="m 150.5,899 a 50,50 0 0 1 -49,-50 V 749 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 749 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 749 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m -598,-299 a 50,50 0 0 1 -49,-50 V 450 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 450 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 450 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m -598,-299 a 50,50 0 0 1 -49,-50 V 151 a 50,50 0 0 1 49,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 151 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z m 299,0 a 50,50 0 0 1 -50,-50 V 151 a 50,50 0 0 1 50,-50 h 100 a 50,50 0 0 1 50,50 v 100 a 50,50 0 0 1 -50,50 z" />
               </svg>
             </button>
 
@@ -705,58 +772,59 @@
 </style>
 
 <script>
-  // TODO: revise component pre-compiled JavaScript in web-assets
-  const dropdownToggles = document.getElementsByClassName("js-dropdown-toggle");
-  const btnActiveClass = 'nav-global-btn-active';
-  const isVisibleClass = 'is-visible';
+  /* Simple dropdown toggle.
+  * Synced with 'navbar.js' manually. */
+  function dropdownToggle() {
+    let dropdownToggleBtn = this;
+    let dropdownMenuName;
+    let dropdownMenuItem;
 
-  /* Hide all dropdowns. */
-  function dropdownHideAll() {
-    const dropdownMenus = document.getElementsByClassName("js-dropdown-menu");
-
-    if (dropdownMenus) {
-      for (let i = 0; i < dropdownMenus.length; i++) {
-        dropdownMenus[i].classList.remove(isVisibleClass);
-      }
+    if (dropdownToggleBtn.hasAttribute('data-toggle-menu-id')) {
+      dropdownMenuName = dropdownToggleBtn.getAttribute('data-toggle-menu-id');
+      dropdownMenuItem = document.getElementById(dropdownMenuName);
+    } else {
+      dropdownMenuItem = dropdownToggleBtn.nextElementSibling;
     }
 
-    /* Remove styling from all dropdown toggles. */
-    for (let i = 0; i < dropdownToggles.length; i++) {
-      dropdownToggles[i].classList.remove(btnActiveClass);
+    if (!dropdownMenuItem) {
+      return;
     }
+
+    dropdownToggleBtn.classList.toggle('active');
+    dropdownMenuItem.classList.toggle('is-visible');
   }
 
-  for (let i = 0; i < dropdownToggles.length; i++) {
-    dropdownToggles[i].addEventListener("click", function (e) {
-      e.stopPropagation();
+  window.onload = function(e) {
+    const dropdownToggles = document.querySelectorAll('.js-dropdown-toggle, .js-show-toggle');
 
-      const dropdownId = this.getAttribute('data-toggle-menu-id');
-      const el = document.getElementById(dropdownId);
+    for (var i = 0; i < dropdownToggles.length; i++) {
+      dropdownToggles[i].addEventListener('click', dropdownToggle, false);
+    }
 
-      if (el) {
-        /* If the button is already active, remove styling. */
-        if (el.classList.contains(isVisibleClass)) {
-          dropdownHideAll();
-        } else {
-          /* Style button as active and show menu. */
-          this.classList.add(btnActiveClass);
-          el.classList.add(isVisibleClass);
+    /* Close all menus, to prevent multiple menus open at the same time. */
+    document.onclick = function (e) {
+      const targetMenuId = e.target.getAttribute('data-toggle-menu-id');
+      const targetMenuElement = document.getElementById(targetMenuId);
+
+      /* If the clicked element is not a menu, or it's not the menu
+      * that we are trying to open, close it. */
+      if (!e.target.classList.contains('.js-dropdown-toggle') || targetMenuElement && targetMenuElement.classList.contains('is-visible')) {
+        const dropdownMenus = document.querySelectorAll('.dropdown-menu, .js-dropdown-menu');
+
+        if (dropdownMenus.length == 0) { return };
+
+        for (var i = 0; i < dropdownMenus.length; i++) {
+          if (dropdownMenus[i].id && dropdownMenus[i].id != targetMenuId) {
+            dropdownMenus[i].classList.remove('is-visible', 'active');
+          }
         }
-      }
-    });
-  }
 
-  /* Hide all dropdowns when clicking anywhere except menus. */
-  document.body.addEventListener("click", function (e) {
-    if (!e.target.classList.contains("js-dropdown-menu")) {
-      dropdownHideAll();
+        for (var i = 0; i < dropdownToggles.length; i++) {
+          if (dropdownToggles[i].id && dropdownToggles[i].id != targetMenuId) {
+            dropdownToggles[i].classList.remove('is-active', 'active');
+          }
+        }
+      };
     }
-  });
-
-  /* Hide all dropdowns when pressing Esc. */
-  window.addEventListener('keydown', function (event) {
-    if (event.key === 'Escape') {
-      dropdownHideAll();
-    }
-  });
+  };
 </script>