@brightspace-ui/core 3.281.0 → 3.282.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/package.json

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