#38

elements/brand/ucd-theme-header/ucd-theme-header.js

@@ -1,7 +1,6 @@
 import { LitElement } from 'lit';
 import {render, styles} from "./ucd-theme-header.tpl.js";
 
-import { Mixin, BreakPoints } from "../../utils/index.js";
 import { MutationObserverController, WaitController } from '../../utils/controllers';
 
 /**
@@ -36,8 +35,7 @@ import { MutationObserverController, WaitController } from '../../utils/controll
  *  </ucd-theme-header>
  * 
  */
-export default class UcdThemeHeader extends Mixin(LitElement)
-  .with(BreakPoints) {
+export default class UcdThemeHeader extends LitElement {
 
   mutationObserver = new MutationObserverController(this);
   wait = new WaitController(this);

elements/brand/ucd-theme-pagination/ucd-theme-pagination.js

@@ -1,7 +1,8 @@
 import { LitElement, html } from 'lit';
 //import { Page } from 'puppeteer';
 import {render, styles} from "./ucd-theme-pagination.tpl.js";
-import { Mixin, BreakPoints } from "../../utils/index.js";
+
+import { BreakPointsController } from '../../utils/controllers';
 
 /**
  * @class UcdThemePagination
@@ -33,8 +34,8 @@ import { Mixin, BreakPoints } from "../../utils/index.js";
  * </ucd-theme-pagination>
  * 
  */
-export default class UcdThemePagination extends Mixin(LitElement)
-  .with(BreakPoints) {
+export default class UcdThemePagination extends LitElement {
+  breakPoints = new BreakPointsController(this);
 
   static get properties() {
     return {
@@ -101,8 +102,7 @@ export default class UcdThemePagination extends Mixin(LitElement)
     this.xs_screen = false;
     this.size = '';
 
-    this.screen_check = (window.innerWidth <= this._mobileBreakPoint)  ? true : false;
-    console.log(this.screen_check);
+    this.screen_check = (window.innerWidth <= this.breakPoints.mobileBreakPoint)  ? true : false;
 
     this.render = render.bind(this);
   }

elements/brand/ucd-theme-primary-nav/ucd-theme-primary-nav.js

@@ -4,8 +4,8 @@ import { styleMap } from 'lit/directives/style-map.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
-import { Mixin, BreakPoints, NavElement } from "../../utils/index.js";
-import { MutationObserverController } from '../../utils/controllers';
+import { Mixin, NavElement } from "../../utils/mixins";
+import { MutationObserverController, BreakPointsController } from '../../utils/controllers';
 
 /**
  * @class UcdThemePrimaryNav
@@ -34,9 +34,10 @@ import { MutationObserverController } from '../../utils/controllers';
  *  </ucd-theme-primary-nav>
  */
 export default class UcdThemePrimaryNav extends Mixin(LitElement)
-  .with(NavElement, BreakPoints) {
+  .with(NavElement) {
 
   mutationObserver = new MutationObserverController(this, {subtree: true, childList: true});
+  breakPoints = new BreakPointsController(this);
 
   static get properties() {
     return {
@@ -100,7 +101,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
     if ( !navItem ) return;
 
     // Open on mobile
-    if ( this.isMobile() ) {
+    if ( this.breakPoints.isMobile() ) {
       let nav = this.renderRoot.getElementById(`nav--${navLocation.join("-")}`);
       if ( !nav ) return;
       let ul = nav.querySelector('ul');
@@ -163,7 +164,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
     if ( !navItem ) return;
 
     // close on mobile
-    if ( this.isMobile() ) {
+    if ( this.breakPoints.isMobile() ) {
       let nav = this.renderRoot.getElementById(`nav--${navLocation.join("-")}`);
       if ( !nav ) return;
       let ul = nav.querySelector('ul');
@@ -348,7 +349,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
       this.isMegaMenu() && 
       depth > 0 && 
       !this._megaIsOpen &&
-      this.isDesktop()
+      this.breakPoints.isDesktop()
     ) i = -1;
 
     return i;
@@ -378,7 +379,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @param {Array} navLocation - Array coordinates of corresponding nav item
    */
   async _toggleMobileMenu(navLocation){
-    if ( this.isDesktop() ) return;
+    if ( this.breakPoints.isDesktop() ) return;
     let navItem = this.getNavItem(navLocation);
     if ( navItem.isOpen ) {
       this.closeSubNav(navLocation);
@@ -394,7 +395,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    */
   _onNavMouseenter(){
     if ( 
-      this.isMobile() || 
+      this.breakPoints.isMobile() || 
       !this.isMegaMenu() ) 
       return;
 
@@ -411,7 +412,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    */
   _onNavMouseleave(){
     if ( 
-      this.isMobile() || 
+      this.breakPoints.isMobile() || 
       !this.isMegaMenu() ) 
       return;
 
@@ -429,7 +430,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    */
   _onNavFocusin(){
     if ( 
-      this.isMobile() || 
+      this.breakPoints.isMobile() || 
       !this.isMegaMenu() ) 
       return;
 
@@ -450,7 +451,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @param {Event} e 
    */
   _onItemMouseenter(e){
-    if ( this.isMobile() ) return;
+    if ( this.breakPoints.isMobile() ) return;
     this.openSubNav(e.target.key);
   }
 
@@ -461,7 +462,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @param {Event} e 
    */
   _onItemFocus(e){
-    if ( this.isMobile() ) return;
+    if ( this.breakPoints.isMobile() ) return;
     const LI = e.target.parentElement.parentElement;
 
     if (LI.hasnav) {
@@ -514,7 +515,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @param {Event} e 
    */
   _onItemMouseleave(e){
-    if ( this.isMobile() || this.isMegaMenu() ) return;
+    if ( this.breakPoints.isMobile() || this.isMegaMenu() ) return;
     this.closeSubNav(e.target.key);
   }
 
@@ -524,7 +525,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @description Attached to the top-level nav element. Closes subnav if it doesn't contain focused link.
    */
   _onNavFocusout(){
-    if ( this.isMobile() ) return;
+    if ( this.breakPoints.isMobile() ) return;
     if ( this.isMegaMenu() ) {
       if ( this._megaTimeout ) clearTimeout(this._megaTimeout);
       requestAnimationFrame(() => {
@@ -577,7 +578,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
    * @returns {Object} - Style map
    */
   _getItemMobileStyles(location) {
-    if ( this.isDesktop() ) return {};
+    if ( this.breakPoints.isDesktop() ) return {};
     let navItem = this.getNavItem(location);
     if ( !navItem.inlineStyles ) return {};
     return navItem.inlineStyles;

elements/brand/ucd-theme-quick-links/ucd-theme-quick-links.js

@@ -1,7 +1,6 @@
 import { LitElement, html } from 'lit';
 import {render, styles} from "./ucd-theme-quick-links.tpl.js";
 
-import { Mixin, BreakPoints } from "../../utils/index.js";
 import { MutationObserverController, WaitController } from '../../utils/controllers';
 
 /**
@@ -18,8 +17,7 @@ import { MutationObserverController, WaitController } from '../../utils/controll
  * @property {Boolean} opened - Menu is open
  * @property {Number} animationDuration - Length of animation when opening/closing menu
  */
-export default class UcdThemeQuickLinks extends Mixin(LitElement)
-  .with(BreakPoints) {
+export default class UcdThemeQuickLinks extends LitElement {
 
   mutationObserver = new MutationObserverController(this);
   wait = new WaitController(this);

elements/brand/ucd-theme-subnav/ucd-theme-subnav.js

@@ -4,7 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { styleMap } from 'lit/directives/style-map.js';
 
-import {Mixin, NavElement} from "../../utils";
+import {Mixin, NavElement} from "../../utils/mixins";
 import { MutationObserverController, WaitController } from '../../utils/controllers';
 
 /**

elements/package.json

@@ -10,7 +10,7 @@
   "license": "MIT",
   "dependencies": {
     "@ucd-lib/theme-sass": "^5.0.11",
-    "lit": "^2.0.0-rc.4",
+    "lit": "^2.0.2",
     "photoswipe": "^4.1.3",
     "slim-select": "^1.26.2"
   }

elements/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.js

@@ -1,7 +1,7 @@
 import { LitElement, svg } from 'lit';
 import {render, styles} from "./ucdlib-branding-bar.tpl.js";
 
-import {Mixin, NavElement} from "../../utils";
+import {Mixin, NavElement} from "../../utils/mixins";
 import { MutationObserverController } from '../../utils/controllers';
 import logo from "./logo.js";
 import bookLogo from "./book.js";

elements/ucdlib/ucdlib-iconset/ucdlib-iconset.js

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { Mixin, MainDomElement} from "../../utils";
+import { Mixin, MainDomElement} from "../../utils/mixins";
 import { MutationObserverController } from '../../utils/controllers';
 
 

elements/utils/break-points.js → elements/utils/controllers/break-points.js

@@ -1,17 +1,18 @@
-const BreakPoints = (superClass) => class extends superClass {
+export class BreakPointsController{
 
-  constructor() {
-    super();
-    this._mobileBreakPoint = 992;
+  mobileBreakPoint = 992;
+
+  constructor(host){
+    (this.host = host).addController(this);
   }
 
   /**
   * @method isDesktop
   * @description Is the desktop view currently active?
   * @returns {Boolean}
   */
-  isDesktop(){
-    return window.innerWidth >= this._mobileBreakPoint;
+   isDesktop(){
+    return window.innerWidth >= this.mobileBreakPoint;
   }
 
   /**
@@ -22,6 +23,4 @@ const BreakPoints = (superClass) => class extends superClass {
   isMobile(){
     return !this.isDesktop();
   }  
-};
-
-export {BreakPoints};
+}

elements/utils/controllers/index.js

@@ -1,7 +1,9 @@
 import { MutationObserverController } from "./mutation-observer";
 import { WaitController } from "./wait";
+import { BreakPointsController } from "./break-points";
 
 export {
   MutationObserverController,
-  WaitController
+  WaitController,
+  BreakPointsController
 };

elements/utils/mixins/index.js

@@ -0,0 +1,8 @@
+import Mixin from './mixin.js';
+import { MainDomElement } from './main-dom-element.js';
+import { NavElement } from './nav-element.js';
+
+export {
+  Mixin, 
+  MainDomElement, 
+  NavElement};