#38

ucd-library · Oct 7, 2021 · ca91f8f · ca91f8f
1 parent 5f8576b
commit ca91f8f
Show file tree

Hide file tree

Showing 15 changed files with 164 additions and 120 deletions.
diff --git a/elements/brand/ucd-theme-header/ucd-theme-header.js b/elements/brand/ucd-theme-header/ucd-theme-header.js
@@ -1,7 +1,8 @@
 import { LitElement } from 'lit';
 import {render, styles} from "./ucd-theme-header.tpl.js";
 
-import { Mixin, MutationObserverElement, BreakPoints, Wait } from "../../utils/index.js";
+import { Mixin, BreakPoints } from "../../utils/index.js";
+import { MutationObserverController, WaitController } from '../../utils/controllers';
 
 /**
  * @class UcdThemeHeader
@@ -36,7 +37,10 @@ import { Mixin, MutationObserverElement, BreakPoints, Wait } from "../../utils/i
  * 
  */
 export default class UcdThemeHeader extends Mixin(LitElement)
-  .with(MutationObserverElement, BreakPoints, Wait) {
+  .with(BreakPoints) {
+
+  mutationObserver = new MutationObserverController(this);
+  wait = new WaitController(this);
 
   static get properties() {
     return {
@@ -86,7 +90,7 @@ export default class UcdThemeHeader extends Mixin(LitElement)
 
     this.opened = true;
     this._transitioning = true;
-    await this.waitForAnimation();
+    await this.wait.wait(this._animationDuration);
     this._transitioning = false;
     return true;
 
@@ -102,7 +106,7 @@ export default class UcdThemeHeader extends Mixin(LitElement)
 
     this.opened = false;
     this._transitioning = true;
-    await this.waitForAnimation();
+    await this.wait.wait(this._animationDuration);
     this._transitioning = false;
     return true;
 

diff --git a/elements/brand/ucd-theme-primary-nav/ucd-theme-primary-nav.js b/elements/brand/ucd-theme-primary-nav/ucd-theme-primary-nav.js
@@ -4,7 +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, MutationObserverElement, BreakPoints, NavElement } from "../../utils/index.js";
+import { Mixin, BreakPoints, NavElement } from "../../utils/index.js";
+import { MutationObserverController } from '../../utils/controllers';
 
 /**
  * @class UcdThemePrimaryNav
@@ -33,7 +34,9 @@ import { Mixin, MutationObserverElement, BreakPoints, NavElement } from "../../u
  *  </ucd-theme-primary-nav>
  */
 export default class UcdThemePrimaryNav extends Mixin(LitElement)
-  .with(NavElement, MutationObserverElement, BreakPoints) {
+  .with(NavElement, BreakPoints) {
+
+  mutationObserver = new MutationObserverController(this, {subtree: true, childList: true});
 
   static get properties() {
     return {
@@ -263,7 +266,7 @@ export default class UcdThemePrimaryNav extends Mixin(LitElement)
   /**
    * @method _onChildListMutation
    * @private
-   * @description Fires when light dom child list changes. Injected by MutationObserverElement mixin.
+   * @description Fires when light dom child list changes. Injected by MutationObserverController.
    *  Sets the 'navItems' property.
    */
   _onChildListMutation(){

diff --git a/elements/brand/ucd-theme-quick-links/ucd-theme-quick-links.js b/elements/brand/ucd-theme-quick-links/ucd-theme-quick-links.js
@@ -1,7 +1,8 @@
 import { LitElement, html } from 'lit';
 import {render, styles} from "./ucd-theme-quick-links.tpl.js";
 
-import { Mixin, MutationObserverElement, BreakPoints, Wait } from "../../utils/index.js";
+import { Mixin, BreakPoints } from "../../utils/index.js";
+import { MutationObserverController, WaitController } from '../../utils/controllers';
 
 /**
  * @class UcdThemeQuickLinks
@@ -18,7 +19,10 @@ import { Mixin, MutationObserverElement, BreakPoints, Wait } from "../../utils/i
  * @property {Number} animationDuration - Length of animation when opening/closing menu
  */
 export default class UcdThemeQuickLinks extends Mixin(LitElement)
-  .with(MutationObserverElement, BreakPoints, Wait) {
+  .with(BreakPoints) {
+
+  mutationObserver = new MutationObserverController(this);
+  wait = new WaitController(this);
 
   static get properties() {
     return {
@@ -67,7 +71,7 @@ export default class UcdThemeQuickLinks extends Mixin(LitElement)
     this._openedHeight = this.renderRoot.getElementById('menu').scrollHeight + "px";
     await this.updateComplete;
 
-    await this.waitForAnimation();
+    await this.wait.wait(this.animationDuration);
     this._transitioning = false;
     this.opened = true;
     return true;
@@ -84,11 +88,11 @@ export default class UcdThemeQuickLinks extends Mixin(LitElement)
 
     this._openedHeight = this.renderRoot.getElementById('menu').scrollHeight + "px";
     await this.updateComplete;
-    await this.waitForFrames(2);
+    await this.wait.waitForFrames(2);
     this._openedHeight = 0;
     await this.updateComplete;
 
-    await this.waitForAnimation();
+    await this.wait.wait(this.animationDuration);
 
     this._transitioning = false;
     this.opened = false;
@@ -229,7 +233,7 @@ export default class UcdThemeQuickLinks extends Mixin(LitElement)
    * @method _onChildListMutation
    * @param {Array} mutationsList - List of mutation records
    * @private
-   * @description Fires when light dom child list changes. Injected by MutationObserverElement mixin.
+   * @description Fires when light dom child list changes. Injected by MutationObserverController.
    *  Sets the '_links' property.
    */
   _onChildListMutation(mutationsList){

diff --git a/elements/brand/ucd-theme-search-popup/ucd-theme-search-popup.js b/elements/brand/ucd-theme-search-popup/ucd-theme-search-popup.js
@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 import {render, styles} from "./ucd-theme-search-popup.tpl.js";
 
-import { Mixin, MutationObserverElement } from "../../utils/index.js";
+import { MutationObserverController } from '../../utils/controllers';
 
 /**
  * @class UcdThemeSearchPopup
@@ -24,8 +24,8 @@ import { Mixin, MutationObserverElement } from "../../utils/index.js";
  *   <input placeholder="A custom search element">
  * </ucd-theme-search-popup>
  */
-export default class UcdThemeSearchPopup extends Mixin(LitElement)
-  .with(MutationObserverElement) {
+export default class UcdThemeSearchPopup extends LitElement {
+  mutationObserver = new MutationObserverController(this);
 
   static get properties() {
     return {

diff --git a/elements/brand/ucd-theme-slim-select/ucd-theme-slim-select.js b/elements/brand/ucd-theme-slim-select/ucd-theme-slim-select.js
@@ -3,7 +3,7 @@ import {render, styles} from "./ucd-theme-slim-select.tpl.js";
 
 import SlimSelect from 'slim-select';
 
-import { Mixin, MutationObserverElement } from "../../utils/index.js";
+import { MutationObserverController } from '../../utils/controllers';
 
 /**
  * @class UcdThemeSlimSelect
@@ -12,8 +12,12 @@ import { Mixin, MutationObserverElement } from "../../utils/index.js";
  * Patternlab URL:
  *  - http://dev.webstyleguide.ucdavis.edu/redesign/?p=atoms-select-menu
  */
-export default class UcdThemeSlimSelect extends Mixin(LitElement)
-  .with(MutationObserverElement) {
+export default class UcdThemeSlimSelect extends LitElement {
+  mutationObserver = new MutationObserverController(
+    this, 
+    {subtree: true, childList: true, attributes: true, characterData: true},
+    "_onLightDomMutation"
+  );
 
   static get properties() {
     return {
@@ -29,23 +33,13 @@ export default class UcdThemeSlimSelect extends Mixin(LitElement)
     super();
     this.render = render.bind(this);
   }
-  /**
-   * @method connectedCallback
-   * @private
-   * @description Native lifecycle method called when element is connected
-   */
-  connectedCallback(){
-    super.connectedCallback();
-    this._childListObserver.disconnect();
-    this._childListObserver.observe(this, {subtree: true, childList: true, attributes: true, characterData: true});
-  }
 
   /**
-   * @method _onChildListMutation
+   * @method _onLightDomMutation
    * @private
-   * @description Fires when light dom child list changes. Injected by MutationObserverElement mixin.
+   * @description Fires when light dom child list changes. Called by MutationObserverController.
    */
-  _onChildListMutation(){
+  _onLightDomMutation(){
     const children = Array.from(this.children);
     if (children.length == 0 || children[0].tagName != "SELECT") return;
     const select = children[0].cloneNode(true);

diff --git a/elements/brand/ucd-theme-subnav/ucd-theme-subnav.js b/elements/brand/ucd-theme-subnav/ucd-theme-subnav.js
@@ -4,7 +4,8 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { styleMap } from 'lit/directives/style-map.js';
 
-import {Mixin, MutationObserverElement, NavElement, Wait} from "../../utils";
+import {Mixin, NavElement} from "../../utils";
+import { MutationObserverController, WaitController } from '../../utils/controllers';
 
 /**
  * @class UcdThemeSubnav
@@ -29,7 +30,10 @@ import {Mixin, MutationObserverElement, NavElement, Wait} from "../../utils";
  *  </ucd-theme-subnav>
  */
 export default class UcdThemeSubnav extends Mixin(LitElement)
-  .with(NavElement, MutationObserverElement, Wait) {
+  .with(NavElement) {
+
+  mutationObserver = new MutationObserverController(this, {subtree: true, childList: true});
+  wait = new WaitController(this);
 
   static get properties() {
     return {
@@ -72,15 +76,15 @@ export default class UcdThemeSubnav extends Mixin(LitElement)
     // Get expanded height
     navItem.inlineStyles.display = "block";
     navItem.inlineStyles.height = "0px";
-    await this.waitForUpdate();
+    await this.wait.waitForUpdate();
     const expandedHeight = navUL.scrollHeight + "px";   
 
     // Set expanded height
     navItem.inlineStyles.height = expandedHeight;
-    await this.waitForUpdate();
+    await this.wait.waitForUpdate();
 
     // Complete animation
-    await this.waitForAnimation();
+    await this.wait.wait(this.animationDuration);
     navItem.inlineStyles = {};
     navItem.isOpen = true;
     navItem.isTransitioning = false;
@@ -108,15 +112,15 @@ export default class UcdThemeSubnav extends Mixin(LitElement)
     // Set expanded height
     navItem.inlineStyles.height = navUL.scrollHeight + "px";
     navItem.inlineStyles.display = "block";
-    await this.waitForUpdate();
+    await this.wait.waitForUpdate();
 
     // Set height to zero
-    await this.waitForFrames(2);
+    await this.wait.waitForFrames(2);
     navItem.inlineStyles.height = "0px";
-    await this.waitForUpdate();
+    await this.wait.waitForUpdate();
 
     // Complete animation
-    await this.waitForAnimation();
+    await this.wait.wait(this.animationDuration);
     navItem.inlineStyles = {};
     navItem.isOpen = false;
     navItem.isTransitioning = false;
@@ -129,7 +133,7 @@ export default class UcdThemeSubnav extends Mixin(LitElement)
   /**
    * @method _onChildListMutation
    * @private
-   * @description Fires when light dom child list changes. Injected by MutationObserverElement mixin.
+   * @description Fires when light dom child list changes. Injected by MutationObserverController.
    *  Sets the 'navItems' property.
    */
   _onChildListMutation(){

diff --git a/elements/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.js b/elements/ucdlib/ucdlib-branding-bar/ucdlib-branding-bar.js
@@ -1,7 +1,8 @@
 import { LitElement, svg } from 'lit';
 import {render, styles} from "./ucdlib-branding-bar.tpl.js";
 
-import {Mixin, MutationObserverElement, NavElement} from "../../utils";
+import {Mixin, NavElement} from "../../utils";
+import { MutationObserverController } from '../../utils/controllers';
 import logo from "./logo.js";
 import bookLogo from "./book.js";
 
@@ -22,7 +23,12 @@ import bookLogo from "./book.js";
  *  </ucdlib-branding-bar>
  */
 export default class UcdlibBrandingBar extends Mixin(LitElement)
-  .with(NavElement, MutationObserverElement) {
+  .with(NavElement) {
+
+  mutationObserver = new MutationObserverController(
+    this,
+    {childList: true, characterData: true, attributes: true}
+  );
 
   static get properties() {
     return {
@@ -82,7 +88,7 @@ export default class UcdlibBrandingBar extends Mixin(LitElement)
   /**
    * @method _onChildListMutation
    * @private
-   * @description Fires when light dom child list changes. Injected by MutationObserverElement mixin.
+   * @description Fires when light dom child list changes. Called by MutationObserverController.
    *  Sets the 'navItems' property.
    */
   _onChildListMutation(){

diff --git a/elements/ucdlib/ucdlib-iconset/ucdlib-iconset.js b/elements/ucdlib/ucdlib-iconset/ucdlib-iconset.js
@@ -1,5 +1,7 @@
 import { LitElement } from 'lit';
-import { Mixin, MutationObserverElement, MainDomElement} from "../../utils";
+import { Mixin, MainDomElement} from "../../utils";
+import { MutationObserverController } from '../../utils/controllers';
+
 
 /**
  * @class UcdlibIconset
@@ -18,7 +20,8 @@ import { Mixin, MutationObserverElement, MainDomElement} from "../../utils";
   </ucdlib-iconset>
  */
 export default class UcdlibIconset extends Mixin(LitElement)
-  .with(MutationObserverElement, MainDomElement) {
+  .with(MainDomElement) {
+  mutationObserver = new MutationObserverController(this, {subtree: true, childList: true});
 
   static get properties() {
     return {

diff --git a/elements/ucdlib/ucdlib-pages/ucdlib-pages.js b/elements/ucdlib/ucdlib-pages/ucdlib-pages.js
@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import {Mixin, MutationObserverElement} from '../../utils/index.js';
+import { MutationObserverController } from '../../utils/controllers';
 
 /**
  * @class UcdlibPages
@@ -16,8 +16,8 @@ import {Mixin, MutationObserverElement} from '../../utils/index.js';
  *   <div id="page2">Test 2</div>
  * </ucdlib-pages>
  */
-export default class UcdlibPages extends Mixin(LitElement)
-  .with(MutationObserverElement) {
+export default class UcdlibPages extends LitElement {
+  mutationObserver = new MutationObserverController(this);
 
   static get properties() {
     return {
@@ -55,7 +55,7 @@ export default class UcdlibPages extends Mixin(LitElement)
 
   /**
    * @method _onChildListMutation
-   * @description called when children change via MutationObserverElement
+   * @description called when children change via MutationObserverController
    */
   _onChildListMutation() {
     this._onChange();

diff --git a/elements/utils/controllers/index.js b/elements/utils/controllers/index.js
@@ -0,0 +1,7 @@
+import { MutationObserverController } from "./mutation-observer";
+import { WaitController } from "./wait";
+
+export {
+  MutationObserverController,
+  WaitController
+};
diff --git a/elements/utils/controllers/mutation-observer.js b/elements/utils/controllers/mutation-observer.js
@@ -0,0 +1,45 @@
+/**
+ * @class MutationObserverController
+ * @classdesc Lit controller that attaches a MutationObserver to an element
+ * 
+ * @property {LitElement} host - 'this' from a Lit element
+ * @property {Object} options - MutationObserver.observe options
+ * @property {String} callback - Name of element method called on mutation
+ */
+export class MutationObserverController {
+  host;
+  options;
+  callback;
+
+  _observer;
+
+  constructor(host, options = {childList: true}, callback = "_onChildListMutation"){
+    (this.host = host).addController(this);
+    this.options = options;
+    this.callback = callback;
+  }
+
+  hostConnected(){
+
+    this._observer = new MutationObserver(
+      (mutationsList, observer) => this._onMutation(mutationsList, observer)
+    );
+    this._observer.observe(this.host, this.options);
+    this._onMutation();
+  }
+
+  hostDisconnected(){
+    this._observer.disconnect();
+  }
+
+  _onMutation(mutationsList, observer){
+    if ( !this.host[this.callback]){
+      console.warn(
+        `Element has no '${this.callback}' method. 
+        Either add this method, or change the 'callback' argument on instantiation.`
+      );
+      return;
+    }
+    this.host[this.callback](mutationsList, observer);
+  }
+}