@ulu/frontend 0.0.3 → 0.0.5

package/trash/js-old/events/index.js

@@ -1,42 +0,0 @@
-import { debounce } from "../utils/performance";
-
-/**
- * Event object - called on dispatch
- */
-const events = {
-  pageModified(context) {
-    context.dispatchEvent(new Event(getName("pageModified"), { bubbles: true }));
-  },
-  pageResized(context) {
-    context.dispatchEvent(new Event(getName("pageResized"), { bubbles: true }));
-  }
-}
-
-// Add global document events
-window.addEventListener('resize', debounce(() => dispatch("pageResized", document), 250));
-
-/**
- * Triggers one of our custom events
- * @param {String} type Type of event to dispatch
- * @param {Node} context Element to trigger the event from
- * @example
- *   if (updatedMarkup) {
- *     dispatch("pageModified", modalElement);
- *   }
- */
-export function dispatch(type, context) {
-  if (events[type]) {
-    events[type](context);
-  } else {
-    console.warn(`Unable to dispatch site event: ${ type } in context:`, context);
-  }
-}
-
-/**
- * Handles the actual event names being used (future could namespace)
- * @param {String} type Type of event to get the actual event name for
- * @returns {String}
- */
-export function getName(type) {
-  return "ulu:" + type;
-}

package/trash/js-old/helpers/css-breakpoint.js

