@ulu/frontend 0.1.0-beta.4 → 0.1.0-beta.40

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/index.js

@@ -19,3 +19,4 @@ export * as print from "./print.js";
 export * as printDetails from "./print-details.js";
 export * as scrollSlider from "./scroll-slider.js";
 export * as themeToggle from "./theme-toggle.js";
+export * as detailsGroup from "./details-group.js";

package/js/ui/modal-builder.js

@@ -1,22 +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)
@@ -37,14 +37,17 @@ export const defaults = {
   print: false,
   noMinHeight: false,
   class: "",
-  classCloseIcon: "css-icon css-icon--close",
-  classResizerIcon: "css-icon css-icon--drag",
+  baseClass: "modal",
+  classCloseIcon: wrapSettingString("iconClassClose"),
+  classResizerIcon: wrapSettingString("iconClassDragX"),
   debug: false,
   templateCloseIcon(config) {
-    return `<span class="modal__close-icon ${ config.classCloseIcon }" aria-hidden="true"></span>`;
+    const { baseClass, classCloseIcon } = config;
+    return `<span class="${ baseClass }__close-icon ${ classCloseIcon }" aria-hidden="true"></span>`;
   },
   templateResizerIcon(config) {
-    return `<span class="modal__resizer-icon ${ config.classResizerIcon }" aria-hidden="true"></span>`;
+    const { baseClass, classResizerIcon } = config;
+    return `<span class="${ baseClass }__resizer-icon ${ classResizerIcon }" aria-hidden="true"></span>`;
   },
   /**
    * Default modal template
@@ -53,35 +56,36 @@ export const defaults = {
    * @returns {String} Markup for modal
    */
   template(id, config) {
+    const { baseClass } = config;
     const classes = [
-      "modal",
-      `modal--${ config.position }`,
-      `modal--${ config.size }`,
-      `modal--${ config.allowResize ? "resize" : "no-resize" }`,
-      ...(!config.title ? ["modal--no-header"] : []),
-      ...(config.bodyFills ? ["modal--body-fills"] : []), 
-      ...(config.noBackdrop ? ["modal--no-backdrop"] : []), 
-      ...(config.noMinHeight ? ["modal--no-min-height"] : [] ),
+      baseClass,
+      `${ baseClass }--${ config.position }`,
+      `${ baseClass }--${ config.size }`,
+      `${ baseClass }--${ config.allowResize ? "resize" : "no-resize" }`,
+      ...(!config.title ? [`${ baseClass }--no-header`] : []),
+      ...(config.bodyFills ? [`${ baseClass }--body-fills`] : []), 
+      ...(config.noBackdrop ? [`${ baseClass }--no-backdrop`] : []), 
+      ...(config.noMinHeight ? [`${ baseClass }--no-min-height`] : [] ),
       ...(config.class ? [config.class] : []), 
     ];
     return `
       <dialog id="${ id }" class="${ classes.join(" ") }">
         ${ config.title ? `
-          <header class="modal__header">
-            <h2 class="modal__title">
+          <header class="${ baseClass }__header">
+            <h2 class="${ baseClass }__title">
               ${ config.titleIcon ? 
-                `<span class="modal__title-icon ${ config.titleIcon }" aria-hidden="true"></span>` : "" 
+                `<span class="${ baseClass }__title-icon ${ config.titleIcon }" aria-hidden="true"></span>` : "" 
               }
-              <span class="modal__title-text">${ config.title }</span>
+              <span class="${ baseClass }__title-text">${ config.title }</span>
             </h2>
-            <button class="modal__close" aria-label="Close modal" ${ dialogAttrs.close } autofocus>
+            <button class="${ baseClass }__close" aria-label="Close modal" ${ closeAttribute } autofocus>
               ${ config.templateCloseIcon(config) }
             </button>
           </header>
         ` : "" }
-        <div class="modal__body" ${ attrs.body }></div>
+        <div class="${ baseClass }__body" ${ initializer.getAttribute("body") }></div>
         ${ config.hasResizer ? 
-          `<div class="modal__resizer" ${ attrs.resizer }>
+          `<div class="${ baseClass }__resizer" ${ initializer.getAttribute("resizer") }>
             ${ config.templateResizerIcon(config) }
           </div>` : "" 
         }
@@ -105,26 +109,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);
+    }
+  });
 }
 
 /**
@@ -140,7 +131,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");
@@ -148,7 +139,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);
@@ -156,12 +147,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, {

package/js/ui/overflow-scroller.js

@@ -10,6 +10,7 @@
  * @todo - Document that user could use something like [https://github.com/LachlanArthur/scroll-snap-api/tree/master/src] to have it go between items
  * 
  */
