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

package/js/ui/slider.js

@@ -5,19 +5,20 @@
 // Slider
 // =============================================================================
 
-// Version:                   1.0.10
+// Version:                   1.0.11
 
 // Changes:   
+//                            1.0.11 | Updates for ComponentInitializer
 //                            1.0.10 | Fix bug when two and going in reverse
-//                            1.0.9 | Fix bug when there are only 2 slides (not sliding correctly [revesers because of switchSlide])
-//                                    this is addressed now and should slide infinitly between two slides
-//                            1.0.8 | Change API, to elements object (from individaul arguments),
+//                            1.0.9 | Fix bug when there are only 2 slides (not sliding correctly [reverse because of switchSlide])
+//                                    this is addressed now and should slide infinity between two slides
+//                            1.0.8 | Change API, to elements object (from individual arguments),
 //                                    Add the ability to specify the element to append controls within
 //                            1.0.6 | Add transition class for changes during transition, 
 //                                    add will-change to the transition
-//                            1.0.5 | Fix transtion event difference on windows, convert all 
+//                            1.0.5 | Fix transition event difference on windows, convert all 
 //                                    async stuff to promises and simplify
-//                            1.0.4 | Remove live region annoucement (only used if auto rotate)
+//                            1.0.4 | Remove live region announcement (only used if auto rotate)
 
 // Reference:                 https://www.w3.org/WAI/tutorials/carousels/working-example/
 //                            https://www.w3.org/TR/wai-aria-practices/examples/carousel/carousel-1.html#
@@ -27,17 +28,28 @@
 //                            https://dev.opera.com/articles/css-will-change-property/
 //                              * Will Change use
 
+import { ComponentInitializer } from "../utils/system.js";
 import { wrapSettingString } from "../settings.js";
 import maintain from 'ally.js/maintain/_maintain';
 import { hasRequiredProps } from '@ulu/utils/object.js';
 import { trimWhitespace } from "@ulu/utils/string.js";
 import { debounce } from "@ulu/utils/performance.js";
 import { log, logError, logWarning } from "../utils/class-logger.js";
-import { getDatasetOptionalJson } from "../utils/dom.js";
-import { createPager } from "./overflow-scroller-pager.js";
-import { getName } from "../events/index.js";
 
-const debugMode = false; // Global dev debug
+/**
+ * Slider Component Initializer
+ */
+export const initializer = new ComponentInitializer({ 
+  type: "slider", 
+  baseAttribute: "data-ulu-slider"
+});
+
+const attrSelectorTrack = initializer.attributeSelector("track");
+const attrSelectorTrackContainer = initializer.attributeSelector("track-container");
+const attrSelectorControlContext = initializer.attributeSelector("control-context");
+const attrSelectorSlide = initializer.attributeSelector("slide");
+
+const instances = [];
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const eventOnce = { once: true };
 const cssDuration = d => `${ d }ms`;
@@ -57,52 +69,34 @@ const requiredElements = [
 ];
 
 /**
- * Default data attributes
+ * Initialize all sliders based on data attribute selectors
  */
-export const attrs = {
-  init: "data-ulu-slider-init",
-  slider: "data-ulu-slider",
-  track: "data-ulu-slider-track",
-  trackContainer: "data-ulu-slider-track-container",
-  controls: "data-ulu-slider-control-context"
-};
-
-// Utils for selecting things based on attributes
-const attrSelector = key => `[${ attrs[key] }]`;
-const attrSelectorInitial = key => `${ attrSelector(key) }:not([${ attrs.init }])`;
-
-const defaults = {
-  amount: createPager()
-};
-
-const instances = [];
-
 export function init() {
-  document.addEventListener(getName("pageModified"), setup);
-  setup();
-}
-
-export function setup() {
-  const builders = document.querySelectorAll(attrSelectorInitial("slider"));
-  builders.forEach(setupSlider);
+  initializer.init({
+    withData: true,
+    events: ["pageModified"],
+    setup({ element, data, initialize }) {
+      setupSlider(element, data);
+      initialize();
+    }
+  });
 }
 
