@ulu/frontend 0.1.0-beta.3 → 0.1.0-beta.31

package/js/index.js

@@ -5,6 +5,7 @@
 // - Will not include things that aren't used in every site (those would need to 
 //   imported manually
 
+export * as settings from "./settings.js";
 export * as events from "./events/index.js";
 export * as ui from "./ui/index.js";
 export * as utils from "./utils/index.js";

package/js/settings.js

@@ -0,0 +1,78 @@
+/**
+ * @module settings
+ * @description Manages shared configuration for the library.
+ */
+
+// Default configuration settings
+const defaults = {
+  iconClassClose: "css-icon css-icon--close",
+  iconClassDragX: "css-icon css-icon--drag-x",
+  iconClassPrevious: "css-icon  css-icon--angle-left",
+  iconClassNext: "css-icon  css-icon--angle-right"
+};
+
+// Current configuration, initialized with defaults
+let currentSettings = { ...defaults };
+
+/**
+ * Retrieves a copy of the default settings.
+ * @returns {object} A copy of the default settings object.
+ */
+export function getDefaultSettings() {
+  return { ...defaults };
+}
+
+/**
+ * Updates multiple configuration settings.
+ * @param {object} changes An object containing the settings to update.
+ */
+export function updateSettings(changes) {
+  Object.assign(currentSettings, changes);
+}
+
+/**
+ * Retrieves a copy of the current configuration settings.
+ * @returns {object} A copy of the current settings object.
+ */
+export function getSettings() {
+  return { ...currentSettings };
+}
+
+/**
+ * Retrieves a specific configuration setting by key.
+ * @param {string} key The key of the setting to retrieve.
+ * @returns {*} The value of the setting, or undefined if not found.
+ */
+export function getSetting(key) {
+  if (!currentSettings.hasOwnProperty(key)) {
+    console.warn(`Attempted to access non-existent setting: ${key}`);
+    return undefined;
+  }
+  return currentSettings[key];
+}
+
+/**
+ * Updates a specific configuration setting.
+ * @param {string} key The key of the setting to update.
+ * @param {*} value The new value for the setting.
+ */
+export function updateSetting(key, value) {
+  currentSettings[key] = value;
+}
+
+/**
+ * Creates a wrapped string representation of a configuration setting.
+ * This function returns an object with a `toString()` method that, when called,
+ * retrieves the current value of the specified setting. This allows the setting
+ * to be used as a string literal, dynamically retrieving its value.
+ *
+ * @param {string} key The key of the setting to wrap.
+ * @returns {object} An object with a `toString()` method that returns the setting value.
+ */
+export function wrapSettingString(key) {
+  return {
+    toString() {
+      return getSetting(key);
+    }
+  };
+}

package/js/ui/details-group.js

