navigation: put the icons on the simple navigation page for testing.

WebEngineering-FHNW · Dec 15, 2024 · 1553893 · 1553893
1 parent a3622c1
commit 1553893
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 15 deletions.
diff --git a/docs/img/icons/house.js b/docs/img/icons/house.js
diff --git a/docs/src/examples/navigation/simple/home.js b/docs/src/examples/navigation/simple/home.js
@@ -13,7 +13,7 @@ const PAGE_CLASS = URI_HASH_HOME.substring(1);
  * @constructor
  */
 const HomePage = () => Page(/** @type { PageDataType } */{
-    titleText:         "Kolibri New Navigation",
+    titleText:         "New Navigation",
     activationMs:       1000,
     passivationMs:      1000,
     pageClass:          PAGE_CLASS,

diff --git a/docs/src/examples/navigation/simple/starter.js b/docs/src/examples/navigation/simple/starter.js
@@ -9,7 +9,8 @@ import {
         URI_HASH_HOME,
         URI_HASH_MASTER_DETAIL,
         URI_HASH_UNSTYLED
-}                                           from "../../../customize/uriHashes.js";
+}                                                   from "../../../customize/uriHashes.js";
+import {ICON_HOUSE, ICON_PLUS_MINUS, ICON_TERMINAL} from "../../../customize/icons.js";
 
 
 defaultConsoleLogging("ch.fhnw.kolibri", LOG_INFO);
@@ -21,8 +22,15 @@ siteController.registerPage(URI_HASH_HOME,          HomePage());
 siteController.registerPage(URI_HASH_UNSTYLED,      UnstyledPage());
 siteController.registerPage(URI_HASH_MASTER_DETAIL, MasterDetailPage());
 
-SimpleNavigationProjector(siteController, siteProjector.sideNavigationElement, true);
-SimpleNavigationProjector(siteController, siteProjector.topNavigationElement, false);
+const hash2icon = /** @type { Object } */{
+    [URI_HASH_HOME]             : ICON_HOUSE,
+    [URI_HASH_UNSTYLED]         : ICON_TERMINAL,
+    [URI_HASH_MASTER_DETAIL]    : ICON_PLUS_MINUS,
+};
+const noIcons = /** @type { Object } */ {}; // pass to avoid icons in the navigation
+
+SimpleNavigationProjector(siteController, siteProjector.sideNavigationElement, hash2icon, true);
+SimpleNavigationProjector(siteController, siteProjector.topNavigationElement,  hash2icon,   false);
 
 siteController.gotoUriHash(window.location.hash);
 
diff --git a/docs/src/kolibri/navigation/projector/simple/simpleNavigationProjector.js b/docs/src/kolibri/navigation/projector/simple/simpleNavigationProjector.js
@@ -1,4 +1,5 @@
-import {select} from "../../../util/dom.js";
+import {select, dom } from "../../../util/dom.js";
+import {icon}         from "../../../style/icon.js";
 
 export { SimpleNavigationProjector }
 
@@ -23,6 +24,7 @@ const iconSVGStr = `
  * @constructor
  * @param { !SiteControllerType } siteController - the source of the information that we display
  * @param { !HTMLDivElement }     root           - where to mount the view
+ * @param { Object.<UriHashType, IconNameType> } hash2icon - maps hashes to their icons
  * @param { Boolean= }            canHide        - whether this navigation can hide itself, defaults to false
  * @return { NavigationProjectorType }
  * @example
@@ -37,7 +39,7 @@ const iconSVGStr = `
  * SimpleNavigationProjector(siteController, siteProjector.topNavigationElement);
  */
 
-const SimpleNavigationProjector = (siteController, root, canHide=false) => {
+const SimpleNavigationProjector = (siteController, root, hash2icon, canHide=false) => {
 
     root.innerHTML = `<nav class="${PAGE_CLASS}"></nav> `;
 
@@ -56,6 +58,19 @@ const SimpleNavigationProjector = (siteController, root, canHide=false) => {
               .map( ([hash, page]) => `<a href="${hash}">${page.titleText}</a>`)
               .join(" ");
 
+        if (Object.keys(hash2icon).length > 0) { // add icons to the anchors if requested
+            const anchors = select(navigationEl, "a");
+            anchors.forEach$( anchorElement => {
+                const hash = anchorElement.getAttribute("href");
+                // const [div] = dom(`<div class="icon_anchor"></div>`);
+                const iconSVG = icon(hash2icon[hash]);
+                // div.append(...iconSVG);
+                anchorElement.prepend(...iconSVG);
+                // div.append(anchorElement);
+            })
+
+        }
+
         // view binding is done by the browser implicitly when following the link
 
         // bind all anchors to their "visited" state (:visited does not allow much)
@@ -91,7 +106,6 @@ const projectorStyle = `
                     a, a.current {      /* hide the anchors */
                         width:          0;
                         color:          transparent;
-                        pointer-events: none;
                     } 
                 }
                 .toggler {              /* provide a box for the svg */
@@ -101,6 +115,15 @@ const projectorStyle = `
                     rotate:             180deg;
                     transition:         rotate .3s ease-in-out .1s; /* delayed and shorter than the width transition */
                 }
+                a svg {
+                    --icon-width:       1.6rem;
+                    width:              var(--icon-width);
+                    margin-inline:      calc( (3rem - var(--icon-width)) / 2); /* logo-width 3rem */
+                    fill:               var(--kb-color-hsl-lavender-700);
+                    aspect-ratio:       1;
+                    stroke:             none;
+                    transform:          translateY(20%);
+                }
                 svg {
                     fill:               none;
                     stroke-width:       2;
@@ -122,12 +145,15 @@ const projectorStyle = `
                 a.visited {
                     text-decoration:    none;
                 }
-                a.visited:not(.current) {
+                a.visited:not(.current), a.visited:not(.current) svg {
                     filter:             brightness(150%) grayscale(60%);
                 }
                 a.current {
                     color:              var(--kolibri-color-accent, deeppink);
                 }
+                a.current svg {
+                    fill:               var(--kolibri-color-accent, deeppink);
+                }
             }
         }