-export function setupSlider(container) {
-  container.setAttribute(attrs.init, "");
-  const options = getDatasetOptionalJson(container, "uluScrollSlider");
-  const config = Object.assign({}, defaults, options);
+/**
+ * Setup single slider instance from querying via data attribute selectors
+ * @param {Node} container The slide container to query children from
+ * @param {Object} options Options for slider class
+ */
+export function setupSlider(container, options) {
+  const config = Object.assign({}, options);
   const elements = {
     container,
-    track: container.querySelector("[data-ulu-slider-track]"),
-    trackContainer: container.querySelector("[data-ulu-slider-track-container]"),
-    controlContext: container.querySelector("[data-ulu-slider-control-context]"),
-    slides: container.querySelectorAll("[data-ulu-slider-slide]")
+    track: container.querySelector(attrSelectorTrack),
+    trackContainer: container.querySelector(attrSelectorTrackContainer),
+    controlContext: container.querySelector(attrSelectorControlContext),
+    slides: container.querySelectorAll(attrSelectorSlide)
   };
-  // Add in any global settings
-  // Object.assign(config, {
-  //   callbacks: {}
-  // });
-  // /
+
   // This was added because there was an issue on the new windows, need to test this
   // config.transitionFade = true;
   if (elements.slides.length) {
@@ -110,8 +104,14 @@ export function setupSlider(container) {
   }
 }
 
+/**
+ * Class that controls slider
+ */
 export class Slider {
   static instances = [];
+  /**
+   * Default options for slider
+   */
   static defaults = {
     classAccessiblyHidden: "hidden-visually",
     namespace: "Slider",
@@ -126,10 +126,8 @@ export class Slider {
     iconClassNext: wrapSettingString("iconClassNext"),
     // transition: true
   }
-  // constructor(container, title, trackContainer, track, slides, config, debug = false) {
-  constructor(elements, config, debug = false) {
+  constructor(elements, config) {
     const options = Object.assign({}, Slider.defaults, config);
-    this.debug = debugMode || debug;
     this.options = options;
     this.slide = null;
     this.index = null;
@@ -511,7 +509,7 @@ export class Slider {
     const button = document.createElement("button");
     button.classList.add(this.getClass("nav-button"));
     button.setAttribute("type", "button");
-    button.innerHTML = this.getNavContent(slide.number);
+    button.innerHTML = this.getNavContent(slide);
     slide.navButton = button; // Add reference to slide object
     button.addEventListener("click", this.goto.bind(this, index));
     return button;
@@ -523,8 +521,8 @@ export class Slider {
       <span class="${ this.getClass("control-icon") } ${ classes }" aria-hidden="true"></span>
     `;
   }
-  getNavContent(number) {
-    return `<span class="hidden-visually">Item ${ number }</span>`;
+  getNavContent(slide) {
+    return `<span class="hidden-visually">Item ${ slide.number }</span>`;
   }
   emit(name, args) {
     if (this.options.events[name]) {

package/js/ui/tabs.js

@@ -9,9 +9,7 @@
 //   setting this up to destroy tab interface when ui layout changes?
 
 import AriaTablist from "aria-tablist";
-
-const initAttr = "data-ulu-tablist-init";
-const errorHeader = "[data-ulu-tablist] error:";
+import { ComponentInitializer } from "../utils/system.js";
 
 /**
  * Array of current tab instances (exported if you need to interact with them)
@@ -19,13 +17,28 @@ const errorHeader = "[data-ulu-tablist] error:";
  */
 export const instances = [];
 
+/**
+ * Tabs Component Initializer
+ */
+export const initializer = new ComponentInitializer({ 
+  type: "tabs", 
+  baseAttribute: "data-ulu-tablist"
+});
+
 /**
  * Init all instances currently in document
- * @param {Object} options Options to serve as defaults
  */
-export function init(options = {}) {
+export function init() {
   const initial = () => {
-    initWithin(document, options);
+    initializer.init({
+      events: ["pageModified"],
+      withData: true,
+      setup({ element, data, initialize }) {
+        setup(element, data);
+        initialize();
+      }
+    });
+    
     // Run this on page load, optionally exported for use when page is running
     instances.forEach(openByCurrentHash);
   };
@@ -35,22 +48,6 @@ export function init(options = {}) {
   } else {
     window.addEventListener("load", initial);
   }
-  // Initialize when page updates/changes
-  document.addEventListener("pageModified", e => initWithin(e.target, options));
-}
-
-/**
- * Init all tabs within a certain context
- * @param {Node} context Element to init within
- * @param {Object} options Options to serve as defaults
- */
-export function initWithin(context, options = {}) {
-  if (!context) {
-    console.warn("Missing context to initWithin, skipping init of tabs");
-    return;
-  }
-  const tablists = context.querySelectorAll(`[data-ulu-tablist]:not([${ initAttr }])`);
-  tablists.forEach(element => setup(element, options));
 }
 
 /**
@@ -60,17 +57,7 @@ export function initWithin(context, options = {}) {
  * @return {Object} Instance object
  */
 export function setup(element, options = {}) {
-  let elementOptions = {};
-  
-  if (element.dataset.uluTablist) {
-    try {
-      elementOptions = JSON.parse(element.dataset.uluTablist);
-    } catch(e) {
-      console.error(errorHeader, "(JSON Parse for options)", element);
-    }
-  }
-
-  const config = Object.assign({}, options, elementOptions);
+  const config = Object.assign({}, options);
 
   if (config.vertical) {
     config.allArrows = true;
@@ -91,8 +78,6 @@ export function setup(element, options = {}) {
   if (config.equalHeights) {
     setHeights(element);
   }
-
-  element.setAttribute(initAttr, "");
   
   return instance;
 }
@@ -150,7 +135,9 @@ function setHeights(element) {
       if (panel.hidden) {
         panel.hidden = false;
         panelHeight = panel.offsetHeight;
-        panel.hidden = true;
+        // This explicity needs "hidden" for aria-tablist (it checks this string value)
+        // Will break the initial window push state when using openWithUrlHash
+        panel.setAttribute("hidden", "hidden"); 
       }
       return panelHeight;
     });

package/js/ui/theme-toggle.js

@@ -2,33 +2,32 @@
  * @module ui/theme-toggle
  */
 
+import { ComponentInitializer } from "../utils/system.js";
 import { getName } from "../events/index.js";
-import { getDatasetJson, getElements, resolveClasses } from "../utils/dom.js";
+import { getElements, resolveClasses } from "../utils/dom.js";
 import { hasRequiredProps } from "@ulu/utils/object.js";
 
 /**
- * Default data attributes
+ * Theme Toggle Component Initializer
  */
-export const attrs = {
-  init: "data-ulu-theme-toggle-init",
-  toggle: "data-ulu-theme-toggle",
-  toggleIcon: "data-ulu-theme-toggle-icon",
-  toggleLabel: "data-ulu-theme-toggle-label",
-  toggleRemote: "data-ulu-theme-toggle-remote",
-  state: "data-ulu-theme-toggle-state",
-};
+export const initializer = new ComponentInitializer({ 
+  type: "theme-toggle", 
+  baseAttribute: "data-ulu-theme-toggle"
+});
+
+const attrSelectorLabel = initializer.attributeSelector("label");
+const attrSelectorIcon = initializer.attributeSelector("icon");
+const attrRemote = initializer.getAttribute("remote");
+const attrInit = initializer.getAttribute("init");
+const attrState = initializer.getAttribute("state");
 
 // 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));
 const queryRemotes = group => document.querySelectorAll(
-  `[${ attrs.toggleRemote }="${ group }"]`
+  `[${ attrRemote }="${ group }"]`
 );
 const queryRemotesInitial = group => document.querySelectorAll(
-  `[${ attrs.toggleRemote }="${ group }"]:not([${ attrs.init }])`
+  `[${ attrRemote }="${ group }"]:not([${ attrInit }])`
 );
-const debugLog = (...msgs) => console.log("Theme Toggle:", ...msgs);
 const requiredToggleProps = ["target"];
 const checkToggleProps = hasRequiredProps(requiredToggleProps);
 const when = (cond, fn) => cond ? fn() : null; // Consider adding as util 
@@ -109,24 +108,22 @@ 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 
- */
-export function setup() {
-  queryAllInitial("toggle").forEach(setupToggle);
+  initializer.init({
+    events: ["pageModified"],
+    withData: true,
+    setup({ element, data, initialize }) {
+      setupToggle(element, data);
+      initialize();
+    }
+  });
 }
 
 /**
  * Sets up a single toggle
  * @param {HTMLElement} toggle A toggle to be setup
  */
-export function setupToggle(toggle, passedOptions) {
-  const elementOptions = getDatasetJson(toggle, "uluThemeToggle");
-  const options = Object.assign({}, defaults, passedOptions, elementOptions);
+export function setupToggle(toggle, userOptions) {
+  const options = Object.assign({}, defaults, userOptions);
 
   if (!checkToggleProps(options)) {
     console.error(`Missing a required option: ${ requiredToggleProps.join(", ") }`);
@@ -145,7 +142,6 @@ export function setupToggle(toggle, passedOptions) {
   setState(initialKey, ctx);
 
   toggle.addEventListener("click", onToggleClick);
-  toggle.setAttribute(attrs.init, "");
 
   // Remotes listeners are attached initially and then we also 
   // update them vs toggles which would be updated by the main pageModified 
@@ -183,7 +179,7 @@ export function setupToggle(toggle, passedOptions) {
     const remotes = queryRemotesInitial(group);
     remotes.forEach(remote => {
       remote.addEventListener("click", onToggleClick);
-      remote.setAttribute(attrs.init, "");
+      initializer.initializeElement(remote);
     });
   }
 
@@ -196,7 +192,7 @@ export function setupToggle(toggle, passedOptions) {
     const remotes = queryRemotesInitial(group);
     remotes.forEach(remote => {
       remote.removeEventListener("click", onToggleClick);
-      remote.removeAttribute(attrs.init, "");
+      remote.removeAttribute(attrInit, "");
     });
   }
 
@@ -205,7 +201,7 @@ export function setupToggle(toggle, passedOptions) {
    */
   function destroy() {
     toggle.removeEventListener("click", onToggleClick);
-    toggle.removeAttribute(attrs.init, "");
+    toggle.removeAttribute(attrInit, "");
     cleanupRemotes();
     document.removeEventListener(getName("pageModified"), attachRemotes);
   }
@@ -255,7 +251,7 @@ function setState(key, ctx) {
   };
 
   if (options.debug) {
-    debugLog("set state context", stateCtx);
+    initializer.log("Set state context", stateCtx);
   }
   
   // Prepare classes to remove
@@ -264,15 +260,15 @@ function setState(key, ctx) {
 
   // Update all targets
   elements.targets.forEach(element => {
-    element.setAttribute(attrs.state, key);
+    element.setAttribute(attrState, key);
     element.classList.remove(...otherTargetClasses);
     element.classList.add(...resolveClasses(theme.targetClass));
   });
 
   // Update all toggles and inner children
   elements.toggles.forEach(element => {
-    const label = element.querySelector(attrSelector("toggleLabel"));
-    const icon = element.querySelector(attrSelector("toggleIcon"));
+    const label = element.querySelector(attrSelectorLabel);
+    const icon = element.querySelector(attrSelectorIcon);
     if (label) {
       label.textContent = theme.label;
     }
@@ -280,7 +276,7 @@ function setState(key, ctx) {
       icon.classList.remove(...otherIconClasses);
       icon.classList.add(...resolveClasses(theme.iconClass));
     }
-    element.setAttribute(attrs.state, key);
+    element.setAttribute(attrState, key);
   });
 
   // Optional callback if user want to set other things (ie. data-theme or something)
@@ -306,13 +302,13 @@ function resolveInitial(options) {
   const resolved = saved || mediaQueryPreference || initialState;
 
   if (options.debug) {
-    debugLog("Preference Saved:", saved);
-    debugLog("Media Query Preference:", mediaQueryPreference);
-    debugLog("Initial State:", initialState);
+    initializer.log("Preference Saved", saved);
+    initializer.log("Media Query Preference", mediaQueryPreference);
+    initializer.log("Initial State:", initialState);
   }
 
   if (!resolved) {
-    console.error("Failed to resolve initial theme (pass 'initialState' to options)");
+    initializer.logError("Failed to resolve initial theme (pass 'initialState' to options)");
   }
   
   return resolved;

package/js/ui/tooltip.js

@@ -2,47 +2,41 @@
  * @module ui/tooltip
  */
 
+import { ComponentInitializer } from "../utils/system.js";
 import { getName as getEventName } from "../events/index.js";
 import { createFloatingUi } from "../utils/floating-ui.js";
 import { createElementFromHtml } from "@ulu/utils/browser/dom.js";
 import { logError } from "../utils/class-logger.js";
-import { getDatasetOptionalJson } from "../utils/dom.js";
 import { newId, ensureId } from "../utils/id.js";
 
-const attrs = {
-  trigger: "data-ulu-tooltip",
-  init: "data-ulu-tooltip-init",
-  body: "data-ulu-tooltip-display-body",
-  arrow: "data-ulu-tooltip-arrow"
-};
-const attrSelector = key => `[${ attrs[key] }]`;
-const attrSelectorInitial = key => `${ attrSelector(key) }:not([${ attrs.init }])`;
 /**
- * Initialize default popover
+ * Tooltip Component Initializer
  */
-export function init() {
-  document.addEventListener(getEventName("pageModified"), setup);
-  setup();
-}
+export const initializer = new ComponentInitializer({ 
+  type: "tooltip", 
+  baseAttribute: "data-ulu-tooltip"
+});
+
+const attrBody = initializer.getAttribute("body");
+const attrSelectorBody = initializer.attributeSelector("body");
+const attrSelectorArrow = initializer.attributeSelector("arrow");
 
 /**
- * Query all popovers on current page and set them up
- * - Use this manually if needed
- * - Won't setup a popover more than once
+ * Initialize default popover
  */
-export function setup() {
-  const triggers = document.querySelectorAll(attrSelectorInitial("trigger"));
-  triggers.forEach(setupTrigger);
-}
-
-export function setupTrigger(trigger) {
-  const passed = getDatasetOptionalJson(trigger, "uluTooltip");
-  const options = typeof passed === "object" ? passed : {};
-  if (typeof passed === "string") {
-    options.content = passed;
-  }
-  trigger.setAttribute(attrs.init, "");
-  return new Tooltip({ trigger }, options);
+export function init() {
+  initializer.init({
+    events: ["pageModified"],
+    withData: true,
+    setup({ element: trigger, data, initialize }) {
+      const options = typeof data === "object" ? data : {};
+      if (typeof data === "string") {
+        options.content = data;
+      }
+      initialize();
+      (new Tooltip({ trigger }, options));
+    }
+  });
 }
 
 /**
@@ -104,7 +98,7 @@ export class Tooltip {
     template(_config) {
       return `
         <div class="popover popover--tooltip">
-          <div class="popover__inner" ${ attrs.body }>
+          <div class="popover__inner" ${ attrBody }>
           </div>
           <span class="popover__arrow" data-ulu-tooltip-arrow></span>
         </div>
@@ -178,7 +172,7 @@ export class Tooltip {
   createContentElement() {
     const { options } = this;
     const content = createElementFromHtml(options.template(options));
-    const body = content.querySelector(attrSelector("body"));
+    const body = content.querySelector(attrSelectorBody);
     const innerContent = this.getInnerContent();
     if (options.isHtml) {
       body.innerHTML = innerContent;
@@ -191,7 +185,7 @@ export class Tooltip {
     }
     
     this.elements.content = content;
-    this.elements.contentArrow = content.querySelector(attrSelector("arrow"));
+    this.elements.contentArrow = content.querySelector(attrSelectorArrow);
     document.body.appendChild(content);
   }
   attachHandlers() {

package/js/utils/dom.js

@@ -5,6 +5,18 @@
 
 export const regexJsonString = /^[{\[][\s\S]*[}\]]$/;
 
+/**
+ * Converts a data attribute name to its corresponding dataset property name.
+ * @param {string} dataAttribute - The data attribute name (e.g., "data-ulu-dialog").
+ * @returns {string} - The dataset property name (e.g., "uluDialog").
+ */
+export function dataAttributeToDatasetKey(attribute) {
+  // Remove "data-" prefix then convert kebab-case to camelCase
+  return attribute
+    .replace(/^data-/, "")
+    .replace(/-([a-z])/g, (_match, letter) => letter.toUpperCase());
+}
+
 /**
  * Get an elements JSON dataset value
  * @param {Node} element