@ulu/frontend 0.1.0-beta.98 → 0.2.0-beta.1

package/deprecated/js/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/deprecated/js/drupal-programmatic-modal.js

@@ -1,91 +0,0 @@
-/**
- * @module programmatic-modal
- */
-
-// Version:         1.0.3
-// Changes:
-//                  1.0.2 | Updates to work with the updated modal script which has 
-//                          to attach it's own trigger handlers
-// Description:     Drupal programmatic modal insertion script (interface = jquery prototype)
-// Changes:         1.0.2 - Added ability to pass class to container
-
-import { setupModal, show, attachTriggers, triggerAttr } from "./micromodal-modals.js";
-import { dispatch } from "../../js/events.js";
-
-const $ = window.jQuery;
-const containerId = 'programmatic-modal';
-const selectorTrigger = '[data-programmatic-modal-trigger]';
-const defaults = {
-  removeOnClose: true,
-  settings: {},
-  classes: []
-};
-
-let count = 0;
-let cachedTrigger; 
-
-// Drupal calls the jquery 'programaticModal' from InvokeCommand())
-$.fn.programaticModal = newModal;
-
-// keep track of trigger clicks to return user on close (Drupal doesn't send trigger clicked, that I know of)
-document.addEventListener('click', cacheTrigger, true);
-
-/**
- * Sets up a new ajax triggered modal and opens it
- * @param {String} args Arguments provided from Drupal (JSON format)
- */
-function newModal(args) {
-  args = args ? JSON.parse(args) : {};
-  const config = Object.assign({}, defaults, args);
-  const modal = document.querySelector(`#${ containerId }`);
-  const id = setModalId(modal, config.id);
-  const classes = ["programmatic-modal-content", ...config.classes ];
-  modal.classList.add(...classes);
-  // Add a new placeholder container
-  newContainer();
-  // Intialize and open the new modal
-  setupModal(modal, config.settings);
-  show(id, {
-    onShow(modal) {
-      dispatch('pageModified', modal);
-    },
-    onClose(element) {
-      if (config.removeOnClose) {
-        element.parentNode.removeChild(element);
-      }
-      // For accessiblity/usablity (return to last clicked trigger)
-      if (cachedTrigger) {
-        cachedTrigger.focus();
-      }
-    }
-  });
-  // Attach handler so that it can reopen that modal
-  if (!config.removeOnClose && cachedTrigger) {
-    cachedTrigger.setAttribute(triggerAttr, id);
-    attachTriggers();
-  }
-}
-/**
- * Sets and returns the modal's id
- */
-function setModalId(element, id) {
-  element.id = id || `programmatic-modal--id-${ ++count }`;
-  return element.id;
-}
-/**
- * Once we remove the placeholder containers id (above)
- * we create another programmatic placeholder container
- * for the next programmitic container
- */
-function newContainer() {
-  const container = document.createElement('div');
-  container.id = 'programmatic-modal';
-  document.body.append(container);
-}
-/**
- * Document click handler, will cache the trigger that caused the modal to open 
- */
-function cacheTrigger(event) {
-  const trigger = event.target.closest(selectorTrigger);
-  if (trigger) cachedTrigger = trigger;
-}

package/deprecated/js/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);
-  };
-};

package/deprecated/js/micromodal-modals.js

