@ulu/frontend 0.0.3

package/trash/js-old-230729/utils/dom.js

@@ -0,0 +1,122 @@
+/**
+ *   Returns an array of direct descendants
+ *   @param  {Node}   element
+ *   @param  {String} selector
+ *   @return {Array}
+ */
+export function getDirectDescandants(element, selector) {
+  return [...element.children].filter(child => child.matches(selector));
+};
+
+/**
+ *   Checks if element is overflown vertically
+ *   @param  {Node}  element
+ *   @return {Boolean}
+ */
+export function isOverflownY(element) {
+  return element.scrollHeight > element.clientHeight;
+}
+
+/**
+ *   Checks if element is overflown both vertically and horizontally
+ *   @param  {Node}  element
+ *   @return {Boolean}
+ */
+export function isOverflown(element) {
+  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+}
+
+/**
+ * For a given element return the first parent that has scrollable overflow
+ * - Helpful for debugging position sticky
+ * @param {Node} node Node to start search for first scrollable parent
+ * @returns {Node}
+ * @example
+ *   const $navcontent = document.querySelector('.nav__content');
+ *   if ($navcontent) {
+ *     console.log(getScrollParent($navcontent));
+ *   }
+ */
+export function getScrollParent(node) {
+  if (node == null) {
+    return null;
+  }
+  if (node.scrollHeight > node.clientHeight) {
+    return node;
+  } else {
+    return getScrollParent(node.parentNode);
+  }
+}
+
+/**
+ *   Returns reliable document height
+ *   @return {number}
+ */
+export function documentHeight() {
+  return Math.max(
+    document.body.scrollHeight, document.documentElement.scrollHeight,
+    document.body.offsetHeight, document.documentElement.offsetHeight,
+    document.body.clientHeight, document.documentElement.clientHeight
+  );
+}
+
+/**
+ *   Returns reliable window height
+ *   @return {number}
+ */
+ export function windowHeight() {
+  return Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+}
+
+/**
+ *   Returns reliable window width
+ *   @return {number}
+ */
+ export function windowWidth() {
+  return Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+}
+
+/**
+ *   Check browser support for position: sticky
+ *   - https://stackoverflow.com/questions/60214332/dynamically-detect-if-positionsticky-is-supported-by-the-browser
+ *   @return {Boolean}
+ */
+ export function browserWithPositionSticky() {
+  var prop = 'position:';
+  var value = 'sticky';
+  var prefixes = ' -webkit- -moz- -o- -ms- '.split(' ');
+
+  var el = document.createElement('a');
+  var mStyle = el.style;
+  mStyle.cssText = prop + prefixes.join(value + ';' + prop).slice(0, - prop.length);
+  
+  return mStyle.position.indexOf(value) !== -1;
+}
+
+/**
+ * Returns Node List from HTML markup string
+ * @param {String} markup HTML markup to create into an element
+ */
+ export function createElementFromHtml(markup) {
+  const doc = new DOMParser().parseFromString(markup, 'text/html');
+  return doc.body.firstElementChild;
+}
+
+/**
+ * Creates a new element with attributes and children
+ * @param {Object} config Configuration object
+ * @param {String} config.tag Node type (ie 'div')
+ * @param {Object} config.attributes Attributes to add to the new element
+ * @param {Array} config.children Array of children to append into the new element
+ */
+ export function composeElement(config) { // tag, attributes = {}, children
+  const { tag, attributes, children } = config;
+  const element = document.createElement(tag);
+  if (attributes) {
+    Object.entries(attributes).forEach((a, v) => element.setAttribute(a, v));
+  }
+  if (children) {
+    children.forEach(c => element.appendChild(c));
+  }
+  return element;
+}

package/trash/js-old-230729/utils/logger.js

