@ulu/frontend 0.0.3

package/trash/js-old/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/trash/js-old/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/trash/js-old/ui/programmatic-modal.js

@@ -0,0 +1,91 @@
+// =============================================================================
+// 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

@@ -0,0 +1,60 @@
+// =============================================================================
+// 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 });
+  }
+}