@ulu/frontend 0.1.0-beta.33 → 0.1.0-beta.34

package/js/ui/breakpoints.js

@@ -97,9 +97,8 @@ export class BreakpointManager {
       logError(this, 'Unable to get current breakpoint, maybe order is incorrect? Breakpoint check skipped!');
       return;
     }
-    // console.log('name:\n', name);
     if (name === this.active) return;
-    // this.log(`current breakpoint: ${ name }`);
+    
     // Update active and cache last
     this.previous = this.active;
     this.previousIndex = this.activeIndex;

package/js/ui/details-group.js

@@ -3,20 +3,18 @@
  * @description Manages groups of details (ie. onlyOneOpen at a time)
  */
 
-import { getName } from "../events/index.js";
-import { getDatasetOptionalJson } from "../utils/dom.js";
+import { ComponentInitializer } from "../utils/system.js";
 
-export const attrs = {
-  init: "data-ulu-details-group-init",
-  childInit: "data-ulu-details-group-child-init",
-  group: "data-ulu-details-group",
-};
-
-// Utils for selecting things based on attributes
-const attrSelector = key => `[${ attrs[key] }]`;
-const attrSelectorInitial = key => `${ attrSelector(key) }:not([${ attrs.init }])`;
+/**
+ * Dialog Component Initializer
+ */
+export const initializer = new ComponentInitializer({ 
+  type: "details-group", 
+  baseAttribute: "data-ulu-details-group" 
+});
 
