@ulu/frontend 0.0.23 → 0.1.0-beta.0

package/js/ui/grid.js

@@ -2,6 +2,7 @@
  * @module ui/grid
  */
 
+import { setPositionClasses } from "../utils/dom.js";
 import { getName } from "../events/index.js";
 
 /**
@@ -22,50 +23,4 @@ export function init(selector = "[data-grid]", classes) {
  */
 export function setup(selector, classes) {
   document.querySelectorAll(selector).forEach(element => setPositionClasses(element, classes || undefined));
-}
-
-/**
- *   Sets up the positonal classes that would come from the equal
- *   height module. Needs to be rerun by user when layout changes
- *   or new instances are added to the screen
- *   - Used for gutter crops
- *   - Used for rule placement
- *   - **Devs** Remember that default classes should match sass defaults
- *   @param {Node} parent  The grid parent <data-grid="">
- *   @param {Object} classes Override the default equal heights classes
- */
-export function setPositionClasses(parent, classes = { 
-  columnFirst: 'position-column-first', 
-  columnLast: 'position-column-last', 
-  rowFirst: 'position-row-first', 
-  rowLast: 'position-row-last' 
-}) {  
-  const children = [...parent.children];
-  const rows = [];
-  let lastY;
-  // Check element against last
-  // If they don't match it's a new row create a new array
-  // Then push into the last array in the rows array
-  children.forEach((child) => {
-    const y = child.getBoundingClientRect().y;
-    if (lastY !== y) rows.push([]);
-    rows[rows.length - 1].push(child);
-    lastY = y;
-    child.classList.remove(...Object.values(classes)); // Remove previously set classes
-  });
-  // Apply Classes
-  rows.forEach((row, index) => {
-    if (index === 0) 
-      row.forEach(child => child.classList.add(classes.rowFirst));
-    if (index == rows.length - 1) 
-      row.forEach(child => child.classList.add(classes.rowLast));
-
-    row.forEach((child, childIndex) => {
-      if (childIndex === 0) 
-        child.classList.add(classes.columnFirst);
-      if (childIndex == row.length - 1) 
-        child.classList.add(classes.columnLast);
-    });
-  });
-
-}
+}

package/js/ui/index.js

@@ -0,0 +1,21 @@
+export * as page from "./page.js";
+export * as breakpoints from "./breakpoints.js";
+export * as collapsible from "./collapsible.js";
+export * as modalBuilder from "./modal-builder.js";
+export * as dialog from "./dialog.js";
+export * as flipcard from "./flipcard.js";
+export * as grid from "./grid.js";
+export * as index from "./index.js";
+export * as overflowScrollerPager from "./overflow-scroller-pager.js";
+export * as overflowScroller from "./overflow-scroller.js";
+export * as popover from "./popover.js";
+export * as tooltip from "./tooltip.js";
+export * as resizer from "./resizer.js";
+export * as slider from "./slider.js";
+export * as tabs from "./tabs.js";
+export * as proxyClick from "./proxy-click.js";
+export * as scrollpoint from "./scrollpoint.js";
+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";

package/js/ui/modal-builder.js

