@ulu/frontend 0.0.3 → 0.0.5

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

@@ -1,122 +0,0 @@
-/**
- *   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/utils/logger.js

@@ -1,69 +0,0 @@
-// 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/utils/object.js

@@ -1,22 +0,0 @@
-// 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/utils/performance.js

@@ -1,43 +0,0 @@
-// 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/utils/regex.js

@@ -1,10 +0,0 @@
-// 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/utils/string.js

@@ -1,107 +0,0 @@
-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/waypoints/README.md

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

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

@@ -1,76 +0,0 @@
-/**
- * @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/waypoints/element-waypoint.js

@@ -1,75 +0,0 @@
-// =============================================================================
-// 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/waypoints/examples/page-link-menu.md

@@ -1,106 +0,0 @@
-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/waypoints/state-in-attribute.js

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