@ulu/frontend 0.0.3 → 0.0.6

package/js/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/js/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/js/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/js/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/js/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/deprecated/doc-ready.js

@@ -1,28 +0,0 @@
-// =============================================================================
-// Doc Ready - Script
-// =============================================================================
-
-// Version:         1.0.0
-
-// Description:     Simple script that will add a property to the window for 
-//                  other scripts to access. Functions will be fired after
-//                  DomContentLoaded. 
-
-
-(function(d) {
-  var callbacks = [],
-      fired = false;
-  
-  window.onDocReady = function(callback) {
-    if (fired) callback();
-    else callbacks.push(callback);
-  };
-  
-  d.addEventListener("DOMContentLoaded", function() {
-    fired = true;
-    for (var i = 0; i < callbacks.length; i++) {
-      callbacks[i]();
-    }
-  });
-  
-}(document));

package/trash/js-old/deprecated/jquery-prototypes.js

@@ -1,309 +0,0 @@
-// =============================================================================
-// Jquery Prototypes
-// =============================================================================
-
-// Version:         2.0.0
-
-// Description:     All of our simple jQuery prototypes
-
-// Change log:      2.0.0 | Converted to ES Module with exports (so we can pick and choose)
-
-const $ = jQuery;
-
-// FUnction to do conditions in chaining sequences
-export function when(condition, method, argumentsArray) {
-  if (!Array.isArray(argumentsArray)) argumentsArray = [argumentsArray];
-  if (typeof condition === 'function') condition = condition.apply(this, argumentsArray);
-  if (condition) this[method].apply(this, argumentsArray);
-  return condition ? this[method].apply(this, argumentsArray) : this;
-}
-export function mergeObjects() {
-  var collect = $([]).add(this);
-  for (var i = 0; i < arguments.length; i++) collect = collect.add(arguments[i]);
-  return collect;
-}
-export function updateSelection() {
-  var elements = $(this.selector);
-  this.splice(0, this.length);
-  this.push.apply(this, elements);
-  return this;
-}
-export function findFromRoot(selector) {
-    return this.filter(selector).add(this.find(selector));
-}
-export function dataExplode(attrName, delimiter) {
-  var dataFound = this.data(attrName);
-  return dataFound !== undefined && typeof dataFound === 'string' ? dataFound.split('|') : false;
-}
-export function isOverflowingY() {
-  var el = this[0];
-  return el.offsetHeight < el.scrollHeight;
-}    
-export function isOverflowingX() {
-  var el = this[0];
-  return el.offsetWidth < el.scrollWidth;
-}    
-export function escapeSelector(stringPasssed) {
-  return stringPasssed.replace(/(:|\.|\[|\]|,)/g, "\\$1");
-}
-export function getControlled(attr) {
-  if (!attr) attr =  'aria-controls';
-  var id = this.attr(attr);
-  return $('#'+id);
-}
-export function getControls(attr) {
-  if (!attr) attr =  'aria-controls';
-  var id = this.attr('id');
-  return $('['+attr+'='+id+']');
-}
-export function queryVar(variable) {
-  var query = curQueryVars,
-      vars = query.split("&");
-  for (var i=0;i<vars.length;i++) {
-    var pair = vars[i].split("=");
-    if(pair[0] == variable){return pair[1];}
-  }
-  return(false);
-}
-export function eachMatchingIndexes(method, collection) {
-  this.each(function(i) {
-    $(this)[method](collection[i]);
-  });
-  return this;
-}
-export function makeFocusable(forScripts, firstDescendant) {
-
-  var el = this,
-      tabindex = forScripts ? -1 : 0;
-  // If they said first descendant (that is focusable)
-  if (firstDescendant) {
-    var newEl = el.find(_g.focus.titleEl+', '+_g.focus.elFocusable).not('[aria-hidden="true"]');
-    if (newEl.length) {
-      el = newEl;
-    }
-  }
-  el = el.first();
-  if (!el.is(_g.focus.elFocusable)) el.attr('tabindex', tabindex);  // Make focusable by scripts 
-
-  return el;
-}
-export function attrBooleanToggle(attribute, forceState) {
-  this.attr(attribute, function(i, iString) {
-    if (forceState === true || forceState === false) return forceState;
-    if (iString === 'true') return 'false';
-    return 'true';
-  });
-  return this;
-}
-export function checkIdAndSet(stringForId) {
-  if ($(this).attr('id')) {
-    return (this).attr('id');
-  } else {
-    var id = stringForId === undefined ? _g.uniqueId() : stringForId; // If they don't pass string use global method.
-    $(this).attr('id', id); // Assign id
-    return id; // Return Id for user's use
-  }
-}
-export function scrollParent() {
-  var overflowRegex = /(auto|scroll)/,
-  position = this.css( "position" ),
-  excludeStaticParent = position === "absolute",
-  scrollParent = this.parents().filter( function() {
-    var parent = $( this );
-    if ( excludeStaticParent && parent.css( "position" ) === "static" ) {
-      return false;
-    }
-    var overflowState = parent.css(["overflow", "overflowX", "overflowY"]);
-    return (overflowRegex).test( overflowState.overflow + overflowState.overflowX + overflowState.overflowY );
-  }).eq( 0 );
-
-  return position === "fixed" || !scrollParent.length ? $( this[ 0 ].ownerDocument || document ) : scrollParent;
-}
-export function scrollParentY() {
-  var overflowRegex = /(auto|scroll)/,
-  position = this.css( "position" ),
-  excludeStaticParent = position === "absolute",
-  scrollParent = this.parents().filter( function() {
-    var parent = $( this );
-    if ( excludeStaticParent && parent.css( "position" ) === "static" ) {
-      return false;
-    }
-    var overflowState = parent.css(["overflowY"]);
-    return (overflowRegex).test(overflowState.overflowY );
-  }).eq( 0 );
-
-  return position === "fixed" || !scrollParent.length ? $htmlBody : scrollParent;
-}
-export function removeClassStartsWith(stringPassed) {
-  this.removeClass(function (index, classes) {
-
-    // This function splits into an array
-    // Then filters out the passed string
-    // Then returns it joined as space seperated
-    // Jquery then removes those classes
-    
-    return classes
-      .split(' ')
-      .filter(function(value) {
-        return value.includes(stringPassed);
-      })
-      .join(' ');
-  });
-
-  // For Chaining
-  return this;
-}
-export function doesExist(callback){
-  if (this.length) {
-    if (callback) callback.call(this);
-    return true;
-  } 
-}
-export function notExist(callback){
-  if (this.length <= 0) {
-    if (callback) callback.call(this);
-    return true;
-  } 
-}
-export function sortByDepth() {
-  // Sorts jquery object by deepest to shallowest item
-  var ar = this.map(function() {
-      return {length: $(this).parents().length, elt: this};
-  }).get(),
-  result = [],
-  i = ar.length;
-  ar.sort(function(a, b) {
-    return a.length - b.length;
-  });
-  while (i--) {
-    result.push(ar[i].elt);
-  }
-  return $(result);
-};
-// throttleScroll
-export function throttleScroll(eventName, optionalHandler) {
-  var posLastY = 0,
-      posLastX = 0,
-      lastFrameComplete = true,
-      el = this;
-
-  // Internal function for touch move and scroll
-  function scrollHandler(event) {
-
-    var posY = el.scrollTop(),
-        posX = el.scrollLeft(),
-        elHeight = el.innerHeight(); // cOme back
-
-    if (lastFrameComplete && (posLastY !== posY || posLastX !== posX)) {
-
-      var scrollData = {
-        positionY: posY,
-        positionX: posX,
-        height: elHeight,
-        positionLastY: posLastY,
-        positionLastX: posLastX,
-        direction: posLastY > posY ? 'up' :'down'
-      };
-
-      posLastY = posY;
-      posLastX = posX;
-      lastFrameComplete = false;
-
-      requestAnimationFrame(function(){
-        el.trigger(eventName, [scrollData, event]);
-        lastFrameComplete = true;
-      });
-    } 
-  }
-
-  // Attach our throttling handler
-  el.on('scroll touchmove', scrollHandler);
-  // If they passed a handler attach it
-  if (optionalHandler) el.on(eventName, optionalHandler);
-  // Chaining
-  return scrollHandler;
-};
-
-export function copyAttributes() {
-  var attrs = {};
-
-  $.each(this[0].attributes, function(idx, attr) {
-      attrs[attr.nodeName] = attr.nodeValue;
-  });
-
-  return attrs;
-};
-export function attributesFrom(elFrom, overwrite) {
-  var $this = this;
-  $.each(elFrom[0].attributes, function(idx, attr) {
-      $this.attr(attr.nodeName, attr.nodeValue);
-  });
-  return this;
-};
-export function changeElementType(newType) {
-
-  var attrs = this.copyAttributes(),
-      newElement = $("<" + newType + "/>", attrs).append($(this).contents());
-
-  this.replaceWith(newElement);
-  return newElement;
-};
-// This function accepts a string to search for and if found will use the "change" argument passed.
-// Since this is using the string replace() function you can use either a function or a string.
-// Using :contains  selector vs anything reg-ex or filter related because it is extremely fast 
-// in tests and the search could be deep. Contains will give us both the element with the 
-// text and the parents (unfortunate). So once we have them we filter by nodeType 3 which
-// is text nodes. And then check if that node has the string. If it does we run replace with 
-// the string and call the users callback for the replacement.
-export function replaceText(find, change, filterSelector) {
-  this
-    .find(':contains(' + find + ')')
-    .filter(filterSelector || null)
-    .contents()
-    .filter(function() { 
-      return this.nodeType === 3 && this.nodeValue.includes(find); 
-    })
-    .each(function() {
-      var newNode = document.createElement('span');
-      newNode.innerHTML = this.nodeValue.replace(find, change);
-      this.parentNode.insertBefore(newNode, this);
-      this.parentNode.removeChild(this);
-    });
-  return this;
-};
-// Better jqeury.each(), passes the $(this) that everyone makes into a variable anyways
-// This is based on prototype.each which uses jQuery.each(object, callback) so it 
-// should perform as well. Test here: https://codepen.io/Jscherbe/pen/pZMZOo
-export function forEach(callback) {
-  var $t;
-  for (var i = 0; i < this.length; i++) {
-    $t = $(this[i]);
-    if (callback.call($t, i, $t) === false) break;
-  }
-  return this;
-};
-export function isOutside(context) {
-  return !context.has(this).length || context.is(this);
-};
-export function apply(fn, args) {
-  fn.apply(this, args);
-  return this; 
-};
-export function hasAttr(name) {
-  var attr = this.attr(name);
-  return !(typeof attr !== undefined && attr !== false);
-};
-export function debounce(func, wait, immediate, valueThis) {
-  var timeout;
-    return function() {
-    var context = valueThis || this, args = arguments;
-    var later = function() {
-      timeout = null;
-      if (!immediate) func.apply(context, args);
-    };
-    var callNow = immediate && !timeout;
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-    if (callNow) func.apply(context, args);
-  };
-};