@ulu/frontend 0.0.3 → 0.0.5

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

@@ -1,67 +0,0 @@
-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/trash/js-old/ui/modals.js

@@ -1,219 +0,0 @@
-// 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/trash/js-old/ui/programmatic-modal.js

@@ -1,91 +0,0 @@
-// =============================================================================
-// Grabs Breakpoint from CSS
-// =============================================================================
-
-// 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 "./modals.js";
-import { dispatch } from "./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/trash/js-old/ui/resizer.js

@@ -1,60 +0,0 @@
-// =============================================================================
-// Element Resizer
-// =============================================================================
-
-// Version:         1.0.1
-
-// Description:     Adds resizing ability to an element (only horizontal currently)
-
-// Reference:       - http://jsfiddle.net/3jMQD/614/
-
-import { logError } from "../utils/logger.js";
-
-export default class ElementResizer {
-  static defaults = {
-    debug: false,
-    overrideMaxWidth: false, 
-    fromLeft: false
-  };
-  /**
-   * 
-   * @param {Node} container Container to be resize   
-   * @param {Node} control Resize handle element 
-   * @param {Object} options Defualt can be changed on class
-   * @param {Boolean} options.debug Enable non-essential debugging logs
-   * @param {Boolean} options.overrideMaxWidth When script is activated by handle remove the elements max-width and allow the width of the resize to exceed the max (default false)
-   * @param {Boolean} options.fromLeft The script should assume the handle is on the left side of the element
-   */
-  constructor(container, control, options) {
-    if (!control || !container) {
-      logError(this, "Missing required elements 'control' or 'container'");
-    }
-    this.options = Object.assign({}, ElementResizer.defaults, options);
-    this.container = container;
-    this.control = control;
-    this.handlerMousedown = this.onMousedown.bind(this);
-    this.control.addEventListener('mousedown', this.handlerMousedown);
-  }
-  destroy() {
-    this.control.removeEventListener('mousedown', this.handlerMousedown);
-  }
-  onMousedown(e) {
-    const { overrideMaxWidth, fromLeft } = this.options;
-    const doc = document.documentElement;
-    const win = document.defaultView;
-    const x = e.clientX;
-    const width = parseInt(win.getComputedStyle(this.container).width, 10);
-    if (overrideMaxWidth) {
-      this.container.style.maxWidth = 'none';
-    }
-    const mousemove = event => {
-      const polarity = fromLeft ? -1 : 1;
-      this.container.style.width = `${ width + ((event.clientX - x) * polarity) }px`;
-    };
-    const cleanup = () => {
-      doc.removeEventListener('mousemove', mousemove, false);    
-    };
-    doc.addEventListener('mousemove', mousemove, false);
-    doc.addEventListener('mouseup', cleanup, { capture: true, once: true });
-  }
-}