@@ -1,247 +0,0 @@
-// =============================================================================
-// Grabs Breakpoint from CSS
-// =============================================================================
-
-// Version:         1.0.6
-
-// Description:     Pass breakpoints from CSS to stylesheet, use this to attach 
-//                  behaviors on breakpoints
-
-import { debounce } from "../utils/performance";
-import { getName } from "../events/index.js";
-import { removeArrayElement } from "../utils/array";
-import { log, logError } from "../utils/logger.js";
-
-/**
- * Resize Handler to update breakpoints for all instances (Called after resize finished)
- */
-window.addEventListener(getName("pageResized"), () => {
-  CssBreakpoints.instances.forEach(i => i.update());
-});
-
-/**
- * Class that provides method for retrieving and acting on breakpoints passed
- * from CSS (using element psuedo content prop)
- */
-export class CssBreakpoints {
-  static instances = [];
-  static defaults = {
-    element: document.body,
-    psuedoSelector: ':before',
-    debug: false
-  }
-  /**
-   * @param {Object} config Configruation object
-   * @param {Array} config.order Required, Array of strings that correspond to the breakpoints setup in the styles, Breakpoints from smallest to largest
-   * @param {Node} config.element The element to retrieve active breakpoint from stylesheet  (default is body)
-   * @param {String} config.psuedoSelector Change psuedo selector used to get the breakpoint from the psuedo's content property
-   */
-  constructor(config) {
-    if (!config.order) {
-      logError(this, 'Missing order (required)!');
-    }
-    Object.assign(this, CssBreakpoints.defaults, config);
-    this.active = null;
-    this.previous = null;
-    this.activeIndex = null;
-    this.resizeDirection = null;
-    this.previousIndex = null;
-    this.breakpoints = {};
-    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);
-  }
-  /**
-   * Get breakpoint from element (design note: user could override prototype)
-   */
-  getBreakpoint() {
-    return window.getComputedStyle(this.element, this.psuedoSelector).content.replace(/^"|"$/g, '');
-  }
-  /**
-   * Updates the active breakpoint by checking the element and executes handlers on change
-   */
-  update() {
-    const name = this.getBreakpoint();
-    // console.log('name:\n', name);
-    if (name === this.active) return;
-    // this.log(`current breakpoint: ${ name }`);
-    // Update active and cache last
-    this.previous = this.active;
-    this.previousIndex = this.activeIndex;
-
-    const index = this.order.indexOf(name);
-    this.active = name;
-    this.activeIndex = index;
-    const activeBreakpoint = this.at(this.active);
-    // Get arrays of breakpoints based on the order array
-    const mapBreakpoints = n => this.at(n);
-    // From breakpoint to end (highest)
-    const max = this.order.slice(index).map(mapBreakpoints);
-    const notMax = this.order.slice(0, index).map(mapBreakpoints);
-    // From start up to this breakpoint
-    const min = this.order.slice(0, index + 1).map(mapBreakpoints);
-    const notMin = this.order.slice(index + 1).map(mapBreakpoints);
-    const notOnly = this.order.slice().map(mapBreakpoints);
-    notOnly.splice(index, 1);
-    
-    log(this, 'max:', max.map(b => b.name).join());
-    log(this, 'min:', min.map(b => b.name).join());
-    
-    max.forEach(b => b._setDirection('max', true));
-    min.forEach(b => b._setDirection('min', true));
-    activeBreakpoint._setDirection('only', true);
-
-    notMax.forEach(b => b._setDirection('max', false));
-    notMin.forEach(b => b._setDirection('min', false));
-    notOnly.forEach(b => b._setDirection('only', false));
-
-    // Set direction (extra info if needed)
-    if (this.previousIndex !== null) {
-      this.resizeDirection = this.previousIndex < index ? "up" : "down";
-    }
-  }
-  /**
-   * Get a breakpoint by key
-   * @param {String} name The name of the breakpoint to get
-   */
-  at(name) {
-    const bp = this.breakpoints[name];
-    if (!name) {
-      logError(this, 'Unable to find breakpoint for:', bp);
-    }
-    return bp;
-  }
-}
-/**
- * Used to handle a breakpoints direction's handler and state
- */
-class BreakpointDirection {
-  constructor(direction, breakpoint) {
-    this.direction = direction; // String name (logging)
-    this.active = false;
-    this.on = [];
-    this.off = []; // Triggered when direction has been set to active and then set to inactive (not on initial inactive)
-    this.breakpoint = breakpoint; // Reference to parent
-  }
-  /**
-   * Change the state of the direction
-   */
-  change(to) {
-    if (this.active !== to) {
-      if (to) this._call(true);
-      else if (this.active) this._call(false); // Going from active to inactive
-      this.active = to;
-    }
-  }
-  /**
-   * Calls all functions in handlers or
-   */
-  _call(forActive) {
-    const handlers = forActive ? this.on : this.off;
-    handlers.forEach(handler => handler());
-    log(this.breakpoint._manager, `Handlers called (${ forActive ? 'on' : 'off' }): ${ this.direction }`);
-  }
-  /**
-   * Returns handlers in normalized object format on/off
-   */
-  getHandlers(handler) {
-    return typeof handler !== "object" ? { on: handler } : handler;
-  }
-  /**
-   * Adds a handler for the direction, optionally use object to add off state handler
-   * @param {Function|Object} handler Function to be executed when direction is active, read object description for on/off
-   * @param {Function|Object} handler.on Function to be executed when direction is active
-   * @param {Function|Object} handler.off Function to be executed when direction was active and is now changed to inactive
-   */
-  add(handler) {
-    const handlers = this.getHandlers(handler);
-    if (handlers.on) {
-      this.on.push(handlers.on);
-    }
-    if (handlers.off) {
-      this.off.push(handlers.off);
-    }
-    // Already active when handler was added, fire now
-    if (this.active && handlers.on) {
-      handlers.on();
-      log(this.breakpoint._manager, `Handler called immediately: ${ this.direction }`, handlers.on);
-    }
-  }
-  /**
-   * Removes a handler
-   */
-  remove(handler) {
-    const handlers = this.getHandlers(handler);
-    if (handlers.on) {
-      removeArrayElement(this.on, handlers.on);
-    }
-    if (handlers.off) {
-      removeArrayElement(this.off, handlers.off);
-    }
-  }
-}
-/**
- * Single breakpoint management
- */
-class Breakpoint {
-  constructor(name, manager) {
-    this.directions = {
-      max: new BreakpointDirection('max', this),
-      min: new BreakpointDirection('min', this),
-      only: new BreakpointDirection('only', this)
-    };
-    this._manager = manager; // Ref to parent class
-    this.name = name;
-  }
-  /**
-   * Private method used inrternally for managing direction activation
-   * - Each direction manages it's own state and handlers
-   * @param {String} direction The directional key
-   * @param {Boolean} active State of that direction to set
-   */
-  _setDirection(direction, active) {
-    this.directions[direction].change(active);
-  }
-  /**
-   * Attach handler to be executed from the breakpoint and to all breakpoints below.
-   * - If the browser resizes from a breakpoint below this breakpoint, 
-   *   and above the breakpoint name specified, this handler will fire
-   * @param {Function} handler Handler to be executed
-   */    
-  max(handler) {
-    this.directions.max.add(handler);
-  }
-  /**
-   * Attach handler to be executed from the breakpoint and to all breakpoints below.
-   * - If the browser resizes from a breakpoint above this breakpoint, 
-   *   and below the breakpoint name specified, this handler will fire
-   * @param {Function} handler Handler to be executed
-   */  
-  min(handler) {
-    this.directions.min.add(handler);
-  }
-  /**
-   * Attach a handler to fire when the breakpoint is within the key
-   * @param {Function} handler Handler to be executed
-   */    
-  only(handler) {
-    this.directions.only.add(handler);
-  }
-  /**
-   * Remove handler
-   * @param {Function} handler Handler to be removed, extended on/off object style can be used
-   * @param {String} direction Remove handler only from specified direction, else search all directions
-   */      
-  remove(handler, direction) {
-    const directions = direction ? [ direction ] : ['max', 'min', 'only'];
-    directions.forEach(d => d.remove(handler));
-  }
-  
-  log(...msg) {
-    msg.unshift(`Breakpoint (${ this.name }):`);
-    this._manager.log.apply(this._manager, msg);
-  }
-}
-
-export default CssBreakpoints;

