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

package/deprecated/js/script-loader.js

@@ -1,60 +0,0 @@
-// Would be used in the head of the document
-(function(d, w) {
-  
-  // The constructor will set unique props
-  // And it will create/init the script tag
-  function ScriptLoader(url, callback) {
-    
-    // Add the script tag
-    var s = d.createElement("script");
-    s.src = url;
-    s.async = true;
-    
-    // Funciton to be run when script is loaded and executed
-    // Note: This will be bound to this object
-    function init() {
-      for (var i = 0; i < this.callbacks.length; i++) {
-        this.callbacks[i].call(this);
-      }
-      delete this.callbacks;
-      this.loaded = true;
-    }
-    
-    // Unique Props
-    this.callbacks = [];
-    this.loaded = false;
-    this.script = s;
-    
-    // Ability to add callbacks when creating object
-    if (callback) this.callbacks.push(callback);
-    
-    // Add listener for load and then attach document
-    s.addEventListener("load", init.bind(this));
-    
-    // If the script is placed in the head we  
-    // will make sure the the body exists
-    var ds = d.readyState;
-    
-    if (ds === "complete" || 
-        ds === "loaded" || 
-        ds === "interactive") {
-      // document has been parsed
-      d.body.appendChild(s);
-    } else {
-      // Attach after the body is ready
-      d.addEventListener("DOMContentLoaded", function() {
-        d.body.appendChild(s);
-      });
-    }
-  }
-  
-  // This method allows the user to add callbacks to be 
-  // called when script is loaded and executed
-  ScriptLoader.prototype.onLoad = function(callback) {
-    if (!this.loaded) this.callbacks.push(callback);
-    else callback.call(this);
-  };
-  
-  // Create key for global access to class
-  window.ScriptLoader = ScriptLoader;
-}(document, window));

package/deprecated/js/waypoints/README.md

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

package/deprecated/js/waypoints/anchor-menu.js

@@ -1,76 +0,0 @@
-/**
- * @todo This file is untested since conversion to module
- */
-
-import ElementWaypoint from "./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/deprecated/js/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/deprecated/js/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/deprecated/js/waypoints/state-in-attribute.js

@@ -1,32 +0,0 @@
-import ElementWaypoint from "./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);
-      }
-    });
-  });
-}
-
-