@ulu/frontend 0.1.0-beta.32 → 0.1.0-beta.34

package/docs-dev/sass/helpers/utilities/index.html

@@ -243,11 +243,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -258,11 +258,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>
@@ -2527,6 +2527,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/javascript/utils-system/">
+          
+    
+    <span class="nav-tree__text">
+      utils/system
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>
@@ -2729,11 +2744,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -2744,11 +2759,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>
@@ -5013,6 +5028,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/javascript/utils-system/">
+          
+    
+    <span class="nav-tree__text">
+      utils/system
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>

package/docs-dev/sass/index.html

@@ -243,11 +243,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -258,11 +258,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>
@@ -2527,6 +2527,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/javascript/utils-system/">
+          
+    
+    <span class="nav-tree__text">
+      utils/system
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>
@@ -2729,11 +2744,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
+        <a class="nav-tree__link  " href="/frontend/demos/card/">
           
     
     <span class="nav-tree__text">
-      Card Grid
+      Card
     </span>
   
         </a>
@@ -2744,11 +2759,11 @@
 
         <li class="nav-tree__item  ">
           
-        <a class="nav-tree__link  " href="/frontend/demos/card/">
+        <a class="nav-tree__link  " href="/frontend/demos/card-grid/">
           
     
     <span class="nav-tree__text">
-      Card New
+      Card Grid
     </span>
   
         </a>
@@ -5013,6 +5028,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/javascript/utils-system/">
+          
+    
+    <span class="nav-tree__text">
+      utils/system
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>

package/js/ui/breakpoints.js

@@ -97,9 +97,8 @@ export class BreakpointManager {
       logError(this, 'Unable to get current breakpoint, maybe order is incorrect? Breakpoint check skipped!');
       return;
     }
-    // console.log('name:\n', name);
     if (name === this.active) return;
-    // this.log(`current breakpoint: ${ name }`);
+    
     // Update active and cache last
     this.previous = this.active;
     this.previousIndex = this.activeIndex;

package/js/ui/details-group.js

@@ -3,20 +3,18 @@
  * @description Manages groups of details (ie. onlyOneOpen at a time)
  */
 
-import { getName } from "../events/index.js";
-import { getDatasetOptionalJson } from "../utils/dom.js";
+import { ComponentInitializer } from "../utils/system.js";
 
-export const attrs = {
-  init: "data-ulu-details-group-init",
-  childInit: "data-ulu-details-group-child-init",
-  group: "data-ulu-details-group",
-};
-
-// Utils for selecting things based on attributes
-const attrSelector = key => `[${ attrs[key] }]`;
-const attrSelectorInitial = key => `${ attrSelector(key) }:not([${ attrs.init }])`;
+/**
+ * Dialog Component Initializer
+ */
+export const initializer = new ComponentInitializer({ 
+  type: "details-group", 
+  baseAttribute: "data-ulu-details-group" 
+});
 
