navigation: more streamlining and example inclusion

contrib/p6_schnidrig_altermatt/prototype/getting-started-tutorial/app-solution.js

@@ -1,5 +1,5 @@
 import { PageController }                 from "../../prototype/pages/pageController.js";
-import { NavigationController }           from "../../prototype/navigation/navigationController.js";
+import { NavigationController }           from "../../../../docs/src/kolibri/navigation/navigationController.js";
 import { PageProjector }                  from "./pages/pageProjector/pageProjector.js";
 import { DebugPageProjector }             from "./pages/debug/debugPageProjector.js";
 import { NavigationProjector }            from "./navigations/bubble-state/bubblestateNavigationProjector.js";

contrib/p6_schnidrig_altermatt/prototype/getting-started-tutorial/index.html

@@ -28,5 +28,5 @@
         <div id="debug"></div>
         <div id="content"></div>
     </body>
-    <script type="module" src="app.js"></script>
+    <script type="module" src="app-solution.js"></script>
 </html>

contrib/p6_schnidrig_altermatt/prototype/pages/pageController.js

@@ -48,13 +48,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: onValueChangeCallback<Boolean>) => void } onActiveChanged             - a function that registers an {@link onValueChangeCallback} that will be called whenever the active state changes.
- * @property { (callback: onValueChangeCallback<String>) => void } onIconPathChanged            - a function that registers an {@link onValueChangeCallback} that will be called whenever the icon path changes.
- * @property { (callback: onValueChangeCallback<Boolean>) => void } onVisitedChanged            - a function that registers an {@link onValueChangeCallback} that will be called whenever the visited state changes.
- * @property { (callback: onValueChangeCallback<String>) => void } onValueChanged               - a function that registers an {@link onValueChangeCallback} that will be called whenever the value changes.
- * @property { (callback: onValueChangeCallback<Boolean>) => void } onNavigationalChanged       - a function that registers an {@link onValueChangeCallback} that will be called whenever the navigational state changes.
- * @property { (callback: onValueChangeCallback<Boolean>) => void } onVisibleChanged            - a function that registers an {@link onValueChangeCallback} that will be called whenever the visible state changes.
- * @property { (callback: onValueChangeCallback<?PageControllerType>) => void } onParentChanged - a function that registers an {@link onValueChangeCallback} that will be called whenever the parent changes.
+ * @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.
  */
 
 /**
@@ -141,4 +141,4 @@ const PageController = (qualifier, dynamicContentControllers) => {
         onVisibleChanged:        pageModel.getPageObs(VISIBLE).onChange,
         onParentChanged:         pageModel.getPageObs(PARENT).onChange,
     }
-};
+};

contrib/p6_schnidrig_altermatt/prototype/pages/person/personController.js

@@ -58,7 +58,7 @@ noSelection.detailed .getObs(VALUE)   .setValue(false);    // detail view can fo
  * @property { (T) => void } setSelectedModel
  * @property { ()  => T    } getSelectedModel
  * @property { () => void  } clearSelection
- * @property { (callback: onValueChangeCallback<T>) => void } onModelSelected
+ * @property { (callback: ValueChangeCallback<T>) => void } onModelSelected
  */
 
 /**

contrib/p6_schnidrig_altermatt/prototype/pages/workday/dayController.js

@@ -37,7 +37,7 @@ const DayModel = () => {
  * @property { SimpleInputControllerType<Number> }  pmStartCtrl
  * @property { SimpleInputControllerType<Number> }  pmEndCtrl
  * @property { () => Number }                       getTotal        - the total minutes in this day, derived
- * @property { (callback: !onValueChangeCallback<Number>) => void } onTotalChanged - when total changes
+ * @property { (callback: !ValueChangeCallback<Number>) => void } onTotalChanged - when total changes
  */
 /**
  * Creating a day controller made from four simple input controllers for the four time values (as numbers

contrib/p6_schnidrig_altermatt/prototype/pages/workweek/workweek/weekController.js

@@ -31,7 +31,7 @@ const WeekModel = () => {
 /**
  * @typedef WeekControllerType
  * @property { (dayController: !DayControllerType )       => void } addDayController
- * @property { (callback: !onValueChangeCallback<Number>) => void } onTotalWeekMinutesChanged
+ * @property { (callback: !ValueChangeCallback<Number>) => void } onTotalWeekMinutesChanged
  */
 
 /**

contrib/p6_schnidrig_altermatt/prototype/showcase-app/app.js

@@ -1,17 +1,17 @@
-import { NavigationController }                            from '../navigation/navigationController.js';
-import { CardNavigationProjector }                         from '../navigation/final-prototypes/card/cardNavigationProjector.js';
-import { DashboardRefinedProjector }                       from "../navigation/final-prototypes/dashboard-refined/dashboardRefinedNavigationProjector.js";
-import { FlowerNavigationProjector }                       from "../navigation/final-prototypes/flower/flowerNavigationProjector.js";
-import { BubbleStateNavigationProjector }                  from "../navigation/final-prototypes/bubble-state/bubblestateNavigationProjector.js";
-import { BreadCrumbProjector }                             from "../navigation/final-prototypes/bread-crumbs/breadCrumbProjector.js";
-import { PageSwitchProjector }                             from '../navigation/final-prototypes/page-switch/pageSwitchProjector.js';
+import { NavigationController }                            from '../../../../docs/src/kolibri/navigation/navigationController.js';
+import { CardNavigationProjector }                         from '../../../../docs/src/kolibri/navigation/projector/card/cardNavigationProjector.js';
+// import { DashboardRefinedProjector }                       from "../../../../docs/src/kolibri/navigation/projector/dashboard-refined/dashboardRefinedNavigationProjector.js";
+import { FlowerNavigationProjector }                       from "../../../../docs/src/kolibri/navigation/projector/flower/flowerNavigationProjector.js";
+import { BubbleStateNavigationProjector }                  from "../../../../docs/src/kolibri/navigation/projector/bubble/bubbleNavigationProjector.js";
+import { BreadCrumbProjector }                             from "../../../../docs/src/kolibri/navigation/projector/breadcrumb/breadCrumbProjector.js";
+// import { PageSwitchProjector }                             from '../../../../docs/src/kolibri/navigation/projector/page-switch/pageSwitchProjector.js';
 import { PageController }                                  from '../pages/pageController.js';
 import { ForbiddenPageProjector }                          from '../pages/error-pages/403/forbiddenPageProjector.js';
 import { PageNotFoundProjector }                           from '../pages/error-pages/404/pageNotFoundProjector.js';
 import { StaticPageProjector }                             from '../pages/StaticPageProjector.js';
 import { DebugPageProjector }                              from '../pages/debug/debugPageProjector.js';
 import { StyleGuidePageProjector }                         from '../pages/style-guide/styleGuidePageProjector.js';
-import { SimpleFormController }                            from "../kolibri/projector/simpleForm/simpleFormController.js";
+import { SimpleFormController }                            from "../../../../docs/src/kolibri/projector/simpleForm/simpleFormController.js";
 import { SimpleFormPageProjector }                         from "../pages/simpleform/simpleFormPageProjector.js";
 import { TestCasesPageProjector }                          from "../pages/test-cases/testCasesPageProjector.js";
 import { DayController }                                   from "../pages/workday/dayController.js";
@@ -29,15 +29,19 @@ import {
     LOGO,
     NAME, NAVIGATIONAL, VALUE,
     VISIBLE
-} from '../kolibri/presentationModel.js';
+} from '../../../../docs/src/kolibri/presentationModel.js';
 import {
     CHECKBOX,
     COLOR,
     DATE,
     NUMBER,
     TEXT,
     TIME
-} from "../kolibri/util/dom.js";
+} from "../../../../docs/src/kolibri/util/dom.js";
+import {PageSwitchProjector} from "../../../../docs/src/kolibri/navigation/projector/pageSwitch/pageSwitchProjector.js";
+import {
+    DashboardRefinedProjector
+} from "../../../../docs/src/kolibri/navigation/projector/dashboard/dashboardNavigationProjector.js";
 
 /* ********************************************* PIN TO ELEMENTS ************************************************************ */
 const pinToCardNavElement          = document.getElementById('card-nav');

contrib/p6_schnidrig_altermatt/research/usertesting/app-template.js

@@ -1,5 +1,5 @@
 import { PageController }                 from "../../prototype/pages/pageController.js";
-import { NavigationController }           from "../../prototype/navigation/navigationController.js";
+// import { NavigationController }           from "../../prototype/navigation/navigationController.js";
 import { PageProjector }                  from "./pages/pageProjector/pageProjector.js";
 import { DebugPageProjector }             from "./pages/debug/debugPageProjector.js";
 import { NavigationProjector }            from "./navigations/bubble-state/bubblestateNavigationProjector.js";

docs/src/examples/navigation/basic-nav-app.js

@@ -0,0 +1,57 @@
+import {PageController}       from "../../kolibri/navigation/pageController.js";
+import {StaticPageProjector}  from "../../kolibri/navigation/projector/page/staticPageProjector.js";
+import {NavigationController} from "../../kolibri/navigation/navigationController.js";
+import {NavigationProjector}  from "../../kolibri/navigation/projector/basicNavigationProjector.js";
+import {DashboardRefinedProjector} from "../../kolibri/navigation/projector/dashboard/dashboardNavigationProjector.js";
+
+// pages that will be displayed as content
+
+const homePageController = PageController("home", null);
+homePageController.setIconPath('../../../img/icons/house.svg');
+StaticPageProjector(
+    /** @type { !PageControllerType } */ homePageController,
+    document.getElementById("content"),
+    './pages/static/home.html');
+
+
+const aboutPageController = PageController("about", null);
+aboutPageController.setIconPath('../../../img/icons/cute-robot.svg');
+StaticPageProjector(
+    aboutPageController,
+    document.getElementById("content"),
+    './pages/static/about.html');
+
+// navigation
+
+const navigationController = NavigationController();
+navigationController.setWebsiteLogo('../../../img/logo/logo.svg');
+navigationController.setWebsiteName('Basic Navigation');
+
+
+DashboardRefinedProjector(navigationController, document.getElementById("nav"));
+
+navigationController.addPageControllers(
+    homePageController,
+    aboutPageController
+);
+
+navigationController.setHomeLocation(homePageController);
+
+// for later: more visualizations of the navigation
+// const pinToBreadCrumbElement = document.getElementById('bread-crumbs');
+// BreadCrumbProjector(navigationController, pinToBreadCrumbElement);
+
+
+/**
+ * If you'd like you can add our debugger below to your application to observe and alter some of your pages attributes
+ */
+
+// const pinToDebugElement = document.getElementById("debug");
+//
+// const debugPageController = PageController("debug", null);
+// debugPageController.setIconPath('./pages/icons/bug.svg');
+// debugPageController.setVisible(false);
+// DebugPageProjector(navigationController, debugPageController, pinToDebugElement);
+// navigationController.addPageControllers(debugPageController);
+// navigationController.setDebugMode(true);
+