@@ -0,0 +1,69 @@
+// Goal: minimzing console conditions for nessasary production log statements
+
+/**
+ * Configuration Object
+ */
+const config = {
+  debug: false,
+  warningsAlways: true,
+  errorsAlways: true,
+  outputContext: false
+};
+
+const hasConsole = "console" in window;
+
+// If no context output only if config (global) debug is enabled
+function allow(context) {
+  return hasConsole && config.debug && (context?.debug || context == null);
+};
+function getName(context) {
+  return typeof context === "object" && context?.constructor?.name;
+};
+function output(method, context, messages) {
+  const label = getName(context) || "Logger";
+  console[method](label, ...messages);
+  if (config.outputContext) {
+    console.log('Context:\n', context);
+  }
+};
+
+/**
+ * Changes to make to configuration
+ * @param {Object} changes 
+ */
+export function set(changes) {
+  Object.assign(config, changes);
+}
+
+/**
+ * Proxy Console.log
+ * @param {Object} context Class instance (optional), will rely on classes (debug) property for output
+ * @param  {...any} messages 
+ */
+export function log(context, ...messages) {
+  if (allow(context)) {
+    output("log", context, messages);
+  }
+}
+
+/**
+ * Proxy Console.warn
+ * @param {Object} context Class instance (optional), will rely on classes (debug) property for output
+ * @param  {...any} messages 
+ */
+export function logWarning(context, ...messages) {
+  if (config.warningsAlways || allow(context)) {
+    output("warn", context, messages);
+  }
+}
+
+/**
+ * Proxy Console.error
+ * @param {Object} context Class instance (optional), will rely on classes (debug) property for output
+ * @param  {...any} messages 
+ */
+export function logError(context, ...messages) {
+  if (config.errorsAlways || allow(context)) {
+    output("error", context, messages);
+  }
+}

package/trash/js-old-230729/utils/object.js

@@ -0,0 +1,22 @@
+// Version:         1.0.0 
+
+/**
+ *   Checks object has required properties
+ *   @param  {array.string}  required     Array of properties to check for
+ *   @return {function}                   Function for user to use to test for props passed on objects
+ *   @example 
+ *     const testProps = hasRequiredProps(["name", "date"]);
+ *     if (testProps(userConfiguration)) {
+ *       // Stuff
+ *     }
+ */
+export function hasRequiredProps(required) {
+  /**
+   *   Function used for testing on user end
+   *   @param  {object}   testObject   Object to test on
+   *   @return {Boolean}
+   */
+  return function(object) {
+    return required.every(value => object.hasOwnProperty(value));
+  }
+}

package/trash/js-old-230729/utils/performance.js

@@ -0,0 +1,43 @@
+// Version:         1.0.0 
+
+/**
+ * Returns a function, that, as long as it continues to be invoked, will not be triggered
+ * @param {Function} callback Function to invoke 
+ * @param {Number} wait  Amount of time after (milliseconds)
+ * @param {Boolean} immediate  trigger the function on the leading edge, instead of the trailing.
+ * @param {Object} valueThis  Context for function
+ * @author David Walsh  
+ *   - https://davidwalsh.name/javascript-debounce-function
+ */
+ export function debounce(callback, wait, immediate, valueThis) {
+  var timeout;
+  return function executedFunction() {
+    var context = valueThis || this;
+    var args = arguments;
+    var later = function() {
+      timeout = null;
+      if (!immediate) callback.apply(context, args);
+    };
+    var callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) callback.apply(context, args);
+  };
+}
+
+/**
+ * Debounces function using requestAnimationFrame()
+ * @param  {Function} callback Function to invoke, cancelled if called faster than RAF
+ * @param  {Object} context Optional context to bind to callback
+ */
+ export function debounceAnimationFrame(callback, context = null) {
+  let tid;
+  return function debounced() {
+    const args = arguments;
+    if (tid) window.cancelAnimationFrame(tid);
+    tid = window.requestAnimationFrame(() => {
+      tid = false;
+      callback.apply(context, args);
+    });
+  };
+}

package/trash/js-old-230729/utils/regex.js

@@ -0,0 +1,10 @@
+// Version:         1.0.0 
+
+/**
+ * Common Regular Expression Patterns
+ */
+export const patterns = {
+  linebreaks: /(\r\n|\n|\r)/gm,
+  multiSpace: /\s+/g,
+  htmlTag: /<\/?[^>]+(>|$)/g
+};

package/trash/js-old-230729/utils/string.js