-const defaults  = {
+const childInitAttr = initializer.getAttribute("child-init");
+const defaults = {
   onlyOneOpen: true,
   childSelector: ":scope > details"
 };
@@ -26,24 +24,14 @@ const defaults  = {
  * - This will only initialize elements once, it is safe to call on page changes
  */
 export function init() {
-  document.addEventListener(getName("pageModified"), () => setup());
-  setup();
-}
-
-/**
- * Setup all dialog groups within context
- * @param {HTMLElement} context [document] Element to query within
- * @returns {Array} Array matching the groups queried with their return objects from setupGroup() [used for destroy/etc]
- */
-export function setup(context = document) {
-  // Added try because we are using querySelectorAll with :scope by default
-  // which will not work in Internet Explorer or early edge (some alt. browsers too)
-  try {
-    const elements = context.querySelectorAll(attrSelectorInitial("group"));
-    return [...elements].map(setupGroup);
-  } catch(error) {
-    console.error(error);
-  }
+  initializer.init({
+    withData: true,
+    events: ["pageModified"],
+    setup({ element, data, initialize }) {
+      setupGroup(element, data);
+      initialize();
+    }
+  });
 }
 
 /**
@@ -56,14 +44,19 @@ export function setup(context = document) {
 /**
  * Sets up a single group of details elements to manage their behavior.
  * @param {HTMLElement} element - The parent element containing the details elements.
+ * @param {Object} options - The options for this group
  * @returns {DetailsGroupInstance}      
  */
-export function setupGroup(element) {
-  const elementOptions = getDatasetOptionalJson(element, "uluDetailsGroup");
-  const options = Object.assign({}, defaults, elementOptions);
-  
-  element.setAttribute(attrs.t, "");
-  setupChildren();
+export function setupGroup(element, userOptions) {
+  const options = Object.assign({}, defaults, userOptions);
+
+  // Added try because we are using querySelectorAll with :scope by default
+  // which will not work in Internet Explorer or early edge (some alt. browsers too)
+  try {
+    setupChildren();
+  } catch(error) {
+    console.error(error);
+  }
 
   /**
    * Queries all current children in element
@@ -78,13 +71,11 @@ export function setupGroup(element) {
    */
   function setupChildren() {
     queryChildren().forEach(child => {
-      if (child.hasAttribute(attrs.childInit)) {
+      if (child.hasAttribute(childInitAttr)) {
         return;
       } else {
-        child.setAttribute(attrs.childInit, "");
+        child.setAttribute(childInitAttr, "");
       }
-      console.log(child);
-      
       child.addEventListener("toggle", toggleHandler);  
     });
   }
@@ -112,9 +103,9 @@ export function setupGroup(element) {
   function destroy() {
     queryChildren().forEach(child => {
       child.removeEventListener("toggle", toggleHandler);
-      child.removeAttribute(attrs.childInit);
+      child.removeAttribute(childInitAttr);
     });
-    element.removeAttribute(attrs.init);
+    element.removeAttribute(initializer.getAttribute("init"));
   }
 
   return { destroy, element, setupChildren };

package/js/ui/dialog.js

@@ -2,23 +2,24 @@
  * @module ui/dialog
  */
 
-import { getName } from "../events/index.js";
-import { getDatasetJson, wasClickOutside } from "../utils/dom.js";
+import { ComponentInitializer } from "../utils/system.js";
+import { wasClickOutside } from "../utils/dom.js";
 import { pauseVideos as pauseYoutubeVideos, prepVideos as prepYoutubeVideos } from "../utils/pause-youtube-video.js";
+
 /**
- * Default data attributes
+ * Base attribute for a dialog
  */
-export const attrs = {
-  init: "data-ulu-dialog-init",
-  dialog: "data-ulu-dialog",
-  trigger: "data-ulu-dialog-trigger",
-  close: "data-ulu-dialog-close",
-};
+export const baseAttribute = "data-ulu-dialog"; // Exposed for modal builder
+
+/**
+ * Dialog Component Initializer
+ */
+export const initializer = new ComponentInitializer({ type: "dialog", baseAttribute });
 
-// Utils for selecting things based on attributes
-const attrSelector = key => `[${ attrs[key] }]`;
-const attrSelectorInitial = key => `${ attrSelector(key) }:not([${ attrs.init }])`;
-const queryAllInitial = key => document.querySelectorAll(attrSelectorInitial(key));
+/**
+ * Attribute for close buttons within a dialog
+ */
+export const closeAttribute = initializer.getAttribute("close"); // Exposed for modal builder
 
 /**
  * Dialog Defaults 
@@ -42,6 +43,10 @@ export const defaults = {
    * Whether or not to pause videos when dialog closes (currently just youtube and native)
    */
   pauseVideos: true,
+  /**
+   * When open and not non-modal, the body is prevented from scrolling (defaults to true).
+   */
+  preventScroll: true,
 };
 
 
@@ -49,7 +54,7 @@ export const defaults = {
 let currentDefaults = { ...defaults };
 
 /**
- * @param {Object} options Change options used as default for dialogs, can then be overriden by data attribute settings on element
+ * @param {Object} options Change options used as default for dialogs, can then be overridden by data attribute settings on element
  */
 export function setDefaults(options) {
   currentDefaults = Object.assign({}, currentDefaults, options);
@@ -60,35 +65,40 @@ export function setDefaults(options) {
  * - This will only initialize elements once, it is safe to call on page changes
  */
 export function init() {
-  document.addEventListener(getName("pageModified"), setup);
-  setup();
-}
-
-/**
- * Setup dialogs and triggers
- */
-export function setup() {
-  // Then setup all dialogs (including those that were built)
-  const dialogs = queryAllInitial("dialog");
-  dialogs.forEach(setupDialog);
-
-  const triggers = queryAllInitial("trigger");
-  triggers.forEach(setupTrigger);
+  // Initialize all the dialogs
+  initializer.init({
+    events: ["pageModified"],
+    withData: true,
+    setup({ element, initialize, data }) {
+      setupDialog(element, data);
+      initialize();
+    }
+  });
+
+  // Initialize all triggers (things that trigger opening a dialog)
+  initializer.init({
+    key: "trigger",
+    events: ["pageModified"],
+    withData: true,
+    setup({ element, initialize, data: dialogId }) {
+      setupTrigger(element, dialogId);
+      initialize();
+    }
+  });
 }
 
 /**
  * Setup click handlers on a trigger
- * @param {Node} trigger 
+ * @param {Node} trigger Trigger button element
+ * @param {String} dialogId The dialog's id to open
  */
-export function setupTrigger(trigger) {
+export function setupTrigger(trigger, dialogId) {
   trigger.addEventListener("click", handleTrigger);
-  trigger.setAttribute(attrs.init, "");
 
   function handleTrigger() {
-    const id = trigger.dataset.uluDialogTrigger;
-    const dialog = document.getElementById(id);
+    const dialog = document.getElementById(dialogId);
     if (!dialog) {
-      console.error("Could not locate dialog (id)", id);
+      console.error("Could not locate dialog (id)", dialogId);
       return;
     }
     if (dialog?.tagName?.toLowerCase() !== "dialog") {
@@ -104,20 +114,33 @@ export function setupTrigger(trigger) {
  * Setup click handlers for a dialog
  * @param {Node} dialog 
  */
-export function setupDialog(dialog) {
-  const options = getDialogOptions(dialog);
+export function setupDialog(dialog, userOptions) {
+  const options = Object.assign({}, currentDefaults, userOptions);
+  const body = document.body;
+  
   dialog.addEventListener("click", handleClicks);
-  dialog.setAttribute(attrs.init, "");
+
   if (options.documentEnd) {
-    document.body.appendChild(dialog);
+    body.appendChild(dialog);
   }
   if (options.pauseVideos) {
     prepVideos(dialog);
   }
 
+  // Allow preventScroll if it is a modal dialog
+  // Caching value of overflow before setting so we don't assume what it's initial value is
+  if (!options.nonModal && options.preventScroll) {
+    let overflowValue = body.style.overflow;
+    dialog.addEventListener("toggle", (event) => {
+      const isOpen = event.newState === "open";
+      if (isOpen) overflowValue = body.style.overflow;
+      body.style.overflow = isOpen ? "hidden" : overflowValue;
+    });
+  }
+
   function handleClicks(event) {
     const { target } = event;
-    const closeFromButton = target.closest("[data-ulu-dialog-close]");
+    const closeFromButton = target.closest(initializer.attributeSelector("close"));
     let closeFromOutside = options.clickOutsideCloses && 
                            target === dialog && 
                            wasClickOutside(dialog, event);
@@ -136,8 +159,7 @@ export function setupDialog(dialog) {
  * @returns {Object}
  */
 export function getDialogOptions(dialog) {
-  const options = getDatasetJson(dialog, "uluDialog");
-  return Object.assign({}, currentDefaults, options);
+  return Object.assign({}, currentDefaults, initializer.getData(dialog));
 }
 
 /**
@@ -146,6 +168,7 @@ export function getDialogOptions(dialog) {
 function prepVideos(dialog) {
   prepYoutubeVideos(dialog);
 }
+
 /**
  * Prep videos to be paused for a given dialog
  */

package/js/ui/dialog.todo

@@ -1,37 +1,3 @@
-Styling:
-  ✔ Animations? @done
-  ☐ Check styling on left right
+Dialog Todos:
   ☐ Setup fullscreen option / modifier
-  ☐ Setup programmatic modal with new system
-  ☐ Resizing
-    ✔ Work out how this can work with native and click outside @done
-    ✔ Figure out how to setup icon for the resizer for all sites @done
-      * Fontawesome, or should this just be CSS so we don't need any icons for it
-      * Same for close button should we just use CSS and omit any FA requirements
-      * Or make it super easy to implement the icon only in the template (like default icon classses)
-        * Then user can choose to implement their own (via class) or use the styles that come with it
-  ☐ Prevent Browser Scroll
-  ✔ How should height work? Should a centered modal expand to it's content's height (up to the viewport height) or always be cropped and scroll (static height)? @done
-Todos:
-  ✔ How should the relationship between a dialog and it's trigger work @done
-    * Think there should be no relationship? Just triggers are triggers just attach a handler to open DOM centric way (add errors when the dialog doesn't exist)
-    * For the dialogs they should just have handlers attached for close
-      * Init should find all one's that need to be built and build them, then it should initialize them the same way as non-built dialogs
-  ✔ Support both modal and non-modal dialogs (rename)? @done
-  ✘ Divide into 4 modules @cancelled
-    1. Initializer (data-attributes)
-    2. Templater (for Drupal projects and standard modals)
-    3. Open/Close Behaviors
-    4. Programmatic Modal
-      * This is tough because its opionated towards our system in Drupal (jQuery)
-  ✔ How should this all be structured @done
-    * JS template dialogs?
-      * Pros
-        * Many users create the modals in content in CMS we don't want to make that difficult or get stuck with structure
-      * Cons
-        * Templating is in JS so dialogs don't make much sense on their own
-          * Could continue the div to dialog conversion (so modal content is inline unless JS running). Don't want to optimize too much for no js anymore anyways
-        * writing the dialog by hand makes sense for non defualt modal styles or users that have another structure but need the scripting part
-      * Solution
-        * Breakup module into two parts the underlying modal scripting (open close trigger) and (conversion modal templating [w. resizer] and as <div>)
-          * Then we can have both without any extra code and seperation
+  ☐ Prevent Browser Scroll

package/js/ui/flipcard.js

@@ -2,14 +2,43 @@
  * @module ui/flipcard
  */
 
+import { ComponentInitializer } from "../utils/system.js";
 import { trimWhitespace } from "@ulu/utils/string.js";
 import { log, logError } from "../utils/class-logger.js";
-import { getName } from "../events/index.js";
-import { getDatasetOptionalJson } from "../utils/dom.js";
-const debugMode = false; // Global dev debug
 
+/**
+ * Flipcard Component Initializer
+ */
+export const initializer = new ComponentInitializer({ 
+  type: "flipcard", 
+  baseAttribute: "data-ulu-flipcard"
+});
+
+/**
+ * Initialize flipcards using data-ulu-flipcard attribute
+ */
+export function init() {
+  initializer.init({
+    withData: true,
+    events: ["pageModified"],
+    setup({ element, data, initialize }) {
+      const options = Object.assign({}, data);
+      const front = element.querySelector(initializer.attributeSelector("front"));
+      const back = element.querySelector(initializer.attributeSelector("back"));
+      (new Flipcard(element, front, back, options));
+      initialize();
+    }
+  });
+}
+
+/**
+ * Flipcard class (creates flipcard instance and behaviors)
+ */
 export class Flipcard {
   static instances = [];
+  /**
+   * Default options for Flipcard
+   */
   static defaults = {
     namespace: "Flipcard",
     proxyClick: {
@@ -18,25 +47,25 @@ export class Flipcard {
       exclude:  "a, input, textarea, button"  // Selectors to avoid closing a flipcard onProxyclick 
     },
   };
-  constructor(container, front, back, config, debug = false) {
+  constructor(container, front, back, config) {
     if (!container, !front, !back) {
       logError(this, 'Missing an element (container, front, back)');
     }
     this.options = Object.assign({}, Flipcard.defaults, config);
     const { namespace } = this.options;
+
     Flipcard.instances.push(this);
 
-    this.debug = debugMode || debug;
     this.elements = { container, front, back };
     this.isOpen = false;
     this.uid = `${ namespace }-id-${ Flipcard.instances.length }`;
     this.stateAttr = `data-${ namespace }-state`.toLowerCase();
     this.setup();
-    this.setVisiblity(false);
+    this.setVisibility(false);
     log(this, this);
   }
   toggle() {
-    this.setVisiblity(!this.isOpen);
+    this.setVisibility(!this.isOpen);
   }
   setup() {
     const { uid } = this;
@@ -98,7 +127,7 @@ export class Flipcard {
       <span class="hidden-visually">Show More Information</span>
     `;
   }
-  setVisiblity(visible) {
+  setVisibility(visible) {
     const { back, container, control } = this.elements;
     const state = visible ? "open" : "closed";
     back.style.zIndex = visible ? "10" : "1";
@@ -128,56 +157,7 @@ export class Flipcard {
   }
 }
 
-/**
- * Default data attributes
- */
-export const attrs = {
-  init: "data-ulu-flipcard-init",
-  flipcard: "data-ulu-flipcard",
-  front: "data-ulu-flipcard-front",
-  back: "data-ulu-flipcard-back",
-};
-
-// Utils for selecting things based on attributes
-const attrSelector = key => `[${ attrs[key] }]`;
-const attrSelectorInitial = key => `${ attrSelector(key) }:not([${ attrs.init }])`;
-
-// const containers = document.querySelectorAll('[data-ulu-flipcard]');
-const instances = [];
-
-export function init() {
-  document.addEventListener(getName("pageModified"), setup);
-  setup();
-}
 
-export function setup() {
-  const builders = document.querySelectorAll(attrSelectorInitial("flipcard"));
-  builders.forEach(setupFlipcard);
-}
-
-// containers.forEach(init);
-
-function setupFlipcard(container) {
-  container.setAttribute(attrs.init, "");
-  const options = getDatasetOptionalJson(container, "uluFlipcard");
-  const config = Object.assign({},  options);
-  const front = container.querySelector(attrSelectorInitial("front"));
-  const back = container.querySelector(attrSelectorInitial("back"));
-  instances.push(new Flipcard(container, front, back, config));
-}
-
-// getDatasetOptionalJson
-function setupSlider(container) {
-  container.setAttribute(attrs.init, "");
-  const options = getDatasetOptionalJson(container, "uluFlipcard");
-  const config = Object.assign({},  options);
-  const elements = {
-    track: container.querySelector(attrSelector("track")),
-    controls: container.querySelector(attrSelector("controls"))
-  };
-  // replace with OverflowScroller when finished removing sitescrollslider
-  instances.push(new SiteScrollSlider(elements, config));
-}
 
 /**
  * Preliminary Notes:

package/js/ui/grid.js

@@ -2,25 +2,27 @@
  * @module ui/grid
  */
 
+import { ComponentInitializer } from "../utils/system.js";
 import { setPositionClasses } from "../utils/dom.js";
-import { getName } from "../events/index.js";
 
 /**
- * Sets up document for grid position classes
- * @param {String} selector The selector for the parent element
- * @param {Object} classes Classes (optional) @see setPositionClasses
+ * Dialog Component Initializer
  */
-export function init(selector = "[data-grid]", classes) {
-  document.addEventListener(getName("pageModified"), () => setup(selector, classes));
-  document.addEventListener(getName("pageResized"), () => setup(selector, classes));
-  setup(selector, classes);
-}
+export const initializer = new ComponentInitializer({ 
+  type: "grid", 
+  baseAttribute: "data-grid"
+});
 
 /**
- * Goes through document and finds elements that need to have positioning classes
- * @param {String} selector The selector for the parent element
+ * Sets up document for grid position classes
  * @param {Object} classes Classes (optional) @see setPositionClasses
  */
-export function setup(selector, classes) {
-  document.querySelectorAll(selector).forEach(element => setPositionClasses(element, classes || undefined));
+export function init(classes) {
+  initializer.init({
+    events: ["pageModified", "pageResized"],
+    setup({ element, initialize }) {
+      setPositionClasses(element, classes);
+      initialize();
+    }
+  });
 }

package/js/ui/modal-builder.js

@@ -1,23 +1,22 @@
 /**
  * @module ui/modal-builder
+ * @description Note this module needs to be initialized before dialogs!
  */
 
-// Note this needs to be run before dialogs are initialized!
-
+import { ComponentInitializer } from "../utils/system.js";
 import { wrapSettingString } from "../settings.js";
 import { getName } from "../events/index.js";
 import { createElementFromHtml } from "@ulu/utils/browser/dom.js";
 import { Resizer } from "./resizer.js";
-import { getDatasetJson } from "../utils/dom.js";
-import { defaults as dialogDefaults, attrs as dialogAttrs } from "./dialog.js";
-
-const attrs = {
-  builder: "data-ulu-modal-builder",
-  body: "data-ulu-modal-builder-body",
-  resizer: "data-ulu-modal-builder-resizer"
-};
+import { baseAttribute, closeAttribute, defaults as dialogDefaults } from "./dialog.js";
 
-const attrSelector = key => `[${ attrs[key] }]`;
+/**
+ * Modal Builder Component Initializer
+ */
+export const initializer = new ComponentInitializer({ 
+  type: "modal-builder", 
+  baseAttribute: "data-ulu-modal-builder"
+});
 
 /**
  * Default builder options (extends dialog defaults, watch name collisions)
@@ -75,14 +74,14 @@ export const defaults = {
               }
               <span class="modal__title-text">${ config.title }</span>
             </h2>
-            <button class="modal__close" aria-label="Close modal" ${ dialogAttrs.close } autofocus>
+            <button class="modal__close" aria-label="Close modal" ${ closeAttribute } autofocus>
               ${ config.templateCloseIcon(config) }
             </button>
           </header>
         ` : "" }
-        <div class="modal__body" ${ attrs.body }></div>
+        <div class="modal__body" ${ initializer.getAttribute("body") }></div>
         ${ config.hasResizer ? 
-          `<div class="modal__resizer" ${ attrs.resizer }>
+          `<div class="modal__resizer" ${ initializer.getAttribute("resizer") }>
             ${ config.templateResizerIcon(config) }
           </div>` : "" 
         }
@@ -106,26 +105,13 @@ export function setDefaults(options) {
  * - This will only initialize elements once, it is safe to call on page changes
  */
 export function init() {
-  document.addEventListener(getName("pageModified"), setup);
-  setup();
-}
-
-/**
- * Query and setup all builder
- */
-export function setup() {
-  const builders = document.querySelectorAll(attrSelector("builder"));
-  builders.forEach(setupBuilder);
-}
-
-/**
- * Build a dialog for the given content
- * @param {Node} element 
- */
-export function setupBuilder(element) {
-  const options = getDatasetJson(element, "uluModalBuilder");
-  element.removeAttribute(attrs.builder);
-  buildModal(element, options);
+  initializer.init({
+    withData: true,
+    events: ["pageModified"],
+    setup({ element, data }) {
+      buildModal(element, data);
+    }
+  });
 }
 
 /**
@@ -141,7 +127,7 @@ export function buildModal(content, options) {
     config.hasResizer = true;
   }
   if (config.debug) {
-    console.log(config, content);
+    initializer.log(config, content);
   }
   if (!content.id) {
     throw new Error("Missing ID on modal");
@@ -149,7 +135,7 @@ export function buildModal(content, options) {
   
   const markup = config.template(content.id, config);
   const modal = createElementFromHtml(markup.trim());
-  const selectChild = key => modal.querySelector(attrSelector(key));
+  const selectChild = key => modal.querySelector(initializer.attributeSelector(key));
   const body = selectChild("body");
   const resizer = selectChild("resizer");
   const dialogOptions = separateDialogOptions(config);
@@ -157,12 +143,12 @@ export function buildModal(content, options) {
   // Replace content with new dialog, and then insert the content into the new dialogs body
   content.removeAttribute("id");
   content.removeAttribute("hidden");
-  content.removeAttribute(attrs.builder);
+  content.removeAttribute(initializer.getAttribute());
   content.parentNode.replaceChild(modal, content);
   body.appendChild(content);
 
   // Add dialog options for other scripts
-  modal.setAttribute(dialogAttrs.dialog, JSON.stringify(dialogOptions));
+  modal.setAttribute(baseAttribute, JSON.stringify(dialogOptions));
 
   if (config.hasResizer) {
     new Resizer(modal, resizer, {