@ulu/frontend 0.0.3 → 0.0.5

package/trash/js-old-230729/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-230729/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-230729/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-230729/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-230729/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-230729/helpers/scrollbar-width-property.js

@@ -1,10 +0,0 @@
-
-/**
- * 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/trash/js-old-230729/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-230729/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;
-  };
-}