@ulu/frontend 0.0.22 → 0.1.0-beta.0

package/js/events/index.js

@@ -1,22 +1,47 @@
 /**
  * @module events
  */
+
 import { debounce } from "@ulu/utils/performance.js";
+import { isBrowser } from "@ulu/utils/browser/dom.js";
+
+// Setup global document events
+if (isBrowser()) {
+  initResize();
+  initPrint();
+}
 
 /**
  * Event object - called on dispatch
  */
 const events = {
+  /**
+   * Event is dispatched when DOM in the page has changed, triggers updates from
+   * all modules listening for the change (init instances, etc)
+   * - Is triggered by modules that were responsible for modifying the page
+   */
   pageModified(context) {
-    context.dispatchEvent(new Event(getName("pageModified"), { bubbles: true }));
+    context.dispatchEvent(new CustomEvent(getName("pageModified"), { bubbles: true }));
   },
+  /**
+   * Event called when page is resized
+   */
   pageResized(context) {
-    context.dispatchEvent(new Event(getName("pageResized"), { bubbles: true }));
+    context.dispatchEvent(new CustomEvent(getName("pageResized"), { bubbles: true }));
+  },
+  /**
+   * Event dispatched before page print begins (teardown/restructure/hide things)
+   */
+  beforePrint(context) {
+    context.dispatchEvent(new CustomEvent(getName("beforePrint"), { bubbles: true }));
+  },
+  /**
+   * Event dispatched after page print (cleanup)
+   */
+  afterPrint(context) {
+    context.dispatchEvent(new CustomEvent(getName("afterPrint"), { bubbles: true }));
   }
-}
-
-// Add global document events
-window.addEventListener('resize', debounce(() => dispatch("pageResized", document), 250));
+};
 
 /**
  * Triggers one of our custom events
@@ -36,10 +61,36 @@ export function dispatch(type, context) {
 }
 
 /**
- * Handles the actual event names being used (future could namespace)
+ * Namespaced event
  * @param {String} type Type of event to get the actual event name for
  * @returns {String}
  */
 export function getName(type) {
   return "ulu:" + type;
+}
+
+/**
+ * Setup resize handler/dispatch
+ */
+function initResize() {
+  window.addEventListener("resize", debounce(() => dispatch("pageResized", document), 250));
+}
+
+/**
+ * Setup print listeners
+ * - Note: Tested with matchMedia but these events are more consistent
+ *         Experimented with normalizing both events but they fired
+ *         strangely, using any delay won't work (ie setTimeout / RAF)
+ *         chrome pauses immediately javascript after the initial event.
+ *         Reverting to a straightforward method for now. If this ends up
+ *         needing something more robust we can work that out on this side
+ *         and it won't change how the custom events file.
+ */
+function initPrint() {
+  window.addEventListener("beforeprint", () => {
+    dispatch("beforePrint", document);
+  });
+  window.addEventListener("afterprint", () => {
+    dispatch("afterPrint", document);
+  }); 
 }

package/js/index.js

@@ -1,14 +1,10 @@
-// =============================================================================
 // Main Library Import
-// =============================================================================
-
-// Used for:
 // - Allow users to access commonly needed items with at one point/file
+// - This is the entry for the pre-built version
 // - Could allow changing of the ulu/js file structure if needed
 // - Will not include things that aren't used in every site (those would need to 
 //   imported manually
 
-export { CssBreakpoints } from "./helpers/css-breakpoint.js";
 export * as events from "./events/index.js";
-export * as grid from "./ui/grid.js";
-export * as tabs from "./ui/tabs.js";
+export * as ui from "./ui/index.js";
+export * as utils from "./utils/index.js";

package/js/{helpers/css-breakpoint.js → ui/breakpoints.js}

@@ -1,16 +1,16 @@
 /**
- * @module helpers/css-breakpoint
+ * @module ui/breakpoints
  */
 
 // Pass breakpoints from CSS to stylesheet, use this to attach behaviors on breakpoints
 import { removeArrayElement } from "@ulu/utils/array.js";
 import { getName } from "../events/index.js";
-import { log, logError } from "../utils/logger.js";
+import { log, logError } from "../utils/class-logger.js";
 
 
 // Resize Handler to update breakpoints for all instances (Called after resize finished)
 window.addEventListener(getName("pageResized"), () => {
-  CssBreakpoints.instances.forEach(i => i.update());
+  BreakpointManager.instances.forEach(i => i.update());
 });
 
 /**
@@ -18,10 +18,10 @@ window.addEventListener(getName("pageResized"), () => {
  * Class that provides method for retrieving and acting on breakpoints passed
  * from CSS (using element psuedo content prop)
  */
