Skip to content

Commit

Permalink
navigation: basic-nav-view.html running, still much to do (test, doc,…
Browse files Browse the repository at this point in the history
… todos, cleanup, inclusion of other navigation and page projectors)
  • Loading branch information
Dierk Koenig committed Jan 1, 2024
1 parent 2ff9de2 commit f859a54
Show file tree
Hide file tree
Showing 9 changed files with 211 additions and 154 deletions.
3 changes: 3 additions & 0 deletions docs/css/kolibri-base-light.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import "kolibri-light-fonts.css";
@import "kolibri-light-colors.css";
@import "kolibri-base.css";
2 changes: 1 addition & 1 deletion docs/src/allTests.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<h1>All Tests Report</h1>
<div id="out"></div>

<p> 1332 test(s) expected.</p>
<p> 1391 test(s) expected.</p>
<p id="grossTotal">Check console for possible errors.</p>

<footer></footer>
Expand Down
74 changes: 25 additions & 49 deletions docs/src/examples/navigation/basic-nav-app.js
Original file line number Diff line number Diff line change
@@ -1,57 +1,33 @@
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";
import {NavigationController} from "../../kolibri/navigation/navigationController.js";
import {DashboardRefinedProjector} from "../../kolibri/navigation/projector/dashboard/dashboardNavigationProjector.js";
import {registerSiteMap, resourceBaseURI, setResourceBaseURI} from "../../kolibri/navigation/applicationConfig.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
// where all the resources reside relative to the home URL.
setResourceBaseURI("../../../");

const navigationController = NavigationController();
navigationController.setWebsiteLogo('../../../img/logo/logo.svg');
navigationController.setWebsiteLogo(resourceBaseURI + 'img/logo/logo.svg');
navigationController.setWebsiteName('Basic Navigation');


// this must come first since the nav registrations triggers the repaint
DashboardRefinedProjector(navigationController, document.getElementById("nav"));

navigationController.addPageControllers(
homePageController,
aboutPageController
registerSiteMap(null /* no parent at start */, navigationController,
[
{
name: "all",
icon: resourceBaseURI + "img/icons/house.svg", // override naming convention
pages: [
{
name: "home",
file: './pages/static/home.html',
home: true,
},
{
name: "about",
file: './pages/static/about.html'
},
]
}
]
);

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);

18 changes: 4 additions & 14 deletions docs/src/examples/navigation/basic-nav-view.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,16 @@

<!-- 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 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="../../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;
Expand Down
32 changes: 32 additions & 0 deletions docs/src/kolibri/navigation/applicationConfig.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
/**
* @module navigation/ApplicationConfig
* A singleton to capture base configuration data that is needed throughout the navigation layer.
*/

import {PageController} from "./pageController.js";
import {StaticPageProjector} from "./projector/page/staticPageProjector.js";

export { setResourceBaseURI, resourceBaseURI, registerSiteMap }

let resourceBaseURI = "./";
const setResourceBaseURI = uri => resourceBaseURI = uri;

const registerSiteMap = (parentController, navigationController, pages) => {
if (!pages) return;
pages.forEach(page => {
const pageController = PageController(page.name, null);
navigationController.addPageController(pageController);
pageController.setParent(parentController);
if (page.home) {
navigationController.setHomeLocation(pageController);
}
pageController.setIconPath(page.icon ?? `${resourceBaseURI}img/icons/${page.name}.svg`);
if (page.file) {
StaticPageProjector(
/** @type { !PageControllerType } */ pageController,
document.getElementById("content"),
page.file);
}
registerSiteMap(pageController, navigationController, page.pages);
});
};
3 changes: 2 additions & 1 deletion docs/src/kolibri/navigation/pageControllerTest.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {PageController} from './pageController.js';
import {VALUE} from "../presentationModel.js";
import {TestSuite} from "../util/test.js";
import {ACTIVE, DESCRIPTION, HASH, ICONPATH, NAVIGATIONAL, PARENT, TARGET_ID, VISIBLE, VISITED} from "./pageModel.js";
import {resourceBaseURI} from "./applicationConfig.js";

const pageSuite = TestSuite('pageController');

Expand Down Expand Up @@ -116,7 +117,7 @@ pageSuite.add('onIconPathChanged', assert => {

homePageController.onIconPathChanged(icon => changedIcon = icon);

assert.is(changedIcon, '../navigation/icons/placeholder.svg');
assert.is(changedIcon, resourceBaseURI + 'img/icons/placeholder.svg');

homePageController.setIconPath('../navigation/icons/house.svg');

Expand Down
3 changes: 2 additions & 1 deletion docs/src/kolibri/navigation/pageModel.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {
Attribute,
VALUE,
} from "../presentationModel.js";
import {resourceBaseURI} from "./applicationConfig.js";

export { PageModel,
TARGET_ID ,
Expand Down Expand Up @@ -84,7 +85,7 @@ const PageModel = targetId => {
const activeAttr = Attribute(false , qualify(ACTIVE));
const hashAttr = Attribute('#' + targetId.replace(' ', '') , qualify(HASH));
const visitedAttr = Attribute(false, qualify(VISITED));
const iconPathAttr = Attribute('../navigation/icons/placeholder.svg', qualify(ICONPATH));
const iconPathAttr = Attribute(resourceBaseURI + 'img/icons/placeholder.svg', qualify(ICONPATH));
const visibleAttr = Attribute(true, qualify(VISIBLE));
const parentAttr = Attribute(null, qualify(PARENT));
const navigationalAttr = Attribute(true, qualify(NAVIGATIONAL));
Expand Down
Loading

0 comments on commit f859a54

Please sign in to comment.