@ulu/frontend 0.0.3

package/js/ui/flipcard.js

@@ -0,0 +1,202 @@
+// =============================================================================
+// Flipcard
+// =============================================================================
+
+// Version:                    1.0.1
+
+// Changes                    1.0.1 | Added allow selection
+
+import { log, logError } from "../utils/logger.js";
+import { trimWhitespace } from "../utils/string.js";
+const debugMode = false; // Global dev debug
+
+export class Flipcard {
+  static instances = [];
+  static defaults = {
+    namespace: "Flipcard",
+    proxyClick: {
+      allowSelection: true, // Don't proxy click if the user has more than the minmimum selected
+      selectionMin:  10, // Minimum length that qualifies as a selection
+      exclude:  "a, input, textarea, button"  // Selectors to avoid closing a flipcard onProxyclick 
+    },
+  }
+  constructor(container, front, back, config, debug = false) {
+    if (!container, !front, !back) {
+      logError(this, 'Missing an element (container, front, back)');
+    }
+    this.options = Object.assign({}, Flipcard.defaults, config);
+    const { namespace } = this.options;
+    Flipcard.instances.push(this);
+
+    this.debug = debugMode || debug;
+    this.elements = { container, front, back };
+    this.isOpen = false;
+    this.uid = `${ namespace }-id-${ Flipcard.instances.length }`;
+    this.stateAttr = `data-${ namespace }-state`.toLowerCase();
+    this.setup();
+    this.setVisiblity(false);
+    log(this, this);
+  }
+  toggle() {
+    this.setVisiblity(!this.isOpen);
+  }
+  setup() {
+    const { uid } = this;
+    const { namespace, proxyClick } = this.options;
+    const { container, front, back } = this.elements;
+    const control = this.elements.control = document.createElement("button");
+
+    // Styling and markup
+    control.classList.add(this.getClass("control-button"));
+    control.setAttribute("type", "button");
+    control.innerHTML = this.createControlContent();
+    control.style.gridArea = namespace;
+    control.style.zIndex = "-1"; // Behind everything only used for focus
+    control.addEventListener('focusin', () => {
+      control.style.zIndex = "20"; // above the back
+    });
+    control.addEventListener('focusout', () => {
+      control.style.zIndex = "-1"
+    });
+    control.addEventListener("click", this.toggle.bind(this));
+    back.parentNode.insertBefore(control, back);
+  
+    container.classList.add(this.options.namespace);
+    container.setAttribute("style", trimWhitespace(this.containerCss()));
+    if (proxyClick) {
+      container.addEventListener("click", this.onProxyClick.bind(this));
+    }
+
+    front.style.gridArea = namespace;
+    back.style.gridArea = namespace;
+
+    // Accessibility
+    control.id = `${ uid }-control`;
+    control.setAttribute("aria-controls", back.id);
+    control.setAttribute("aria-expanded", "false");
+    back.id = `${ uid }-back`;
+    back.setAttribute('aria-labelledby', control.id)
+    back.setAttribute('aria-hidden', "true");
+  }
+  /**
+   * Click handler on everything on container
+   * - Determines if click was something that should be ignored (link, etc)
+   */
+  onProxyClick({ target }) {
+    const { exclude, allowSelection, selectionMin } = this.options.proxyClick; 
+    const selection = window.getSelection();
+    if (exclude && !target.matches(exclude)) {
+      if (!allowSelection || selection.toString().length < selectionMin) {
+        this.toggle();
+      }
+    }
+  }
+  getClass(child) {
+    const { namespace } = this.options;
+    return child ? `${ namespace }__${ child }` : namespace;
+  }
+  createControlContent() {
+    return `
+      <span class="hidden-visually">Show More Information</span>
+    `;
+  }
+  setVisiblity(visible) {
+    const { back, container, control } = this.elements;
+    const state = visible ? "open" : "closed";
+    back.style.zIndex = visible ? "10" : "1";
+    back.style.visibility = visible ? "visible" : "hidden";
+    container.setAttribute(this.stateAttr, state);
+    back.setAttribute('aria-hidden', visible ? "false" : "true");
+    control.setAttribute('aria-expanded', visible ? "true" : "false");
+    this.isOpen = visible;
+  }
+  containerCss() {
+    return `
+      display: -ms-grid;
+      display: grid;
+      position: relative; 
+      -ms-grid-columns: 1fr; 
+      grid-template-columns: 1fr;
+      justify-items: stretch;
+      grid-template-areas: "${ this.options.namespace }";
+      cursor: pointer;
+    `;
+  }
+  panelCss(zIndex = 1) {
+    return `
+      grid-area: ${ this.options.namespace };
+      z-index: ${ zIndex }
+    `;
+  }
+}
+export default Flipcard;
+
+/**
+ * Preliminary Notes:
+ *   Considerations for Accessiblity:
+ *   - https://webaim.org/standards/wcag/checklist
+ *   - https://www.w3.org/TR/WCAG21/#on-focus
+ *   - https://a11y-style-guide.com/style-guide/section-cards.html
+ *   - Reduced Motion
+ *   - Percievable (interactive)
+ *   - Final Descision
+ *     - Use a buttons
+ *     - Why?
+ *       - Can't use whole card surface as click 
+ *         * Selections
+ *         * Other interactions
+ *         * How to make that make sense to SR
+ *         * Keyboard focuses and then clicks
+ *         * Accidental flipping on zoom
+ *       - Can't use hover
+ *   
+ *   - BRAINSTORM START:
+ *     - Don't use hover or focus (motor control issues)
+ *       - Needs to use click
+ *     - Run through screenreader expierence
+ *       - Hits button (reads title, click to reveal)
+ *       - Focuses the content button (reads content, backside, click to unreveal)
+ *       - NO BUTTONS CAN"T HAVE CONTENT, BUTTONS NEED TO STATE THEIR INTENT
+ *     - Try Again, Run through screenreader expierence
+ *       - Screen reader encounters flipcard
+ *       - Headline is read
+ *       - Button is read (reveal description)
+ *       - Button is clicked
+ *       - Content is shown and focused
+ *       - Button to flip back
+ *     - For Keybaord users
+ *       - The accessible buttons can be used or a click handler can be attached to the 
+ *         flipcard and given
+ *     - Why not always show the content to screenreaders?
+ *       - How to hide controls from them? (controls can't be hidden)
+ *       - How to not have events interfere click
+ *       - Maybe use a single control and make it say "jumpto definition"
+ *         - Kind of lame
+ *       - What about going back to focus and then attaching a click handler?
+ *         - Visual users will see the content on keyboard or mouse or touch
+ *         - We can reduce the motion with query
+ *         - Note: WCAG AAA - 1.4.13 Content on Hover or Focus
+ *           - Need to bind escape
+ *         - Mouse users and touch will need to click
+ *         - How does it focus and work on a screenreader?
+ *       - Cannot use FOCUS!
+ *         - https://www.w3.org/WAI/WCAG21/Understanding/on-focus.html
+ *         - What if the user was zoomed? They may never see the title/front
+ *     - I think it MUST use buttons or a button to flip
+ *       - Because users need to be able to scroll, interact and select text in a back
+ *     @example html
+ *        <div class="flipcard">
+ *          <h3 class="flipcard__front">
+ *            Term Name
+ *            <button class="flipcard__toggle">
+ *              <span class="hidden-visually">Show Definition</span>
+ *            </button>
+ *          </h3>
+ *          <div class="flipcard__back">
+ *            Some definiton example lorem ipsum et depsi anu olor.
+ *            <button class="flipcard__toggle">
+ *              <span class="hidden-visually">Hide Definition</span>
+ *            </button>
+ *          </div>
+ *        </div>
+ */    