@@ -0,0 +1,107 @@
+import { patterns } from "./regex.js";
+/**
+ *   Will return an object with the separation details
+ *   @param  {[type]} string [description]
+ *   @return {object}        keys: value, original, unit
+ */
+ export function separateCssUnit(original) {
+  const pattern = /(px|vw|vh|%|em|rem)/i;
+  return {
+    original,
+    value:  original.replace(pattern, ""),
+    unit:   original.match(pattern)[0]
+  };
+}
+
+/**
+ * Removes HTML tags from string
+ * - Note you can use document.createElement and grab textContent (but this could execute code in browser)
+ * - The method below will just use regex without creating Nodes
+ * @param {String} html HTML string to find/replace
+ */
+ export function stripTags(html) {
+  return html.replace(patterns.htmlTag, "");
+}
+
+/**
+ * 
+ * @param {String} string String to trim
+ * @returns 
+ */
+ export function trimDoubleSpaces(string) {
+  return string.replace(patterns.multiSpace, "");
+}
+
+/**
+ * Remove line breaks
+ * @param {String} string String to trim
+ * @returns {String}
+ */
+ export function trimLineBreaks(string) {
+  return string.replace(patterns.linebreaks, "");
+}
+
+/**
+ * Designed originally to flatten style definitions
+ * @param {String} string String to trim
+ * @returns {String}
+ */
+ export function trimWhitespace(string) {
+  return string.replace(patterns.linebreaks, "")
+               .replace(patterns.multiSpace, " ")
+               .trim();
+}
+
+/**
+ *   Truncates string with ellipsis if over the max, note use framework function
+ *   if you need to know the effects of the truncate process (returns an object 
+ *   with info instead) this function only modifies the string
+ *   @param  {string} string    String to possibly truncate
+ *   @param  {number} max       How many characters max?
+ *   @return {string}     
+ */
+ export function truncate(string, max, overflowChar = '…') {
+  return string.length <= max ? string : string.slice(0, max) + overflowChar;
+}
+
+/**
+ * Replaces non safe characters with "-"
+ * - Does not escape characters
+ * - Used for id's and classnames or things that can't  have anything but normal a-z 0-9
+ */
+ export function urlize(string) {
+  var newString;
+  string = string.replace(/^[^-_a-zA-Z]+/, '').replace(/^-(?:[-0-9]+)/, '-');
+  newString = string && string.replace(/[^-_a-zA-Z0-9]+/g, '-');
+  return newString;
+}
+
+/**
+ * Converts date to abbreviated month date ie "Mar 7, 2018"
+ * @param {String|Date} str Date or date string (passed through date constructor)
+ * @return {String} Pretty date string
+ */
+ export function prettyDate(str) {
+  const date = new Date(str);
+  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  return `${ months[date.getMonth()] } ${ date.getDate() }, ${ date.getFullYear() }`;
+}
+
+/**
+ * Generates a random string of defined length based on
+ * a string of allowed characters.
+ *
+ * @param  {number} length  How many random characters will be in the returned string. Defaults to 10
+ * @param  {string} allowed Which characters can be used when creating the random string. Defaults to A-Z,a-z,0-9
+ * @return {string}         A string of random characters
+ */
+ export function randomString(
+  length = 10,
+  allowed = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+) {
+  let result = '';
+  for (let i = 0; i < length; i++) {
+    result += allowed.charAt(Math.floor(Math.random() * allowed.length));
+  }
+  return result;
+}

package/trash/js-old-230729/waypoints/README.md

@@ -0,0 +1,3 @@
+# Waypoints
+
+Plugins/scripts for waypoints

package/trash/js-old-230729/waypoints/anchor-menu.js

@@ -0,0 +1,76 @@
+/**
+ * @todo This file is untested since conversion to module
+ */
+
+import ElementWaypoint from "../waypoints/element-waypoint.js";
+
+export default function init(anchors, caret, options) {
+  const defaults = {
+    offsetTop: "20%",
+    activeClass: "active"
+  };
+  options = Object.assign(defaults, options);
+
+  const targets = anchors.map(a => document.getElementById(a.hash.substr(1)));
+  const { activeClass } = options;
+  let caretNotEntered = true;
+  let caretVisible;
+
+  targets.forEach(element => new ElementWaypoint({ offsetTop: options.offsetTop, handler, element }));
+
+  function handler(entering, direction) {
+    const { element } = this.options;
+    const anchor = anchors[ targets.indexOf(element) ];
+    const index = anchors.indexOf(anchor);
+    
+    if (entering) {
+      removeActiveAll();
+      activateAnchor(anchor);
+      anchor.classList.add(activeClass);
+    // Above the first
+    } else if (index === 0 && direction === "up") {
+      removeActiveAll(true);
+    // Since we are using headlines instaed of containers we need to 
+    // activate when user is scrolling up. By finding the index of the anchor 
+    // above the recently deactivated headline target
+    } else if (direction === "up") {
+      removeActiveAll();
+      activateAnchor(anchors[index - 1]);
+    }
+  }
+  function removeActiveAll(hideCaret) {
+    anchors.forEach(anchor => anchor.classList.remove(activeClass));
+    if (hideCaret) {
+      setCaretVisibility(false);
+    }
+  }
+  function activateAnchor(anchor) {
+    // Block transtions on first reveal
+    if (caretNotEntered) {
+      caret.style.transition = 'none';
+    }
+    anchor.classList.add(activeClass);
+    setCaretPosition(anchor);
+    if (!caretVisible) {
+      setCaretVisibility(true);
+    }
+    // Add the transitions back in for the next change to visiblity or position
+    if (caret && caretNotEntered) {
+      caretNotEntered = false;
+      caret.offsetHeight; // Force repaint (visiblity above)
+      caret.style.transition = ''; // Then remove the transition block
+    }
+  }
+  function setCaretPosition(anchor) {
+    if (!caret) return;
+    const position = anchor.offsetTop;
+    const height = anchor.clientHeight;
+    caret.style.transform = `translateY(${ position + (height / 2) }px)`;
+    // caret.style.height = `${ anchor.clientHeight }px`;
+  }
+  function setCaretVisibility(visible) {
+    if (!caret) return;
+    caret.style.opacity = +(visible);
+    caretVisible = visible;
+  }
+}

