@ulu/frontend 0.1.0-beta.8 → 0.1.0-beta.80

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,32 +1,68 @@
 /**
  * @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";
+import { getElement } from "@ulu/utils/browser/dom.js";
+import { createElementFromHtml } from "@ulu/utils/browser/dom.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)
  * - Decided to extend defaults so the interface in HTML is singular
- *   - This is sometimes easier to template (merging and serializing options 
- *     in twig for example)
+ * - This is sometimes easier to template (merging and serializing options
+ * in twig for example)
+ * @typedef {object} DefaultModalOptions
+ * @property {string|null} title - The title of the modal. Defaults to `null`.
+ * @property {string|null} titleIcon - The class name for an icon to display in the title. Defaults to `null`.
+ * @property {string} titleClass - Extra class/classes to add to title
+ * @property {string} labelledby - Set the aria-labelledby attribute to a specific title within the modal, to connect to a custom title implementation, if using built in title this will be set automatically
+ * @property {string} describedby - Set the aria-describedby on the dialog, elements id, to tie a specific part of the content to be the accessible description
+ * @property {boolean} nonModal - If `true`, the modal will not prevent interaction with elements behind it. Defaults to `false`.
+ * @property {boolean} documentEnd - If `true`, the modal will be appended to the end of the `document.body`. Defaults to `true`.
+ * @property {boolean} allowResize - If `true`, the modal will be resizable. Defaults to `false`.
+ * @property {"center"|"top-left"|"top-center"|"top-right"|"bottom-left"|"bottom-center"|"bottom-right"} position - The initial position of the modal. Defaults to `"center"`.
+ * @property {boolean} bodyFills - If `true`, the modal body will fill the available space. Defaults to `false`.
+ * @property {boolean} noBackdrop - If `true`, no backdrop will be displayed behind the modal. Defaults to `false`.
+ * @property {"default"|"small"|"large"|"fullscreen"} size - The size of the modal. Defaults to `"default"`.
+ * @property {boolean} print - If `true`, the modal content will be optimized for printing. Defaults to `false`.
+ * @property {boolean} noMinHeight - If `true`, the modal will not have a minimum height. Defaults to `false`.
+ * @property {string} class - Additional CSS class(es) to add to the modal. Defaults to `""`.
+ * @property {string} baseClass - The base CSS class for the modal elements. Defaults to `"modal"`.
+ * @property {string} classCloseIcon - The class name for the close icon. Uses the wrapped setting string.
+ * @property {string} classResizerIcon - The class name for the resizer icon. Uses the wrapped setting string.
+ * @property {string|Node} footerElement - Element or selector to use as the footer (will be moved to dialog on creation, used for DOM API)
+ * @property {string|Node} footerHtml - Markup to use in the footer
+ * @property {boolean} debug - Enables debug logging. Defaults to `false`.
+ * @property {function(object): string} templateCloseIcon - A function that returns the HTML for the close icon.
+ * @property {function(object): string} templateCloseIcon.config - The resolved modal configuration object.
+ * @returns {string} The HTML string for the close icon.
+ * @property {function(object): string} templateResizerIcon - A function that returns the HTML for the resizer icon.
+ * @property {function(object): string} templateResizerIcon.config - The resolved modal configuration object.
+ * @returns {string} The HTML string for the resizer icon.
+ * @property {function(string, DefaultModalOptions): string} template - The default modal template function.
+ * @param {string} template.id - The ID for the new modal.
+ * @param {DefaultModalOptions} template.config - The resolved modal options.
+ * @returns {string} Markup for the modal.
  */
 export const defaults = {
   title: null,
   titleIcon: null,
+  titleClass: "",
+  labelledby: null,
+  describedby: null,
   nonModal: false,
   documentEnd: true,
   allowResize: false,
@@ -37,14 +73,19 @@ export const defaults = {
   print: false,
   noMinHeight: false,
   class: "",
-  classCloseIcon: "css-icon css-icon--close",
-  classResizerIcon: "css-icon css-icon--drag",
+  baseClass: "modal",
+  footerElement: null,
+  footerHtml: null,
+  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,39 +94,47 @@ export const defaults = {
    * @returns {String} Markup for modal
    */
   template(id, config) {
+    const { baseClass, describedby, footerHtml } = 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] : []), 
     ];
+    const labelledby = config.title ? `${ id }--title` : config.labelledby;
     return `
-      <dialog id="${ id }" class="${ classes.join(" ") }">
+      <dialog 
+        id="${ id }" 
+        class="${ classes.join(" ") }" 
+        ${ labelledby ? `aria-labelledby="${ labelledby }"` : "" }
+        ${ describedby ? `aria-describedby="${ describedby }"` : "" }
+      >
         ${ config.title ? `
-          <header class="modal__header">
-            <h2 class="modal__title">
+          <header class="${ baseClass }__header">
+            <h2 id="${ labelledby }" class="${ baseClass }__title ${ config.titleClass }">
               ${ 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>
+        ${ footerHtml ? `<div class="${ baseClass }__footer">${ footerHtml }</div>`: "" }
         ${ config.hasResizer ? 
-          `<div class="modal__resizer" ${ attrs.resizer }>
+          `<div class="${ baseClass }__resizer" ${ initializer.getAttribute("resizer") }>
             ${ config.templateResizerIcon(config) }
           </div>` : "" 
         }
-      </div>
+      </dialog>
     `;
   }
 };
@@ -105,26 +154,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 +176,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 +184,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 +192,22 @@ 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 they passed a footer element we need to move it in and
+  // make sure it has the class
+  if (config.footerElement) {
+    const footerElement = getElement(config.footerElement);
+    if (footerElement) {
+      footerElement.classList.add(`${ config.baseClass }__footer`);
+      body.after(footerElement);
+    }
+  }
 
   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/page.js

@@ -4,11 +4,11 @@
  * @module ui/page
  */
 
-import { addScrollbarProperty } from "../utils/dom";
+import { addScrollbarCustomProperty } from "@ulu/utils/browser/dom.js";
 
 /**
  * Initialize page module
  */
 export function init() {
-  addScrollbarProperty();
+  addScrollbarCustomProperty();
 }

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() {