docs/src/examples/navigation/basic-nav-view.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <link id="favicon" rel="icon" type="image/x-icon" href='../../../img/logo/logo.svg'>
+
+        <title>(no title)</title>
+
+        <!--        Styles that should apply to all pages in the Kolibri app       -->
+
+        <link href="../../../css/kolibri-light-fonts.css" rel="stylesheet">
+        <link href="../../../css/kolibri-light-colors.css" rel="stylesheet">
+        <link href="../../../css/kolibri-base.css" rel="stylesheet">
+        <link rel="stylesheet" href="./pages/static/home.css">
+        <link rel="stylesheet" href="./pages/static/about.css">
+
+<!--        <link rel="stylesheet" href="../../kolibri/navigation/projector/navigation.css">-->
+        <link rel="stylesheet" href="../../kolibri/navigation/projector/dashboard/dashboardNavigationProjector.css">
+
+        <style>
+            :root {
+                --background: #FFFFFF;
+            }
+
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+
+
+            h1 {
+                margin-top: 1em;
+                text-align: center;
+            }
+
+            section {
+                max-width:  40em;
+                margin:     1em auto 4em auto;
+            }
+
+        </style>
+    </head>
+    <body>
+<!--    The main hooks  that any content can be pinned to-->
+        <div id="nav"></div>
+        <div id="content"></div>
+    </body>
+    <script type="module" src="basic-nav-app.js"></script>
+</html>

docs/src/examples/navigation/pages/person/instantUpdateProjector.js

