@ucd-lib/theme-elements 1.2.8 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucd-lib/theme-elements",
-  "version": "1.2.8",
+  "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/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.js

@@ -9,12 +9,13 @@ import bookLogo from "./book.js";
 /**
  * @class UcdlibBrandingBar
  * @classdesc Component class for displaying a Library branding bar in a header
- * 
- * @property {String} figure - Figure to display: 'book' or 'logo'
+ *
+ * @property {String} figure - Figure to display: 'book', 'logo', or 'custom'
+ * @property {String} figureSrc - Url of image to use for custom figure
  * @property {String} siteName - Name of website to display
  * @property {String} slogan - Optional text to display below site name
  * @property {String} siteUrl - Url to use for links around site name and figure
- * 
+ *
  * @examples
  *  <ucdlib-branding-bar>
  *   <a href="#">My Account</a>
@@ -28,7 +29,8 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
   static get properties() {
     return {
       figure: {type: String},
-      figureUrl: {type: String, attribute: "figure-url"},
+      figureSrc: {type: String, attribute: "figure-src"},
+      figureCustomWidth: {type: String, attribute: "figure-custom-width"},
       siteName: {type: String, attribute: "site-name"},
       slogan: {type: String},
       siteUrl: {type: String, attribute: "site-url"},
@@ -49,6 +51,8 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
     );
 
     this.figure = "book";
+    this.figureSrc = '';
+    this.figureCustomWidth = '150px';
     this.siteName = "UC Davis Library";
     this.slogan = "";
     this.siteUrl = "/";
@@ -81,7 +85,7 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
    */
   _renderFigure(){
     if( this.figure === 'custom' ) {
-      return html`<img src="${this.figureUrl}" />`;
+      return html`<img src="${this.figureSrc}" />`;
     }
     if ( this.figure === 'logo') return logo;
     if ( this.figure === 'book' ) return bookLogo;
@@ -106,4 +110,4 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
 
 }
 
-customElements.define('ucdlib-branding-bar', UcdlibBrandingBar);
+customElements.define('ucdlib-branding-bar', UcdlibBrandingBar);

package/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.tpl.js

@@ -27,10 +27,6 @@ export function styles() {
       width: 70px;
       min-width: 70px;
     }
-    .figure--custom img {
-      width: 150px;
-      min-width: 150px;
-    }
     .figure--logo svg {
       width: 375px;
       min-width: 375px;
@@ -66,7 +62,7 @@ export function styles() {
         display: none;
       }
     }
-    
+
   `;
 
   return [
@@ -76,8 +72,14 @@ export function styles() {
     elementStyles];
 }
 
-export function render() { 
+export function render() {
 return html`
+  <style>
+    .figure--custom img {
+      width: ${this.figureCustomWidth};
+      min-width: ${this.figureCustomWidth};
+    }
+  </style>
   <div class="container figure--${this.figure}">
     <div class="site-branding">
       <div class="site-branding__figure">
@@ -93,7 +95,7 @@ return html`
     ${this.navItems.length ? html`
       <nav class="menu">
         ${this.navItems.map(link => html`
-          <a 
+          <a
             href=${ifDefined(link.href ? link.href : null)}
             target=${ifDefined(link.newTab ? "_blank": null)}
             >${link.linkText}</a>
@@ -103,4 +105,4 @@ return html`
 
   </div>
 
-`;}
+`;}

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