@brightspace-ui/labs 2.43.0 → 2.44.0

package/package.json

@@ -74,7 +74,7 @@
   "author": "D2L Corporation",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@brightspace-ui/stylelint-config": "^1",
+    "@brightspace-ui/stylelint-config": "^2",
     "@brightspace-ui/testing": "^1",
     "@rollup/plugin-dynamic-import-vars": "^2",
     "@rollup/plugin-node-resolve": "^16",
@@ -89,7 +89,7 @@
     "rollup-plugin-copy": "^3",
     "rollup-plugin-delete": "^3",
     "sinon": "^21",
-    "stylelint": "^16"
+    "stylelint": "^17"
   },
   "files": [
     "labs.serge.json",
@@ -114,5 +114,5 @@
     "resize-observer-polyfill": "^1",
     "webvtt-parser": "^2"
   },
-  "version": "2.43.0"
+  "version": "2.44.0"
 }

package/src/components/navigation/navigation-immersive.js

@@ -4,13 +4,11 @@ import './navigation-link-back.js';
 import { css, html, LitElement } from 'lit';
 import { bodyCompactStyles } from '@brightspace-ui/core/components/typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { getFlag } from '@brightspace-ui/core/helpers/flags.js';
 import { navigationSharedStyle } from './navigation-shared-styles.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const mediaQueryList = window.matchMedia('(max-width: 615px)');
-const immersiveNavTextSpacingFlag = getFlag('GAUD-8465-immersive-nav-text-spacing', true);
 
 class NavigationImmersive extends LitElement {
 
@@ -39,7 +37,6 @@ class NavigationImmersive extends LitElement {
 				reflect: true
 			},
 			_dynamicSpacingHeight: { state: true },
-			_spacingUseHeightVar: { attribute: '_spacing-use-height-var', type: Boolean, reflect: true },
 			_middleHidden: { state: true },
 			_middleNoRightBorder: { state: true },
 			_smallWidth: { state: true }
@@ -135,10 +132,6 @@ class NavigationImmersive extends LitElement {
 				position: unset;
 			}
 
-			:host([_spacing-use-height-var]) .d2l-labs-navigation-immersive-spacing {
-				height: calc(var(--d2l-labs-navigation-immersive-height-main) + 5px);
-			}
-
 			@media (max-width: 929px) {
 				.d2l-labs-navigation-immersive-margin {
 					margin: 0 24px;
@@ -178,12 +171,8 @@ class NavigationImmersive extends LitElement {
 		this._middleNoRightBorder = true;
 		this._middleObserver = new ResizeObserver(this._onMiddleResize.bind(this));
 		this._rightObserver = new ResizeObserver(this._onRightResize.bind(this));
-		this._spacingUseHeightVar = !immersiveNavTextSpacingFlag;
 
-		// Only create navigation observer if feature flag is enabled
-		if (immersiveNavTextSpacingFlag) {
-			this._navigationObserver = new ResizeObserver(this._onNavigationResize.bind(this));
-		}
+		this._navigationObserver = new ResizeObserver(this._onNavigationResize.bind(this));
 
 		this._smallWidth = false;
 		this._dynamicSpacingHeight = undefined;
@@ -289,12 +278,9 @@ class NavigationImmersive extends LitElement {
 			this._rightObserver.observe(right);
 		}
 
-		if (this._navigationObserver) {
-			// does not need to be nested within if statement after GAUD-8465-immersive-nav-text-spacing is cleaned up
-			const navigation = this.shadowRoot?.querySelector('.d2l-navigiation-immersive-fixed');
-			if (navigation) {
-				this._navigationObserver.observe(navigation);
-			}
+		const navigation = this.shadowRoot?.querySelector('.d2l-navigiation-immersive-fixed');
+		if (navigation) {
+			this._navigationObserver.observe(navigation);
 		}
 	}
 

package/src/utilities/router/README.md

@@ -227,6 +227,17 @@ describe('Page Routing', () => {
 });
 ```
 
+## Router Navigation Hooks
+
+If you want to execute code that doesn't belong to a web component before or after navigation, you can use the RouterHooks class. This is helpful for data models that care about changes in navigation, like a module responsible for timing page loads.
+
+```
+import { RouterHooks } from '@brightspace-ui/labs/utilities/lit-router';
+
+RouterHooks.registerPreNavigate((context) => { console.log('this runs before we navigate', context);});
+RouterHooks.registerPostNavigate((context) => { console.log('post', context);});
+```
+
 ## Known Issues
 
 ### Route order inversion issue

package/src/utilities/router/index.js

@@ -1,2 +1,2 @@
-export { ContextReactor, redirect, navigate, registerRoutes, RouterTesting } from './router.js';
+export { ContextReactor, redirect, navigate, registerRoutes, RouterTesting, RouterHooks } from './router.js';
 export { RouteReactor } from './RouteReactor.js';

package/src/utilities/router/router.js

@@ -85,6 +85,37 @@ const _registerRoutes = routes => {
 	});
 };
 
+export class RouterHooks {
+	static registerPreNavigate = (callback) => {
+		RouterHooks.preNavigate.push(callback);
+	};
+
+	static registerPostNavigate = (callback) => {
+		RouterHooks.postNavigate.push(callback);
+	};
+
+	static reset() {
+		this.preNavigate = [];
+		this.postNavigate = [];
+	};
+}
+
+RouterHooks.reset();
+
+const _registerPreNavigateHooks = () => {
+	activePage('*', (context, next) => {
+		RouterHooks.preNavigate.forEach(h => h(context));
+		next();
+	});
+};
+
+const _registerPostNavigateHooks = () => {
+	activePage('*', (context, next) => {
+		RouterHooks.postNavigate.forEach(h => h(context));
+		next();
+	});
+};
+
 const configure = options => {
 	if (options && options.customPage) activePage = page.create();
 	if (options && options.basePath) activePage.base(options.basePath);
@@ -110,7 +141,9 @@ export const registerRoutes = (routes, options) => {
 		});
 		next();
 	});
+	_registerPreNavigateHooks();
 	_registerRoutes(routes);
+	_registerPostNavigateHooks();
 	_storeCtx();
 };
 
@@ -175,6 +208,7 @@ export const RouterTesting = {
 		activePage = page.create();
 		hasRegistered = false;
 		ContextReactor.reset();
+		RouterHooks.reset();
 	},
 
 	restart: () => {