@ulu/frontend 0.0.3 → 0.0.6

package/trash/js-old/ui/slider.js

@@ -1,469 +0,0 @@
-// =============================================================================
-// Slider
-// =============================================================================
-
-// Version:                   1.0.10
-
-// Changes:   
-//                            1.0.10 | Fix bug when two and going in reverse
-//                            1.0.9 | Fix bug when there are only 2 slides (not sliding correctly [revesers because of switchSlide])
-//                                    this is addressed now and should slide infinitly between two slides
-//                            1.0.8 | Change API, to elements object (from individaul arguments),
-//                                    Add the ability to specify the element to append controls within
-//                            1.0.6 | Add transition class for changes during transition, 
-//                                    add will-change to the transition
-//                            1.0.5 | Fix transtion event difference on windows, convert all 
-//                                    async stuff to promises and simplify
-//                            1.0.4 | Remove live region annoucement (only used if auto rotate)
-
-// Reference:                 https://www.w3.org/WAI/tutorials/carousels/working-example/
-//                            https://www.w3.org/TR/wai-aria-practices/examples/carousel/carousel-1.html#
-//                            https://www.w3.org/TR/wai-aria-practices-1.1/examples/carousel/carousel-1.html
-//                            https://www.accessibilityoz.com/
-//                            https://www.sitepoint.com/unbearable-accessible-slideshow/
-//                            https://dev.opera.com/articles/css-will-change-property/
-//                              * Will Change use
-
-import maintain from 'ally.js/maintain/_maintain';
-import { log, logError, logWarning } from "../utils/logger.js";
-import { hasRequiredProps } from '../utils/object.js';
-import { trimWhitespace } from "../utils/string.js";
-import { debounce } from "../utils/performance.js";
-const debugMode = false; // Global dev debug
-const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
-const eventOnce = { once: true };
-const cssDuration = d => `${ d }ms`;
-
-// Resize handlers for all slider instances, Load event to avoid triggering
-addEventListener('load', () => {
-  addEventListener('resize', debounce(() => {
-    Slider.instances.forEach(i => i.handleResize());
-  }, 250));
-});
-
-const requiredElements = [
-  "container", 
-  "trackContainer", 
-  "track", 
-  "slides"
-];
-export class Slider {
-  static instances = [];
-  static defaults = {
-    classAccessiblyHidden: "hidden-visually",
-    namespace: "Slider",
-    events: {},
-    transition: true,
-    transitionFade: false,
-    transitionDuration: 700,
-    transitionDurationExit: 400,
-    transitionTimingFunction: "ease-in-out",
-
-    // transition: true
-  }
-  // constructor(container, title, trackContainer, track, slides, config, debug = false) {
-  constructor(elements, config, debug = false) {
-    const options = Object.assign({}, Slider.defaults, config);
-    this.debug = debugMode || debug;
-    this.options = options;
-    this.slide = null;
-    this.index = null;
-    this.transitioning = false;
-
-    if (!hasRequiredProps(requiredElements)) {
-      logError(this, 'Missing a required Element');
-    }
-    if (!elements.slides.length) {
-      logError(this, "Missing slides");
-    }
-    this.slides = [ ...elements.slides ].map((element, index) => {
-      return {
-        element,
-        index,
-        number: index + 1
-      }
-    });
-    this.elements = {
-      ...elements,
-      ...this.createControls(elements.controlContext || elements.container),
-      ...this.createNav(elements.navContext || elements.container)
-    };
-    // Choose the appropriate transition method
-    this.transition =  options.transition ? options.transitionFade || reduceMotion 
-                          ? this.fadeTransition : this.slideTransition :  this.noTransition;
-    this.setup();
-    this.goto(0, null, "init");
-    log(this, "Slider Instance Created", this);
-    Slider.instances.push(this);
-  }
-  /**
-   * Sliding mechanism needs translate updated on resize
-   */
-  handleResize() {
-    const { slide, transition, slideTransition} = this;
-    if (transition === slideTransition && slide) {
-      this.translateTo(slide.element.offsetLeft, 0);
-    }
-  }
-  /**
-   * Goto to the previous slide
-   */     
-  previous(event) {
-    const { index: lastIndex, slides } = this;
-    const last = slides.length - 1;
-    const prev = lastIndex - 1;
-    const index = prev < 0 ? last : prev;
-    this.emit("previous", [event, index]);
-    this.goto(index, event, "previous");
-  }
-  /**
-   * Goto to the next slide
-   */   
-  next(event) {
-    const { index: lastIndex, slides } = this;
-    const next = lastIndex + 1;
-    const index = next > slides.length - 1 ? 0 : next;
-    this.emit("next", [event, index]);
-    this.goto(index, event, "next");
-  }
-  /**
-   *  Makes sure that no matter what the callback is called if transition event
-   * doesn't start or fails to finish/cancel
-   * @param {number} element
-   * @param {number} duration Duration to wait for complete 
-   * @param {Function} beginTransition Css changes to begin/start transtion 
-   */
-  ensureTranstionEnds(element, duration, beginTransition) {
-    return new Promise(resolve => {
-      const tid = {};
-      // If the transition has started remove the fallback for start
-      // and set one for the end
-      const onStart = () => {
-        clearTimeout(tid.start);
-        tid.end = setTimeout(onComplete, duration + 500);
-      };
-      // The transition has completed, cleanup and resolve
-      const onComplete = () => {
-        clearTimeout(tid.start);
-        clearTimeout(tid.end);
-        element.removeEventListener("transitionrun", onStart, eventOnce);
-        element.removeEventListener('transitionend', onComplete, eventOnce);
-        element.removeEventListener('transitioncancel', onComplete, eventOnce);
-        resolve();
-      };
-      // Wait for animation to start, also set a timer to ensure that
-      // if this event never fires for any reason, the promise will resolve
-      element.addEventListener("transitionrun", onStart, eventOnce);
-      // If it has started it will be waiting for the end
-      // If it never ends for any reason, the promise will resolve
-      element.addEventListener('transitionend', onComplete, eventOnce);
-      element.addEventListener('transitioncancel', onComplete, eventOnce);
-      tid.start = setTimeout(onComplete, duration + 500);
-      // Apply users css changes
-      element.style.transitionDuration = cssDuration(duration);
-      beginTransition();
-      // Bypass events if no duration or 0
-      if (!duration) {
-        onComplete();
-      }
-    });
-  }
-  /**
-   * Translate the track to X
-   */    
-  translateTo(x, duration) {
-    const { track } = this.elements;
-    const set = () => track.style.transform = `translateX(-${ x }px)`;
-    // tell brwoser we're about to animate
-    track.style.willChange =  "transform";
-    return this.ensureTranstionEnds(track, duration, set).then(() => {
-      // Remove to avoid any issues with optimization
-      track.style.willChange =  "auto";
-    });
-  }
-  /**
-   * Show's a specifc slide and hides others, except when passing true to show all
-   * then all slides will visible
-   */
-  setVisibility(activeSlide, showAll) {
-    if (!showAll) {
-      activeSlide.element.style.visibility = "visible";
-    }
-    this.slides.forEach(slide => {
-      if (slide !== activeSlide) {
-        slide.element.style.visibility = showAll ? "visible" : "hidden";
-      }
-    });
-  }
-  /**
-   * Perform a fade on a single slide
-   */
-  fadeSlide(slide, visible) {
-    const { options } = this;
-    const { element } = slide;
-    const duration = visible ? options.transitionDuration : options.transitionDurationExit;
-    return this.ensureTranstionEnds(element, duration, () => {
-      element.style.opacity = visible ? "1" : "0";
-    });
-  }
-  /**
-   * Handler for the entire slide transtion
-   */
-  async slideTransition({ slide, index, old, oldIndex, triggerType }) {
-    const count = this.slides.length;
-    const reverse = triggerType === "previous";
-    const lastIndex = count - 1;
-    const lastToFirst = index === 0 && oldIndex === lastIndex;
-    const firstToLast = index === lastIndex && oldIndex === 0;
-    let switchSlide;
-    let duration = this.options.transitionDuration;
-    
-    // Set duration based on how many slides to traverse
-    // First to last or the opposite are single slide animations
-    if (oldIndex && !lastToFirst && !firstToLast) {
-      duration = duration * Math.abs(oldIndex - index);
-    }
-    // If first to last or last to first we switch the order of the slides so that
-    // They are right next to each other at the front of the list
-    // Then perform the animation, Then put them back in their natural place without transitioning
-    // so it doesn't move for the user. Note count affects this differently
-    
-    if (count < 3) { 
-      if (lastToFirst && !reverse) {
-        switchSlide = old;
-      } else if (firstToLast) {
-        switchSlide = reverse ? slide : old;
-      }
-    } else {
-      if (lastToFirst) {
-        switchSlide = old;
-      } else if (firstToLast) {
-        switchSlide = slide;
-      }
-    }
-
-    // Set all slides to visible during the animation 
-    this.setVisibility(null, true);
-
-    // Put the last item at the front of the list and reset the
-    // tracks (or the opposite for first to last)
-    if (switchSlide) {
-      switchSlide.element.style.order = "-1";
-      await this.translateTo(lastToFirst ? 0 : old.element.offsetLeft, 0);
-    }
-    // Perform the main sliding animation
-    await this.translateTo(slide.element.offsetLeft, duration);
-    // Set the order back to normal in the end
-    // Don't transtion so the slider seems like it doesn't jump/move
-    if (switchSlide) {
-      switchSlide.element.style.order = "0";
-      await this.translateTo(slide.element.offsetLeft, 0);
-    }
-
-    this.setVisibility(slide, false);
-  }
-  /**
-   * Handler for the entire fade transtion
-   */  
-  async fadeTransition({ slide, old }) {
-    this.setVisibility(null, true);
-    // Uses order trick to move the current slide
-    if (old) {
-      await this.fadeSlide(old, false);
-      old.element.style.order = "0";
-    } 
-    slide.element.style.order = "-1";
-    await this.fadeSlide(slide, true); 
-    this.setVisibility(slide, false);
-  }
-  /**
-   * Handler for the entire NO transtion
-   */
-  noTransition({ slide, old }) {
-    this.setVisibility(slide, false);
-    if (old) {
-      old.element.style.order = "0";
-    }
-    slide.element.style.order = "-1";
-    return Promise.resolve();
-  }
-  goto(index, event, triggerType) {
-    const { 
-      slide: old, 
-      index: 
-      oldIndex, 
-      slides, 
-      elements
-    } = this;
-    const isInit = triggerType === "init";
-    const slide = slides[index];
-    const activeClass = this.getClass("nav-button--active");
-    const transitionClass = this.getClass("transition", true);
-    const to = { slide, index, old, oldIndex, triggerType };
-
-    if (index === oldIndex) {
-      logWarning(this, "Could not goto slide, still performing transition");
-      return;
-    }
-    if (this.transitioning) {
-      logWarning(this, "Cancel goto(), same slide index as current slide");
-      return;
-    }
-
-    // Make all slide interactive elements inert
-    const lockInteractives = maintain.disabled({ context: this.elements.track  });
-    this.transitioning = true;
-    // Set classes first just feels better
-    if (old) old.navButton.classList.remove(activeClass);
-    slide.navButton.classList.add(activeClass);
-    elements.container.classList.add(transitionClass);
-    // Perform transition and then set state
-    this.transition(to).then(() => {
-      this.index = index;
-      this.slide = slide;
-      this.transitioning = false;
-      elements.container.classList.remove(transitionClass);
-      lockInteractives.disengage();
-      if (!isInit) {
-        slide.element.focus();
-        this.emit("goto", [event, index, slide]);
-      }
-    });
-  }
-  setup() {
-    const { container, track, trackContainer } = this.elements;
-    const trackCss = trimWhitespace(this.trackCss());
-    const trackContainerStyles = trimWhitespace(this.trackContainerStyles());
-    const slideCss = trimWhitespace(this.slideCss());
-    track.setAttribute("style", trackCss);
-    trackContainer.setAttribute("style", trackContainerStyles);
-    this.slides.forEach(slide => {
-      slide.element.setAttribute("style", slideCss);
-      slide.element.setAttribute('tabindex', '-1');
-    });
-    container.classList.add(this.getClass());
-  }
-  trackContainerStyles() {
-    // Crop translated track
-    return `
-      overflow: hidden;
-    `;
-  }
-  transitionCss(property) {
-    const { transitionTimingFunction, transitionDuration } = this.options;
-    return `
-      transition-property: ${ property };
-      transition-duration: ${ cssDuration(transitionDuration) };
-      transition-timing-function: ${ transitionTimingFunction };
-    `;
-  }
-  trackCss() {
-    // Add in sliding transtion properties when not fade
-    return `
-      display: flex;
-      position: relative;
-      list-style: none;
-      ${ this.transition === this.slideTransition ? this.transitionCss("transform") : "" }
-    `;
-  }
-  slideCss() {
-    const fadingTransition = this.transition === this.fadeTransition;
-    // Add in fading transtion properties when not slide (which is on the track)
-    return `
-      width: 100%;
-      flex: 0 0 100%;
-      ${ fadingTransition ? this.transitionCss("opacity") : "" }
-      opacity: ${ fadingTransition ? "0" : "1" }
-    `;
-  }
-  getClass(child, modifier) {
-    const { namespace } = this.options;
-    if (modifier) {
-      return `${ namespace }--${ child }`;
-    } else if (child) {
-      return `${ namespace }__${ child }`;
-    } else {
-      return namespace;
-    }
-  }
-  createControlButton(action) {
-    const button = document.createElement("button");
-    button.classList.add(this.getClass("control-button"));
-    button.classList.add(this.getClass(`control-button--${ action }`));
-    button.setAttribute("data-slider-control", action);
-    button.setAttribute("type", "button");
-    button.innerHTML = this.getControlContent(action);
-    return button;
-  }
-  createControls(context) {
-    console.log(context)
-    const controls = document.createElement('ul');
-    const previousItem = document.createElement("li");
-    const nextItem = document.createElement("li");
-    const previous = this.createControlButton("previous");
-    const next = this.createControlButton("next");
-
-    controls.classList.add(this.getClass("controls"));
-
-    previousItem.appendChild(previous);
-    nextItem.appendChild(next);
-    controls.appendChild(previousItem);
-    controls.appendChild(nextItem);
-    previous.addEventListener('click', this.previous.bind(this));
-    next.addEventListener('click', this.next.bind(this));
-    context.appendChild(controls);
-
-    return {
-      controls,
-      previousItem,
-      nextItem,
-      previous,
-      next
-    };
-  }
-  createNav(container) {
-    const nav = document.createElement("ul");
-    const navButtons = this.slides.map(this.createNavButton.bind(this));
-    const navItems = navButtons.map(button => {
-      const item = document.createElement("li");
-      item.appendChild(button);
-      // item.setAttribute('tabindex', "-1"); // WHY?
-      nav.appendChild(item);
-      return item;
-    });
-
-    nav.classList.add(this.getClass("nav"));
-    container.appendChild(nav);
-
-    return {
-      nav,
-      navButtons,
-      navItems
-    };
-  }
-  createNavButton(slide, index) {
-    const button = document.createElement("button");
-    button.classList.add(this.getClass("nav-button"));
-    button.setAttribute("type", "button");
-    button.innerHTML = this.getNavContent(slide.number);
-    slide.navButton = button; // Add reference to slide object
-    button.addEventListener("click", this.goto.bind(this, index));
-    return button;
-  }
-  getControlContent(action) {
-    return `
-      <span class="hidden-visually">${ action }</span>
-      <span aria-hidden="true">${ action === 'next' ? '→' : '←' }</span>
-    `;
-  }
-  getNavContent(number) {
-    return `<span class="hidden-visually">Item</span> <span>${ number }</span>`;
-  }
-  emit(name, args) {
-    if (this.options.events[name]) {
-      this.options.events[name].apply(this, args);
-    }
-  }
-}
-
-export default Slider;

