@ulu/frontend 0.0.3

package/js/ui/overflow-scroller.js

@@ -0,0 +1,160 @@
+/**
+ * @todo - Need to have scroll handler check scroll position
+ * @todo - Determine if controls should be visible
+ * @todo - Make the amount the scroll controls move forward or backward based on amount or function
+ *         the user can use this to increment by a certain number of items
+ * @todo - Provide accessible names to buttons but don't worry about hiding these from screenreaders
+ * @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 { logError } from "../utils/logger.js";
+import { hasRequiredProps } from '../utils/object.js';
+const requiredElements = [
+  "track", 
+  "controls"
+];
+export class OverflowScroller {
+  static instances = [];
+  static defaults = {
+    namespace: "OverflowScroller",
+    events: {},
+    horizontal: true,
+    offsetStart: 100,
+    offsetEnd: 100,
+    amount: "auto",
+  }
+  constructor(elements, config) {
+    this.options = Object.assign({}, OverflowScroller.defaults, config);
+    if (!hasRequiredProps(requiredElements)) {
+      logError(this, 'Missing a required Element');
+    }
+    this.elements = {
+      ...elements,
+      ...this.createControls(elements.controls)
+    };
+    this.nextEnabled = true;
+    this.previousEnabled = true;
+    this.scrollHandler = (e) => this.onScroll(e);
+    this.elements.track.addEventListener("scroll", this.scrollHandler, { passive: true });
+    this.checkOverflow();
+    this.onScroll();
+  }
+  checkOverflow() {
+    const { track } = this.elements;
+    this.hasOverflow = track.scrollWidth > track.clientWidth;
+  }
+  createControls(context) {
+    const controls = document.createElement('ul');
+    const previousItem = document.createElement("li");
+    const nextItem = document.createElement("li");
+    const previous = this.createControlButton("previous");
+    const next = this.createControlButton("next");
+    const itemClass = this.getClass("controls-item");
+    nextItem.classList.add(itemClass);
+    nextItem.classList.add(itemClass + "--next");
+    previousItem.classList.add(itemClass);
+    previousItem.classList.add(itemClass + "--previous");
+    controls.classList.add(this.getClass("controls"));
+    previousItem.appendChild(previous);
+    nextItem.appendChild(next);
+    controls.appendChild(previousItem);
+    controls.appendChild(nextItem);
+    previous.addEventListener('click', this.previous.bind(this));
+    next.addEventListener('click', this.next.bind(this));
+    context.appendChild(controls);
+
+    return {
+      controls,
+      previousItem,
+      nextItem,
+      previous,
+      next
+    };
+  }
+  createControlButton(action) {
+    const button = document.createElement("button");
+    button.classList.add(this.getClass("control-button"));
+    button.classList.add(this.getClass(`control-button--${ action }`));
+    button.setAttribute("type", "button");
+    button.innerHTML = this.getControlContent(action);
+    return button;
+  }
+  getControlContent(action) {
+    return `
+      <span class="hidden-visually">${ action }</span>
+      <span aria-hidden="true">${ action === 'next' ? '→' : '←' }</span>
+    `;
+  }
+  onScroll(event) {
+    if (!this.hasOverflow) return;
+    this.onScrollHorizontal();
+  }
+  onScrollHorizontal() {
+    const { nextEnabled, previousEnabled } = this;
+    const { track } = this.elements;
+    const { offsetStart, offsetEnd } = this.options;
+    const { scrollWidth, clientWidth, scrollLeft } = track;
+    const atStart = scrollLeft <= offsetStart;
+    const atEnd = scrollWidth - scrollLeft - offsetEnd <= clientWidth;
+    if (atStart && previousEnabled) {
+      this.setControlState("previous", false);
+    } else if (!atStart && !previousEnabled) {
+      this.setControlState("previous", true);
+    }
+    if (atEnd && nextEnabled) {
+      this.setControlState("next", false);
+    } else if (!atEnd && !nextEnabled) {
+      this.setControlState("next", true);
+    }
+  }
+  setControlState(dir, enabled) {
+    const isNext = dir === "next";
+    const { next, nextItem, previous, previousItem } = this.elements;
+    const item = isNext ? nextItem : previousItem; 
+    const button = isNext ? next : previous;
+    const classlistMethod = enabled ? 'remove' : 'add';
+    
+    item.classList[classlistMethod](this.getClass("controls-item--disabled"));
+    button.classList[enabled ? 'remove' : 'add'](this.getClass("control--disabled"));
+    if (enabled) {
+      button.removeAttribute("disabled");
+    } else {
+      button.setAttribute("disabled", "");
+    }
+    this[isNext ? 'nextEnabled' : 'previousEnabled'] = enabled;
+  }
+  resolveAmount(dir) {
+    const isNext = dir === "next";
+    const { amount } = this.options;
+    const { scrollLeft, offsetWidth } = this.elements.track;
+    if (amount === "auto") {
+      return isNext ? scrollLeft + offsetWidth : scrollLeft - offsetWidth;
+    } else if (typeof amount === "function") {
+      return amount(this, dir);
+    } else if (typeof amount === "number") {
+      return isNext ? scrollLeft + amount : scrollLeft - amount;
+    }
+    logError("Unable to resolve amount for scroll");
+    return 500;
+  }
+  next() {
+    this.elements.track.scrollTo({
+      top: 0,
+      left: this.resolveAmount("next"),
+      behavior: "smooth"
+    });
+  }
+  previous() {
+    this.elements.track.scrollTo({
+      top: 0,
+      left: this.resolveAmount("previous"),
+      behavior: "smooth"
+    });
+  }
+  getClass(child) {
+    const { namespace } = this.options;
+    return `${ namespace }__${ child }`;
+  }
+}
+
+export default OverflowScroller;

package/js/ui/programmatic-modal.js

@@ -0,0 +1,91 @@
+// =============================================================================
+// 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";
+
+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;
+
+// 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);
+
+/**
+ * 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);
+      }
+      // For accessiblity/usablity (return to last clicked trigger)
+      if (cachedTrigger) {
+        cachedTrigger.focus();
+      }
+    }
+  });
+  // Attach handler so that it can reopen that modal
+  if (!config.removeOnClose && cachedTrigger) {
+    cachedTrigger.setAttribute(triggerAttr, id);
+    attachTriggers();
+  }
+}
+/**
+ * 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/resizer.js

@@ -0,0 +1,60 @@
+// =============================================================================
+// Element Resizer
+// =============================================================================
+
+// Version:         1.0.1
+
+// Description:     Adds resizing ability to an element (only horizontal currently)
+
+// Reference:       - http://jsfiddle.net/3jMQD/614/
+
+import { logError } from "../utils/logger.js";
+
+export default class ElementResizer {
+  static defaults = {
+    debug: false,
+    overrideMaxWidth: false, 
+    fromLeft: false
+  };
+  /**
+   * 
+   * @param {Node} container Container to be resize   
+   * @param {Node} control Resize handle element 
+   * @param {Object} options Defualt can be changed on class
+   * @param {Boolean} options.debug Enable non-essential debugging logs
+   * @param {Boolean} options.overrideMaxWidth When script is activated by handle remove the elements max-width and allow the width of the resize to exceed the max (default false)
+   * @param {Boolean} options.fromLeft The script should assume the handle is on the left side of the element
+   */
+  constructor(container, control, options) {
+    if (!control || !container) {
+      logError(this, "Missing required elements 'control' or 'container'");
+    }
+    this.options = Object.assign({}, ElementResizer.defaults, options);
+    this.container = container;
+    this.control = control;
+    this.handlerMousedown = this.onMousedown.bind(this);
+    this.control.addEventListener('mousedown', this.handlerMousedown);
+  }
+  destroy() {
+    this.control.removeEventListener('mousedown', this.handlerMousedown);
+  }
+  onMousedown(e) {
+    const { overrideMaxWidth, fromLeft } = this.options;
+    const doc = document.documentElement;
+    const win = document.defaultView;
+    const x = e.clientX;
+    const width = parseInt(win.getComputedStyle(this.container).width, 10);
+    if (overrideMaxWidth) {
+      this.container.style.maxWidth = 'none';
+    }
+    const mousemove = event => {
+      const polarity = fromLeft ? -1 : 1;
+      this.container.style.width = `${ width + ((event.clientX - x) * polarity) }px`;
+    };
+    const cleanup = () => {
+      doc.removeEventListener('mousemove', mousemove, false);    
+    };
+    doc.addEventListener('mousemove', mousemove, false);
+    doc.addEventListener('mouseup', cleanup, { capture: true, once: true });
+  }
+}