-const defaults  = {
+const childInitAttr = initializer.getAttribute("child-init");
+const defaults = {
   onlyOneOpen: true,
   childSelector: ":scope > details"
 };
@@ -26,24 +24,14 @@ const defaults  = {
  * - This will only initialize elements once, it is safe to call on page changes
  */
 export function init() {
-  document.addEventListener(getName("pageModified"), () => setup());
-  setup();
-}
-
-/**
- * Setup all dialog groups within context
- * @param {HTMLElement} context [document] Element to query within
- * @returns {Array} Array matching the groups queried with their return objects from setupGroup() [used for destroy/etc]
- */
-export function setup(context = document) {
-  // Added try because we are using querySelectorAll with :scope by default
-  // which will not work in Internet Explorer or early edge (some alt. browsers too)
-  try {
-    const elements = context.querySelectorAll(attrSelectorInitial("group"));
-    return [...elements].map(setupGroup);
-  } catch(error) {
-    console.error(error);
-  }
+  initializer.init({
+    withData: true,
+    events: ["pageModified"],
+    setup({ element, data, initialize }) {
+      setupGroup(element, data);
+      initialize();
+    }
+  });
 }
 
 /**
@@ -56,14 +44,19 @@ export function setup(context = document) {
 /**
  * Sets up a single group of details elements to manage their behavior.
  * @param {HTMLElement} element - The parent element containing the details elements.
+ * @param {Object} options - The options for this group
  * @returns {DetailsGroupInstance}      
  */
-export function setupGroup(element) {
-  const elementOptions = getDatasetOptionalJson(element, "uluDetailsGroup");
-  const options = Object.assign({}, defaults, elementOptions);
-  
-  element.setAttribute(attrs.t, "");
-  setupChildren();
+export function setupGroup(element, userOptions) {
+  const options = Object.assign({}, defaults, userOptions);
+
+  // Added try because we are using querySelectorAll with :scope by default
+  // which will not work in Internet Explorer or early edge (some alt. browsers too)
+  try {
+    setupChildren();
+  } catch(error) {
+    console.error(error);
+  }
 
   /**
    * Queries all current children in element
@@ -78,13 +71,11 @@ export function setupGroup(element) {
    */
   function setupChildren() {
     queryChildren().forEach(child => {
-      if (child.hasAttribute(attrs.childInit)) {
+      if (child.hasAttribute(childInitAttr)) {
         return;
       } else {
-        child.setAttribute(attrs.childInit, "");
+        child.setAttribute(childInitAttr, "");
       }
-      console.log(child);
-      
       child.addEventListener("toggle", toggleHandler);  
     });
   }
@@ -112,9 +103,9 @@ export function setupGroup(element) {
   function destroy() {
     queryChildren().forEach(child => {
       child.removeEventListener("toggle", toggleHandler);
-      child.removeAttribute(attrs.childInit);
+      child.removeAttribute(childInitAttr);
     });
-    element.removeAttribute(attrs.init);
+    element.removeAttribute(initializer.getAttribute("init"));
   }
 
   return { destroy, element, setupChildren };

package/js/ui/dialog.js

@@ -2,23 +2,24 @@
  * @module ui/dialog
  */
 
-import { getName } from "../events/index.js";
-import { getDatasetJson, wasClickOutside } from "../utils/dom.js";
+import { ComponentInitializer } from "../utils/system.js";
+import { wasClickOutside } from "../utils/dom.js";
 import { pauseVideos as pauseYoutubeVideos, prepVideos as prepYoutubeVideos } from "../utils/pause-youtube-video.js";
+
 /**
- * Default data attributes
+ * Base attribute for a dialog
  */
-export const attrs = {
-  init: "data-ulu-dialog-init",
-  dialog: "data-ulu-dialog",
-  trigger: "data-ulu-dialog-trigger",
-  close: "data-ulu-dialog-close",
-};
+export const baseAttribute = "data-ulu-dialog"; // Exposed for modal builder
+
+/**
+ * Dialog Component Initializer
+ */
+export const initializer = new ComponentInitializer({ type: "dialog", baseAttribute });
 
-// Utils for selecting things based on attributes
-const attrSelector = key => `[${ attrs[key] }]`;
-const attrSelectorInitial = key => `${ attrSelector(key) }:not([${ attrs.init }])`;
-const queryAllInitial = key => document.querySelectorAll(attrSelectorInitial(key));
+/**
+ * Attribute for close buttons within a dialog
+ */
+export const closeAttribute = initializer.getAttribute("close"); // Exposed for modal builder
 
 /**
  * Dialog Defaults 
@@ -42,6 +43,10 @@ export const defaults = {
    * Whether or not to pause videos when dialog closes (currently just youtube and native)
    */
   pauseVideos: true,
+  /**
+   * When open and not non-modal, the body is prevented from scrolling (defaults to true).
+   */
+  preventScroll: true,
 };
 
 
@@ -49,7 +54,7 @@ export const defaults = {
 let currentDefaults = { ...defaults };
 
 /**
- * @param {Object} options Change options used as default for dialogs, can then be overriden by data attribute settings on element
+ * @param {Object} options Change options used as default for dialogs, can then be overridden by data attribute settings on element
  */
 export function setDefaults(options) {
   currentDefaults = Object.assign({}, currentDefaults, options);
@@ -60,35 +65,40 @@ export function setDefaults(options) {
  * - This will only initialize elements once, it is safe to call on page changes
  */
 export function init() {
-  document.addEventListener(getName("pageModified"), setup);
-  setup();
-}
-
-/**
- * Setup dialogs and triggers
- */
-export function setup() {
-  // Then setup all dialogs (including those that were built)
-  const dialogs = queryAllInitial("dialog");
-  dialogs.forEach(setupDialog);
-
-  const triggers = queryAllInitial("trigger");
-  triggers.forEach(setupTrigger);
+  // Initialize all the dialogs
+  initializer.init({
+    events: ["pageModified"],
+    withData: true,
+    setup({ element, initialize, data }) {
+      setupDialog(element, data);
+      initialize();
+    }
+  });
+
+  // Initialize all triggers (things that trigger opening a dialog)
+  initializer.init({
+    key: "trigger",
+    events: ["pageModified"],
+    withData: true,
+    setup({ element, initialize, data: dialogId }) {
+      setupTrigger(element, dialogId);
+      initialize();
+    }
+  });
 }
 
 /**
  * Setup click handlers on a trigger
- * @param {Node} trigger 
+ * @param {Node} trigger Trigger button element
+ * @param {String} dialogId The dialog's id to open
  */
-export function setupTrigger(trigger) {
+export function setupTrigger(trigger, dialogId) {
   trigger.addEventListener("click", handleTrigger);
-  trigger.setAttribute(attrs.init, "");
 
   function handleTrigger() {
-    const id = trigger.dataset.uluDialogTrigger;
-    const dialog = document.getElementById(id);
+    const dialog = document.getElementById(dialogId);
     if (!dialog) {
-      console.error("Could not locate dialog (id)", id);
+      console.error("Could not locate dialog (id)", dialogId);
       return;
     }
     if (dialog?.tagName?.toLowerCase() !== "dialog") {
@@ -104,20 +114,33 @@ export function setupTrigger(trigger) {
  * Setup click handlers for a dialog
  * @param {Node} dialog 
  */
-export function setupDialog(dialog) {
-  const options = getDialogOptions(dialog);
+export function setupDialog(dialog, userOptions) {
+  const options = Object.assign({}, currentDefaults, userOptions);
+  const body = document.body;
+  
   dialog.addEventListener("click", handleClicks);
-  dialog.setAttribute(attrs.init, "");
+
   if (options.documentEnd) {
-    document.body.appendChild(dialog);
+    body.appendChild(dialog);
   }
   if (options.pauseVideos) {
     prepVideos(dialog);
   }
 
+  // Allow preventScroll if it is a modal dialog
+  // Caching value of overflow before setting so we don't assume what it's initial value is
+  if (!options.nonModal && options.preventScroll) {
+    let overflowValue = body.style.overflow;
+    dialog.addEventListener("toggle", (event) => {
+      const isOpen = event.newState === "open";
+      if (isOpen) overflowValue = body.style.overflow;
+      body.style.overflow = isOpen ? "hidden" : overflowValue;
+    });
+  }
+
   function handleClicks(event) {
     const { target } = event;
-    const closeFromButton = target.closest("[data-ulu-dialog-close]");
+    const closeFromButton = target.closest(initializer.attributeSelector("close"));
     let closeFromOutside = options.clickOutsideCloses && 
                            target === dialog && 
                            wasClickOutside(dialog, event);
@@ -136,8 +159,7 @@ export function setupDialog(dialog) {
  * @returns {Object}
  */
 export function getDialogOptions(dialog) {
-  const options = getDatasetJson(dialog, "uluDialog");
-  return Object.assign({}, currentDefaults, options);
+  return Object.assign({}, currentDefaults, initializer.getData(dialog));
 }
 
 /**
@@ -146,6 +168,7 @@ export function getDialogOptions(dialog) {
 function prepVideos(dialog) {
   prepYoutubeVideos(dialog);
 }
+
 /**
  * Prep videos to be paused for a given dialog
  */

package/js/ui/dialog.todo

@@ -1,37 +1,3 @@
-Styling:
-  ✔ Animations? @done
-  ☐ Check styling on left right
+Dialog Todos:
   ☐ Setup fullscreen option / modifier
-  ☐ Setup programmatic modal with new system
-  ☐ Resizing
-    ✔ Work out how this can work with native and click outside @done
-    ✔ Figure out how to setup icon for the resizer for all sites @done
-      * Fontawesome, or should this just be CSS so we don't need any icons for it
-      * Same for close button should we just use CSS and omit any FA requirements
-      * Or make it super easy to implement the icon only in the template (like default icon classses)
-        * Then user can choose to implement their own (via class) or use the styles that come with it
-  ☐ Prevent Browser Scroll
-  ✔ How should height work? Should a centered modal expand to it's content's height (up to the viewport height) or always be cropped and scroll (static height)? @done
-Todos:
-  ✔ How should the relationship between a dialog and it's trigger work @done
-    * Think there should be no relationship? Just triggers are triggers just attach a handler to open DOM centric way (add errors when the dialog doesn't exist)
-    * For the dialogs they should just have handlers attached for close
-      * Init should find all one's that need to be built and build them, then it should initialize them the same way as non-built dialogs
-  ✔ Support both modal and non-modal dialogs (rename)? @done
-  ✘ Divide into 4 modules @cancelled
-    1. Initializer (data-attributes)
-    2. Templater (for Drupal projects and standard modals)
-    3. Open/Close Behaviors
-    4. Programmatic Modal
-      * This is tough because its opionated towards our system in Drupal (jQuery)
-  ✔ How should this all be structured @done
-    * JS template dialogs?
-      * Pros
-        * Many users create the modals in content in CMS we don't want to make that difficult or get stuck with structure
-      * Cons
-        * Templating is in JS so dialogs don't make much sense on their own
-          * Could continue the div to dialog conversion (so modal content is inline unless JS running). Don't want to optimize too much for no js anymore anyways
-        * writing the dialog by hand makes sense for non defualt modal styles or users that have another structure but need the scripting part
-      * Solution
-        * Breakup module into two parts the underlying modal scripting (open close trigger) and (conversion modal templating [w. resizer] and as <div>)
-          * Then we can have both without any extra code and seperation
+  ☐ Prevent Browser Scroll

package/js/ui/flipcard.js

@@ -2,14 +2,43 @@
  * @module ui/flipcard
  */
 
+import { ComponentInitializer } from "../utils/system.js";
 import { trimWhitespace } from "@ulu/utils/string.js";
 import { log, logError } from "../utils/class-logger.js";
-import { getName } from "../events/index.js";
-import { getDatasetOptionalJson } from "../utils/dom.js";
-const debugMode = false; // Global dev debug
 
+/**
+ * Flipcard Component Initializer
+ */
+export const initializer = new ComponentInitializer({ 
+  type: "flipcard", 
+  baseAttribute: "data-ulu-flipcard"
+});
+
+/**
+ * Initialize flipcards using data-ulu-flipcard attribute
+ */
+export function init() {
+  initializer.init({
+    withData: true,
+    events: ["pageModified"],
+    setup({ element, data, initialize }) {
+      const options = Object.assign({}, data);
+      const front = element.querySelector(initializer.attributeSelector("front"));
+      const back = element.querySelector(initializer.attributeSelector("back"));
+      (new Flipcard(element, front, back, options));
+      initialize();
+    }
+  });
+}
+
+/**
+ * Flipcard class (creates flipcard instance and behaviors)
+ */
 export class Flipcard {
   static instances = [];
+  /**
+   * Default options for Flipcard
+   */
   static defaults = {
     namespace: "Flipcard",
     proxyClick: {
@@ -18,25 +47,25 @@ export class Flipcard {
       exclude:  "a, input, textarea, button"  // Selectors to avoid closing a flipcard onProxyclick 
     },
   };
-  constructor(container, front, back, config, debug = false) {
+  constructor(container, front, back, config) {
     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);
+    this.setVisibility(false);
     log(this, this);
   }
   toggle() {
-    this.setVisiblity(!this.isOpen);
+    this.setVisibility(!this.isOpen);
   }
   setup() {
     const { uid } = this;
@@ -98,7 +127,7 @@ export class Flipcard {
       <span class="hidden-visually">Show More Information</span>
     `;
   }
-  setVisiblity(visible) {
+  setVisibility(visible) {
     const { back, container, control } = this.elements;
     const state = visible ? "open" : "closed";
     back.style.zIndex = visible ? "10" : "1";
@@ -128,56 +157,7 @@ export class Flipcard {
   }
 }
 
-/**
- * Default data attributes
- */
-export const attrs = {
-  init: "data-ulu-flipcard-init",
-  flipcard: "data-ulu-flipcard",
-  front: "data-ulu-flipcard-front",
-  back: "data-ulu-flipcard-back",
-};
-
-// Utils for selecting things based on attributes
-const attrSelector = key => `[${ attrs[key] }]`;
-const attrSelectorInitial = key => `${ attrSelector(key) }:not([${ attrs.init }])`;
-
-// const containers = document.querySelectorAll('[data-ulu-flipcard]');
-const instances = [];
-
-export function init() {
-  document.addEventListener(getName("pageModified"), setup);
-  setup();
-}
 
-export function setup() {
-  const builders = document.querySelectorAll(attrSelectorInitial("flipcard"));
-  builders.forEach(setupFlipcard);
-}
-
-// containers.forEach(init);
-
-function setupFlipcard(container) {
-  container.setAttribute(attrs.init, "");
-  const options = getDatasetOptionalJson(container, "uluFlipcard");
-  const config = Object.assign({},  options);
-  const front = container.querySelector(attrSelectorInitial("front"));
-  const back = container.querySelector(attrSelectorInitial("back"));
-  instances.push(new Flipcard(container, front, back, config));
-}
-
-// getDatasetOptionalJson
-function setupSlider(container) {
-  container.setAttribute(attrs.init, "");
-  const options = getDatasetOptionalJson(container, "uluFlipcard");
-  const config = Object.assign({},  options);
-  const elements = {
-    track: container.querySelector(attrSelector("track")),
-    controls: container.querySelector(attrSelector("controls"))
-  };
-  // replace with OverflowScroller when finished removing sitescrollslider
-  instances.push(new SiteScrollSlider(elements, config));
-}
 
 /**
  * Preliminary Notes: