navigation: links to css files for static pages are added dynamically…

… to the dom.head on activation and removed upon passivation.
WebEngineering-FHNW · Jan 26, 2024 · 9c487fb · 9c487fb
1 parent f859a54
commit 9c487fb
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 26 deletions.
diff --git a/docs/src/examples/navigation/basic-nav-app.js b/docs/src/examples/navigation/basic-nav-app.js
@@ -19,13 +19,15 @@ registerSiteMap(null /* no parent at start */, navigationController,
             icon:  resourceBaseURI + "img/icons/house.svg",  // override naming convention
             pages: [
                 {
-                    name: "home",
-                    file: './pages/static/home.html',
-                    home: true,
+                    home:  true,
+                    name:  "home",
+                    file:  './pages/static/home.html',
+                    style: './pages/static/home.css',
                 },
                 {
-                    name: "about",
-                    file: './pages/static/about.html'
+                    name:  "about",
+                    file:  './pages/static/about.html',
+                    style: './pages/static/about.css'
                 },
             ]
         }

diff --git a/docs/src/examples/navigation/basic-nav-view.html b/docs/src/examples/navigation/basic-nav-view.html
@@ -8,28 +8,23 @@
 
         <!--        Styles that should apply to all pages in the Kolibri app       -->
 
-        <link href="../../../css/kolibri-base-light.css" rel="stylesheet">
-
-
-<!--        these page styles should be referred to by their respective page -->
-        <link rel="stylesheet" href="./pages/static/home.css">
-        <link rel="stylesheet" href="./pages/static/about.css">
+        <link rel="stylesheet" href="../../../css/kolibri-base-light.css" >
 
+<!--        TODO: projector-specific styles should be added dynamically-->
         <link rel="stylesheet" href="../../kolibri/navigation/projector/dashboard/dashboardNavigationProjector.css">
 
         <style>
-
             h1 {
                 margin-top: 1em;
                 text-align: center;
             }
-
             section {
                 max-width:  40em;
                 margin:     1em auto 4em auto;
             }
-
         </style>
+
+        <!-- Page-specific styles will dynamically be added below -->
     </head>
     <body>
 <!--    The main hooks  that any content can be pinned to-->

diff --git a/docs/src/kolibri/navigation/applicationConfig.js b/docs/src/kolibri/navigation/applicationConfig.js
@@ -25,7 +25,8 @@ const registerSiteMap = (parentController, navigationController, pages) => {
             StaticPageProjector(
                 /** @type { !PageControllerType } */ pageController,
                 document.getElementById("content"),
-                page.file);
+                page.file,
+                page.style);
         }
         registerSiteMap(pageController, navigationController, page.pages);
     });

diff --git a/docs/src/kolibri/navigation/pageController.js b/docs/src/kolibri/navigation/pageController.js
@@ -49,13 +49,13 @@ export { PageController }
  * @property { () => ?PageControllerType } getParent                - a getter function that returns the parent of the page or null. See {@link setParent} for more details.
  * @property { (isNavigational: Boolean) => void } setNavigational  - a setter function that sets the navigational state of the page. The navigational state declares if a page should be reachable through navigation or if an error should be returned to the user. Note: a page can be unnavigational but still visible meaning that a user can see the page in the navigation but cannot navigate to it directly with the hash. See {@link setVisible} if you want to make it invisible.
  * @property { () => Boolean } isNavigational                       - a getter function that returns the navigational state of the page. See {@link setNavigational} for more details.
