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

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, {

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,8 +123,7 @@ export class Popover extends Collapsible {
   }
   createFloatingInstance() {
     const { content, anchor, contentArrow } = this.elements;
-    const floatingElements = { trigger: anchor, contentArrow, content };    
-    console.log("this.floatingOptions:\n", this.floatingOptions);
+    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/proxy-click.js

@@ -1,26 +1,27 @@
 /**
  * @module ui/proxy-click
+ * @description Used for cards and things that look like they should be clickable 
+ * even though the link in their content is the only clickable element. This way 
+ * the entire cards content doesn't need to be in a link (which isn't accessible). 
+ * 
+ * The script allows only for clicks with a duration of 250ms to avoid conflict 
+ * with a user selecting text. Works with either links or buttons because it just 
+ * uses the elements .click(). Uses data-attributes for selection by default.
  */
 
+import { ComponentInitializer } from "../utils/system.js";
 
-// Used for cards and things that look like they should be clickable even 
-// though the link in their content is the only clickable element. This way the 
-// entire cards content doesn't need to be in a link (which isn't accessible)
-// - The script allows only for clicks with a duration of 250ms to avoid 
-//   conflict with a user selecting text.
-// - Works with either links or buttons because it just uses the elements .click()
-// - Uses data-attributes for selection
-import { getName } from "../events/index.js";
-import { getDatasetOptionalJson } from "../utils/dom.js";
-
-const attrs = {
-  trigger: "data-ulu-proxy-click",
-  init: "data-ulu-proxy-click-init",
-};
-
-const attrSelector = key => `[${ attrs[key] }]`;
-const attrSelectorInitial = key => `${ attrSelector(key) }:not([${ attrs.init }])`;
+/**
+ * Proxy Click Component Initializer
+ */
+export const initializer = new ComponentInitializer({ 
+  type: "proxy-click", 
+  baseAttribute: "data-ulu-proxy-click"
+});
 
+/**
+ * Default options
+ */
 export const defaults = {
   selector: "[data-ulu-proxy-click-source]",
   selectorPreventBase: "input, select, textarea, button, a, [tabindex='-1']",
@@ -32,7 +33,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);
@@ -42,26 +43,39 @@ 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();
-}
-
-export function setup(context = document) {
-  const proxies = context.querySelectorAll(attrSelectorInitial("trigger"));
-  proxies.forEach(proxy => {
-    const elOptions = getDatasetOptionalJson(proxy, "siteProxyClick");
-    const options = Object.assign({}, currentDefaults, elOptions);
-    const child = proxy.querySelector(options.selector);
-    if (child) {
-      attachHandlers(proxy, child, options);
-      proxy.setAttribute(attrs.init, "");
-    } else {
-      console.error("Unable to locate proxy click source", options.selector);
+  initializer.init({
+    withData: true,
+    events: ["pageModified"],
+    setup({ element, data, initialize }) {
+      setupProxy(element, data);
+      initialize();
     }
   });
 }
-export function attachHandlers(proxy, child, options) {
-  const { selectorPreventBase: spb, selectorPrevent: sp } = options;
+
+/**
+ * Setup a single proxy click
+ * @param {Node} proxy The container who's click should proxy the click of inner element with options.selector (defaults to [data-ulu-proxy-click-source])
+ * @param {Object} userOptions Options to override defaults
+ */
+export function setupProxy(proxy, userOptions) {
+  const options = Object.assign({}, currentDefaults, userOptions);
+  const child = proxy.querySelector(options.selector);
+  if (child) {
+    attachHandlers(proxy, child, options);
+  } else {
+    console.error("Unable to locate proxy click source", options.selector);
+  }
+}
+
+/**
+ * Main function for attaching behaviors that enable proxy click
+ * @param {Node} proxy The container who's click should proxy the click of inner element with options.selector (defaults to [data-ulu-proxy-click-source])
+ * @param {Node} child The element who is being proxied and will get clicked if the proxy is clicked (as long as not an interactive element within proxy)
+ * @param {Object} config Merged/final options object
+ */
+export function attachHandlers(proxy, child, config) {
+  const { selectorPreventBase: spb, selectorPrevent: sp } = config;
   const selectorPrevent = `${ spb }${ sp ? `, ${ sp }` : "" }`;
   let start, shouldProxy;
   proxy.addEventListener("mousedown", ({ target, timeStamp }) => {
@@ -72,7 +86,7 @@ export function attachHandlers(proxy, child, options) {
     }
   });
   proxy.addEventListener("mouseup", ({ timeStamp }) => {
-    if (shouldProxy && timeStamp - start < options.mousedownDurationPrevent) {
+    if (shouldProxy && timeStamp - start < config.mousedownDurationPrevent) {
       child.click();
     }
   });

package/js/ui/scroll-slider.js

@@ -2,29 +2,21 @@
  * @module ui/scroll-slider
  */
 
+import { ComponentInitializer } from "../utils/system.js";
 import { OverflowScroller } from "./overflow-scroller.js";
 import { createPager } from "./overflow-scroller-pager.js";
-import { getName } from "../events/index.js";
-import { getDatasetOptionalJson } from "../utils/dom.js";
-
 
 /**
- * Default data attributes
+ * Scroll Slider Component Initializer
  */
-export const attrs = {
-  init: "data-ulu-scroll-slider-init",
-  slider: "data-ulu-scroll-slider",
-  track: "data-ulu-scroll-slider-track",
-  controls: "data-ulu-scroll-slider-control-context"
-};
-
-// Utils for selecting things based on attributes
-const attrSelector = key => `[${ attrs[key] }]`;
-const attrSelectorInitial = key => `${ attrSelector(key) }:not([${ attrs.init }])`;
-
+export const initializer = new ComponentInitializer({ 
+  type: "scroll-slider", 
+  baseAttribute: "data-ulu-scroll-slider"
+});
 
+const attrSelectorTrack = initializer.attributeSelector("track");
+const attrSelectorControls = initializer.attributeSelector("controls");
 const instances = [];
-
 const defaults = {
   amount: createPager()
 };
@@ -34,23 +26,25 @@ 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();
+  initializer.init({
+    withData: true,
+    events: ["pageModified"],
+    setup({ element, data, initialize }) {
+      setupSlider(element, data);
+      initialize();
+    }
+  });
 }
 
-export function setup() {
-  const builders = document.querySelectorAll(attrSelectorInitial("slider"));
-  builders.forEach(setupSlider);
-}
-
-// getDatasetOptionalJson
-function setupSlider(container) {
-  container.setAttribute(attrs.init, "");
-  const options = getDatasetOptionalJson(container, "uluScrollSlider");
-  const config = Object.assign({}, defaults, options);
+/**
+ * Setup instance of scroll slider based on data-attributes
+ * @param {Node} container The scroll slider container
+ */
+function setupSlider(container, userOptions) {
+  const config = Object.assign({}, defaults, userOptions);
   const elements = {
-    track: container.querySelector(attrSelector("track")),
-    controls: container.querySelector(attrSelector("controls"))
+    track: container.querySelector(attrSelectorTrack),
+    controls: container.querySelector(attrSelectorControls)
   };
   instances.push(new OverflowScroller(elements, config));
 }