package/js/ui/grid.js

@@ -0,0 +1,67 @@
+import { getName } from "../events/index.js";
+
+/**
+ * Sets up document for grid position classes
+ * @param {String} selector The selector for the parent element
+ * @param {Object} classes Classes (optional) @see setPositionClasses
+ */
+export function init(selector = "[data-grid]", classes) {
+  document.addEventListener(getName("pageModified"), () => setup(selector, classes));
+  document.addEventListener(getName("pageResized"), () => setup(selector, classes));
+  setup(selector, classes);
+}
+
+/**
+ * Goes through document and finds elements that need to have positioning classes
+ * @param {String} selector The selector for the parent element
+ * @param {Object} classes Classes (optional) @see setPositionClasses
+ */
+export function setup(selector, classes) {
+  document.querySelectorAll(selector).forEach(element => setPositionClasses(element, classes || undefined));
+}
+
+/**
+ *   Sets up the positonal classes that would come from the equal
+ *   height module. Needs to be rerun by user when layout changes
+ *   or new instances are added to the screen
+ *   - Used for gutter crops
+ *   - Used for rule placement
+ *   - **Devs** Remember that default classes should match sass defaults
+ *   @param {Node} parent  The grid parent <data-grid="">
+ *   @param {Object} classes Override the default equal heights classes
+ */
+export function setPositionClasses(parent, classes = { 
+  columnFirst: 'position-column-first', 
+  columnLast: 'position-column-last', 
+  rowFirst: 'position-row-first', 
+  rowLast: 'position-row-last' 
+}) {  
+  const children = [...parent.children];
+  const rows = [];
+  let lastY;
+  // Check element against last
+  // If they don't match it's a new row create a new array
+  // Then push into the last array in the rows array
+  children.forEach((child) => {
+    const y = child.getBoundingClientRect().y;
+    if (lastY !== y) rows.push([]);
+    rows[rows.length - 1].push(child);
+    lastY = y;
+    child.classList.remove(...Object.values(classes)); // Remove previously set classes
+  });
+  // Apply Classes
+  rows.forEach((row, index) => {
+    if (index === 0) 
+      row.forEach(child => child.classList.add(classes.rowFirst));
+    if (index == rows.length - 1) 
+      row.forEach(child => child.classList.add(classes.rowLast));
+
+    row.forEach((child, childIndex) => {
+      if (childIndex === 0) 
+        child.classList.add(classes.columnFirst);
+      if (childIndex == row.length - 1) 
+        child.classList.add(classes.columnLast);
+    });
+  });
+
+}

