@ulu/frontend 0.0.3

package/js/events/index.js

@@ -0,0 +1,42 @@
+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/js/helpers/css-breakpoint.js

@@ -0,0 +1,247 @@
+// =============================================================================
+// 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/js/helpers/file-save.js

@@ -0,0 +1,48 @@
+// 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/js/helpers/node-data-manager.js

@@ -0,0 +1,74 @@
+/**
+ * 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/js/helpers/pause-youtube-video.js

@@ -0,0 +1,42 @@
+// 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/js/helpers/scrollbar-width-property.js

@@ -0,0 +1,10 @@
+
+/**
+ * Sets a CSS custom property equal to the scrollbar width
+ * @param {Node} element The element that is the child of a scrollabel container
+ * @param {Node} container The container that can be scrolled
+ */
+export default function addScrollbarProperty(element = document.body, container = window) {
+  const scrollbarWidth = container.innerWidth - element.clientWidth;
+  element.style.setProperty("--scrollbar-width", `${ scrollbarWidth }px`);
+}

package/js/index.js

@@ -0,0 +1,15 @@
+// =============================================================================
+// 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/js/polyfills/element-closest.js

@@ -0,0 +1,17 @@
+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;
+  };
+}