@@ -0,0 +1,197 @@
+/**
+ * @module ui/modal-builder
+ */
+
+// Note this needs to be run before dialogs are initialized!
+
+import { getName } from "../events/index.js";
+import { createElementFromHtml } from "@ulu/utils/browser/dom.js";
+import { Resizer } from "./resizer.js";
+import { getDatasetJson } from "../utils/dom.js";
+import { defaults as dialogDefaults, attrs as dialogAttrs } from "./dialog.js";
+
+const attrs = {
+  builder: "data-ulu-modal-builder",
+  body: "data-ulu-modal-builder-body",
+  resizer: "data-ulu-modal-builder-resizer"
+};
+
+const attrSelector = key => `[${ attrs[key] }]`;
+
+/**
+ * Default builder options (extends dialog defaults, watch name collisions)
+ * - Decided to extend defaults so the interface in HTML is singular
+ *   - This is sometimes easier to template (merging and serializing options 
+ *     in twig for example)
+ */
+export const defaults = {
+  title: null,
+  titleIcon: null,
+  nonModal: false,
+  documentEnd: true,
+  allowResize: false,
+  position: "center",
+  bodyFills: false,
+  noBackdrop: false,
+  size: "default",
+  print: false,
+  noMinHeight: false,
+  class: "",
+  classCloseIcon: "css-icon css-icon--close",
+  classResizerIcon: "css-icon css-icon--drag",
+  debug: false,
+  templateCloseIcon(config) {
+    return `<span class="modal__close-icon ${ config.classCloseIcon }" aria-hidden="true"></span>`;
+  },
+  templateResizerIcon(config) {
+    return `<span class="modal__resizer-icon ${ config.classResizerIcon }" aria-hidden="true"></span>`;
+  },
+  /**
+   * Default modal template
+   * @param {String} id ID for new modal
+   * @param {Object} config Resolved options
+   * @returns {String} Markup for modal
+   */
+  template(id, config) {
+    const classes = [
+      "modal",
+      `modal--${ config.position }`,
+      `modal--${ config.size }`,
+      `modal--${ config.allowResize ? "resize" : "no-resize" }`,
+      ...(!config.title ? ["modal--no-header"] : []),
+      ...(config.bodyFills ? ["modal--body-fills"] : []), 
+      ...(config.noBackdrop ? ["modal--no-backdrop"] : []), 
+      ...(config.noMinHeight ? ["modal--no-min-height"] : [] ),
+      ...(config.class ? [config.class] : []), 
+    ];
+    return `
+      <dialog id="${ id }" class="${ classes.join(" ") }">
+        ${ config.title ? `
+          <header class="modal__header">
+            <h2 class="modal__title">
+              ${ config.titleIcon ? 
+                `<span class="modal__title-icon ${ config.titleIcon }" aria-hidden="true"></span>` : "" 
+              }
+              <span class="modal__title-text">${ config.title }</span>
+            </h2>
+            <button class="modal__close" aria-label="Close modal" ${ dialogAttrs.close } autofocus>
+              ${ config.templateCloseIcon(config) }
+            </button>
+          </header>
+        ` : "" }
+        <div class="modal__body" ${ attrs.body }></div>
+        ${ config.hasResizer ? 
+          `<div class="modal__resizer" ${ attrs.resizer }>
+            ${ config.templateResizerIcon(config) }
+          </div>` : "" 
+        }
+      </div>
+    `;
+  }
+};
+
+// Current default objects (user can override these)
+let currentDefaults = { ...defaults };
+
+/**
+ * @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);
+}
+
+/**
+ * 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();
+}
+
+/**
+ * Query and setup all builder
+ */
+export function setup() {
+  const builders = document.querySelectorAll(attrSelector("builder"));
+  builders.forEach(setupBuilder);
+}
+
+/**
+ * Build a dialog for the given content
+ * @param {Node} element 
+ */
+export function setupBuilder(element) {
+  const options = getDatasetJson(element, "uluModalBuilder");
+  element.removeAttribute(attrs.builder);
+  buildModal(element, options);
+}
+
+/**
+ * 
+ * @param {Node} content Content element of the dialog (what is inserted into the body)
+ * @param {Object} options Options for built dialog (see defaults)
+ */
+export function buildModal(content, options) {
+
+  const config = Object.assign({}, currentDefaults, options);
+
+  if (config.position !== "center" && config.allowResize) {
+    config.hasResizer = true;
+  }
+  if (config.debug) {
+    console.log(config, content);
+  }
+  if (!content.id) {
+    throw new Error("Missing ID on modal");
+  }
+  
+  const markup = config.template(content.id, config);
+  const modal = createElementFromHtml(markup.trim());
+  const selectChild = key => modal.querySelector(attrSelector(key));
+  const body = selectChild("body");
+  const resizer = selectChild("resizer");
+  const dialogOptions = separateDialogOptions(config);
+
+  // Replace content with new dialog, and then insert the content into the new dialogs body
+  content.removeAttribute("id");
+  content.removeAttribute("hidden");
+  content.removeAttribute(attrs.builder);
+  content.parentNode.replaceChild(modal, content);
+  body.appendChild(content);
+
+  // Add dialog options for other scripts
+  modal.setAttribute(dialogAttrs.dialog, JSON.stringify(dialogOptions));
+
+  if (config.hasResizer) {
+    new Resizer(modal, resizer, {
+      fromLeft: config.position === "right"
+    });
+  }
+
+  if (config.print) {
+    let printClone;
+    document.addEventListener(getName("beforePrint"), () => {
+      printClone = content.cloneNode(true);
+      modal.after(printClone);
+    });
+    document.addEventListener(getName("afterPrint"), () => {
+      printClone.remove();
+    });
+  }
+  return { modal };
+}
+
+/**
+ * Returns JSON string to embed in data-ulu-dialog for dialog handling
+ * @param {Object} config Config object to pull dialog specific settings from
+ * @returns {Object}
+ */
+function separateDialogOptions(config) {
+  return Object.keys(dialogDefaults).reduce((acc, key) => {
+    if (key in config) {
+      acc[key] = config[key];
+    }
+    return acc;
+  }, {});
+}

