Updates 01-nav

“Link-less” category titles not working in html based on nav.adoc

Author: edwini

src/css/helios-gcx.css

@@ -1,3 +1,11 @@
+/* autoprefixer: off */
+
+:root {
+    --nav-background: #FFF;
+    --navbar-height: 0;
+    --announcement-height: 48px;
+}
+
 @font-face {
     font-family: 'Material Icons';
     font-style: normal;
@@ -18,12 +26,6 @@
     -webkit-font-smoothing: antialiased;
 }
 
-:root {
-    --nav-background: #FFF;
-    --navbar-height: 0;
-    --announcement-height: 48px;
-}
-
 [data-template="landing"] .toc.sidebar {
     display: none;
 }
@@ -454,7 +456,7 @@ gcx-full .full-articles {
 .dark-mode .doc .listingblock .title,
 .dark-mode .doc .openblock .title,
 .dark-mode .doc .tableblock caption {
-    color: var(--white);
+    color: var(--body-background);
 }
 
 .doc .sect1 {
@@ -975,9 +977,9 @@ label.switch_label:after {
 /* gcx-schema-sample-app-gallery */
 
 .dark-mode gcx-schema-sample-app-gallery {
-    --gcx-app-appgallery-h4-color: var(--white);
-    --gcx-app-gallery-p-color: var(--color-interface-night-300);
-    --gcx-sample-appgallery-card-background: var(--color-interface-night-900);
+    --gcx-app-appgallery-h4-color: #fff;
+    --gcx-app-gallery-p-color: #A6B1C2;
+    --gcx-sample-appgallery-card-background: #20293A;
     --gcx-sample-appgallery-card-border: 2px solid #2E394E;
 }
 
@@ -1129,8 +1131,8 @@ label.switch_label:after {
 /* Dark mode: Bottom Sidebar*/
 
 .dark-mode gcx-schema-bottom-sidebar {
-    --gcx-sidebar-h4-color: var(--white);
-    --gcx-sidebar-li-color: var(--white);
+    --gcx-sidebar-h4-color: #fff;
+    --gcx-sidebar-li-color: #fff;
 }
 
 

src/js/01-nav.js

@@ -1,4 +1,5 @@
-;(function () {
+;
+(function () {
   'use strict'
 
   var SECT_CLASS_RX = /^sect(\d)$/
@@ -135,9 +136,20 @@
   }
 
   function trapEvent (e) {
+    toggleByListElement(e)
     e.stopPropagation()
   }
 
+  function toggleByListElement (event) {
+    if (!(event.target.matches('button') ||
+                event.target.matches('path') ||
+                event.target.matches('svg')) &&
+            event.target.closest('li.nav-item.toggler')) {
+      console.log(event.target)
+      event.target.closest('li.nav-item.toggler').classList.toggle('is-active')
+    }
+  }
+
   function scrollItemToMidpoint (panel, el) {
     var rect = panel.getBoundingClientRect()
     var effectiveHeight = rect.height

src/js/08-gcx-helios.js

@@ -22,6 +22,22 @@ window.addEventListener('DOMContentLoaded', (event) => {
   }
 
   document.addEventListener('click', function (event) {
+    //No es un clic en el sidebar
+    //if (!event.target.matches('li[data-depth="1"]') && !event.target.matches('.switch')) return;
+    /*    if (event.target.closest('li.nav-item.toggler')) {
+          console.log(event.target)
+          event.target.closest('li.nav-item.toggler').classList.toggle('is-active')
+        }
+        /*if ((event.target.matches('span.nav-text') ||
+                    event.target.matches('button.nav-item-toggle')) &&
+                (event.target.offsetParent.matches('li[data-depth="1"]') ||
+                    event.target.offsetParent.matches('li[data-depth="0"]'))) {
+                event.target.offsetParent.classList.toggle('is-active');
+            }
+            if (event.target.matches('li[data-depth="1"]') ||
+                event.target.matches('li[data-depth="0"]')) {
+                event.target.classList.toggle('is-active');
+            }*/
     if (event.target.matches('.switch')) {
       var root = document.getElementsByTagName('html')[0]
       if (event.target.checked) {
@@ -34,10 +50,6 @@ window.addEventListener('DOMContentLoaded', (event) => {
     }
   }, false)
 })
-document.querySelector('.nav-item.toggler').addEventListener('click', function (event) {
-  if (!event.target.matches('li[data-depth="1"]') && !event.target.matches('.switch')) return
-  if (event.target.matches('li[data-depth="1"]')) { event.target.classList.toggle('is-active') }
-})
 
 document.querySelector('#collapse').addEventListener('click', function (event) {
   const sidebar = document.querySelector('.sidebar')