@@ -1,196 +0,0 @@
-/**
- * @module ui/modals
- */
-// Version:         1.0.5
-//
-// Changes:
-//                  1.0.5 | Added title icon and remove calling of init
-//                          Moved setup modals stuff to inside init (contextual) [may affect programmatic modals]
-//                  1.0.4 | The modal library has a bug with multiple modals and using a custom close handler
-//                          In the future we want to abandon this library but for now it works by setting up our own open and close buttons
-//                          This is not setup to work with programmatic modals!!
-//                  1.0.3 | Added youtube video closing stuff
-//                  1.0.3 | Added youtube video closing stuff
-//                  1.0.2 | Added custom close handler and checked to make sure resizer doesn't trigger click
-//                  1.0.1 | Added optional resizable (allowResize)
-// Todo:            - Make the container the content is getting the original classes, or don't remove them. And allow user to pass classes via config
-
-// Javascript builds structure, modal's live in content in simple container. 
-// Modal theme and structure is added in scripting That way if we change the 
-// interface in the future we don't need to change/update markup.
-import MicroModal from "micromodal";
-import { Resizer } from "../resizer.js";
-import { pauseVideos, prepVideos } from "../utils/pause-youtube-video.js";
-import { createElementFromHtml } from "@ulu/utils/browser/dom.js";
-const classes = {
-  open: "site-modal--open",
-  container: "site-modal__container",
-  body: "site-modal__body",
-  resizer: "site-modal__resizer"
-};
-const triggerAttr = "data-site-modal-trigger";
-export { triggerAttr };
-const triggerSelector = `[${ triggerAttr }]`;
-const defaults = {
-  allowResize: true,
-  position: "center",
-  containerClass: "",
-  closeSelector: "[data-site-modal-close]",
-  titleIcon: false
-};
-const configMicroModal = { 
-  openClass: classes.open,
-  disableScroll: true,
-  openTrigger: "data-site-modal-trigger",
-  closeTrigger: "data-NOT-USED", // Proxied to avoid this click handler (on keydown, allow click on things underneath)
-  onClose: function(modal) {
-    pauseVideos(modal);
-  } 
-};
-const wrappers = [];
-
-
-// Create a grouping container to grab all modals from content of the 
-// page and move to the bottom of the page
-// const container = createContainer();
-
-
-
-// Initialize modal library script
-
-export function init(context = document) {
-  const flag = "data-site-modal-trigger-attached";
-  context.querySelectorAll(triggerSelector).forEach(trigger => {
-    if (!trigger.hasAttribute(flag)) {
-      const mid = trigger.getAttribute(triggerAttr);
-      if (!mid) {
-        console.warn("Unable to get modal trigger id");
-      } else {
-        trigger.setAttribute(flag, "");
-        trigger.addEventListener("click", () => {
-          show(mid);
-        });
-      }
-    }
-  });
-  // The [data-site-modal] is used to separate the libraries' interface 
-  // and the modal's styling classes, so it can be adjusted or extended 
-  // in the future
-  context.querySelectorAll("[data-site-modal]").forEach((element) => setupModal(element));
-}
-
-/**
- * Function to setup each modal
- * - Creates structure
- * - Gets settings from elements data attribute
- * - Moves it to the end of the document
- * - Adds resizer if position (left || right)
- * @param {Node} modal Modal element ie. `[data-site-modal]`
- * @param {Object} settings Custom settings object to merge, same interface as `[data-site-modal]` settings
- */
-export function setupModal(modal, settings) {
-  // Grab things from original element before modifying
-  const id = modal.id;
-  const originalClasses = modal.getAttribute("class") || "";
-  // Grab settings from element and optionally from settings passed
-  let data = {};
-  if (modal.dataset.siteModal) {
-    data = JSON.parse(modal.dataset.siteModal);
-  }
-  data = Object.assign({}, defaults, data, settings);
-  const { allowResize, position } = data;
-  const notCenter = position !== "center";
-  const hasResizer = notCenter && allowResize;
-  const resizerMarkup = hasResizer ? `<div class="${ classes.resizer }"></div>` : "";
-  const resizerModifierClass = allowResize ? "resize" : "no-resize";
-  const closeAttr = "data-site-modal-close";
-  // Remove attributes
-  modal.removeAttribute("data-site-modal");
-  modal.removeAttribute("id");
-  modal.removeAttribute("class");
-  // Template for new modal container (modal's body, the original element is 
-  // appended after as not to lose any listener's/etc
-  const markup = `
-    <div 
-      class="
-        site-modal 
-        site-modal--${ position } 
-        site-modal--${ resizerModifierClass } 
-        ${ data.containerClass }
-      " 
-      id="${ id }" aria-hidden="true"
-    >
-      <div class="site-modal__overlay" tabindex="-1" ${ closeAttr }>
-        <div class="site-modal__container" role="dialog" aria-modal="true" aria-labelledby="${ id }-title">
-          <div class="site-modal__header">
-            <h2 class="site-modal__title" id="${ id }-title" tabindex="0">
-              ${ data.titleIcon ? `<span class="site-modal__title-icon ${ data.titleIcon }" aria-hidden="true"></span>` : "" }
-              <span class="site-modal__title-text">${ data.title }</span>
-            </h2>
-            <button class="site-modal__close" aria-label="Close modal" ${ closeAttr }>
-              <span class="site-modal__close-icon" aria-hidden="true" ${ closeAttr }></span>
-            </button>
-          </div>
-          <div class="${ classes.body } ${ originalClasses }"></div>
-          ${ resizerMarkup }
-        </div>
-      </div>
-    </div>`;
-
-  // Create wrapped modal (with repeatable structure), and insert 
-  // the original modal content into it
-  const select = (container, classKey) => container.querySelector("." + classes[classKey]);
-  const wrapper = createElementFromHtml(markup.trim());
-  const elements = {
-    body: select(wrapper, "body"),
-    resizer: select(wrapper, "resizer"),
-    container: select(wrapper, "container")
-  };
-
-  // Move the orginal content into the modal's body
-  elements.body.appendChild(modal);
-  // Add resizer if not a center positioned modal
-  if (hasResizer) {
-    new Resizer(elements.container, elements.resizer, {
-      fromLeft: position === "right"
-    });
-  }
-
-  // Prep Youtube Videos to be able to close
-  prepVideos(wrapper);
-
-  // Add modal to the end of docuemnt
-  wrappers.push(wrapper);
-  document.body.appendChild(wrapper);
-  // Add our own close handlers to avoide the native
-  const closeButtons = wrapper.querySelectorAll(data.closeSelector);
-  closeButtons.forEach(b => b.addEventListener("click", ({ target }) => {
-    const outsideContainer = !elements.container.contains(target) && target !== elements.container;
-    // Last condition is the overlay/backdrop (click outside)
-    if (target.matches(`[${ closeAttr }]`) || outsideContainer) {
-      close(id);
-    }
-  }));
-}
-/**
- * Intialize all modals on the page
- * - can be used after AJAX adds content
- */
-// export function init() {
-  // MicroModal.init(configMicroModal);
-// }
-/**
- * Open a modal
- * @param {String} id The id of the modal to open
- */
-export function show(id, config) {
-  const merged = Object.assign({}, configMicroModal, config);
-  MicroModal.show(id, merged);
-}
-/**
- * Close a modal
- * @param {String} id The id of the modal to open
- */
-export function close(id) {
-  MicroModal.close(id);
-}