@ulu/frontend 0.0.22 → 0.1.0-beta.0

package/js/ui/programmatic-modal.js

@@ -1,94 +1,92 @@
 /**
  * @module ui/programmatic-modal
  */
-// =============================================================================
-// Grabs Breakpoint from CSS
-// =============================================================================
 
-// Version:         1.0.3
-// Changes:
-//                  1.0.2 | Updates to work with the updated modal script which has 
-//                          to attach it's own trigger handlers
-// Description:     Drupal programmatic modal insertion script (interface = jquery prototype)
-// Changes:         1.0.2 - Added ability to pass class to container
 
-import { setupModal, show, attachTriggers, triggerAttr } from "./modals.js";
-import { dispatch } from "./events.js.js";
+import { getName, dispatch } from "../events/index.js";
+import { newId } from "../utils/id.js";
+import { buildModal } from "./modal-builder.js";
 
-const $ = window.jQuery;
-const containerId = 'programmatic-modal';
-const selectorTrigger = '[data-programmatic-modal-trigger]';
-const defaults = {
-  removeOnClose: true,
-  settings: {},
-  classes: []
-};
-
-let count = 0;
-let cachedTrigger; 
-
-// Drupal calls the jquery 'programaticModal' from InvokeCommand())
-$.fn.programaticModal = newModal;
+export class ProgrammaticModalManager {
+  static defaults = {
+    triggerSelector: "[data-ulu-programmatic-modal-trigger]",
+    triggerInitAttr: "data-ulu-programmatic-modal-init"
+  };
+  constructor(passedOptions) {
+    const options = Object.assign({}, ProgrammaticModalManager.defaults, passedOptions);
+    this.options = options;
+    this.triggers = null;
+    this.cachedTrigger = null;
+    this.triggerListener;
+    this.onTriggerClick = (event) => {
+      const trigger = event.target.closest(options.triggerSelector);
+      if (trigger) this.cachedTrigger = trigger;
+    };
+    this.onPageModified = () => {
+      this.setupTriggers();
+    };
+    document.addEventListener(getName("pageModified"), this.onPageModified);
+    this.setupTriggers();
+  }
+  setupTriggers() {
+    const { triggerSelector, triggerInitAttr } = this.options;
+    const triggers = document.querySelectorAll(`${ triggerSelector }:not([${ triggerInitAttr }])`);
+    triggers.forEach(trigger => {
+      trigger.addEventListener("click", this.onTriggerClick);
+    });
+  }
+  destroy() {
+    const { triggerSelector } = this.options;
+    const triggers = document.querySelectorAll(triggerSelector);
+    triggers.forEach(trigger => {
+      trigger.removeEventListener("click", this.onTriggerClick);
+    });
+  }
+  createAndOpen(config, afterCreate) {
+    const { selector, noClickTrigger, removeOnClose } = config;
+    const content = document.querySelector(selector);
+    if (!content.id) {
+      content.id = newId();
+    }
 
-// keep track of trigger clicks to return user on close (Drupal doesn't send trigger clicked, that I know of)
-document.addEventListener('click', cacheTrigger, true);
+    let trigger;
+    if (!noClickTrigger) {
+      trigger = this.cachedTrigger;
+      // Remove cached trigger (since it no longer applies)
+      this.cachedTrigger = null;
+    }
 
-/**
- * Sets up a new ajax triggered modal and opens it
- * @param {String} args Arguments provided from Drupal (JSON format)
- */
-function newModal(args) {
-  args = args ? JSON.parse(args) : {};
-  const config = Object.assign({}, defaults, args);
-  const modal = document.querySelector(`#${ containerId }`);
-  const id = setModalId(modal, config.id);
-  const classes = ["programmatic-modal-content", ...config.classes ];
-  modal.classList.add(...classes);
-  // Add a new placeholder container
-  newContainer();
-  // Intialize and open the new modal
-  setupModal(modal, config.settings);
-  show(id, {
-    onShow(modal) {
-      dispatch('pageModified', modal);
-    },
-    onClose(element) {
-      if (config.removeOnClose) {
-        element.parentNode.removeChild(element);
+    if (!content) {
+      console.error("No element found from config.selector. ", config);
+      return;
+    }
+    const { modal } = buildModal(content, config.modal);
+    const ctx = { trigger, modal, config };
+    if (afterCreate) {
+      afterCreate(ctx);
+    }
+    const onModalClose = () => {
+      if (removeOnClose) {
+        modal.remove();
       }
-      // For accessiblity/usablity (return to last clicked trigger)
-      if (cachedTrigger) {
-        cachedTrigger.focus();
+      if (trigger) {
+        trigger.focus();
       }
+    };
+    // Add close event (to refocus the element that triggered)
+    modal.addEventListener("close", onModalClose, { once: true });
+
+    // Setup trigger to show this modal again and not do it's old behavior (if ajax link)
+    if (!removeOnClose && trigger) {
+      trigger.addEventListener("click", (event) => {
+        event.preventDefault();
+        modal.showModal();
+      });
     }
-  });
-  // Attach handler so that it can reopen that modal
-  if (!config.removeOnClose && cachedTrigger) {
-    cachedTrigger.setAttribute(triggerAttr, id);
-    attachTriggers();
+    dispatch("pageModified", modal);
+    // Open the new modal for the first time
+    modal.showModal();
+    return ctx;
   }
 }
-/**
- * Sets and returns the modal's id
- */
-function setModalId(element, id) {
-  element.id = id || `programmatic-modal--id-${ ++count }`;
-  return element.id;
-}
-/**
- * Once we remove the placeholder containers id (above)
- * we create another programmatic placeholder container
- * for the next programmitic container
- */
-function newContainer() {
-  const container = document.createElement('div');
-  container.id = 'programmatic-modal';
-  document.body.append(container);
-}
-/**
- * Document click handler, will cache the trigger that caused the modal to open 
- */
-function cacheTrigger(event) {
-  const trigger = event.target.closest(selectorTrigger);
-  if (trigger) cachedTrigger = trigger;
-}
+

package/js/ui/proxy-click.js

@@ -0,0 +1,80 @@
+/**
+ * @module ui/proxy-click
+ */
+
+
+// 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 }])`;
+
+export const defaults = {
+  selector: "[data-ulu-proxy-click-source]",
+  selectorPreventBase: "input, select, textarea, button, a, [tabindex='-1']",
+  selectorPrevent: "",
+  mousedownDurationPrevent: 250,
+};
+
+// 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();
+}
+
+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);
+    }
+  });
+}
+export function attachHandlers(proxy, child, options) {
+  const { selectorPreventBase: spb, selectorPrevent: sp } = options;
+  const selectorPrevent = `${ spb }${ sp ? `, ${ sp }` : "" }`;
+  let start, shouldProxy;
+  proxy.addEventListener("mousedown", ({ target, timeStamp }) => {
+    shouldProxy = false;
+    if (!target.matches(selectorPrevent)) {
+      shouldProxy = true;
+      start = timeStamp;
+    }
+  });
+  proxy.addEventListener("mouseup", ({ timeStamp }) => {
+    if (shouldProxy && timeStamp - start < options.mousedownDurationPrevent) {
+      child.click();
+    }
+  });
+  proxy.style.cursor = "pointer";
+}