package/js/ui/modals.js

@@ -0,0 +1,219 @@
+// Version:         1.0.4
+// Changes:
+//                  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 orginal classes, or don't remove them. And allow user to pass classes via config
+
+// Javascript builds strucutre, modal's live in content in simple container. 
+// Modal theme and strucutre 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 { createElementFromHtml } from '../utils/dom.js';
+import { pauseVideos, prepVideos } from '../helpers/pause-youtube-video.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]"
+};
+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();
+
+// The [data-site-modal] is used to seperate the libraries' interface 
+// and the modal's styling classes, so it can be adjusted or extended 
+// in the future
+document.querySelectorAll('[data-site-modal]').forEach((element) => setupModal(element));
+
+// Intialize modal library script
+// init();
+attachTriggers();
+
+export function attachTriggers(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)
+        });
+      }
+    }
+  });
+}
+
+/**
+ * Function to setup each modal
+ * - Creates structure
+ * - Gets settings from elements data attrite
+ * - 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 listerner'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.title }</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);
+}
+
+
+
+// function createContainer() {
+//   const container = document.createElement('div');
+//   container.classList.add('site-modals');
+//   document.body.appendChild(container);
+//   return container;
+// }
+
+// From GITHUB Issues (user remedy)
+// export function refresh() {
+//   // Use whatever selector you're using for MicroModal triggers.
+//   const modalTrigger = 'data-micromodal-trigger';
+
+//   // Get all triggers. 
+//   const modalTriggers = document.querySelectorAll( `[${modalTrigger}]` );
+
+//   modalTriggers.forEach( trigger => {
+//       // Get the attribute to save.
+//       const triggerElement = trigger.getAttribute( modalTrigger );
+      
+//       // Remove the attribute briefly to clear memory/existing modals.
+//       trigger.removeAttribute( modalTrigger );
+
+//       // Immediately add it back.
+//       trigger.setAttribute( modalTrigger, triggerElement );
+
+//       // Re-initialize.
+//       init();
+//   } );
+// }

package/js/ui/overflow-scroller-pager.js

@@ -0,0 +1,58 @@
+/**
+ * Function to be used in overflow scrollers "amount" option. This function will
+ * determine how many items can fit in the viewport, taking into account scroll padding left, 
+ * and will set the scroll amount to paginate between items. Items size can be anything 
+ * (ie. one per screen vs 3.5 per screen will both work). This seperated from the plugin 
+ * for tree shaking incase it's unneeded. Currently this is only setup for horizontal scrolling
+ * 
+ * Note: This is setup to return the function, incase configuration is needed in the future 
+ * it can be passed to the create function
+ * 
+ * @return {Function} A function to be used in overflow scrollers "amount" configuration property
+ */
+
+export default function create() {
+  return function pager(instance, dir) {
+    const isNext = dir === "next";
+    const { track } = instance.elements;
+    if (!track.children) return 400;
+    const trackStyle = window.getComputedStyle(track);
+    // Note we are banking on the scroll padding string to be in "px", not doing any conversions here
+    const scrollPaddingRaw = trackStyle.getPropertyValue( 'scroll-padding-left' ).replace( 'auto', '0px' );
+    const scrollPadding = parseInt(scrollPaddingRaw, 10);
+
+    const { scrollLeft, offsetWidth } = track;
+    const right = scrollLeft + offsetWidth;
+    // Get all slide positions into an array
+    const slides = [ ...track.children ].map(element => {
+      const { offsetLeft, offsetWidth } = element;
+      return { 
+        element, 
+        offsetLeft, 
+        offsetRight: offsetLeft + offsetWidth 
+      };
+    });
+    // Test edges to see what can fit, slide found will be the slide to scroll to
+    let slideFound;
+    if (isNext) {
+      // Find the first item that didn't make it
+      slideFound = slides.find(slide => slide.offsetRight >= right);
+    } else {
+      let slideBeforeIndex = slides.findLastIndex(slide => slide.offsetLeft <= scrollLeft);
+      // Find the slides before this slide that can fit, including the slide before
+      if (slideBeforeIndex) {
+        let slideBefore = slides[slideBeforeIndex];
+        let slidesBefore = slides.slice(0, slideBeforeIndex + 1);
+        slideFound = slidesBefore.find(slide => {
+          const rightEdge = slide.offsetLeft + scrollPadding + offsetWidth;
+          return rightEdge >= slideBefore.offsetRight;
+        });
+      }
+    }
+    if (slideFound) {
+      return isNext ? slideFound.offsetLeft : slideFound.offsetLeft + scrollPadding;
+    } else {
+      return 400;
+    }
+  }
+}