package/trash/js-old-230729/waypoints/element-waypoint.js

@@ -0,0 +1,75 @@
+// =============================================================================
+// Element Waypoint
+// =============================================================================
+
+// Version:         1.0.1
+
+// Requires:        Global access to window.Waypoint
+
+/**
+ * Reusable waypoint class that adds two waypoints in order to call user 
+ * handler when the element is in view or out of view. 
+ */
+export default class ElementWaypoint {
+  static defaults = {
+    context: window,
+    offsetTop: 0,
+    offsetBottom: 0,
+  };
+  /**
+   * Fired when the scroll trigger enters and leaves an element
+   * 
+   * @callback handler
+   * @param {Boolean} entering Whether the user has entered the element 
+   * @param {String} direction The direction they entered/exited from (up|down)
+   */
+  /**
+   * 
+   * @param {Object} options Options to merge with defaults
+   * @param {HTMLElement} options.element Element to wacth
+   * @param {HTMLElement} options.context Context for Waypoints (element scrollable parent)
+   * @param {String|Function} options.offsetBottom Offset below the element (see Waypoints API)
+   * @param {String|Function} options.offsetTop Offset above the element (see Waypoints API)
+   * @param {handler} options.handler Fired when the scroll trigger enters and leaves an element
+   */
+  constructor(options) {
+    this.options = Object.assign({}, ElementWaypoint.defaults, options);
+    const { 
+      handler, 
+      offsetTop, 
+      offsetBottom, 
+      element, 
+      context 
+    } = this.options;
+    // instantiates waypoint instances (top and bottom of element)
+    // The offset bottom is function so it can be recalculated
+    // User offsetBottom can be a function as well
+    this.top = new Waypoint({
+      element,
+      context,
+      offset: offsetTop,
+      handler(d) {
+        handler.call(this, d === "down", d);
+      },
+    });
+    this.bottom = new Waypoint({
+      element,
+      context,
+      offset() {
+        const offset = typeof offsetBottom === "function" ? offsetBottom() : offsetBottom;
+        const height = this.element.offsetHeight;
+        return (-height) + offset;
+      },
+      handler(d) {
+        handler.call(this, d === "up", d);
+      }
+    });
+  }
+  /**
+   * Destroys the waypoints
+   */
+  destroy() {
+    this.top.destroy();
+    this.bottom.destroy();
+  }
+}

package/trash/js-old-230729/waypoints/examples/page-link-menu.md

