@brightspace-ui/core 3.281.0 → 3.283.0

package/components/page/page.js

@@ -7,6 +7,8 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { ProviderMixin } from '../../mixins/provider/provider-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+export const panelStateStorageKey = key => `d2l-page-panel-state-${key}`;
+
 const DRAWER_MIN_HEIGHT = 200; // TO DO: Confirm
 const MAIN_MIN_WIDTH = 600; // TO DO: Confirm
 const PANEL_MIN_WIDTH = 320;
@@ -41,12 +43,28 @@ class PanelStateController {
 		return panel.size;
 	}
 
-	resize(key, requestedSize, animate = false) {
+	initialize(defaults) {
+		const storedState = this.#getStoredState();
+
+		for (const [key, panel] of Object.entries(this.#panels)) {
+			const stored = storedState?.[key];
+			if (stored) {
+				const storedSize = parseInt(stored.size);
+				this.resize(key, isFinite(storedSize) ? storedSize : defaults[key]);
+				if (stored.collapsed) panel.collapsed = true;
+			} else {
+				this.resize(key, defaults[key]);
+			}
+		}
+	}
+
+	resize(key, requestedSize, { animate = false, storeState = false } = {}) {
 		const panel = this.#panels[key];
 		// Clamp requested size to min and max bounds
 		panel.size = Math.max(panel.minSize, Math.min(requestedSize, panel.maxSize));
 		panel.animate = animate;
 		this.#host.requestUpdate();
+		if (storeState) this.#storePanelState(key);
 	}
 
 	setCollapsed(key, collapsed) {
@@ -54,6 +72,7 @@ class PanelStateController {
 		panel.collapsed = collapsed;
 		panel.animate = true;
 		this.#host.requestUpdate();
+		this.#storePanelState(key);
 	}
 
 	setDragSize(key) {
@@ -74,6 +93,39 @@ class PanelStateController {
 
 	#host;
 	#panels;
+
+	#getPanelStateStorageKey() {
+		return this.#host.stateStorageKey ? panelStateStorageKey(this.#host.stateStorageKey) : null;
+	}
+
+	#getStoredState() {
+		const fullKey = this.#getPanelStateStorageKey();
+		if (!fullKey) return;
+
+		try {
+			return JSON.parse(localStorage.getItem(fullKey));
+		} catch {
+			// Return nothing if local storage isn't available or has bad data
+			return;
+		}
+	}
+
+	#storePanelState(panelKey) {
+		const fullKey = this.#getPanelStateStorageKey();
+		if (!fullKey) return;
+		const state = this.#getStoredState() || {};
+
+		try {
+			state[panelKey] = {
+				size: this.#panels[panelKey].size,
+				collapsed: this.#panels[panelKey].collapsed
+			};
+			localStorage.setItem(fullKey, JSON.stringify(state));
+		} catch {
+			// Do nothing if storage quota exceeded or using private browsing mode of an old Safari version
+			// TO DO: If QuotaExceededError, log this to our logging framework
+		}
+	}
 }
 
 /**
@@ -87,6 +139,12 @@ class PanelStateController {
 class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 
 	static properties = {
+		/**
+		 * Key used to optionally store page state across reloads (using localStorage). Different pages should use different keys.
+		 * Currently, this includes panel state info.
+		 * @type {string}
+		 */
+		stateStorageKey: { type: String, attribute: 'state-storage-key' },
 		/**
 		 * Width type of the page and its underlying pieces
 		 * @type {'normal'|'wide'|'fullscreen'}
@@ -354,7 +412,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 
 	#handleDividerResize(e) {
 		const panelKey = e.target.dataset.panelKey;
-		this._panelState.resize(panelKey, e.detail.requestedSize, true);
+		this._panelState.resize(panelKey, e.detail.requestedSize, { animate: true, storeState: true });
 	};
 
 	#handleDividerToggle(e) {
@@ -373,9 +431,11 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 		const defaultWidth = Math.floor(this._contentWidth / 3);
 		const defaultHeight = Math.floor(window.innerHeight / 2);
 
-		this._panelState.resize('side-nav', defaultWidth);
-		this._panelState.resize('supporting', defaultWidth);
-		this._panelState.resize('supporting-mobile', defaultHeight);
+		this._panelState.initialize({
+			'side-nav': defaultWidth,
+			'supporting': defaultWidth,
+			'supporting-mobile': defaultHeight
+		});
 	}
 
 	#renderDivider(panelKey, label, panelPosition) {

package/custom-elements.json

@@ -13574,6 +13574,11 @@
       "path": "./components/page/page.js",
       "description": "Component for laying out a page, with header, optional footer and optional navigation or supporting panels",
       "attributes": [
+        {
+          "name": "state-storage-key",
+          "description": "Key used to optionally store page state across reloads (using localStorage). Different pages should use different keys.\nCurrently, this includes panel state info.",
+          "type": "string"
+        },
         {
           "name": "width-type",
           "description": "Width type of the page and its underlying pieces",
@@ -13582,6 +13587,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "stateStorageKey",
+          "attribute": "state-storage-key",
+          "description": "Key used to optionally store page state across reloads (using localStorage). Different pages should use different keys.\nCurrently, this includes panel state info.",
+          "type": "string"
+        },
         {
           "name": "styles",
           "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 929px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 767px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 16; /* To be over sticky content of our core components and the divider */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\t\\t.content.has-panels {\\n\\t\\t\\tmin-height: calc(100vh - var(--d2l-page-header-height-measured, 0px));\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(${MAIN_MIN_WIDTH}px, 100%);\\n\\t\\t}\\n\\n\\t\\t.side-nav,\\n\\t\\t.supporting {\\n\\t\\t\\tdisplay: contents;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\toverflow: hidden;\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.divider {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel,\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content,\\n\\t\\t.divider {\\n\\t\\t\\tmax-height: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel-content,\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t}\\n\\t\\t.side-nav-panel-content {\\n\\t\\t\\tfloat: inline-end;\\n\\t\\t}\\n\\t\\t.supporting-panel-content {\\n\\t\\t\\tfloat: inline-start;\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tz-index: 15; /* To be over d2l-page-* panel headers */\\n\\t\\t}\\n\\n\\t\\t.side-nav .divider[collapsed] {\\n\\t\\t\\tmargin-inline-start: 18px;\\n\\t\\t}\\n\\t\\t.supporting .divider[collapsed] {\\n\\t\\t\\tmargin-inline-end: 18px;\\n\\t\\t}\\n\\t\\t.side-nav-panel.collapsed,\\n\\t\\t.supporting-panel.collapsed {\\n\\t\\t\\tvisibility: hidden;\\n\\t\\t}\\n\\t\\t@media (prefers-reduced-motion: no-preference) {\\n\\t\\t\\t.side-nav-panel.animate,\\n\\t\\t\\t.supporting-panel.animate,\\n\\t\\t\\t.side-nav-panel.animate .side-nav-panel-content,\\n\\t\\t\\t.supporting-panel.animate .supporting-panel-content {\\n\\t\\t\\t\\ttransition: width 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t\\t}\\n\\t\\t\\t.divider.animate {\\n\\t\\t\\t\\ttransition: margin 400ms cubic-bezier(0, 0.7, 0.5, 1);\\n\\t\\t\\t}\\n\\t\\t\\t.side-nav-panel.animate.collapsed,\\n\\t\\t\\t.supporting-panel.animate.collapsed {\\n\\t\\t\\t\\ttransition: width 400ms cubic-bezier(0, 0.7, 0.5, 1), visibility 0s 400ms;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components and divider */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""

package/helpers/README.md

@@ -86,18 +86,25 @@ elemIdListRemoves(node, attrName, value);
 findComposedAncestor(node, predicate);
 
 // gets the composed children (including shadow children & distributed children)
-// includes a predicate which will add children nodes when predicate(node) is true
+// includes optional predicate for filtering child elements
 getComposedChildren(element, predicate = () => true);
 
+// gets the composed next element sibling considing how children are distributed into slots
+// includes optional predicate for filtering elements
+getComposedNextElementSibling(node, { predicate } = {}) {
+
 // gets the composed parent (including shadow host & insertion points)
 getComposedParent(node);
 
+// returns the first visible ancestor of the given node
+getFirstVisibleAncestor(node)
+
 // returns the next composed sibling at least one dom level up
-// includes a predicate which will return the node when predicate(node) is true
+// includes optional predicate for filtering elements
 getNextAncestorSibling(node, predicate = () => true);
 
 // returns the previous composed sibling at least one dom level up
-// includes a predicate which will return the node when predicate(node) is true
+// includes optional predicate for filtering elements
 getPreviousAncestorSibling(node, predicate = () => true);
 
 // browser consistent implementation of HTMLElement.offsetParent
@@ -109,9 +116,6 @@ isComposedAncestor(ancestorNode, node);
 // returns true/false whether the element is visible regardless of positioning
 isVisible(node, { checkAncestors: true });
 
-// returns the first visible ancestor of the given node
-getFirstVisibleAncestor(node)
-
 // similar to document.querySelector or element.querySelector,
 // except it queries not just the light DOM but also shadow DOM
 querySelectorComposed(node, selector)

package/helpers/dom.js

@@ -79,40 +79,65 @@ export function getBoundingAncestor(node) {
 	});
 }
 
-export function getComposedChildren(node, predicate = () => true) {
+function getComposedChildNodes(node, { elementsOnly = false, predicate } = {}) {
 
-	if (!node) {
-		return null;
-	}
-	if (node.nodeType !== Node.ELEMENT_NODE && node.nodeType !== Node.DOCUMENT_NODE && node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
+	if (!node) return null;
+
+	if (node.nodeType !== Node.ELEMENT_NODE
+		&& node.nodeType !== Node.DOCUMENT_NODE
+		&& node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) {
 		return null;
 	}
 
 	let nodes;
-	const children = [];
+	const filteredNodes = [];
 
 	if (node.tagName === 'CONTENT') {
 		nodes = node.getDistributedNodes();
 	} else if (node.tagName === 'SLOT') {
 		// note: this is not handling default slot content
-		nodes = node.assignedNodes({ flatten: true });
+		nodes = elementsOnly ? node.assignedElements({ flatten: true }) : node.assignedNodes({ flatten: true });
 	} else {
-		if (node.shadowRoot) {
-			node = node.shadowRoot;
-		}
-		nodes = node.children || node.childNodes;
+		if (node.shadowRoot) node = node.shadowRoot;
+		nodes = elementsOnly ? node.children : node.childNodes;
 	}
 
 	for (let i = 0; i < nodes.length; i++) {
-		if (nodes[i].nodeType === Node.ELEMENT_NODE) {
-			if (predicate(nodes[i])) {
-				children.push(nodes[i]);
-			}
+		// need to check nodeType since old Polymer getDistributedNodes could return non-elements
+		if (!elementsOnly || nodes[i].nodeType === Node.ELEMENT_NODE) {
+			if (!predicate || predicate(nodes[i])) filteredNodes.push(nodes[i]);
 		}
 	}
 
-	return children;
+	return filteredNodes;
+}
+
+export function getComposedChildren(node, predicate) {
+	return getComposedChildNodes(node, { elementsOnly: true, predicate });
+}
+
+export function getComposedNextElementSibling(node, { predicate } = {}) {
 
+	if (!node || node.nodeType === undefined) return null;
+
+	const parentNode = getComposedParent(node);
+	if (!parentNode) return null;
+
+	// for regular parents this is child elements; for SLOT this is distributed elements
+	const composedChildNodes = getComposedChildNodes(parentNode, { elementsOnly: (node.nodeType === Node.ELEMENT_NODE) });
+
+	if (!composedChildNodes || composedChildNodes.length === 0) return null;
+
+	const index = composedChildNodes.indexOf(node);
+	if (index === -1) return null;
+
+	for (let i = index + 1; i < composedChildNodes.length; i++) {
+		if (composedChildNodes[i].nodeType === Node.ELEMENT_NODE && (!predicate || predicate(composedChildNodes[i]))) {
+			return composedChildNodes[i];
+		}
+	}
+
+	return null;
 }
 
 export function getComposedParent(node) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.281.0",
+  "version": "3.283.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",