@@ -0,0 +1,121 @@
+/**
+ * @module ui/details-group
+ * @description Manages groups of details (ie. onlyOneOpen at a time)
+ */
+
+import { getName } from "../events/index.js";
+import { getDatasetOptionalJson } from "../utils/dom.js";
+
+export const attrs = {
+  init: "data-ulu-details-group-init",
+  childInit: "data-ulu-details-group-child-init",
+  group: "data-ulu-details-group",
+};
+
+// Utils for selecting things based on attributes
+const attrSelector = key => `[${ attrs[key] }]`;
+const attrSelectorInitial = key => `${ attrSelector(key) }:not([${ attrs.init }])`;
+
+const defaults  = {
+  onlyOneOpen: true,
+  childSelector: ":scope > details"
+};
+
+/**
+ * Initialize everything in document
+ * - 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 dialog groups within context
+ * @param {HTMLElement} context [document] Element to query within
+ * @returns {Array} Array matching the groups queried with their return objects from setupGroup() [used for destroy/etc]
+ */
+export function setup(context = document) {
+  // Added try because we are using querySelectorAll with :scope by default
+  // which will not work in Internet Explorer or early edge (some alt. browsers too)
+  try {
+    const elements = context.querySelectorAll(attrSelectorInitial("group"));
+    return [...elements].map(setupGroup);
+  } catch(error) {
+    console.error(error);
+  }
+}
+
+/**
+ * @typedef {Object} DetailsGroupInstance
+ * @property {Function} destroy A function to remove event listeners and attributes.
+ * @property {HTMLElement} element The parent element.
+ * @property {Function} setupChildren A function to initialize the child details elements.
+ */
+
+/**
+ * Sets up a single group of details elements to manage their behavior.
+ * @param {HTMLElement} element - The parent element containing the details elements.
+ * @returns {DetailsGroupInstance}      
+ */
+export function setupGroup(element) {
+  const elementOptions = getDatasetOptionalJson(element, "uluDetailsGroup");
+  const options = Object.assign({}, defaults, elementOptions);
+  
+  element.setAttribute(attrs.t, "");
+  setupChildren();
+
+  /**
+   * Queries all current children in element
+   * @ignore
+   */
+  function queryChildren() {
+    return element.querySelectorAll(options.childSelector);
+  }
+
+  /**
+   * Sets up any children not already setup in group
+   */
+  function setupChildren() {
+    queryChildren().forEach(child => {
+      if (child.hasAttribute(attrs.childInit)) {
+        return;
+      } else {
+        child.setAttribute(attrs.childInit, "");
+      }
+      console.log(child);
+      
+      child.addEventListener("toggle", toggleHandler);  
+    });
+  }
+  
+  /**
+   * Toggle handler for child details element
+   * - For things like one open at a time
+   * @ignore
+   */
+  function toggleHandler({ target }) {
+    if (options.onlyOneOpen) {
+      if (target.open) {
+        queryChildren().forEach(child => {
+          if (child !== target && child.open) {
+            child.open = false;
+          }
+        });
+      }
+    }
+  }
+
+  /**
+   * Function removes all handlers and init attributes
+   */
+  function destroy() {
+    queryChildren().forEach(child => {
+      child.removeEventListener("toggle", toggleHandler);
+      child.removeAttribute(attrs.childInit);
+    });
+    element.removeAttribute(attrs.init);
+  }
+
+  return { destroy, element, setupChildren };
+}

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

@@ -4,6 +4,7 @@
 
 // Note this needs to be run before dialogs are initialized!
 
+import { wrapSettingString } from "../settings.js";
 import { getName } from "../events/index.js";
 import { createElementFromHtml } from "@ulu/utils/browser/dom.js";
 import { Resizer } from "./resizer.js";
@@ -37,8 +38,8 @@ export const defaults = {
   print: false,
   noMinHeight: false,
   class: "",
-  classCloseIcon: "css-icon css-icon--close",
-  classResizerIcon: "css-icon css-icon--drag",
+  classCloseIcon: wrapSettingString("iconClassClose"),
+  classResizerIcon: wrapSettingString("iconClassDragX"),
   debug: false,
   templateCloseIcon(config) {
     return `<span class="modal__close-icon ${ config.classCloseIcon }" aria-hidden="true"></span>`;

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,8 +27,8 @@ 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);
@@ -87,10 +88,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

@@ -124,6 +124,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);
     this.floatingCleanup = createFloatingUi(floatingElements, this.floatingOptions);
   }
   destroyFloatingInstance() {

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);

package/js/ui/slider.js

@@ -27,6 +27,7 @@
 //                            https://dev.opera.com/articles/css-will-change-property/
 //                              * Will Change use
 
+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";
@@ -120,9 +121,9 @@ export class Slider {
     transitionDuration: 700,
     transitionDurationExit: 400,
     transitionTimingFunction: "ease-in-out",
-    buttonClasses: ["Slider__control-icon", "button", "button--icon"],
-    iconClassesPrevious: ["css-icon", "css-icon--angle-left"],
-    iconClassesNext: ["css-icon", "css-icon--angle-right"]
+    buttonClasses: ["button", "button--icon"],
+    iconClassPrevious: wrapSettingString("iconClassPrevious"),
+    iconClassNext: wrapSettingString("iconClassNext"),
     // transition: true
   }
   // constructor(container, title, trackContainer, track, slides, config, debug = false) {
@@ -454,6 +455,7 @@ export class Slider {
     const button = document.createElement("button");
     button.classList.add(this.getClass("control-button"));
     button.classList.add(this.getClass(`control-button--${ action }`));
+    
     button.classList.add(...this.options.buttonClasses);
     button.setAttribute("data-slider-control", action);
     button.setAttribute("type", "button");
@@ -514,12 +516,11 @@ export class Slider {
     button.addEventListener("click", this.goto.bind(this, index));
     return button;
   }
-  // change to css-icon 
   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="${ this.getClass("control-icon") } ${ classes }" aria-hidden="true"></span>
     `;
   }
   getNavContent(number) {