@@ -0,0 +1,106 @@
+Example of anchor menu setup
+
+```js
+/**
+ * @todo This needs to be converted for reuse!
+ */
+
+// Creates anchor menu and attaches waypoints
+import ElementWaypoint from "../waypoints/element-waypoint.js";
+import Tooltip from "../ui/tooltip.js";
+
+window.addEventListener("load", init);
+
+function init() {
+  const anchors = [];
+  let idCount = 0;
+  const activeClass = 'header__page-link--active';
+  const ignoreSelector = '[data-page-link-search-ignore]';
+  const searchSelector = `h1:not(${ ignoreSelector }), h2:not(${ ignoreSelector })`;
+  const container = document.querySelector('.header__page-links');
+  const context = document.querySelector('[data-page-link-search]');
+  if (!container || !context) return;
+  const headlineNodes = [ ...context.querySelectorAll(searchSelector) ];
+  // Filter out parents too
+  const headlines = headlineNodes.filter(n => n.closest(ignoreSelector) === null);
+  
+  headlines.forEach(element => {
+    const id = getId(element);
+    const anchor = document.createElement('a');
+    const span = document.createElement('span');
+    anchor.classList.add('header__page-link');
+    anchor.href = "#" + id;
+    span.classList.add('hidden-visually');
+    span.textContent = element.textContent;
+    anchor.appendChild(span);
+    container.append(anchor);
+    anchors.push(anchor);
+    anchor.addEventListener("focusin", onHover);
+    anchor.addEventListener("mouseenter", onHover);
+    anchor.addEventListener("focusout", onHoverOut);
+    anchor.addEventListener("mouseleave", onHoverOut);
+    // Attach watcher
+    (new ElementWaypoint({ 
+      offsetTop: '20%', 
+      handler: waypointHandler, 
+      element 
+    }));
+  });
+
+  function waypointHandler(entering, direction) {
+    const { element } = this.options;
+    const anchor = anchors[ headlines.indexOf(element) ];
+    const index = anchors.indexOf(anchor);
+    
+    if (entering) {
+      removeActiveAll();
+      activateAnchor(anchor);
+    // Above the first
+    } else if (index === 0 && direction === "up") {
+      removeActiveAll();
+    // Since we are using headlines instaed of containers we need to 
+    // activate when user is scrolling up. By finding the index of the anchor 
+    // above the recently deactivated headline target
+    } else if (direction === "up") {
+      removeActiveAll();
+      activateAnchor(anchors[index - 1]);
+    }
+  }
+  function removeActiveAll() {
+    anchors.forEach(anchor => anchor.classList.remove(activeClass));
+  }
+  function activateAnchor(anchor) {
+    anchor.classList.add(activeClass);
+  }
+  function getId(element) {
+    if (!element.id)  element.id = `page-link--${ ++idCount }`;
+    return element.id;
+  }
+}
+
+// Tooltip Related
+// =============================================================================
+
+let tooltip;
+
+function onHover(event) {
+  const { target } = event;
+  destroy();
+  tooltip = new Tooltip(target, target.textContent, { 
+    classes: [
+      "site-tooltip",
+      "page-link-tooltip"
+    ]
+  });
+}
+function onHoverOut() {
+  destroy();
+}
+function destroy() {
+  if (tooltip) {
+    tooltip.destroy();
+    tooltip = null;
+  }
+}
+
+```

package/trash/js-old-230729/waypoints/state-in-attribute.js

@@ -0,0 +1,32 @@
+import ElementWaypoint from "../waypoints/element-waypoint.js";
+
+export default function init(config) { 
+  const defaults = {
+    attr: 'data-site-waypoint', 
+    options: { 
+      offsetTop: '20%' 
+    }
+  }
+  config = Object.assign(defaults, config);
+  const elements = document.querySelectorAll(`[${ options.attr }]`);
+
+  return [ ...elements ].map((element) => {
+
+    const options = Object.assign(config.options, element.dataset.siteWaypoint);
+    const setState = (active, direction) => {
+      element.setAttribute(`${ attr }-state`, `active: ${ active }, direction: ${ direction }`);
+    };
+
+    setState(false, null);
+    
+    return new ElementWaypoint({
+      ...options,
+      element,
+      handler(entering, direction) {
+        setState(entering, direction);
+      }
+    });
+  });
+}
+
+

package/trash/logo-1.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 262 203">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #667d8e;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="m25.98,39.42v82.38c0,16.27,4.92,24.07,15.6,24.07,11.69,0,16.95-8.48,16.95-23.9V39.42h24.92v82.04c0,28.98-13.22,42.54-42.2,42.54S.39,149.93.39,121.29V39.42h25.59Z"/>
+  <path class="cls-1" d="m130.39,39.42v102.04h37.97v20.34h-63.9V39.42h25.93Z"/>
+  <path class="cls-1" d="m204.8,39.42v82.38c0,16.27,4.92,24.07,15.6,24.07,11.69,0,16.95-8.48,16.95-23.9V39.42h24.92v82.04c0,28.98-13.22,42.54-42.2,42.54s-40.85-14.07-40.85-42.71V39.42h25.59Z"/>
+</svg>