package/js/ui/resizer.js

@@ -11,9 +11,9 @@
 
 // Reference:       - http://jsfiddle.net/3jMQD/614/
 
-import { logError } from "../utils/logger.js";
+import { logError } from "../utils/class-logger.js";
 
-export default class ElementResizer {
+export class Resizer {
   static defaults = {
     debug: false,
     overrideMaxWidth: false, 
@@ -32,7 +32,7 @@ export default class ElementResizer {
     if (!control || !container) {
       logError(this, "Missing required elements 'control' or 'container'");
     }
-    this.options = Object.assign({}, ElementResizer.defaults, options);
+    this.options = Object.assign({}, Resizer.defaults, options);
     this.container = container;
     this.control = control;
     this.handlerMousedown = this.onMousedown.bind(this);

package/js/ui/scroll-slider.js

@@ -0,0 +1,56 @@
+/**
+ * @module ui/scroll-slider
+ */
+
+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
+ */
+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 }])`;
+
+
+const instances = [];
+
+const defaults = {
+  amount: createPager()
+};
+
+/**
+ * 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();
+}
+
+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);
+  const elements = {
+    track: container.querySelector(attrSelector("track")),
+    controls: container.querySelector(attrSelector("controls"))
+  };
+  instances.push(new OverflowScroller(elements, config));
+}

package/js/ui/scrollpoint.js

@@ -0,0 +1,300 @@
+/**
+ * @module ui/scrollpoint 
+ */
+
+// Module that uses intersection observer to add scrollpoint like behavior.
+/**
+ * TODO:
+ *  - Included a group option or attribute (on container)
+//    for things like anchor menus (one active in group at a time).
+ * 
+ * How to link elements of group
+ * <div group={ groupName: test }>
+ *   <div point={ groupName: test, mirror: ["#menu-link-1"] }>
+ * or
+ * <div group={ groupName: test, children: [".selector"] }>
+ *   <div class=".selector">
+ */
+import { getName } from "../events/index.js";
+import { getDatasetOptionalJson, getElement } from "../utils/dom.js";
+import { logError } from "../utils/class-logger.js";
+
+/**
+ * Default data attributes
+ */
+export const attrs = {
+  init: "data-ulu-scrollpoint-init",
+  /**
+   * Individual scrollpoint
+   */
+  point: "data-ulu-scrollpoint",
+  group: "data-ulu-scrollpoint-group",
+  groupAnchors: "data-ulu-scrollpoint-anchors"
+  // Goes on container for all items
+  // group: "data-ulu-scrollpoint-group"
+};
+
+// 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));
+
+/**
+ * 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 points and groups
+ */
+export function setup() {
+  const elements = queryAllInitial("point");
+  // const points = Array.from(elements).map(resolve);
+  // const groups = points
+  //   .filter(({ config }) => config.groupName)
+  //   .reduce((acc, point) => {
+  //     const { groupName } = point.config;
+  //     if (acc.has(groupName)) {
+  //       acc.get(groupName).push(point);
+  //     } else {
+  //       acc.set(groupName, [point]);
+  //     }
+  //   }, new Map());
+  // const singles = points.filter(({ config }) => !config.groupName);
+  // groups.forEach(setupGroup);
+  elements.forEach(element => {
+    const elOptions = getDatasetOptionalJson(element, "uluScrollpoint");
+    const config = Object.assign({}, elOptions);
+    element.setAttribute(attrs.init, "");
+    new Scrollpoint(element, config);
+  });
+}
+
+
+
+/**
+ * Single scrollpoint
+ * - Note "forward" and "reverse" refer to scroll directions
+ *   - forward = vertical below / horizontal right
+ *   - reverse = vertical above / horizontal left
+ * @todo Convert margin to offset 
+ * @todo This only goes one direction
+ */
+export class Scrollpoint {
+  static defaults = {
+    /**
+     * Default observer root element
+     */
+    root: null,
+    /**
+     * Use a selector to select the observer root element
+     */
+    rootSelector: null,
+    /**
+     * Log debug info to console
+     */
+    debug: false,
+    /**
+     * Change scroll orientation to horizontal
+     */
+    horizontal: false,
+    /**
+     * Margin for observer top or left (depending on orientation)
+     */
+    marginStart: "-25%",
+    /**
+     * Margin for observer bottom or right (depending on orientation)
+     */
+    marginEnd: "-55%",
+    /**
+     * Threshold for observer
+     */
+    threshold: [0,1],
+    /**
+     * The point can exited (else persists)
+     */
+    exit: true,
+    /**
+     * The point can exit from the end
+     */
+    exitForward: true,
+    /**
+     * The point can exit from the start
+     */
+    exitReverse: true,
+    /**
+     * Set state classes
+     */
+    setClasses: false,
+    /**
+     * Prefix for classes
+     */
+    classPrefix: "scrollpoint",
+    /**
+     * Set attribute for state (less verbose same info as classes)
+     */
+    setAttribute: true,
+    /**
+     * Attribute name to set state info in
+     */
+    attributeName: "data-scrollpoint-state",
+    /**
+     * Group multiple points, one active at a time (scroll menus)
+     */
+    // groupName: null,
+    /**
+     * Elements that should also get active state info (classes or attributes)
+     */
+    syncElements: [],
+    /**
+     * Callback called when state changes
+     */
+    onChange(_ctx) {
+      // do something
+    }
+  };
+  /**
+   * Setup a new scrollpoint
+   * @param {Node} element The element to create the scrollpoint for
+   * @param {Object} config Options to configure the scrollpoint see Scrollpoint.defaults for more information on settings
+   */
+  constructor(element, config) {
+    const options = Object.assign({}, Scrollpoint.defaults, config);
+    if (!element) {
+      logError(this, "Missing required element");
+      return;
+    }
+    if (options.rootSelector) {
+      options.root = document.querySelector(options.rootSelector);
+      delete options.rootSelector;
+    }
+    this.options = options;
+    this.observer = null;
+    this.lastPosition = null;
+    this.isActive = false;
+    this.element = element;
+    this.syncedElements = [
+      element, 
+      ...options.syncElements.map(target => getElement(target))
+    ];
+    this.classes = {
+      enter:          this.getClassname("enter"),
+      enterForward: this.getClassname("enter--from-forward"),
+      enterReverse: this.getClassname("enter--from-reverse"),
+      exit:          this.getClassname("exit"),
+      exitForward: this.getClassname("exit--from-forward"),
+      exitReverse: this.getClassname("exit--from-reverse"),
+    };
+    this.setupObserver();
+    if (options.debug) {
+      console.log("Scrollpoint", this);
+    }
+  }
+  getClassname(suffix) {
+    return this.options.classPrefix + "-" + suffix;
+  }
+  getObserverOptions() {
+    const { root, marginStart, marginEnd, threshold, horizontal } = this.options;
+    const rootMargin = horizontal 
+      ? `0px ${ marginStart } 0px ${ marginEnd }` 
+      : `${ marginStart } 0px ${ marginEnd } 0px`;
+    return { root, rootMargin, threshold };
+  }
+  /**
+   * IntersectionObserver Callback
+   * - Should set the state
+   */
+  onObserve(entries) {
+    const y = this.getScrollY();
+    const { lastPosition, isActive, options } = this;
+    const isForward = lastPosition === null ? null : lastPosition < y;
+    entries.forEach(entry => {
+      const { isIntersecting } = entry;
+      // Entering for first time
+      if (isIntersecting && !isActive) {
+        this.setState(true, isForward);
+      // Exiting
+      } else if (!isIntersecting && isActive && options.exit) {
+        // Call if allowed in either direction
+        if (isForward && options.exitForward || !isForward && options.exitReverse) {
+          this.setState(false, isForward);
+        }
+      }
+    });
+    this.lastPosition = y;
+  }
+  setupObserver() {
+    const handler = entries => {
+      this.onObserve(entries);
+    };
+    const config = this.getObserverOptions();
+    if (this.options.debug) {
+      console.log("Scrollpoint (IntersectionObserver)", config);
+    }
+    this.observer = new IntersectionObserver(handler, config);
+    this.observer.observe(this.element);
+  }
+  getScrollY() {
+    const { root } = this.options;
+    return root === null || root === document ? window.scrollY : root.scrollTop;
+  }
+  setState(isActive, isForward) {
+    const { element } = this;
+    const ctx = { isActive, isForward, element, instance: this };
+    const { setClasses, setAttribute, onChange } = this.options;
+    if (setClasses) {
+      this.updateClasses(isActive, isForward);
+    }
+    if (setAttribute) {
+      this.updateStateAttribute(isActive, isForward);
+    }
+    if (onChange) {
+      onChange(ctx);
+    }
+    this.isActive = isActive;
+  }
+  getAllClasses() {
+    return Object.values(this.classes);
+  }
+  updateClasses(isActive, isForward) {
+    const { classes } = this;
+    const all = this.getAllClasses();
+    const classesEnter = [
+      classes.enter,
+      isForward ? classes.enterForward : classes.enterReverse
+    ];
+    const classesExit = [
+      classes.exit, 
+      isForward ? classes.exitForward : classes.exitReverse
+    ];
+    this.syncedElements.forEach(element => {
+      element.classList.remove(...all);
+      if (isActive) {
+        element.classList.add(...classesEnter);
+      } else {
+        element.classList.add(...classesExit);
+      }
+    });
+  }
+  updateStateAttribute(isActive, isForward) {
+    const activeTerm = isActive ? "enter" : "exit";
+    const side = isForward ? "forward" : "reverse";
+    this.syncedElements.forEach(element => {
+      element.setAttribute(this.options.attributeName, `${ activeTerm }-${ side }`);
+    });
+  }
+  destroy() {
+    this.observer.disconnect();
+    this.observer = null;
+    if (this.options.setClasses) {
+      this.element.classList.remove(...this.getAllClasses());
+    }
+    if (this.options.setAttribute) {
+      this.element.removeAttribute(this.options.attributeName)
+    }
+  } 
+}