@ucd-lib/theme-elements 1.2.9 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "1.2.9",
+  "version": "2.0.1",
   "description": "Custom elements for the UCD brand theme",
   "main": "index.js",
   "scripts": {
@@ -10,10 +10,10 @@
   "license": "MIT",
   "dependencies": {
     "@lit-labs/task": "^1.0.0",
-    "@ucd-lib/theme-sass": "^5.0.15",
+    "@ucd-lib/theme-sass": "^6.0.1",
     "dompurify": "^2.3.9",
     "ip-cidr": "^3.0.4",
-    "lit": "^2.0.2",
+    "lit": "^3.0.2",
     "marked": "^4.0.18",
     "photoswipe": "^4.1.3",
     "slim-select": "^1.26.2"

package/utils/controllers/index.js

@@ -1,6 +1,7 @@
 import { BreakPointsController } from "./break-points";
 import { IntersectionObserverController } from "./intersection-observer";
 import { MutationObserverController } from "./mutation-observer";
+import { PageWidthController } from "./page-width";
 import { PopStateObserverController } from "./popstate-observer";
 import { SilsPrimoController } from "./sils-primo";
 import { WaitController } from "./wait";
@@ -10,7 +11,8 @@ export {
   BreakPointsController,
   IntersectionObserverController,
   MutationObserverController,
+  PageWidthController,
   PopStateObserverController,
   SilsPrimoController,
   WaitController,
-};
+};

package/utils/controllers/page-width.js

@@ -0,0 +1,78 @@
+/**
+ * @class PageWidthController
+ * @description Sets the page width as a CSS variable (--page-width), which is needed for some layout classes.
+ *
+ * @example
+ *   const pageWidthController = new PageWidthController();
+ *   pageWidthController.init();
+ */
+export class PageWidthController {
+
+  constructor(){
+    this.documentRoot = document.documentElement;
+    this.propertyName = '--page-width';
+    this.fullWidthPropertyName = '--full-width';
+  }
+
+  /**
+   * @description Initialize the controller.
+   * @returns
+   */
+  init(){
+    if ( this.isInitialized() ) {
+      return;
+    }
+
+    // set initial state
+    this.setPageWidthProperty();
+    this.setFullWidthProperty();
+
+    // set up resize listener
+    this.resizeListener = window.addEventListener('resize', () => {
+      this.setPageWidthProperty();
+    });
+
+  }
+
+  /**
+   * @description Check if the controller has been initialized.
+   * @returns {Boolean}
+   */
+  isInitialized(){
+    return this.resizeListener !== undefined;
+  }
+
+  /**
+   * @description Destroy the controller.
+   */
+  destroy(){
+    window.removeEventListener('resize', this.resizeListener);
+    this.documentRoot.style.removeProperty(this.propertyName);
+    this.documentRoot.style.removeProperty(this.fullWidthPropertyName);
+    this.resizeListener = undefined;
+  }
+
+  /**
+   * @description Get the '--page-width' CSS variable from document root.
+   * @returns {String}
+   */
+  getPageWidthProperty(){
+    return this.documentRoot.style.getPropertyValue(this.propertyName);
+  }
+
+  /**
+   * @description Set the '--page-width' CSS variable on document root.
+   */
+  setPageWidthProperty(){
+    this.documentRoot.style.setProperty(this.propertyName, `${this.documentRoot.clientWidth}px`);
+  }
+
+  /**
+   * @description Set the '--full-width' CSS variable on document root.
+   */
+  setFullWidthProperty(){
+    const value = 'min(var(--page-width, 100vw), 100vw)';
+    this.documentRoot.style.setProperty(this.fullWidthPropertyName, value);
+  }
+
+}