package/trash/js-old/ui/tabs.js

@@ -1,109 +0,0 @@
-// =============================================================================
-// Tabs
-// =============================================================================
-// 
-// Version:         1.0.1
-// 
-// Selected by: [data-site-tablist]
-// 
-// Possible options (passed in attribute JSON)
-// - openByUrlHash | Optionally add "openByUrlHash" to   
-//   have the scriptopen a tab and focus it on page load 
-//   (and set it in history as they navigate)
-
-import AriaTablist from 'aria-tablist';
-
-const errorHeader = "Site Tablist [data-site-tablist] error:";
-const instances = [];
-// Init all instances currently in page
-window.addEventListener("load", () => {
-  initWithin(document);
-  // Run this on page load, optionally exported for use when page is running
-  instances.forEach(openByCurrentHash);
-});
-
-// Initialize when page updates/changes
-document.addEventListener('pageModified', e => initWithin(e.target));
-
-function initWithin(context) {
-  if (!context) return;
-  const tablists = context.querySelectorAll('[data-site-tablist]');
-  tablists.forEach(init);
-}
-function openByCurrentHash({ options, ariaTablist }) {
-  if (options.openByUrlHash) {
-    const { hash } = window.location;
-    if (hash && hash.length > 1) {
-      const possibleId = hash.substring(1);
-      ariaTablist.tabs.forEach(tab => {
-        if (possibleId === tab.id) {
-          ariaTablist.open(tab);
-        }
-      })
-    }
-  }
-}
-function init(element) {
-  let options = {};
-  const config = {};
-  
-  if (element.dataset.siteTablist) {
-    try {
-      options = JSON.parse(element.dataset.siteTablist);
-    } catch(e) {
-      console.error(errorHeader, "(JSON Parse for options)", element);
-    }
-  }
-  if (options.vertical) {
-    config.allArrows = true;
-  }
-
-  // Need to render the markup before checking height
-  //  - used to wait until images had loaded
-  ready();
-
-  if (options.equalHeights) {
-    setHeights(element);
-  }
-  
-  function ready() {
-    const instance = { element, options };
-    instance.ariaTablist = AriaTablist(element, {
-      onOpen(...args) {
-        args.unshift(instance);
-        handleOpen.apply(null, args);
-      },
-      ...config
-    });
-    instances.push(instance);
-  }
-}
-function handleOpen({ options }, panel, tab) {
-  if (options.openByUrlHash && window.history) {
-    window.history.replaceState(null, "", `#${ tab.id }`);
-  }
-}
-function setHeights(element) {
-  const tabs = [ ...element.children];
-  const panels = tabs.map(n => document.querySelector(`[aria-labelledby="${ n.id }"]`)); 
-  const parent = panels[0].parentElement;
-  const images = [ ...parent.querySelectorAll('img') ];
-  const imagePromises = images.map(image => imagePromise(image));
-  function imagePromise(image) {
-    return new Promise((resolve, reject) => {
-      image.onload = () => resolve(image);
-      image.onerror = reject;
-    });
-  }
-  Promise.all(imagePromises).then(() => {
-    const heights = panels.map(panel => panel.offsetHeight);
-    const max = Math.max(...heights);
-    panels.forEach(panel => panel.style.minHeight = `${ max }px`);
-  });
-}
-
-export { instances };
-
-
-
-