package/trash/js-old/helpers/file-save.js

@@ -1,48 +0,0 @@
-// Description:     Simple script that is useful for testing. It will:
-//                  - Make a file 
-//                  - Create a URL to it
-//                  - Gives utility function to create a link to the file (for front end)
-//                  - Gives method to destroy the file when no longer needed
-//                  - User can redefine the program by passing options object matching props.
-
-// Dependencies:    No
-
-// Support:         Limited to knew browsers that support Blob(), also user preferences or 
-//                  type of browser may limit access to Blob functionality
-
-// Related Docs:
-//                  - https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob
-//                  - https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
-//                  - https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL
-
-
-class FileSave {
-  constructor(data, options) {
-    this.filename = "filesave-file.txt";
-    this.type = "text/plain;charset=utf-8";
-    // Allow user to override above
-    if (options) Object.assign(this, options);
-    this.data = data;
-    this.blob = new Blob([data], { type: this.type });
-    this.url = URL.createObjectURL(this.blob);
-  }
-  destroy() {
-    return URL.revokeObjectURL(this.url);
-  }
-  getUrl() {
-    return this.url;
-  }
-  createLink(text) {
-    var link = d.createElement('a');
-    text = d.createTextNode(text);
-    link.setAttribute('download', this.filename);
-    link.setAttribute('href', this.url);
-    link.appendChild(text);
-    return link;
-  }
-  static isBrowserSupported() {
-    return "FileReader" in window;
-  }
-}
-
-export default FileSave;

package/trash/js-old/helpers/node-data-manager.js

@@ -1,74 +0,0 @@
-/**
- * Class that provides a method to store data based on node/element
- */
-export default class NodeDataManager {
-  constructor() {
-    this.store = [];
-  }
-  /**
-   * Get data for an element/node
-   * @param {Node} node Html Node/Element to get data for
-   * @param {String|Boolean} key If key is passed, return that key's data for the element, if falsey return elements complete dataset
-   */
-  get(node, key = false) {
-    const nodeData = this.find(node);
-    if (nodeData) {
-      return nodeData.get(key);
-    }
-  }
-  /**
-   * Bind data to a specific Node/Element
-   * @param {Node} node Html Node/Element to get data for
-   * @param {String} key Key to save the data under
-   * @param {*} value Value to save 
-   */
-  set(node, key, value) {
-    const nodeData = this.find(node);
-    if (nodeData) {
-      nodeData.set(key, value);
-    } else {
-      this.store.push(new NodeDataStore(node, { [key] : value }));
-    }
-  }
-  /**
-   * Return an elements store object
-   */
-  find(node) {
-    return this.store.find(nd => nd.isNode(node));
-  }
-  /**
-   * Destroy all references to data and nodes/elements
-   */
-  destroy() {
-    this.store.forEach(nd => nd.destroy());
-    this.store = [];
-  }
-}
-/**
- * Child class that provides a store for one specific node/element
- */
-export class NodeDataStore {
-  constructor(node, data) {
-    this.node = node;
-    this.data = data || {}; // Lookup
-  }
-  set(key, value) {
-    this.data[key] = value;
-  }
-  get(key = false) {
-    return key ? this.data[key] : this.data;
-  }
-  remove(key) {
-    delete this.data[key];
-  }
-  isNode(node) {
-    return this.node.isSameNode(node);
-  }
-  clearData() {
-    this.data = {};
-  }
-  destroy() {
-    this.clearData();
-    this.node = null;
-  }
-}

package/trash/js-old/helpers/pause-youtube-video.js