+import { wrapSettingString } from "../settings.js";
 import { hasRequiredProps } from '@ulu/utils/object.js';
 import { logError } from "../utils/class-logger.js";
 const requiredElements = [
@@ -26,14 +27,15 @@ export class OverflowScroller {
     offsetEnd: 100,
     amount: "auto",
     buttonClasses: ["button", "button--icon"],
-    iconClassesPrevious: ["css-icon", "css-icon--angle-left"],
-    iconClassesNext: ["css-icon", "css-icon--angle-right"]
+    iconClassPrevious: wrapSettingString("iconClassPrevious"),
+    iconClassNext: wrapSettingString("iconClassNext"),
   }
   constructor(elements, config) {
     this.options = Object.assign({}, OverflowScroller.defaults, config);
     if (!hasRequiredProps(requiredElements)) {
       logError(this, 'Missing a required Element');
     }
+    console.log(elements)
     this.elements = {
       ...elements,
       ...this.createControls(elements.controls)
@@ -87,10 +89,10 @@ export class OverflowScroller {
     return button;
   }
   getControlContent(action) {
-    const classes = this.options[action === "next" ? "iconClassesNext" : "iconClassesPrevious"];
+    const classes = this.options[action === "next" ? "iconClassNext" : "iconClassPrevious"];
     return `
       <span class="hidden-visually">${ action }</span>
-      <span class="${ classes.join(' ') }" aria-hidden="true"></span>
+      <span class="${ classes }" aria-hidden="true"></span>
     `;
   }
   onScroll(event) {

package/js/ui/popover.js

@@ -2,24 +2,27 @@
  * @module ui/popover
  */
 
-import { getName } from "../events/index.js";
+import { ComponentInitializer } from "../utils/system.js";
 import { createFloatingUi } from "../utils/floating-ui.js";
 import { Collapsible } from "./collapsible.js";
 
 /**
- * Array of current instances
+ * Popover Component Initializer
  */
-export const instances = new WeakMap;
+export const initializer = new ComponentInitializer({ 
+  type: "popover", 
+  baseAttribute: "data-ulu-popover"
+});
 
-const logError = (...msgs) => console.error("@ulu (popovers):", ...msgs);
+const attrSelectorAnchor = initializer.attributeSelector("trigger-anchor");
+const attrSelectorArrow = initializer.attributeSelector("arrow");
+const attrContent = initializer.getAttribute("content");
+const attrSelectorContent = initializer.attributeSelector("content");
 
-const attrs = {
-  trigger: "data-ulu-popover-trigger",
-  content: "data-ulu-popover-content",
-  arrow: "data-ulu-popover-arrow",
-  anchor: "data-ulu-popover-trigger-anchor",
-};
-const attrSelector = key => `[${ attrs[key] }]`;
+/**
+ * Array of current instances
+ */
+export const instances = new WeakMap;
 
 // This modules collapsible defaults
 const collapsibleDefaults = {
@@ -31,47 +34,44 @@ const collapsibleDefaults = {
  * Initialize default popover
  */
 export function init() {
-  document.addEventListener(getName("pageModified"), setup);
-  setup();
-}
+  initializer.init({
+    key: "trigger",
+    withData: true,
+    events: ["pageModified"],
+    setup({ element, data, initialize }) {
+      if (instances.has(element)) return;
+      const resolved = resolve(element, data);
 
-/**
- * Query all popovers on current page and set them up
- * - Use this manually if needed
- * - Won't setup a popover more than once
- */
-export function setup() {
-  const triggers = document.querySelectorAll(attrSelector("trigger"));
-  // Only triggers we don't have instances for
-  const resolved = Array.from(triggers)
-    .filter(trigger => !instances.has(trigger))
-    .map(resolve)
-    .filter(v => v);
+      if (!resolved) {
+        initializer.warn("Unable to resolve popover elements for trigger.", element);
+        return;
+      }
 
-  resolved.forEach(({ elements, options, floatingOptions  }) => {
-    instances.set(elements.trigger, new Popover(elements, options, floatingOptions));
+      const { elements, options, floatingOptions } = resolved;
+      instances.set(elements, new Popover(elements, options, floatingOptions));
+      initialize();
+    }
   });
 }
 
 /**
  * Find the popover's elements
  */
-export function resolve(trigger) {
-  const raw = trigger.dataset.uluPopoverTrigger;
-  const options = raw?.length ? JSON.parse(raw) : {};
+export function resolve(trigger, userOptions) {
+  const options = Object.assign({}, userOptions);
   const content = getContentByTrigger(trigger);
   const elements = {
     trigger,
     content,
-    anchor: trigger.querySelector(attrSelector("anchor")) || trigger,
-    contentArrow: content.querySelector(attrSelector("arrow"))
+    anchor: trigger.querySelector(attrSelectorAnchor) || trigger,
+    contentArrow: content.querySelector(attrSelectorArrow)
   };
   const floatingOptions = options.floating || {};
   delete options.floating;
   if (content) {
     return { elements, options, floatingOptions };
   } else {
-    logError("Unable to make popover for", trigger);
+    initializer.logError("Unable to make popover for", trigger);
     return false;
   }
 }
@@ -85,17 +85,17 @@ export function getContentByTrigger(trigger) {
 
   if (ariaControls) {
     content = document.getElementById(ariaControls);
-  } else if (trigger?.nextElementSibling?.hasAttribute(attrs.content)) {
+  } else if (trigger?.nextElementSibling?.hasAttribute(attrContent)) {
     content = trigger.nextElementSibling;  
   // @todo - Consider removing this (non standard, users like this should be using aria-controls)
   } else {
     const children = Array.from(trigger.parentNode.children);
     const triggerIndex = children.findIndex(c => c === trigger);
     const childrenAfter = children.slice(triggerIndex);
-    content = childrenAfter.find(child => child.matches(attrSelector("content")));
+    content = childrenAfter.find(child => child.matches(attrSelectorContent));
   }
   if (!content) {
-    logError("Unable to resolve 'content' element for popover", trigger);
+    initializer.logError("Unable to resolve 'content' element for popover", trigger);
   }
   return content;
 }
@@ -123,7 +123,7 @@ export class Popover extends Collapsible {
   }
   createFloatingInstance() {
     const { content, anchor, contentArrow } = this.elements;
-    const floatingElements = { trigger: anchor, contentArrow, content };    
+    const floatingElements = { trigger: anchor, contentArrow, content };   
     this.floatingCleanup = createFloatingUi(floatingElements, this.floatingOptions);
   }
   destroyFloatingInstance() {

package/js/ui/print.js

@@ -2,18 +2,14 @@
  * @module ui/print
  */
 
-import { getName } from "../events/index.js";
-import { getDatasetOptionalJson, getElement } from "../utils/dom.js";
+import { ComponentInitializer } from "../utils/system.js";
+import { getElement } from "../utils/dom.js";
 import { printElement } from "@ulu/utils/browser/print.js";
 
-export const attrs = {
-  trigger: "data-ulu-print",
-  init: "data-ulu-print-init",
-};
-
-const attrSelector = key => `[${ attrs[key] }]`;
-const attrSelectorInitial = key => `${ attrSelector(key) }:not([${ attrs.init }])`;
-const queryAllInitial = key => document.querySelectorAll(attrSelectorInitial(key));
+const initializer = new ComponentInitializer({
+  type: "print",
+  baseAttribute: "data-ulu-print"
+});
 
 /**
  * Default options
@@ -30,27 +26,22 @@ 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 triggers currently on the page
- */
-function setup() {
-  const triggers = queryAllInitial("trigger");
-  triggers.forEach(trigger => {
-    const options = getDatasetOptionalJson(trigger, "uluPrint");
-    setupTrigger(trigger, options);
+  initializer.init({
+    withData: true,
+    events: ["pageModified"],
+    setup({ element, data, initialize }) {
+      setupTrigger(element, data);
+      initialize();
+    }
   });
 }
 
 /**
  * Setup a single trigger (can be used manually without attr if needed)
  */
-function setupTrigger(trigger, options) {
-  const config = Object.assign({}, defaults, options);
-  trigger.addEventListener("click", (event) => {
+function setupTrigger(trigger, userOptions) {
+  const config = Object.assign({}, defaults, userOptions);
+  trigger.addEventListener("click", () => {
     // Option to print a specific element
     if (config.element) {
       const element = getElement(config.element);

package/js/ui/programmatic-modal.js

@@ -5,6 +5,7 @@
 
 import { getName, dispatch } from "../events/index.js";
 import { newId } from "../utils/id.js";
+import { getElement } from "../utils/dom.js";
 import { buildModal } from "./modal-builder.js";
 
 export class ProgrammaticModalManager {
@@ -43,12 +44,17 @@ export class ProgrammaticModalManager {
     });
   }
   createAndOpen(config, afterCreate) {
-    const { selector, noClickTrigger, removeOnClose } = config;
-    const content = document.querySelector(selector);
+    const { noClickTrigger, removeOnClose, element, classes } = config;
+    const content = getElement(element);
     if (!content.id) {
       content.id = newId();
     }
 
+    // Added to match original jquery module api
+    if (classes) {
+      content.classList.add(...classes);
+    }
+
     let trigger;
     if (!noClickTrigger) {
       trigger = this.cachedTrigger;
@@ -57,7 +63,7 @@ export class ProgrammaticModalManager {
     }
 
     if (!content) {
-      console.error("No element found from config.selector. ", config);
+      console.error("No element found from config.element. ", config);
       return;
     }
     const { modal } = buildModal(content, config.modal);