@ulu/frontend 0.0.3 → 0.0.6

package/trash/js-old-230729/ui/overflow-scroller.js

@@ -1,160 +0,0 @@
-/**
- * @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 { log, logError, logWarning } 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/trash/js-old-230729/ui/programmatic-modal.js

@@ -1,91 +0,0 @@
-// =============================================================================
-// 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";
-
-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/trash/js-old-230729/ui/resizer.js

@@ -1,60 +0,0 @@
-// =============================================================================
-// 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 });
-  }
-}