@ulu/frontend 0.2.0-beta.9 → 0.3.0

package/lib/js/exports.md

@@ -92,6 +92,7 @@ These exports originate from the `lib/js/ui/` directory.
 - `sliderInit`
 - `sliderInitializer`
 - `sliderSetupSlider`
+- `TabManager`
 - `tabsInit`
 - `tabsInitializer`
 - `tabsInstances`

package/lib/js/ui/dialog.js

@@ -6,6 +6,7 @@ import { getUluEventName } from "../core/events.js";
 import { ComponentInitializer } from "../core/component.js";
 import { wasClickOutside, preventScroll as setupPreventScroll } from "@ulu/utils/browser/dom.js";
 import { pauseVideos as pauseYoutubeVideos, prepVideos as prepYoutubeVideos } from "../utils/pause-youtube-video.js";
+import { observeDialogToggle } from "../utils/dialog.js";
 
 /**
  * Base attribute for a dialog
@@ -132,6 +133,7 @@ export function setupDialog(dialog, userOptions) {
   const options = Object.assign({}, currentDefaults, userOptions);
   const body = document.body;
   const { preventScrollShift: preventShift } = options;
+  let observerResult = null;
 
   // Stores active pointerId for resizer until after the whole pointer event series 
   // is finished which is after the click is complete
@@ -154,13 +156,25 @@ export function setupDialog(dialog, userOptions) {
     // Cache restore function
     let restoreScroll; 
 
-    // Toggle prevent scroll
-    dialog.addEventListener("toggle", (event) => {
-      const isOpen = event.newState === "open";
+    // FOR THE FUTURE: 
+    // The toggle event is the preferred method but has poor support in Safari currently. 
+    // Uncomment and remove the MutationObserver below once support improves.
+    // dialog.addEventListener("toggle", (event) => {
+    //   const isOpen = event.newState === "open";
+    //   if (isOpen) {
+    //     restoreScroll = setupPreventScroll({ preventShift });
+    //   } else if (restoreScroll) {
+    //     restoreScroll();
+    //   }
+    // });
+
+    // Workaround for Safari: use MutationObserver to watch for 'open' attribute changes
+    observerResult = observeDialogToggle(dialog, (isOpen) => {
       if (isOpen) {
         restoreScroll = setupPreventScroll({ preventShift });
       } else if (restoreScroll) {
         restoreScroll();
+        restoreScroll = null;
       }
     });
   }
@@ -187,6 +201,12 @@ export function setupDialog(dialog, userOptions) {
       setTimeout(() => { activeResizePointer = null;}, 0);
     }
   }
+
+  return {
+    destroy: () => {
+      if (observerResult) observerResult.destroy()
+    }
+  };
 } 
 
 /**

package/lib/js/ui/index.js

@@ -143,6 +143,10 @@ export {
   Slider,
 } from "./slider.js";
 
+export {
+  TabManager,
+} from "./tab-manager.js";
+
 export {
   init as tabsInit,
   initializer as tabsInitializer,

package/lib/js/ui/modal-builder.js

@@ -10,6 +10,7 @@ import { Resizer } from "./resizer.js";
 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";
+import { getSoleIframeLayout } from "../utils/iframe.js";
 
 /**
  * Modal Builder Component Initializer
@@ -47,6 +48,7 @@ export const initializer = new ComponentInitializer({
  * @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 {boolean} autoIframe - Opt-in convenience behavior. If the modal body's sole content is an iframe, it automatically applies layout fixes. If the iframe has static width/height attributes (like YouTube), it retains that aspect ratio responsively. Otherwise, it forces the iframe to fill the modal. 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.
@@ -73,6 +75,7 @@ export const defaults = {
   size: "default",
   print: false,
   noMinHeight: false,
+  fullscreenMobile: false,
   class: "",
   baseClass: "modal",
   footerElement: null,
@@ -82,6 +85,7 @@ export const defaults = {
   classResizerIcon: wrapSettingString("iconClassDragX"),
   classResizerIconBoth: wrapSettingString("iconClassDragBoth"),
   debug: false,
+  autoIframe: false,
   templateCloseIcon(config) {
     const { baseClass, classCloseIcon } = config;
     return `<span class="${ baseClass }__close-icon ${ classCloseIcon }" aria-hidden="true"></span>`;
@@ -108,6 +112,7 @@ export const defaults = {
       ...(config.bodyFills ? [`${ baseClass }--body-fills`] : []), 
       ...(config.noBackdrop ? [`${ baseClass }--no-backdrop`] : []), 
       ...(config.noMinHeight ? [`${ baseClass }--no-min-height`] : [] ),
+      ...(config.fullscreenMobile ? [`${ baseClass }--fullscreen-mobile`] : [] ),
       ...(config.class ? [config.class] : []), 
     ];
     const labelledby = config.title ? `${ id }--title` : config.labelledby;
@@ -212,6 +217,22 @@ export function buildModal(content, options) {
     }
   }
 
+  if (config.autoIframe) {
+    const layout = getSoleIframeLayout(content);
+    if (layout) {
+      layout.iframe.classList.add(`${ config.baseClass }__frame-content`);
+      if (layout.isStaticSize) {
+        modal.classList.add(`${ config.baseClass }--frame-ratio`);
+        body.style.aspectRatio = layout.aspectRatio;
+      } else {
+        modal.classList.add(`${ config.baseClass }--frame-fill`);
+        if (layout.fillHeight) {
+          body.style.minHeight = layout.fillHeight;
+        }
+      }
+    }
+  }
+
   let resizer;
   const resizablePositions = ["left", "right", "center"];
   const isCenter = position === "center";

package/lib/js/ui/slider.js

@@ -32,7 +32,6 @@
 
 import { ComponentInitializer } from "../core/component.js";
 import { wrapSettingString } from "../core/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";
@@ -392,8 +391,9 @@ export class Slider {
     }
 
     // Make all slide interactive elements inert
-    const lockInteractives = maintain.disabled({ context: this.elements.track  });
+    this.elements.track.inert = true;
     this.transitioning = true;
+
     // Set classes first just feels better
     if (old) old.navButton.classList.remove(activeClass);
     slide.navButton.classList.add(activeClass);
@@ -403,8 +403,8 @@ export class Slider {
       this.index = index;
       this.slide = slide;
       this.transitioning = false;
+      this.elements.track.inert = false;
       elements.container.classList.remove(transitionClass);
-      lockInteractives.disengage();
       if (!isInit) {
         slide.element.focus();
         this.emit("goto", [event, index, slide]);

package/lib/js/ui/tab-manager.js

@@ -0,0 +1,324 @@
+/**
+ * @module ui/tab-manager
+ */
+
+import { ensureId } from "../utils/id.js";
+import { getCoreEventName } from "../core/events.js";
+
+/**
+ * @typedef {Object} TabManagerOptions
+ * @property {String|null} [orientation=null] - "horizontal"|"vertical", auto-detected if omitted.
+ * @property {Number} [initialIndex=0] - Index to activate on load.
+ * @property {Boolean} [allArrows=false] - Allow all arrow keys to navigate regardless of orientation.
+ * @property {Boolean} [openByUrlHash=false] - Activate tab based on URL hash on initialization.
+ * @property {Boolean} [setUrlHash=false] - Update URL hash when a new tab is activated.
+ * @property {Boolean} [equalHeights=false] - Automatically match the height of all panels.
+ * @property {Function|null} [onReady=null] - Callback fired after initialization: (instance) => {}
+ * @property {Function|null} [onChange=null] - Callback fired when tab changes: (active, previous) => {}
+ */
+
+/**
+ * Class for managing  Aria tabs
+ * - Designed to be minimal and lightweight but cover all traditional needs
+ * - Designed for static / traditional webpages (not SPA)
+ * - Separated from tabs.js so it can be used by itself as needed (tree-shaking)
+ */
+export class TabManager {
+  /**
+   * Default options for TabManager.
+   * @type {TabManagerOptions}
+   */
+  static defaults = {
+    orientation: null,
+    initialIndex: 0,
+    allArrows: false,
+    openByUrlHash: false,
+    setUrlHash: false,
+    equalHeights: false,
+    onReady: null,
+    onChange: null
+  };
+
+  /**
+   * @param {HTMLElement} tablistElement - The element with role="tablist"
+   * @param {Partial<TabManagerOptions>} [options] - Configuration options.
+   */
+  constructor(tablistElement, options = {}) {
+    this.tablist = tablistElement;
+    this.options = { ...TabManager.defaults, ...options };
+    this.tabs = Array.from(this.tablist.children);
+    
+    // Discover panels via `aria-controls`
+    this.panels = this.tabs.map(tab => {
+      const controlsId = tab.getAttribute('aria-controls');
+      return controlsId ? document.getElementById(controlsId) : null;
+    }).filter(Boolean); // Ensure no nulls in panels array
+    
+    this.currentIndex = -1; 
+    
+    // Bind methods
+    this.handleKeydown = this.handleKeydown.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+
+    // Bind the new height update method for the event listener
+    this.updatePanelHeights = this.updatePanelHeights.bind(this);
+
+    if (this.tabs.length === 0 || this.tabs.length !== this.panels.length) {
+      console.warn("TabManager: Tab/Panel count mismatch. Check aria-controls.", { tabs: this.tabs, panels: this.panels });
+      return;
+    }
+
+    this.orientation = this.options.orientation || this.tablist.getAttribute("aria-orientation") || "horizontal";
+
+    this.setupAttributes();
+    this.attachListeners();
+    
+    // Handle initial state from URL hash if configured
+    let startingIndex = this.options.initialIndex;
+    if (this.options.openByUrlHash) {
+      const hash = window.location.hash.substring(1);
+      const hashIndex = this.tabs.findIndex(tab => tab.id === hash);
+      if (hashIndex > -1) {
+        startingIndex = hashIndex;
+      }
+    }
+
+    this.activate(startingIndex, false); 
+
+    // Handle equal heights on init and on resize
+    if (this.options.equalHeights) {
+      this.updatePanelHeights();
+      document.addEventListener(getCoreEventName('pageResized'), this.updatePanelHeights);
+    }
+
+    if (this.options.onReady) {
+      this.options.onReady(this);
+    }
+  }
+
+  /**
+   * Sets the necessary ARIA attributes and initial states for tabs and panels.
+   * @private
+   */
+  setupAttributes() {
+    this.tablist.setAttribute("role", "tablist");
+
+    this.tabs.forEach((tab, index) => {
+      const panel = this.panels[index];
+      
+      // Ensure elements have IDs for ARIA attributes
+      ensureId(tab);
+      ensureId(panel);
+
+      // Set ARIA Roles & Relationships
+      tab.setAttribute("role", "tab");
+      // This is now the primary link, but we still ensure it's set.
+      if (!tab.hasAttribute('aria-controls')) {
+        tab.setAttribute("aria-controls", panel.id);
+      }
+      
+      panel.setAttribute("role", "tabpanel");
+      panel.setAttribute("aria-labelledby", tab.id);
+      
+      // Initial hidden state
+      panel.hidden = true;
+      tab.setAttribute("tabindex", "-1");
+      tab.setAttribute("aria-selected", "false");
+    });
+  }
+
+  /**
+   * Attaches click and keydown event listeners to each tab.
+   * @private
+   */
+  attachListeners() {
+    this.tabs.forEach(tab => {
+      tab.addEventListener("click", this.handleClick);
+      tab.addEventListener("keydown", this.handleKeydown);
+    });
+  }
+
+  /**
+   * Handles click events on tabs, activating the corresponding panel.
+   * @param {MouseEvent} e - The click event.
+   * @private
+   */
+  handleClick(e) {
+    const index = this.tabs.indexOf(e.currentTarget);
+    this.activate(index);
+  }
+
+  /**
+   * Handles keyboard navigation (arrows, Home, End) on the tab list.
+   * @param {KeyboardEvent} e - The keydown event.
+   * @private
+   */
+  handleKeydown(e) {
+    const index = this.tabs.indexOf(e.currentTarget);
+    let nextIndex = null;
+    const isVert = this.orientation === "vertical";
+    const allArrows = this.options.allArrows;
+    const isRtl = (this.tablist.dir === 'rtl' || document.dir === 'rtl') && this.tablist.dir !== 'ltr';
+
+    const keyNext = isRtl ? 'ArrowLeft' : 'ArrowRight';
+    const keyPrev = isRtl ? 'ArrowRight' : 'ArrowLeft';
+
+    // Vertical movement
+    if (e.key === "ArrowDown") {
+      if (isVert || allArrows) nextIndex = (index + 1) % this.tabs.length;
+    } else if (e.key === "ArrowUp") {
+      if (isVert || allArrows) nextIndex = (index - 1 + this.tabs.length) % this.tabs.length;
+    // Horizontal movement
+    } else if (e.key === keyNext) {
+      if (!isVert || allArrows) nextIndex = (index + 1) % this.tabs.length;
+    } else if (e.key === keyPrev) {
+      if (!isVert || allArrows) nextIndex = (index - 1 + this.tabs.length) % this.tabs.length;
+    // Other keys
+    } else if (e.key === "Home") {
+      nextIndex = 0;
+    } else if (e.key === "End") {
+      nextIndex = this.tabs.length - 1;
+    }
+
+    if (nextIndex !== null) {
+      e.preventDefault();
+      this.activate(nextIndex);
+      this.tabs[nextIndex].focus();
+    }
+  }
+
+  /**
+   * Activates a tab. Can be called with an index or a tab ID string.
+   * @param {Number|String} indexOrId - The index or ID of the tab to activate.
+   * @param {Boolean} [triggerActions=true] - If false, will not fire onChange or set URL hash.
+   */
+  activate(indexOrId, triggerActions = true) {
+    let index = -1;
+    if (typeof indexOrId === "string") {
+      index = this.tabs.findIndex(tab => tab.id === indexOrId);
+    } else {
+      index = indexOrId;
+    }
+
+    if (index < 0 || index >= this.tabs.length) return;
+    if (this.currentIndex === index) return;
+
+    const prevIndex = this.currentIndex;
+    const prevTab = prevIndex > -1 ? this.tabs[prevIndex] : null;
+    const prevPanel = prevIndex > -1 ? this.panels[prevIndex] : null;
+
+    // Deactivate Current
+    if (prevTab) {
+      prevTab.setAttribute("aria-selected", "false");
+      prevTab.setAttribute("tabindex", "-1");
+      prevPanel.hidden = true;
+    }
+
+    // Activate New
+    const tab = this.tabs[index];
+    const panel = this.panels[index];
+
+    tab.setAttribute("aria-selected", "true");
+    tab.setAttribute("tabindex", "0");
+    panel.hidden = false;
+
+    this.currentIndex = index;
+
+    // Update URL hash if configured and not the initial silent activation
+    if (triggerActions && this.options.setUrlHash && window.history) {
+      window.history.replaceState(null, "", `#${ tab.id }`);
+    }
+
+    // Fire onChange callback
+    if (triggerActions && this.options.onChange) {
+      this.options.onChange(
+        { index, tab, panel },
+        { index: prevIndex, tab: prevTab, panel: prevPanel }
+      );
+    }
+  }
+
+  /**
+   * Public method to activate a tab by its ID.
+   * @param {String} id - The ID of the tab element to activate.
+   */
+  activateById(id) {
+    this.activate(id, true);
+  }
+
+  /**
+   * Calculates and applies equal heights to all panels.
+   * Waits for images within panels to load before calculating.
+   */
+  updatePanelHeights() {
+    if (!this.panels || this.panels.length === 0) return;
+
+    const parent = this.panels[0].parentElement;
+    if (!parent) return;
+    const images = [ ...parent.querySelectorAll("img") ];
+
+    const imagePromise = (image) => new Promise((resolve) => {
+      if (image.complete) return resolve(image);
+      image.onload = () => resolve(image);
+      image.onerror = () => resolve(image); // Resolve on error so it doesn't block
+    });
+
+    const imagePromises = images.map(imagePromise);
+
+    Promise.all(imagePromises).then(() => {
+      // Reset heights to auto before measuring to get natural height
+      this.panels.forEach(panel => {
+        panel.style.minHeight = '';
+      });
+
+      const heights = this.panels.map(panel => {
+        const wasHidden = panel.hidden;
+        panel.hidden = false;
+        const panelHeight = panel.offsetHeight;
+        panel.hidden = wasHidden;
+        return panelHeight;
+      });
+
+      const max = Math.max(...heights);
+      if (max > 0) {
+        this.panels.forEach(panel => {
+          panel.style.minHeight = `${ max }px`;
+        });
+      }
+    });
+  }
+
+  /**
+   * Removes event listeners, cleans up ARIA attributes, and resets the DOM to its pre-initialized state.
+   */
+  destroy() {
+    this.tabs.forEach(tab => {
+      tab.removeEventListener("click", this.handleClick);
+      tab.removeEventListener("keydown", this.handleKeydown);
+    });
+    if (this.options.equalHeights) {
+      document.removeEventListener(getCoreEventName('pageResized'), this.updatePanelHeights);
+    }
+
+    this.tablist.removeAttribute("role");
+    
+    this.tabs.forEach(tab => {
+      tab.removeAttribute("role");
+      tab.removeAttribute("aria-selected");
+      tab.removeAttribute("tabindex");
+    });
+
+    this.panels.forEach(panel => {
+      panel.removeAttribute("role");
+      panel.removeAttribute("aria-labelledby");
+      panel.hidden = false;
+      panel.style.minHeight = '';
+    });
+
+    this.tablist = null;
+    this.tabs = [];
+    this.panels = [];
+    this.options = {};
+    this.currentIndex = -1;
+  }
+}