- * @property { (callback: ValueChangeCallback<Boolean>) => void } onActiveChanged             - a function that registers an {@link ValueChangeCallback} that will be called whenever the active state changes.
- * @property { (callback: ValueChangeCallback<String>) => void } onIconPathChanged            - a function that registers an {@link ValueChangeCallback} that will be called whenever the icon path changes.
- * @property { (callback: ValueChangeCallback<Boolean>) => void } onVisitedChanged            - a function that registers an {@link ValueChangeCallback} that will be called whenever the visited state changes.
- * @property { (callback: ValueChangeCallback<String>) => void } onValueChanged               - a function that registers an {@link ValueChangeCallback} that will be called whenever the value changes.
- * @property { (callback: ValueChangeCallback<Boolean>) => void } onNavigationalChanged       - a function that registers an {@link ValueChangeCallback} that will be called whenever the navigational state changes.
- * @property { (callback: ValueChangeCallback<Boolean>) => void } onVisibleChanged            - a function that registers an {@link ValueChangeCallback} that will be called whenever the visible state changes.
- * @property { (callback: ValueChangeCallback<?PageControllerType>) => void } onParentChanged - a function that registers an {@link ValueChangeCallback} that will be called whenever the parent changes.
+ * @property { (cb: ValueChangeCallback<Boolean>) => void } onActiveChanged             - a function that registers an {@link ValueChangeCallback} that will be called whenever the active state changes.
+ * @property { (cb: ValueChangeCallback<String>) => void } onIconPathChanged            - a function that registers an {@link ValueChangeCallback} that will be called whenever the icon path changes.
+ * @property { (cb: ValueChangeCallback<Boolean>) => void } onVisitedChanged            - a function that registers an {@link ValueChangeCallback} that will be called whenever the visited state changes.
+ * @property { (cb: ValueChangeCallback<String>) => void } onValueChanged               - a function that registers an {@link ValueChangeCallback} that will be called whenever the value changes.
+ * @property { (cb: ValueChangeCallback<Boolean>) => void } onNavigationalChanged       - a function that registers an {@link ValueChangeCallback} that will be called whenever the navigational state changes.
+ * @property { (cb: ValueChangeCallback<Boolean>) => void } onVisibleChanged            - a function that registers an {@link ValueChangeCallback} that will be called whenever the visible state changes.
+ * @property { (cb: ValueChangeCallback<?PageControllerType>) => void } onParentChanged - a function that registers an {@link ValueChangeCallback} that will be called whenever the parent changes.
  */
 
 /**

diff --git a/docs/src/kolibri/navigation/projector/page/staticPageProjector.js b/docs/src/kolibri/navigation/projector/page/staticPageProjector.js
@@ -1,3 +1,5 @@
+import {dom} from "../../../util/dom.js";
+
 export { StaticPageProjector }
 
 /**
@@ -15,16 +17,18 @@ export { StaticPageProjector }
  * @param { !PageControllerType } pageController - the pageController that controls the PageModelType we want to observe. Mandatory.
  * @param { !HTMLDivElement } pinToElement - the element in the DOM that we want to bind to append the pageContent. Mandatory.
  * @param { String } contentFilePath - the path to the static html content relative to index.html! Can be null.
+ * @param { ?String } styleFilePath  - the path to the static css file! Optional. Defaults to ''.
  * @returns { PageProjectorType }
  * @example
  * const homePageController = PageController("home", null);
  * homePageController.setIcon('./navigation/icons/house.svg');
  * HomePageProjector(homePageController, pinToContentElement, './pages/home/home.html');
  */
-const StaticPageProjector = (pageController, pinToElement, contentFilePath) => {
+const StaticPageProjector = (pageController, pinToElement, contentFilePath, styleFilePath = '') => {
     const pageWrapper = pinToElement;
     const contentWrapper = document.createElement("div");
     const header = document.createElement("h1");
+    const [styleSheetElement] = dom(`<link rel="stylesheet" href="${styleFilePath}">`);
 
     /**
      * A function that initializes the content and stores it in the pageWrapper.
@@ -80,7 +84,7 @@ const StaticPageProjector = (pageController, pinToElement, contentFilePath) => {
      * @param filePath - the filePath that belongs to the static page content
      * @return { Promise<String> }
      */
-    const fetchPageContent = async (filePath) => {
+    const fetchPageContent = async (filePath) => { // TODO: use utility function
         try {
             const response = await fetch(filePath, {
                     headers: {
@@ -93,17 +97,25 @@ const StaticPageProjector = (pageController, pinToElement, contentFilePath) => {
                 const content = await response.text();
                 return content;
             } else {
+                // TODO: proper logging.
                 throw new Error(`HTTP error: ${response.status}`);
             }
         } catch (e) {
             console.error(e);
         }
     };
 
-    pageController.onActiveChanged(active => {
+    pageController.onActiveChanged( active => {
         if (active) {
             projectPage();
         }
+        if(styleFilePath) {
+            if (active) {
+                document.head.append(styleSheetElement);
+            } else {
+                styleSheetElement.parentElement.removeChild(styleSheetElement);
+            }
+        }
     });
 
     /**
@@ -113,7 +125,7 @@ const StaticPageProjector = (pageController, pinToElement, contentFilePath) => {
      */
     const setH1 = newValue => {
         if (undefined !== newValue) {
-            header.innerText = newValue
+            header.textContent = newValue
         }
     };