package/trash/js-old/ui/tooltip.js

@@ -1,82 +0,0 @@
-// =============================================================================
-// Tooltip
-// =============================================================================
-
-// Version:         1.0.1
-
-// Description:     Adds a single tooltip div to bottom of document to be used to 
-//                  show text/simple markup of mouse hover or focus
-
-import { logError } from "../utils/logger.js";
-import { createPopper } from '@popperjs/core';
-
-const ATTR_DESC = "aria-describedby";
-const popperOptions = {
-  placement: "auto",
-  strategy: 'fixed',
-  modifiers: [
-    { 
-      name: 'eventListeners', 
-      enabled: false 
-    },
-    {
-      name: 'preventOverflow',
-      enabled: true,
-      options: {
-        mainAxis: true
-      }
-    },
-    // Arrow
-    {
-      name: 'offset',
-      options: {
-        offset: [ 0, 10 ],
-      },
-    }
-  ]
-};
-
-export default class Tooltip {
-  static defaults = {
-    namespace: "Tooltip",
-    describedBy: false,
-    arrowSize: 10,
-    classes: []
-  }
-  constructor(context, markup, config) {
-    if (!context) {
-      logError(this, 'Missing context element');
-    }
-    this.options = Object.assign({}, Tooltip.defaults, config);
-    this.context = context;
-    this.element = this.create(markup);
-    createPopper(context, this.element, popperOptions);
-  }
-  create(markup) {
-    const { namespace } = this.options;
-    const element = document.createElement("div");
-
-    element.id = namespace + "--" + Date.now();
-    element.innerHTML = markup;
-    element.classList.add(namespace);
-    element.classList.add(...this.options.classes);
-
-    const arrow = document.createElement("div");
-    arrow.setAttribute("data-popper-arrow", "");
-
-    if (this.options.describedBy) {
-      this.context.setAttribute(ATTR_DESC, element.id);
-    }
-    this.inPage = true;
-    element.appendChild(arrow);
-    return document.body.appendChild(element);
-  }
-  destroy() {
-    if (this.inPage) {
-      document.body.removeChild(this.element);
-    }
-    if (this.options.describedBy) {
-      this.context.removeAttribute(ATTR_DESC);
-    }
-  }
-}

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

@@ -1,28 +0,0 @@
-/**
- * Removes an array element (modifies array)
- * @param {Array} array Array to remove element from
- * @param {Element} element Array element to remove
- */
-export function removeArrayElement(array, element) {
-  var index = array.indexOf(element);
-  if (index > -1) {
-    array.splice(index, 1);
-  }
-}
-
-/**
- * Searches array for first item matching test, beginning at a start index but searching the entire array
- * @param {Array} array Array to search
- * @param {Number} start The index in the array to start the search from
- * @param {Function} callback A test function that is passed array item and index
- * - Credit: (James Waddington) https://stackoverflow.com/questions/28430348/how-to-loop-through-arrays-starting-at-different-index-while-still-looping-throu
- */
-export function offsetFindIndexOf(array, start = 0, callback) {
-  let found, offset;
-  for (var i = 0; i < array.length; i++) {
-    offset = (i + start) % array.length;
-    found = callback(array[offset], offset);
-    if (found) return offset;
-  }
-  return -1;
-}