package/lib/js/ui/tabs.js

@@ -2,14 +2,9 @@
  * @module ui/tabs
  */
 
-// TODO:
-// - For Vertical tabs we should be updating the orientation when on mobile. 
-//   Currently using all arrows so that the interface works in both 
-//   orientations when vertical. Leaving that behavior for now but maybe consider
-//   setting this up to destroy tab interface when ui layout changes?
-
-import AriaTablist from "aria-tablist";
+import { TabManager } from "./tab-manager.js";
 import { ComponentInitializer } from "../core/component.js";
+import { ensureId } from "../utils/id.js";
 
 /**
  * Array of current tab instances (exported if you need to interact with them)
@@ -38,11 +33,8 @@ export function init() {
         initialize();
       }
     });
-    
-    // Run this on page load, optionally exported for use when page is running
-    instances.forEach(openByCurrentHash);
   };
-  
+
   if (document.readyState === "complete") {
     initial();
   } else {
@@ -51,97 +43,46 @@ export function init() {
 }
 
 /**
- * 
- * @param {Node} element Tablist Element
- * @param {Node} options Options to set as defaults (can be overridden by element dataset options)
- * @return {Object} Instance object
+ * Setup a new TabManager instance
+ * @param {HTMLElement} element Tablist Element
+ * @param {object} options Options to set as defaults
+ * @return {object} Instance object
  */
 export function setup(element, options = {}) {
-  const config = Object.assign({}, options);
+  const config = { ...options };
 
+  // Backwards compatibility, `vertical:true` implies `allArrows:true`
   if (config.vertical) {
     config.allArrows = true;
   }
 
-  // Need to render the markup before checking height
-  //  - used to wait until images had loaded
-  const instance = { element, options };
-  instance.ariaTablist = AriaTablist(element, {
-    onOpen(...args) {
-      args.unshift(instance);
-      handleOpen.apply(null, args);
-    },
-    ...config
-  });
-  instances.push(instance);
-
-  if (config.equalHeights) {
-    setHeights(element);
+  // Backwards compatibility, `openByUrlHash:true` implies `setUrlHash:true`
+  // to replicate the behavior of the old aria-tablist library.
+  if (config.openByUrlHash) {
+    config.setUrlHash = true;
   }
-  
-  return instance;
-}
 
-/**
- * Opens the a tabpanel if it matches current hash (used in initial init)
- */
-function openByCurrentHash({ options, ariaTablist }) {
-  if (options.openByUrlHash) {
-    const { hash } = window.location;
-    if (hash && hash.length > 1) {
-      const possibleId = hash.substring(1);
-      ariaTablist.tabs.forEach(tab => {
-        if (possibleId === tab.id) {
-          ariaTablist.open(tab);
-        }
-      });
+  // Backwards compatibility, ensure `aria-controls` is present,
+  // generating it from the legacy `aria-labelledby` pattern if needed.
+  const tabs = [...element.children];
+  
+  tabs.forEach((tab) => {
+    if (!tab.hasAttribute('aria-controls')) {
+      // Find the panel using the old association method
+      const panel = document.querySelector(`[aria-labelledby="${tab.id}"]`);
+      if (panel) {
+        ensureId(panel);
+        tab.setAttribute('aria-controls', panel.id);
+      }
     }
-  }
-}
+  });
 
-/**
- * Responsible for setting hash on open if option is set
- */
-function handleOpen({ options }, panel, tab) {
-  if (options.openByUrlHash && window.history) {
-    window.history.replaceState(null, "", `#${ tab.id }`);
-  }
-}
+  const instance = { element, options };
 
-/**
- * Responsible for creating equal height tab panels
- */
-function setHeights(element) {
-  const tabs = [ ...element.children];
-  const panels = tabs.map(n => document.querySelector(`[aria-labelledby="${ n.id }"]`)); 
-  const parent = panels[0].parentElement;
-  const images = [ ...parent.querySelectorAll("img") ];
-  const imagePromises = images.map(image => imagePromise(image));
-  function imagePromise(image) {
-    return new Promise((resolve) => {
-      if (image.complete) {
-        resolve(image);
-      } else {
-        image.onload = resolve;
-        // Errors should also resolve so that height matching continues
-        image.onerror = resolve; 
-      }
-    });
-  }
-  // Run after images are loaded, or if no images it will resolve and run
-  Promise.all(imagePromises).then(() => {
-    const heights = panels.map(panel => {
-      let panelHeight = panel.offsetHeight;
-      if (panel.hidden) {
-        panel.hidden = false;
-        panelHeight = panel.offsetHeight;
-        // 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;
-    });
-    const max = Math.max(...heights);
-    panels.forEach(panel => panel.style.minHeight = `${ max }px`);
-  });
+  // Instantiate the new TabManager. It will find its own tabs/panels
+  // and handle all URL hash and equal heights logic internally now
+  instance.tabManager = new TabManager(element, config);
+  instances.push(instance);
+  
+  return instance;
 }

package/lib/js/utils/dialog.js

@@ -0,0 +1,29 @@
+/**
+ * Utility functions for dialogs
+ * @module utils/dialog
+ */
+
+/**
+ * Workaround for poor Safari support of the dialog 'toggle' event.
+ * Watches for changes to the 'open' attribute and fires a callback.
+ * 
+ * @param {HTMLDialogElement} dialog The dialog element to observe
+ * @param {Function} callback Function to call when the open state changes. Receives boolean indicating open state.
+ * @returns {Object} Object with a destroy method to disconnect the observer
+ */
+export function observeDialogToggle(dialog, callback) {
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.attributeName === "open") {
+        const isOpen = dialog.hasAttribute("open");
+        callback(isOpen);
+      }
+    });
+  });
+
+  observer.observe(dialog, { attributes: true, attributeFilter: ["open"] });
+
+  return {
+    destroy: () => observer.disconnect()
+  };
+}