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

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 "@ulu/utils/browser/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

@@ -6,6 +6,7 @@
 import { getName, dispatch } from "../events/index.js";
 import { newId } from "../utils/id.js";
 import { buildModal } from "./modal-builder.js";
+import { getElement } from "@ulu/utils/browser/dom.js";
 
 export class ProgrammaticModalManager {
   static defaults = {
@@ -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);

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

@@ -1,63 +1,213 @@
 /**
  * @module ui/resizer
  */
-// =============================================================================
-// Element Resizer
-// =============================================================================
 
-// Version:         1.0.1
-
-// Description:     Adds resizing ability to an element (only horizontal currently)
-
-// Reference:       - http://jsfiddle.net/3jMQD/614/
-
-import { logError } from "../utils/class-logger.js";
+import { createEvent } from "../events/index.js";
+import { logError, log } from "../utils/class-logger.js"; // Assuming this utility exists
 
 export class Resizer {
   static defaults = {
     debug: false,
-    overrideMaxWidth: false, 
-    fromLeft: false
+    /**
+     * Amount to increase size by (ie. pointer movement * multiplier)
+     */
+    multiplier: 1,
+    /**
+     * Remove max-width, max-height
+     */
+    overrideMaxDimensions: false,
+    /**
+     * @type {"left"|"right"|null}
+     * Specifies the horizontal edge from which resizing occurs.
+     * `null` means no horizontal resizing.
+     * - Default null
+     */
+    fromX: null, 
+    /**
+     * @type {"top"|"bottom"|null}
+     * Specifies the vertical edge from which resizing occurs.
+     * - `null` means no vertical resizing.
+     * - Default null
+     */
+    fromY: null 
   };
+
+  // Declare any runtime populated private fields
+  #handlerPointerdown;
+
   /**
-   * 
-   * @param {Node} container Container to be resize   
-   * @param {Node} control Resize handle element 
-   * @param {Object} options Defualt can be changed on class
-   * @param {Boolean} options.debug Enable non-essential debugging logs
-   * @param {Boolean} options.overrideMaxWidth When script is activated by handle remove the elements max-width and allow the width of the resize to exceed the max (default false)
-   * @param {Boolean} options.fromLeft The script should assume the handle is on the left side of the element
+   * @param {Node} container Container to be resized
+   * @param {Node} control Resize handle element
+   * @param {Object} options Options to configure the resizer.
+   * @param {Boolean} options.debug Enable non-essential debugging logs.
+   * @param {Boolean} options.overrideMaxDimensions When script is activated by handle, remove the element's max-width/max-height and allow the resize to exceed them (default false).
+   * @param {"left"|"right"|null} [options.fromX=null] Horizontal resizing direction.
+   * @param {"top"|"bottom"|null} [options.fromY=null] Vertical resizing direction.
    */
   constructor(container, control, options) {
     if (!control || !container) {
-      logError(this, "Missing required elements 'control' or 'container'");
+      logError(this, "Missing required elements: control, container");
+      return;
     }
     this.options = Object.assign({}, Resizer.defaults, options);
+    log(this, "Resolved options", this.options);
+    
     this.container = container;
     this.control = control;
-    this.handlerMousedown = this.onMousedown.bind(this);
-    this.control.addEventListener('mousedown', this.handlerMousedown);
+    this.debug = this.options.debug; // for logger
+
+    // Validate and normalize fromX/fromY
+    const validX = ["left", "right"];
+    const validY = ["top", "bottom"];
+
+    const { fromX, fromY } = this.options;
+
+    if (!validX.includes(fromX) && fromX !== null) {
+      logError(this, `Invalid fromX: ${ fromX } (left|right|null)`);
+      return; 
+    }
+    if (!validY.includes(fromY) && fromY !== null) {
+      logError(this, `Invalid fromY: ${ fromY } (top|bottom|null)`);
+      return;
+    }
+
+    if (!fromX && !fromY) {
+      logError(this, "Invalid fromX/fromY, failed to setup resizer");
+      return;
+    }
+
+    // Determine effective resizing directions based on fromX/fromY being non-null
+    this.resizeHorizontal = this.options.fromX !== null;
+    this.resizeVertical = this.options.fromY !== null;
+
+    // Bind event handlers
+    this.#handlerPointerdown = this.#onPointerdown.bind(this);
+
+    // Attach event listener
+    this.control.addEventListener("pointerdown", this.#handlerPointerdown);
   }
+
+  /**
+   * Cleans up event listeners to prevent memory leaks.
+   */
   destroy() {
-    this.control.removeEventListener('mousedown', this.handlerMousedown);
+    this.control.removeEventListener("pointerdown", this.#handlerPointerdown);
   }
-  onMousedown(e) {
-    const { overrideMaxWidth, fromLeft } = this.options;
+
+  /**
+   * Handles the pointerdown event on the resize control.
+   * @param {PointerEvent} e The pointerdown event.
+   * @private
+   */
+  #onPointerdown(e) {
+    e.preventDefault(); // Prevent default browser drag behavior
+
+    const { overrideMaxDimensions, fromX, fromY, multiplier } = this.options; // Destructure fromX, fromY
     const doc = document.documentElement;
     const win = document.defaultView;
-    const x = e.clientX;
-    const width = parseInt(win.getComputedStyle(this.container).width, 10);
-    if (overrideMaxWidth) {
-      this.container.style.maxWidth = 'none';
+    const containerStyle = win.getComputedStyle(this.container);
+
+    // Initial pointer coordinates
+    const startX = e.clientX;
+    const startY = e.clientY;
+
+    // Initial dimensions of the container
+    const initialWidth = parseInt(containerStyle.width, 10);
+    const initialHeight = parseInt(containerStyle.height, 10);
+
+    // Set pointer capture on the control element
+    this.control.setPointerCapture(e.pointerId);
+
+    // Optionally remove max-width/max-height to allow unrestricted resizing
+    if (overrideMaxDimensions) {
+      if (this.resizeHorizontal) {
+        this.container.style.maxWidth = "none";
+      }
+      if (this.resizeVertical) {
+        this.container.style.maxHeight = "none";
+      }
     }
-    const mousemove = event => {
-      const polarity = fromLeft ? -1 : 1;
-      this.container.style.width = `${ width + ((event.clientX - x) * polarity) }px`;
+
+    const initialInfo = {
+      event: e,
+      startX,
+      startY,
+      initialWidth,
+      initialHeight,
+      fromX, // Log fromX and fromY separately
+      fromY,
+      pointerId: e.pointerId
+    };
+
+    this.dispatchEvent("resizer:start", initialInfo);
+    log(this, "Pointerdown initiated/captured.", initialInfo);
+
+    /**
+     * Handles the pointermove event to resize the container.
+     * @param {PointerEvent} event The pointermove event.
+     */
+    const pointermove = (event) => {
+      let newWidth = initialWidth;
+      let newHeight = initialHeight;
+
+      const deltaX = event.clientX - startX;
+      const deltaY = event.clientY - startY;
+
+      // Handle horizontal resizing
+      if (this.resizeHorizontal) {
+        if (fromX === "right") { 
+          newWidth = (initialWidth + (deltaX * multiplier));
+        } else if (fromX === "left") { 
+          newWidth = (initialWidth - (deltaX * multiplier));
+        }
+        this.container.style.width = `${ Math.max(0, newWidth) }px`; // Ensure non-negative width
+      }
+
+      // Handle vertical resizing
+      if (this.resizeVertical) {
+        if (fromY === "bottom") { // Use fromY directly
+          newHeight = (initialHeight + (deltaY * multiplier));
+        } else if (fromY === "top") { // Use fromY directly
+          newHeight = (initialHeight - (deltaY * multiplier));
+        }
+        this.container.style.height = `${ Math.max(0, newHeight) }px`; // Ensure non-negative height
+      }
+
+      const updateInfo = {
+        clientX: event.clientX,
+        clientY: event.clientY,
+        newWidth,
+        newHeight,
+        event
+      };
+
+      this.dispatchEvent("resizer:update", updateInfo);
+      log(this, "Pointermove.", updateInfo);
     };
-    const cleanup = () => {
-      doc.removeEventListener('mousemove', mousemove, false);    
+
+    /**
+     * Cleans up event listeners after the pointerup event.
+     * @param {PointerEvent} event The pointerup event.
+     */
+    const cleanup = (event) => {
+      doc.removeEventListener("pointermove", pointermove, false);
+      doc.removeEventListener("pointerup", cleanup, { capture: true, once: true });
+
+      // Release pointer capture from the control element
+      this.control.releasePointerCapture(event.pointerId);
+      this.dispatchEvent("resizer:end");
+
+      log(this, "Pointerup cleanup complete. Pointer released.", {
+        pointerId: event.pointerId
+      });
+      
     };
-    doc.addEventListener('mousemove', mousemove, false);
-    doc.addEventListener('mouseup', cleanup, { capture: true, once: true });
+
+    // Attach global event listeners for dragging
+    doc.addEventListener("pointermove", pointermove, false);
+    doc.addEventListener("pointerup", cleanup, { capture: true, once: true });
+  }
+  dispatchEvent(type, data) {
+    this.container.dispatchEvent(createEvent(type, data));
   }
 }

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("control-context");
 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));
 }