-export class CssBreakpoints {
+export class BreakpointManager {
   static instances = [];
   static defaults = {
-    element: document.documentElement,
+    element: document?.documentElement,
     valueFromPsuedo: false,
     customProperty: "--breakpoint",
     psuedoSelector: ':before',
@@ -37,7 +37,7 @@ export class CssBreakpoints {
    * @param {String} config.psuedoSelector Change psuedo selector used to get the breakpoint from the psuedo's content property
    */
   constructor(config) {
-    Object.assign(this, CssBreakpoints.defaults, config);
+    Object.assign(this, BreakpointManager.defaults, config);
     this.active = null;
     this.previous = null;
     this.activeIndex = null;
@@ -48,7 +48,7 @@ export class CssBreakpoints {
     this.order.forEach(n => this.breakpoints[n] = new Breakpoint(n, this));
     log(this, this);
     this.update(); // Run for the first time, then whenever browser resizes
-    CssBreakpoints.instances.push(this);
+    BreakpointManager.instances.push(this);
   }
   /**
    * Add a callback for everytime a breakpoint changes
@@ -76,7 +76,7 @@ export class CssBreakpoints {
    * Get breakpoint from a custom property
    */
   getBreakpointInProperty() {
-    return getComputedStyle(this.element).getPropertyValue(this.customProperty);
+    return getComputedStyle(this.element).getPropertyValue(this.customProperty).trim();
   }
   /**
    * Get breakpoint from element (design note: user could override prototype)
@@ -281,6 +281,4 @@ class Breakpoint {
     msg.unshift(`Breakpoint (${ this.name }):`);
     this._manager.log.apply(this._manager, msg);
   }
-}
-
-export default CssBreakpoints;
+}

package/js/ui/collapsible.js

@@ -0,0 +1,195 @@
+/**
+ * @module ui/collapsible
+ */
+
+import { getName as getEventName } from "../events/index.js";
+import { log, logError } from "../utils/class-logger.js";
+import { ensureId } from "../utils/id.js";
+
+/**
+ * Class for accessible hide/show components
+ */
+export class Collapsible {
+  static defaults = {
+    clickOutsideCloses: false,
+    // oneOpenPerContext: false, // This should be another module that manages instances within a context (accordions)
+    // clickWithinCloses: false, // Not sure how this was used but seems like it should be separate
+    focusoutCloses: false,
+    escapeCloses: false,
+    /**
+     * The module won't attach the handlers (you need to do it yourself)
+     */
+    selfManaged: false,
+    
+    /**
+     * This collapsible starts in open state
+     */
+    startOpen: false,
+    /**
+     * Open/active state class
+     */
+    openClass: "is-active",
+    /**
+     * Output debug info
+     */
+    debug: true,
+    onChange(_ctx) {
+      // do something
+    }
+  };
+  /**
+   * @param {Object} elements Elements object 
+   * @param {Node} elements.trigger Trigger button/element that opens/closes collapsible
+   * @param {Node} elements.content The content element that the trigger reveals
+   * @param {Object} config Configuration options (see defaults)
+   * @returns {Object} Collapsible instance
+   */
+  constructor(elements, config) {
+    const { trigger, content } = elements;
+    if (!trigger || !content) {
+      logError(this, "missing required elements (trigger or content)");
+      return;
+    }
+    const options = Object.assign({}, Collapsible.defaults, config);
+    this.elements = elements;
+    this.options = options;
+    this.isOpen = false;
+    this.handlers = {}; // Spot to cache event handlers
+    ensureId(trigger);
+    ensureId(content);
+    this.debugLog(this, this);
+    if (!options.selfManaged) {
+      this.attachHandlers();
+    }
+    this.setup();
+  }
+  attachHandlers() {
+    const { trigger, content } = this.elements;
+    const { focusoutCloses } = this.options;
+    this.clickHandler = event => {
+      this.onClick(event);
+    }
+    this.focusoutHandler = (event) => {
+      if (focusoutCloses) {
+        this.close(event);
+      }
+    };
+    trigger.addEventListener("click", this.clickHandler);
+    content.addEventListener("focusout", this.focusoutHandler);
+  }
+  removeHandlers() {
+    const { trigger, content } = this.elements;
+    trigger.removeEventListener("click", this.clickHandler);
+    content.removeEventListener("focusout", this.focusoutHandler);
+  }
+  onClick(event) {
+    this.toggle(event);
+  }
+  destroy() {
+    this.removeHandlers();
+    this.destroyTemporaryHandlers();
+  }
+  debugLog(...msgs) {
+    if (this.options.debug) {
+      log(this, ...msgs);
+    }
+  }
+  setup() {
+    const { trigger, content } = this.elements;
+    const { startOpen } = this.options;
+    trigger.setAttribute("role", "button");
+    trigger.setAttribute("aria-controls", content.id);
+    content.setAttribute("aria-labelledby", trigger.id);
+    this.setState(startOpen);
+  }
+  createEvent(name, detail) {
+    return new CustomEvent(getEventName("collapsible:" + name), { detail });
+  }
+  setState(isOpen, event) {
+    const ctx = { 
+      collapsible: this, 
+      isOpen, 
+      event 
+    };
+    this.debugLog(this, "Set state", ctx);
+    const { trigger, content } = this.elements;
+    const { openClass } = this.options;
+    const setClass = el => el.classList[isOpen ? "add" : "remove"](openClass);
+    trigger.setAttribute("aria-expanded", isOpen ? "true" : "false");
+    setClass(trigger);
+    setClass(content);
+    this.isOpen = isOpen;
+    this.options.onChange(ctx);
+    trigger.dispatchEvent(this.createEvent("change", ctx));
+    if (isOpen) {
+      this.setupTemporaryHandlers();
+    } else {
+      this.destroyTemporaryHandlers();
+    }
+  }
+  /**
+   * Setup handlers needed for closing once open
+   */
+  setupTemporaryHandlers() {
+    const { content, trigger } = this.elements;
+    const { clickOutsideCloses, escapeCloses } = this.options;
+    const onDocumentClick = (event) => {
+      const { target } = event;
+      const inTrigger = trigger.contains(target);
+      const inContent = content.contains(target);
+      if (clickOutsideCloses && !inTrigger && !inContent) {
+        this.close(event);
+      }
+    };
+    const onDocumentKeydown = (event) => {
+      if (escapeCloses && event.key === "Escape") {
+        this.close(event);
+      }
+    };
+    document.addEventListener("click", onDocumentClick);
+    document.addEventListener("keydown", onDocumentKeydown);
+    this.handlers.onDocumentClick = onDocumentClick;
+    this.handlers.onDocumentKeydown = onDocumentKeydown;
+  }
+  /**
+   * Destroy handlers attached for closing once open
+   */
+  destroyTemporaryHandlers() {
+    const { onDocumentClick, onDocumentKeydown } = this.handlers;
+    if (onDocumentClick) {
+      document.removeEventListener("click", onDocumentClick);
+    }
+    if (onDocumentClick) {
+      document.removeEventListener("keydown", onDocumentKeydown);
+    }
+  }
+  open(event) {
+    this.setState(true, event);
+  }
+  close(event) {
+    this.setState(false, event);
+  }
+  toggle(event) {
+    this.setState(!this.isOpen, event);
+  }
+
+  // This is removed because I think it's not useful, users should keep references
+  // Static Methods for managing instances of this class
+  // static instances = [];
+  // /**
+  //  * Get collapsible instance by trigger element
+  //  * @param {Node|String} trigger Trigger node or trigger ID
+  //  */
+  // static getInstance(trigger) {
+  //   return Collapsible.instances.find(c => typeof trigger === "string" ? 
+  //     c.elements.trigger.id === trigger : 
+  //     c.elements.trigger === trigger
+  //   );
+  // }
+  // static removeInstance(instance) {
+  //   const index = Collapsible.instances.findIndex(c => c === instance);
+  //   if (index > -1) {
+  //     Collapsible.instances.splice(index, 1);
+  //   }
+  // }
+}

package/js/ui/dialog.js

@@ -0,0 +1,157 @@
+/**
+ * @module ui/dialog
+ */
+
+import { getName } from "../events/index.js";
+import { getDatasetJson, wasClickOutside } from "../utils/dom.js";
+import { pauseVideos as pauseYoutubeVideos, prepVideos as prepYoutubeVideos } from "../utils/pause-youtube-video.js";
+/**
+ * Default data attributes
+ */
+export const attrs = {
+  init: "data-ulu-dialog-init",
+  dialog: "data-ulu-dialog",
+  trigger: "data-ulu-dialog-trigger",
+  close: "data-ulu-dialog-close",
+};
+
+// 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));
+
+/**
+ * Dialog Defaults 
+ * - Can be overridden using data-attributes
+ */
+export const defaults = {
+  /**
+   * Use non-modal interface for dialog
+   */
+  nonModal: false,
+  /**
+   * Move the dialog to the document end (hoist out of content)
+   * - helpful if dialogs are within editor body, etc
+   */
+  documentEnd: false,
+  /**
+   * Requires styling that reduces any padding/border on dialog
+   */
+  clickOutsideCloses: true,
+  /**
+   * Whether or not to pause videos when dialog closes (currently just youtube and native)
+   */
+  pauseVideos: true,
+};
+
+
+// Current default objects (user can override these)
+let currentDefaults = { ...defaults };
+
+/**
+ * @param {Object} options Change options used as default for dialogs, can then be overriden by data attribute settings on element
+ */
+export function setDefaults(options) {
+  currentDefaults = Object.assign({}, currentDefaults, options);
+}
+
+/**
+ * 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 dialogs and triggers
+ */
+export function setup() {
+  // Then setup all dialogs (including those that were built)
+  const dialogs = queryAllInitial("dialog");
+  dialogs.forEach(setupDialog);
+
+  const triggers = queryAllInitial("trigger");
+  triggers.forEach(setupTrigger);
+}
+
+/**
+ * Setup click handlers on a trigger
+ * @param {Node} trigger 
+ */
+export function setupTrigger(trigger) {
+  trigger.addEventListener("click", handleTrigger);
+  trigger.setAttribute(attrs.init, "");
+
+  function handleTrigger() {
+    const id = trigger.dataset.uluDialogTrigger;
+    const dialog = document.getElementById(id);
+    if (!dialog) {
+      console.error("Could not locate dialog (id)", id);
+      return;
+    }
+    if (dialog?.tagName?.toLowerCase() !== "dialog") {
+      console.error("Attempted to trigger non <dialog> element. Did you mean to use modal builder?" );
+      return;
+    }
+    const options = getDialogOptions(dialog);
+    dialog[options.nonModal ? "show" : "showModal"]();
+  }
+}
+
+/**
+ * Setup click handlers for a dialog
+ * @param {Node} dialog 
+ */
+export function setupDialog(dialog) {
+  const options = getDialogOptions(dialog);
+  dialog.addEventListener("click", handleClicks);
+  dialog.setAttribute(attrs.init, "");
+  if (options.documentEnd) {
+    document.body.appendChild(dialog);
+  }
+  if (options.pauseVideos) {
+    prepVideos(dialog);
+  }
+
+  function handleClicks(event) {
+    const { target } = event;
+    const closeFromButton = target.closest("[data-ulu-dialog-close]");
+    let closeFromOutside = options.clickOutsideCloses && 
+                           target === dialog && 
+                           wasClickOutside(dialog, event);
+    if (closeFromOutside || closeFromButton) {
+      if (options.pauseVideos) {
+        pauseVideos(dialog);
+      }
+      dialog.close();
+    }
+  }
+} 
+
+/**
+ * For a given dialog, get it's options (from data attribute)
+ * @param {Node} dialog 
+ * @returns {Object}
+ */
+export function getDialogOptions(dialog) {
+  const options = getDatasetJson(dialog, "uluDialog");
+  return Object.assign({}, currentDefaults, options);
+}
+
+/**
+ * Pause native and youtube videos for a given dialog
+ */
+function prepVideos(dialog) {
+  prepYoutubeVideos(dialog);
+}
+/**
+ * Prep videos to be paused for a given dialog
+ */
+function pauseVideos(dialog) {
+  pauseYoutubeVideos(dialog);
+  const nativeVideos = dialog.querySelectorAll("video");
+  nativeVideos.forEach(video => video.pause());
+}
+

package/js/ui/dialog.todo

@@ -0,0 +1,37 @@
+Styling:
+  ✔ Animations? @done
+  ☐ Check styling on left right
+  ☐ Setup fullscreen option / modifier
+  ☐ Setup programmatic modal with new system
+  ☐ Resizing
+    ✔ Work out how this can work with native and click outside @done
+    ✔ Figure out how to setup icon for the resizer for all sites @done
+      * Fontawesome, or should this just be CSS so we don't need any icons for it
+      * Same for close button should we just use CSS and omit any FA requirements
+      * Or make it super easy to implement the icon only in the template (like default icon classses)
+        * Then user can choose to implement their own (via class) or use the styles that come with it
+  ☐ Prevent Browser Scroll
+  ✔ How should height work? Should a centered modal expand to it's content's height (up to the viewport height) or always be cropped and scroll (static height)? @done
+Todos:
+  ✔ How should the relationship between a dialog and it's trigger work @done
+    * Think there should be no relationship? Just triggers are triggers just attach a handler to open DOM centric way (add errors when the dialog doesn't exist)
+    * For the dialogs they should just have handlers attached for close
+      * Init should find all one's that need to be built and build them, then it should initialize them the same way as non-built dialogs
+  ✔ Support both modal and non-modal dialogs (rename)? @done
+  ✘ Divide into 4 modules @cancelled
+    1. Initializer (data-attributes)
+    2. Templater (for Drupal projects and standard modals)
+    3. Open/Close Behaviors
+    4. Programmatic Modal
+      * This is tough because its opionated towards our system in Drupal (jQuery)
+  ✔ How should this all be structured @done
+    * JS template dialogs?
+      * Pros
+        * Many users create the modals in content in CMS we don't want to make that difficult or get stuck with structure
+      * Cons
+        * Templating is in JS so dialogs don't make much sense on their own
+          * Could continue the div to dialog conversion (so modal content is inline unless JS running). Don't want to optimize too much for no js anymore anyways
+        * writing the dialog by hand makes sense for non defualt modal styles or users that have another structure but need the scripting part
+      * Solution
+        * Breakup module into two parts the underlying modal scripting (open close trigger) and (conversion modal templating [w. resizer] and as <div>)
+          * Then we can have both without any extra code and seperation

package/js/ui/flipcard.js

@@ -2,16 +2,10 @@
  * @module ui/flipcard
  */
 
-// =============================================================================
-// Flipcard
-// =============================================================================
-
-// Version:                    1.0.1
-
-// Changes                    1.0.1 | Added allow selection
-
 import { trimWhitespace } from "@ulu/utils/string.js";
-import { log, logError } from "../utils/logger.js";
+import { log, logError } from "../utils/class-logger.js";
+import { getName } from "../events/index.js";
+import { getDatasetOptionalJson } from "../utils/dom.js";
 const debugMode = false; // Global dev debug
 
 export class Flipcard {
@@ -23,7 +17,7 @@ export class Flipcard {
       selectionMin:  10, // Minimum length that qualifies as a selection
       exclude:  "a, input, textarea, button"  // Selectors to avoid closing a flipcard onProxyclick 
     },
-  }
+  };
   constructor(container, front, back, config, debug = false) {
     if (!container, !front, !back) {
       logError(this, 'Missing an element (container, front, back)');
@@ -133,7 +127,57 @@ export class Flipcard {
     `;
   }
 }
-export default Flipcard;
+
+/**
+ * Default data attributes
+ */
+export const attrs = {
+  init: "data-ulu-flipcard-init",
+  flipcard: "data-ulu-flipcard",
+  front: "data-ulu-flipcard-front",
+  back: "data-ulu-flipcard-back",
+};
+
+// Utils for selecting things based on attributes
+const attrSelector = key => `[${ attrs[key] }]`;
+const attrSelectorInitial = key => `${ attrSelector(key) }:not([${ attrs.init }])`;
+
+// const containers = document.querySelectorAll('[data-ulu-flipcard]');
+const instances = [];
+
+export function init() {
+  document.addEventListener(getName("pageModified"), setup);
+  setup();
+}
+
+export function setup() {
+  const builders = document.querySelectorAll(attrSelectorInitial("flipcard"));
+  builders.forEach(setupFlipcard);
+}
+
+// containers.forEach(init);
+
+function setupFlipcard(container) {
+  container.setAttribute(attrs.init, "");
+  const options = getDatasetOptionalJson(container, "uluFlipcard");
+  const config = Object.assign({},  options);
+  const front = container.querySelector(attrSelectorInitial("front"));
+  const back = container.querySelector(attrSelectorInitial("back"));
+  instances.push(new Flipcard(container, front, back, config));
+}
+
+// getDatasetOptionalJson
+function setupSlider(container) {
+  container.setAttribute(attrs.init, "");
+  const options = getDatasetOptionalJson(container, "uluFlipcard");
+  const config = Object.assign({},  options);
+  const elements = {
+    track: container.querySelector(attrSelector("track")),
+    controls: container.querySelector(attrSelector("controls"))
+  };
+  // replace with OverflowScroller when finished removing sitescrollslider
+  instances.push(new SiteScrollSlider(elements, config));
+}
 
 /**
  * Preliminary Notes: