@ulu/frontend 0.0.23 → 0.1.0-beta.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Change Log
 
+## Version 0.1.0-beta.1
+
+- Remove dev dependencies from package json (vite, autoprefixer) and move specific JS module dependencies (ie. floating ui, ally.js and aria-tablist) to optionalDependencies so they can be installed if the user is using modules that require them
+
+## Version 0.1.0-beta.0
+
+- Minor release keeps most of the current API for SASS the same but adds new functions/mixins and components. JS has been slightly reorganized and outdated modules have been replaced
+- Remove calculate module and move the functions to utils (responsive property and pixel-to-em)
+- Add other components modules 
+- Update documentation and API documentation
+- Update all sass to work with new/future sass version 
+- Add root styles for ulu specific custom properties
+- Add transitions to buttons
+- JS remove mini collapsible and rely on floating ui library for tooltip/popovers
+- JS move to native dialog element instead of micro-modal
+- JS add new collapsible class for popovers or other accessible collapsible containers
+- JS reorganize utils and helpers
+- Create new docs website with api docs and component examples
+- Full build (ie. /dist/) is bundled by Vite 
+
 ## Version 0.0.23
 
 - Fix mistake introduced in 0.0.22, that broke container css

package/deprecated/js/drupal-programmatic-modal.js

@@ -0,0 +1,91 @@
+/**
+ * @module programmatic-modal
+ */
+
+// 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 "./micromodal-modals.js";
+import { dispatch } from "../../js/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/{js/ui/modals.js → deprecated/js/micromodal-modals.js}

@@ -1,8 +1,11 @@
 /**
  * @module ui/modals
  */
-// Version:         1.0.4
+// Version:         1.0.5
+//
 // Changes:
+//                  1.0.5 | Added title icon and remove calling of init
+//                          Moved setup modals stuff to inside init (contextual) [may affect programmatic modals]
 //                  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!!
@@ -10,17 +13,17 @@
 //                  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
+// Todo:            - Make the container the content is getting the original 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 
+// Javascript builds structure, modal's live in content in simple container. 
+// Modal theme and structure 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 '@ulu/utils/browser/dom.js';
-import { pauseVideos, prepVideos } from '../helpers/pause-youtube-video.js';
+import MicroModal from "micromodal";
+import { Resizer } from "../resizer.js";
+import { pauseVideos, prepVideos } from "../utils/pause-youtube-video.js";
+import { createElementFromHtml } from "@ulu/utils/browser/dom.js";
 const classes = {
-  open: 'site-modal--open',
+  open: "site-modal--open",
   container: "site-modal__container",
   body: "site-modal__body",
   resizer: "site-modal__resizer"
@@ -32,13 +35,14 @@ const defaults = {
   allowResize: true,
   position: "center",
   containerClass: "",
-  closeSelector: "[data-site-modal-close]"
+  closeSelector: "[data-site-modal-close]",
+  titleIcon: false
 };
 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)
+  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);
   } 
@@ -50,17 +54,12 @@ const wrappers = [];
 // 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';
+// Initialize modal library script
+
+export function init(context = document) {
+  const flag = "data-site-modal-trigger-attached";
   context.querySelectorAll(triggerSelector).forEach(trigger => {
     if (!trigger.hasAttribute(flag)) {
       const mid = trigger.getAttribute(triggerAttr);
@@ -69,17 +68,21 @@ export function attachTriggers(context = document) {
       } else {
         trigger.setAttribute(flag, "");
         trigger.addEventListener("click", () => {
-          show(mid)
+          show(mid);
         });
       }
     }
   });
+  // The [data-site-modal] is used to separate the libraries' interface 
+  // and the modal's styling classes, so it can be adjusted or extended 
+  // in the future
+  context.querySelectorAll("[data-site-modal]").forEach((element) => setupModal(element));
 }
 
 /**
  * Function to setup each modal
  * - Creates structure
- * - Gets settings from elements data attrite
+ * - Gets settings from elements data attribute
  * - Moves it to the end of the document
  * - Adds resizer if position (left || right)
  * @param {Node} modal Modal element ie. `[data-site-modal]`
@@ -88,25 +91,25 @@ export function attachTriggers(context = document) {
 export function setupModal(modal, settings) {
   // Grab things from original element before modifying
   const id = modal.id;
-  const originalClasses = modal.getAttribute('class') || '';
+  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 = 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 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');
+  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
+  // appended after as not to lose any listener's/etc
   const markup = `
     <div 
       class="
@@ -120,7 +123,10 @@ export function setupModal(modal, settings) {
       <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>
+            <h2 class="site-modal__title" id="${ id }-title" tabindex="0">
+              ${ data.titleIcon ? `<span class="site-modal__title-icon ${ data.titleIcon }" aria-hidden="true"></span>` : "" }
+              <span class="site-modal__title-text">${ data.title }</span>
+            </h2>
             <button class="site-modal__close" aria-label="Close modal" ${ closeAttr }>
               <span class="site-modal__close-icon" aria-hidden="true" ${ closeAttr }></span>
             </button>
@@ -136,9 +142,9 @@ export function setupModal(modal, settings) {
   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')
+    body: select(wrapper, "body"),
+    resizer: select(wrapper, "resizer"),
+    container: select(wrapper, "container")
   };
 
   // Move the orginal content into the modal's body
@@ -158,7 +164,7 @@ export function setupModal(modal, settings) {
   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 }) => {
+  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) {
@@ -188,35 +194,3 @@ export function show(id, config) {
 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();
-//   } );
-// }