@@ -1,7 +1,7 @@
-import { dom }                              from "../../kolibri/util/dom.js";
-import { VALUE }                            from "../../kolibri/presentationModel.js";
-import { projectInstantInput }              from "../../kolibri/projector/simpleForm/simpleInputProjector.js";
-import { SimpleAttributeInputController }   from "../../kolibri/projector/simpleForm/simpleInputController.js";
+import { dom }                              from "../../../../kolibri/util/dom.js";
+import { VALUE }                            from "../../../../kolibri/presentationModel.js";
+import { projectInstantInput }              from "../../../../kolibri/projector/simpleForm/simpleInputProjector.js";
+import { SimpleAttributeInputController }   from "../../../../kolibri/projector/simpleForm/simpleInputController.js";
 
 export { projectListItem, selectListItemForModel, removeListItemForModel, projectForm,  masterClassName, pageCss as personPageCss}
 

docs/src/examples/navigation/pages/person/person.js

@@ -1,4 +1,4 @@
-import {Attribute, EDITABLE, LABEL, TYPE, VALUE, VALID } from "../../kolibri/presentationModel.js";
+import {Attribute, EDITABLE, LABEL, TYPE, VALUE, VALID } from "../../../../kolibri/presentationModel.js";
 
 export { Person, reset, ALL_ATTRIBUTE_NAMES, selectionMold as personSelectionMold}
 

docs/src/examples/navigation/pages/person/personController.js

@@ -4,8 +4,8 @@
  * We do it anyway to follow the canonical structure of classical MVC where
  * views only ever know the controller API, not the model directly.
  */
-import { ObservableList, Observable }   from "../../kolibri/observable.js";
-import { EDITABLE, VALUE }              from "../../kolibri/presentationModel.js";
+import { ObservableList, Observable }   from "../../../../kolibri/observable.js";
+import { EDITABLE, VALUE }              from "../../../../kolibri/presentationModel.js";
 import { Person, reset }                from "./person.js";
 
 export { ListController as PersonListController, SelectionController as PersonSelectionController }
@@ -58,7 +58,7 @@ noSelection.detailed .getObs(VALUE)   .setValue(false);    // detail view can fo
  * @property { (T) => void } setSelectedModel
  * @property { ()  => T    } getSelectedModel
  * @property { () => void  } clearSelection
- * @property { (callback: onValueChangeCallback<T>) => void } onModelSelected
+ * @property { (callback: ValueChangeCallback<T>) => void } onModelSelected
  */
 
 /**

docs/src/examples/navigation/pages/person/personPageProjector.js

@@ -1,6 +1,6 @@
 import { personProjectMasterView, personProjectDetailView } from "./masterDetailProjector.js";
 import { personPageCss } from "./instantUpdateProjector.js";
-import { dom } from "../../kolibri/util/dom.js";
+import { dom } from "../../../../kolibri/util/dom.js";
 
 export { PersonPageProjector }
 

docs/src/examples/navigation/pages/simpleform/simpleFormPageProjector.js

@@ -1,4 +1,4 @@
-import { projectForm }         from "../../kolibri/projector/simpleForm/simpleFormProjector.js"
+import { projectForm }         from "../../../../kolibri/projector/simpleForm/simpleFormProjector.js"
 
 export { SimpleFormPageProjector }
 

docs/src/examples/navigation/pages/static/about.css

@@ -0,0 +1,17 @@
+#content .about h1 {
+    margin-top: 35px;
+    color: var(--kb-hsla-primary-accent);
+}
+
+#content .about .message-wrapper {
+    text-align: center;
+    padding: 16px;
+    display: flex;
+    justify-content: center;
+    color: var(--kb-hsla-primary-accent);
+}
+
+#content .about button {
+    padding: 5px;
+    margin-top: 32px;
+}

docs/src/examples/navigation/pages/static/about.html

@@ -0,0 +1,10 @@
+<div id="content-wrapper">
+    <h1>About</h1>
+    <div class="message-wrapper">
+        <section class="buttons">
+            <p>These "buttons" should not be styled.</p>
+            <a class="btn primary glow" href="#home">Home</a>
+            <a class="btn accent glow" href="#about">No Style</a>
+        </section>
+    </div>
+</div>