package/js/ui/overflow-scroller-pager.js

@@ -14,7 +14,7 @@
  * @return {Function} A function to be used in overflow scrollers "amount" configuration property
  */
 
-export default function create() {
+export function createPager() {
   return function pager(instance, dir) {
     const isNext = dir === "next";
     const { track } = instance.elements;

package/js/ui/overflow-scroller.js

@@ -11,7 +11,7 @@
  * 
  */
 import { hasRequiredProps } from '@ulu/utils/object.js';
-import { logError } from "../utils/logger.js";
+import { logError } from "../utils/class-logger.js";
 const requiredElements = [
   "track", 
   "controls"
@@ -25,6 +25,9 @@ export class OverflowScroller {
     offsetStart: 100,
     offsetEnd: 100,
     amount: "auto",
+    buttonClasses: ["button", "button--icon"],
+    iconClassesPrevious: ["css-icon", "css-icon--angle-left"],
+    iconClassesNext: ["css-icon", "css-icon--angle-right"]
   }
   constructor(elements, config) {
     this.options = Object.assign({}, OverflowScroller.defaults, config);
@@ -78,14 +81,16 @@ export class OverflowScroller {
     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("type", "button");
     button.innerHTML = this.getControlContent(action);
     return button;
   }
   getControlContent(action) {
+    const classes = this.options[action === "next" ? "iconClassesNext" : "iconClassesPrevious"];
     return `
       <span class="hidden-visually">${ action }</span>
-      <span aria-hidden="true">${ action === 'next' ? '→' : '←' }</span>
+      <span class="${ classes.join(' ') }" aria-hidden="true"></span>
     `;
   }
   onScroll(event) {
@@ -158,6 +163,4 @@ export class OverflowScroller {
     const { namespace } = this.options;
     return `${ namespace }__${ child }`;
   }
-}
-
-export default OverflowScroller;
+}

package/js/ui/page.js

@@ -0,0 +1,14 @@
+/**
+ * General/Document Related 
+ * - Add custom properties for scrollbar
+ * @module ui/page
+ */
+
+import { addScrollbarProperty } from "../utils/dom";
+
+/**
+ * Initialize page module
+ */
+export function init() {
+  addScrollbarProperty();
+}

package/js/ui/popover.js

@@ -0,0 +1,135 @@
+/**
+ * @module ui/popover
+ */
+
+import { getName } from "../events/index.js";
+import { createFloatingUi } from "../utils/floating-ui.js";
+import { Collapsible } from "./collapsible.js";
+
+/**
+ * Array of current instances
+ */
+export const instances = new WeakMap;
+
+const logError = (...msgs) => console.error("@ulu (popovers):", ...msgs);
+
+const attrs = {
+  trigger: "data-ulu-popover-trigger",
+  content: "data-ulu-popover-content",
+  arrow: "data-ulu-popover-arrow",
+  anchor: "data-ulu-popover-trigger-anchor",
+};
+const attrSelector = key => `[${ attrs[key] }]`;
+
+// This modules collapsible defaults
+const collapsibleDefaults = {
+  clickOutsideCloses: true,
+  escapeCloses: true
+};
+
+/**
+ * Initialize default popover
+ */
+export function init() {
+  document.addEventListener(getName("pageModified"), setup);
+  setup();
+}
+
+/**
+ * Query all popovers on current page and set them up
+ * - Use this manually if needed
+ * - Won't setup a popover more than once
+ */
+export function setup() {
+  const triggers = document.querySelectorAll(attrSelector("trigger"));
+  // Only triggers we don't have instances for
+  const resolved = Array.from(triggers)
+    .filter(trigger => !instances.has(trigger))
+    .map(resolve)
+    .filter(v => v);
+
+  resolved.forEach(({ elements, options, floatingOptions  }) => {
+    instances.set(elements.trigger, new Popover(elements, options, floatingOptions));
+  });
+}
+
+/**
+ * Find the popover's elements
+ */
+export function resolve(trigger) {
+  const raw = trigger.dataset.uluPopoverTrigger;
+  const options = raw?.length ? JSON.parse(raw) : {};
+  const content = getContentByTrigger(trigger);
+  const elements = {
+    trigger,
+    content,
+    anchor: trigger.querySelector(attrSelector("anchor")) || trigger,
+    contentArrow: content.querySelector(attrSelector("arrow"))
+  };
+  const floatingOptions = options.floating || {};
+  delete options.floating;
+  if (content) {
+    return { elements, options, floatingOptions };
+  } else {
+    logError("Unable to make popover for", trigger);
+    return false;
+  }
+}
+
+// - grab from aria-controls (optional) 
+// - or from direct sibling
+// - lastly check the parent container for any children that have the attribute
+export function getContentByTrigger(trigger) {
+  let content;
+  const ariaControls = trigger.getAttribute("aria-controls");
+
+  if (ariaControls) {
+    content = document.getElementById(ariaControls);
+  } else if (trigger?.nextElementSibling?.hasAttribute(attrs.content)) {
+    content = trigger.nextElementSibling;  
+  // @todo - Consider removing this (non standard, users like this should be using aria-controls)
+  } else {
+    const children = Array.from(trigger.parentNode.children);
+    const triggerIndex = children.findIndex(c => c === trigger);
+    const childrenAfter = children.slice(triggerIndex);
+    content = childrenAfter.find(child => child.matches(attrSelector("content")));
+  }
+  if (!content) {
+    logError("Unable to resolve 'content' element for popover", trigger);
+  }
+  return content;
+}
+
+
+/**
+ * Class that extends Collapsible adding floating-ui for popover behavior
+ */
+export class Popover extends Collapsible {
+  constructor(elements, config, floatingOptions) {
+    const options = Object.assign({}, collapsibleDefaults, config);
+    super(elements, options);
+    this.floatingOptions = floatingOptions || {};
+  }
+  setState(isOpen, event) {
+    super.setState(isOpen, event);
+    this.destroyFloatingInstance();
+    if (isOpen) {
+      this.createFloatingInstance();
+    }
+  }
+  destroy() {
+    super.destroy();
+    this.destroyFloatingInstance();
+  }
+  createFloatingInstance() {
+    const { content, anchor, contentArrow } = this.elements;
+    const floatingElements = { trigger: anchor, contentArrow, content };    
+    this.floatingCleanup = createFloatingUi(floatingElements, this.floatingOptions);
+  }
+  destroyFloatingInstance() {
+    if (this.floatingCleanup) {
+      this.floatingCleanup(); 
+      this.floatingCleanup = null;
+    }
+  }
+}

package/js/ui/print-details.js

@@ -0,0 +1,44 @@
+/**
+ * @module ui/print-details
+ */
+
+import { getName } from "../events/index.js";
+
+/**
+ * Default data attributes
+ */
+export const attrs = {
+  opened: "data-ulu-print-details-opened",
+};
+
+const attrSelector = key => `[${ attrs[key] }]`;
+
+const defaults = {
+  selector: "details:not([open])"
+};
+
+/**
+ * Initialize details print 
+ * - will open details before print
+ * - will return to previous state after
+ */
+export function init(options) {
+  const config = Object.assign({}, defaults, options);
+  
+  // Add flag and open each details that's closed
+  document.addEventListener(getName("beforePrint"), () => {
+    document.querySelectorAll(config.selector).forEach(details => {
+      if (!details.open) {
+        details.setAttribute(attrs.opened, true);
+        details.open = true;
+      }
+    });
+  });
+  // When print ends find all flagged and close
+  document.addEventListener(getName("afterPrint"), () => {
+    document.querySelectorAll(attrSelector("opened")).forEach(details => {
+      details.removeAttribute(attrs.opened);
+      details.open = false;
+    });
+  });
+}

package/js/ui/print.js

@@ -0,0 +1,67 @@
+/**
+ * @module ui/print
+ */
+
+import { getName } from "../events/index.js";
+import { getDatasetOptionalJson, getElement } from "../utils/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));
+
+/**
+ * Default options
+ */
+const defaults = {
+  /**
+   * Print element/selector
+   */
+  element: null,
+};
+
+/**
+ * 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 triggers currently on the page
+ */
+function setup() {
+  const triggers = queryAllInitial("trigger");
+  triggers.forEach(trigger => {
+    const options = getDatasetOptionalJson(trigger, "uluPrint");
+    setupTrigger(trigger, options);
+  });
+}
+
+/**
+ * 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) => {
+    // Option to print a specific element
+    if (config.element) {
+      const element = getElement(config.element);
+      if (element) {
+        printElement(element);
+      } else {
+        console.error("Unable to find element to print", trigger, config);
+      }
+    // Default behavior print window
+    } else {
+      window.print();
+    }
+  });
+}