@@ -1,42 +0,0 @@
-// Version:         1.0.4
-// Description:     Pauses youtube using js api (iframe post message)
-
-const selectors = [
-  '.youtube-embedded-video',
-  'iframe[title*="YouTube video player"]',
-  'iframe[src*="youtube.com/embed"]'
-];
-/**
- * Somewhat hacky way to pause the video
- * - https://www.digitalredpanther.com/blog/play-pause-stop-youtube-embed
- * - Actual JS API documentation (Didn't follow this for now) (https://developers.google.com/youtube/iframe_api_reference)
- * @param {Element|Node} context The DOM element to search for and pause videos within
- */
-export function pauseVideos(context = document) {
-  const videos = getVideos(context);
-  videos.forEach(video => {
-    try {
-      video.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*');
-    } catch (error) {
-      console.error(error);
-    }
-  });
-}
-/**
- * Prep videos to be paused
- * - Add query parameters for js API
- * - Removes all other query parameters from iframe.src
- */
-export function prepVideos(context = document) {
-  const videos = getVideos(context);
-  videos.forEach(video => {
-    const { src } = video;
-    if (src) {
-      video.src = src.split("?")[0] + "?rel=0&enablejsapi=1";
-    }
-  })
-}
-
-function getVideos(context) {
-  return context.querySelectorAll(selectors.join(", "));
-}

package/trash/js-old/index.js

@@ -1,15 +0,0 @@
-// =============================================================================
-// Main Library Import
-// =============================================================================
-
-// Used for:
-// - Allow users to access commonly needed items with at one point/file
-// - 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
-
-import "./polyfills/element-closest.js";
-
-export { CssBreakpoints } from "./helpers/css-breakpoint.js";
-export * as events from "./events/index.js";
-export * as grid from "./ui/grid.js";

package/trash/js-old/polyfills/element-closest.js

@@ -1,17 +0,0 @@
-if (!Element.prototype.matches) {
-  Element.prototype.matches =
-    Element.prototype.msMatchesSelector ||
-    Element.prototype.webkitMatchesSelector;
-}
-
-if (!Element.prototype.closest) {
-  Element.prototype.closest = function(s) {
-    var el = this;
-
-    do {
-      if (Element.prototype.matches.call(el, s)) return el;
-      el = el.parentElement || el.parentNode;
-    } while (el !== null && el.nodeType === 1);
-    return null;
-  };
-}

package/trash/js-old/ui/flipcard.js

@@ -1,202 +0,0 @@
-// =============================================================================
-// Flipcard
-// =============================================================================
-
-// Version:                    1.0.1
-
-// Changes                    1.0.1 | Added allow selection
-
-import { log, logError } from "../utils/logger.js";
-import { trimWhitespace } from "../utils/string.js";
-const debugMode = false; // Global dev debug
-
-export class Flipcard {
-  static instances = [];
-  static defaults = {
-    namespace: "Flipcard",
-    proxyClick: {
-      allowSelection: true, // Don't proxy click if the user has more than the minmimum selected
-      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)');
-    }
-    this.options = Object.assign({}, Flipcard.defaults, config);
-    const { namespace } = this.options;
-    Flipcard.instances.push(this);
-
-    this.debug = debugMode || debug;
-    this.elements = { container, front, back };
-    this.isOpen = false;
-    this.uid = `${ namespace }-id-${ Flipcard.instances.length }`;
-    this.stateAttr = `data-${ namespace }-state`.toLowerCase();
-    this.setup();
-    this.setVisiblity(false);
-    log(this, this);
-  }
-  toggle() {
-    this.setVisiblity(!this.isOpen);
-  }
-  setup() {
-    const { uid } = this;
-    const { namespace, proxyClick } = this.options;
-    const { container, front, back } = this.elements;
-    const control = this.elements.control = document.createElement("button");
-
-    // Styling and markup
-    control.classList.add(this.getClass("control-button"));
-    control.setAttribute("type", "button");
-    control.innerHTML = this.createControlContent();
-    control.style.gridArea = namespace;
-    control.style.zIndex = "-1"; // Behind everything only used for focus
-    control.addEventListener('focusin', () => {
-      control.style.zIndex = "20"; // above the back
-    });
-    control.addEventListener('focusout', () => {
-      control.style.zIndex = "-1"
-    });
-    control.addEventListener("click", this.toggle.bind(this));
-    back.parentNode.insertBefore(control, back);
-  
-    container.classList.add(this.options.namespace);
-    container.setAttribute("style", trimWhitespace(this.containerCss()));
-    if (proxyClick) {
-      container.addEventListener("click", this.onProxyClick.bind(this));
-    }
-
-    front.style.gridArea = namespace;
-    back.style.gridArea = namespace;
-
-    // Accessibility
-    control.id = `${ uid }-control`;
-    control.setAttribute("aria-controls", back.id);
-    control.setAttribute("aria-expanded", "false");
-    back.id = `${ uid }-back`;
-    back.setAttribute('aria-labelledby', control.id)
-    back.setAttribute('aria-hidden', "true");
-  }
-  /**
-   * Click handler on everything on container
-   * - Determines if click was something that should be ignored (link, etc)
-   */
-  onProxyClick({ target }) {
-    const { exclude, allowSelection, selectionMin } = this.options.proxyClick; 
-    const selection = window.getSelection();
-    if (exclude && !target.matches(exclude)) {
-      if (!allowSelection || selection.toString().length < selectionMin) {
-        this.toggle();
-      }
-    }
-  }
-  getClass(child) {
-    const { namespace } = this.options;
-    return child ? `${ namespace }__${ child }` : namespace;
-  }
-  createControlContent() {
-    return `
-      <span class="hidden-visually">Show More Information</span>
-    `;
-  }
-  setVisiblity(visible) {
-    const { back, container, control } = this.elements;
-    const state = visible ? "open" : "closed";
-    back.style.zIndex = visible ? "10" : "1";
-    back.style.visibility = visible ? "visible" : "hidden";
-    container.setAttribute(this.stateAttr, state);
-    back.setAttribute('aria-hidden', visible ? "false" : "true");
-    control.setAttribute('aria-expanded', visible ? "true" : "false");
-    this.isOpen = visible;
-  }
-  containerCss() {
-    return `
-      display: -ms-grid;
-      display: grid;
-      position: relative; 
-      -ms-grid-columns: 1fr; 
-      grid-template-columns: 1fr;
-      justify-items: stretch;
-      grid-template-areas: "${ this.options.namespace }";
-      cursor: pointer;
-    `;
-  }
-  panelCss(zIndex = 1) {
-    return `
-      grid-area: ${ this.options.namespace };
-      z-index: ${ zIndex }
-    `;
-  }
-}
-export default Flipcard;
-
-/**
- * Preliminary Notes:
- *   Considerations for Accessiblity:
- *   - https://webaim.org/standards/wcag/checklist
- *   - https://www.w3.org/TR/WCAG21/#on-focus
- *   - https://a11y-style-guide.com/style-guide/section-cards.html
- *   - Reduced Motion
- *   - Percievable (interactive)
- *   - Final Descision
- *     - Use a buttons
- *     - Why?
- *       - Can't use whole card surface as click 
- *         * Selections
- *         * Other interactions
- *         * How to make that make sense to SR
- *         * Keyboard focuses and then clicks
- *         * Accidental flipping on zoom
- *       - Can't use hover
- *   
- *   - BRAINSTORM START:
- *     - Don't use hover or focus (motor control issues)
- *       - Needs to use click
- *     - Run through screenreader expierence
- *       - Hits button (reads title, click to reveal)
- *       - Focuses the content button (reads content, backside, click to unreveal)
- *       - NO BUTTONS CAN"T HAVE CONTENT, BUTTONS NEED TO STATE THEIR INTENT
- *     - Try Again, Run through screenreader expierence
- *       - Screen reader encounters flipcard
- *       - Headline is read
- *       - Button is read (reveal description)
- *       - Button is clicked
- *       - Content is shown and focused
- *       - Button to flip back
- *     - For Keybaord users
- *       - The accessible buttons can be used or a click handler can be attached to the 
- *         flipcard and given
- *     - Why not always show the content to screenreaders?
- *       - How to hide controls from them? (controls can't be hidden)
- *       - How to not have events interfere click
- *       - Maybe use a single control and make it say "jumpto definition"
- *         - Kind of lame
- *       - What about going back to focus and then attaching a click handler?
- *         - Visual users will see the content on keyboard or mouse or touch
- *         - We can reduce the motion with query
- *         - Note: WCAG AAA - 1.4.13 Content on Hover or Focus
- *           - Need to bind escape
- *         - Mouse users and touch will need to click
- *         - How does it focus and work on a screenreader?
- *       - Cannot use FOCUS!
- *         - https://www.w3.org/WAI/WCAG21/Understanding/on-focus.html
- *         - What if the user was zoomed? They may never see the title/front
- *     - I think it MUST use buttons or a button to flip
- *       - Because users need to be able to scroll, interact and select text in a back
- *     @example html
- *        <div class="flipcard">
- *          <h3 class="flipcard__front">
- *            Term Name
- *            <button class="flipcard__toggle">
- *              <span class="hidden-visually">Show Definition</span>
- *            </button>
- *          </h3>
- *          <div class="flipcard__back">
- *            Some definiton example lorem ipsum et depsi anu olor.
- *            <button class="flipcard__toggle">
- *              <span class="hidden-visually">Hide Definition</span>
- *            </button>
- *          </div>
- *        </div>
- */