@ulu/frontend 0.1.0-beta.6 → 0.1.0-beta.60

package/js/ui/programmatic-modal.js

@@ -5,6 +5,7 @@
 
 import { getName, dispatch } from "../events/index.js";
 import { newId } from "../utils/id.js";
+import { getElement } from "../utils/dom.js";
 import { buildModal } from "./modal-builder.js";
 
 export class ProgrammaticModalManager {
@@ -43,12 +44,17 @@ export class ProgrammaticModalManager {
     });
   }
   createAndOpen(config, afterCreate) {
-    const { selector, noClickTrigger, removeOnClose } = config;
-    const content = document.querySelector(selector);
+    const { noClickTrigger, removeOnClose, element, classes } = config;
+    const content = getElement(element);
     if (!content.id) {
       content.id = newId();
     }
 
+    // Added to match original jquery module api
+    if (classes) {
+      content.classList.add(...classes);
+    }
+
     let trigger;
     if (!noClickTrigger) {
       trigger = this.cachedTrigger;
@@ -57,7 +63,7 @@ export class ProgrammaticModalManager {
     }
 
     if (!content) {
-      console.error("No element found from config.selector. ", config);
+      console.error("No element found from config.element. ", config);
       return;
     }
     const { modal } = buildModal(content, config.modal);

package/js/ui/proxy-click.js

@@ -1,26 +1,27 @@
 /**
  * @module ui/proxy-click
+ * @description Used for cards and things that look like they should be clickable 
+ * even though the link in their content is the only clickable element. This way 
+ * the entire cards content doesn't need to be in a link (which isn't accessible). 
+ * 
+ * The script allows only for clicks with a duration of 250ms to avoid conflict 
+ * with a user selecting text. Works with either links or buttons because it just 
+ * uses the elements .click(). Uses data-attributes for selection by default.
  */
 
+import { ComponentInitializer } from "../utils/system.js";
 
-// Used for cards and things that look like they should be clickable even 
-// though the link in their content is the only clickable element. This way the 
-// entire cards content doesn't need to be in a link (which isn't accessible)
-// - The script allows only for clicks with a duration of 250ms to avoid 
-//   conflict with a user selecting text.
-// - Works with either links or buttons because it just uses the elements .click()
-// - Uses data-attributes for selection
-import { getName } from "../events/index.js";
-import { getDatasetOptionalJson } from "../utils/dom.js";
-
-const attrs = {
-  trigger: "data-ulu-proxy-click",
-  init: "data-ulu-proxy-click-init",
-};
-
-const attrSelector = key => `[${ attrs[key] }]`;
-const attrSelectorInitial = key => `${ attrSelector(key) }:not([${ attrs.init }])`;
+/**
+ * Proxy Click Component Initializer
+ */
+export const initializer = new ComponentInitializer({ 
+  type: "proxy-click", 
+  baseAttribute: "data-ulu-proxy-click"
+});
 
+/**
+ * Default options
+ */
 export const defaults = {
   selector: "[data-ulu-proxy-click-source]",
   selectorPreventBase: "input, select, textarea, button, a, [tabindex='-1']",
@@ -32,7 +33,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);
@@ -42,26 +43,39 @@ 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();
-}
-
-export function setup(context = document) {
-  const proxies = context.querySelectorAll(attrSelectorInitial("trigger"));
-  proxies.forEach(proxy => {
-    const elOptions = getDatasetOptionalJson(proxy, "siteProxyClick");
-    const options = Object.assign({}, currentDefaults, elOptions);
-    const child = proxy.querySelector(options.selector);
-    if (child) {
-      attachHandlers(proxy, child, options);
-      proxy.setAttribute(attrs.init, "");
-    } else {
-      console.error("Unable to locate proxy click source", options.selector);
+  initializer.init({
+    withData: true,
+    events: ["pageModified"],
+    setup({ element, data, initialize }) {
+      setupProxy(element, data);
+      initialize();
     }
   });
 }
-export function attachHandlers(proxy, child, options) {
-  const { selectorPreventBase: spb, selectorPrevent: sp } = options;
+
+/**
+ * Setup a single proxy click
+ * @param {Node} proxy The container who's click should proxy the click of inner element with options.selector (defaults to [data-ulu-proxy-click-source])
+ * @param {Object} userOptions Options to override defaults
+ */
+export function setupProxy(proxy, userOptions) {
+  const options = Object.assign({}, currentDefaults, userOptions);
+  const child = proxy.querySelector(options.selector);
+  if (child) {
+    attachHandlers(proxy, child, options);
+  } else {
+    console.error("Unable to locate proxy click source", options.selector);
+  }
+}
+
+/**
+ * Main function for attaching behaviors that enable proxy click
+ * @param {Node} proxy The container who's click should proxy the click of inner element with options.selector (defaults to [data-ulu-proxy-click-source])
+ * @param {Node} child The element who is being proxied and will get clicked if the proxy is clicked (as long as not an interactive element within proxy)
+ * @param {Object} config Merged/final options object
+ */
+export function attachHandlers(proxy, child, config) {
+  const { selectorPreventBase: spb, selectorPrevent: sp } = config;
   const selectorPrevent = `${ spb }${ sp ? `, ${ sp }` : "" }`;
   let start, shouldProxy;
   proxy.addEventListener("mousedown", ({ target, timeStamp }) => {
@@ -72,7 +86,7 @@ export function attachHandlers(proxy, child, options) {
     }
   });
   proxy.addEventListener("mouseup", ({ timeStamp }) => {
-    if (shouldProxy && timeStamp - start < options.mousedownDurationPrevent) {
+    if (shouldProxy && timeStamp - start < config.mousedownDurationPrevent) {
       child.click();
     }
   });

package/js/ui/scroll-slider.js

@@ -2,29 +2,21 @@
  * @module ui/scroll-slider
  */
 
+import { ComponentInitializer } from "../utils/system.js";
 import { OverflowScroller } from "./overflow-scroller.js";
 import { createPager } from "./overflow-scroller-pager.js";
-import { getName } from "../events/index.js";
-import { getDatasetOptionalJson } from "../utils/dom.js";
-
 
 /**
- * Default data attributes
+ * Scroll Slider Component Initializer
  */
-export const attrs = {
-  init: "data-ulu-scroll-slider-init",
-  slider: "data-ulu-scroll-slider",
-  track: "data-ulu-scroll-slider-track",
-  controls: "data-ulu-scroll-slider-control-context"
-};
-
-// Utils for selecting things based on attributes
-const attrSelector = key => `[${ attrs[key] }]`;
-const attrSelectorInitial = key => `${ attrSelector(key) }:not([${ attrs.init }])`;
-
+export const initializer = new ComponentInitializer({ 
+  type: "scroll-slider", 
+  baseAttribute: "data-ulu-scroll-slider"
+});
 
+const attrSelectorTrack = initializer.attributeSelector("track");
+const attrSelectorControls = initializer.attributeSelector("control-context");
 const instances = [];
-
 const defaults = {
   amount: createPager()
 };
@@ -34,23 +26,25 @@ 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();
+  initializer.init({
+    withData: true,
+    events: ["pageModified"],
+    setup({ element, data, initialize }) {
+      setupSlider(element, data);
+      initialize();
+    }
+  });
 }
 
-export function setup() {
-  const builders = document.querySelectorAll(attrSelectorInitial("slider"));
-  builders.forEach(setupSlider);
-}
-
-// getDatasetOptionalJson
-function setupSlider(container) {
-  container.setAttribute(attrs.init, "");
-  const options = getDatasetOptionalJson(container, "uluScrollSlider");
-  const config = Object.assign({}, defaults, options);
+/**
+ * Setup instance of scroll slider based on data-attributes
+ * @param {Node} container The scroll slider container
+ */
+function setupSlider(container, userOptions) {
+  const config = Object.assign({}, defaults, userOptions);
   const elements = {
-    track: container.querySelector(attrSelector("track")),
-    controls: container.querySelector(attrSelector("controls"))
+    track: container.querySelector(attrSelectorTrack),
+    controls: container.querySelector(attrSelectorControls)
   };
   instances.push(new OverflowScroller(elements, config));
 }

package/js/ui/scrollpoint.js

@@ -1,81 +1,45 @@
 /**
  * @module ui/scrollpoint 
+ * @description Module that uses intersection observer to add scrollpoint like behavior.
  */
 
-// Module that uses intersection observer to add scrollpoint like behavior.
-/**
- * TODO:
- *  - Included a group option or attribute (on container)
-//    for things like anchor menus (one active in group at a time).
- * 
- * How to link elements of group
- * <div group={ groupName: test }>
- *   <div point={ groupName: test, mirror: ["#menu-link-1"] }>
- * or
- * <div group={ groupName: test, children: [".selector"] }>
- *   <div class=".selector">
- */
-import { getName } from "../events/index.js";
-import { getDatasetOptionalJson, getElement } from "../utils/dom.js";
+import { ComponentInitializer } from "../utils/system.js";
 import { logError } from "../utils/class-logger.js";
 
+// TODO:
+//  - Included a group option or attribute (on container), for things like anchor menus (one active in group at a time).
+// 
+// How to link elements of group
+// <div group={ groupName: test }>
+//   <div point={ groupName: test, mirror: ["#menu-link-1"] }>
+// or
+// <div group={ groupName: test, children: [".selector"] }>
+//   <div class=".selector">
+
 /**
- * Default data attributes
+ * Scrollpoint Component Initializer
  */
-export const attrs = {
-  init: "data-ulu-scrollpoint-init",
-  /**
-   * Individual scrollpoint
-   */
-  point: "data-ulu-scrollpoint",
-  group: "data-ulu-scrollpoint-group",
-  groupAnchors: "data-ulu-scrollpoint-anchors"
-  // Goes on container for all items
-  // group: "data-ulu-scrollpoint-group"
-};
-
-// 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));
+export const initializer = new ComponentInitializer({ 
+  type: "scrollpoint", 
+  baseAttribute: "data-ulu-scrollpoint"
+});
 
 /**
  * Initialize everything in document
  * - 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 points and groups
- */
-export function setup() {
-  const elements = queryAllInitial("point");
-  // const points = Array.from(elements).map(resolve);
-  // const groups = points
-  //   .filter(({ config }) => config.groupName)
-  //   .reduce((acc, point) => {
-  //     const { groupName } = point.config;
-  //     if (acc.has(groupName)) {
-  //       acc.get(groupName).push(point);
-  //     } else {
-  //       acc.set(groupName, [point]);
-  //     }
-  //   }, new Map());
-  // const singles = points.filter(({ config }) => !config.groupName);
-  // groups.forEach(setupGroup);
-  elements.forEach(element => {
-    const elOptions = getDatasetOptionalJson(element, "uluScrollpoint");
-    const config = Object.assign({}, elOptions);
-    element.setAttribute(attrs.init, "");
-    new Scrollpoint(element, config);
+  initializer.init({
+    withData: true,
+    events: ["pageModified"],
+    setup({ element, data, initialize }) {
+      const config = Object.assign({}, data);
+      (new Scrollpoint(element, config));
+      initialize();
+    }
   });
 }
 
-
-
 /**
  * Single scrollpoint
  * - Note "forward" and "reverse" refer to scroll directions
@@ -141,7 +105,7 @@ export class Scrollpoint {
     /**
      * Attribute name to set state info in
      */
-    attributeName: "data-scrollpoint-state",
+    attributeName: "data-ulu-scrollpoint-state",
     /**
      * Group multiple points, one active at a time (scroll menus)
      */
@@ -191,7 +155,7 @@ export class Scrollpoint {
     };
     this.setupObserver();
     if (options.debug) {
-      console.log("Scrollpoint", this);
+      initializer.log(this);
     }
   }
   getClassname(suffix) {
@@ -233,7 +197,7 @@ export class Scrollpoint {
     };
     const config = this.getObserverOptions();
     if (this.options.debug) {
-      console.log("Scrollpoint (IntersectionObserver)", config);
+      initializer.log("IntersectionObserver (options)", config);
     }
     this.observer = new IntersectionObserver(handler, config);
     this.observer.observe(this.element);

package/js/ui/slider.js

@@ -5,19 +5,22 @@
 // Slider
 // =============================================================================
 
-// Version:                   1.0.10
+// Version:                   1.0.11
 
 // Changes:   
+//                            1.0.11 | Updates for ComponentInitializer
 //                            1.0.10 | Fix bug when two and going in reverse
-//                            1.0.9 | Fix bug when there are only 2 slides (not sliding correctly [revesers because of switchSlide])
-//                                    this is addressed now and should slide infinitly between two slides
-//                            1.0.8 | Change API, to elements object (from individaul arguments),
+//                            1.0.9 | Fix bug when there are only 2 slides (not sliding correctly [reverse because of switchSlide])
+//                                    this is addressed now and should slide infinity between two slides
+//                            1.0.8 | Change API, to elements object (from individual arguments),
 //                                    Add the ability to specify the element to append controls within
 //                            1.0.6 | Add transition class for changes during transition, 
 //                                    add will-change to the transition
-//                            1.0.5 | Fix transtion event difference on windows, convert all 
+//                            1.0.5 | Fix transition event difference on windows, convert all 
 //                                    async stuff to promises and simplify
-//                            1.0.4 | Remove live region annoucement (only used if auto rotate)
+//                            1.0.4 | Remove live region announcement (only used if auto rotate)
+
+// Todo:                      - Create destroy method to cleanup listeners
 
 // Reference:                 https://www.w3.org/WAI/tutorials/carousels/working-example/
 //                            https://www.w3.org/TR/wai-aria-practices/examples/carousel/carousel-1.html#
@@ -27,16 +30,29 @@
 //                            https://dev.opera.com/articles/css-will-change-property/
 //                              * Will Change use
 
+import { ComponentInitializer } from "../utils/system.js";
+import { wrapSettingString } from "../settings.js";
 import maintain from 'ally.js/maintain/_maintain';
 import { hasRequiredProps } from '@ulu/utils/object.js';
 import { trimWhitespace } from "@ulu/utils/string.js";
 import { debounce } from "@ulu/utils/performance.js";
 import { log, logError, logWarning } from "../utils/class-logger.js";
-import { getDatasetOptionalJson } from "../utils/dom.js";
-import { createPager } from "./overflow-scroller-pager.js";
-import { getName } from "../events/index.js";
+import setupSwipeListener from "swipe-listener";
+
+/**
+ * Slider Component Initializer
+ */
+export const initializer = new ComponentInitializer({ 
+  type: "slider", 
+  baseAttribute: "data-ulu-slider"
+});
 
-const debugMode = false; // Global dev debug
+const attrSelectorTrack = initializer.attributeSelector("track");
+const attrSelectorTrackContainer = initializer.attributeSelector("track-container");
+const attrSelectorControlContext = initializer.attributeSelector("control-context");
+const attrSelectorSlide = initializer.attributeSelector("slide");
+
+const instances = [];
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const eventOnce = { once: true };
 const cssDuration = d => `${ d }ms`;
@@ -56,52 +72,34 @@ const requiredElements = [
 ];
 
 /**
- * Default data attributes
+ * Initialize all sliders based on data attribute selectors
  */
-export const attrs = {
-  init: "data-ulu-slider-init",
-  slider: "data-ulu-slider",
-  track: "data-ulu-slider-track",
-  trackContainer: "data-ulu-slider-track-container",
-  controls: "data-ulu-slider-control-context"
-};
-
-// Utils for selecting things based on attributes
-const attrSelector = key => `[${ attrs[key] }]`;
-const attrSelectorInitial = key => `${ attrSelector(key) }:not([${ attrs.init }])`;
-
-const defaults = {
-  amount: createPager()
-};
-
-const instances = [];
-
 export function init() {
-  document.addEventListener(getName("pageModified"), setup);
-  setup();
-}
-
-export function setup() {
-  const builders = document.querySelectorAll(attrSelectorInitial("slider"));
-  builders.forEach(setupSlider);
+  initializer.init({
+    withData: true,
+    events: ["pageModified"],
+    setup({ element, data, initialize }) {
+      setupSlider(element, data);
+      initialize();
+    }
+  });
 }
 
-export function setupSlider(container) {
-  container.setAttribute(attrs.init, "");
-  const options = getDatasetOptionalJson(container, "uluScrollSlider");
-  const config = Object.assign({}, defaults, options);
+/**
+ * Setup single slider instance from querying via data attribute selectors
+ * @param {Node} container The slide container to query children from
+ * @param {Object} options Options for slider class
+ */
+export function setupSlider(container, options) {
+  const config = Object.assign({}, options);
   const elements = {
     container,
-    track: container.querySelector("[data-ulu-slider-track]"),
-    trackContainer: container.querySelector("[data-ulu-slider-track-container]"),
-    controlContext: container.querySelector("[data-ulu-slider-control-context]"),
-    slides: container.querySelectorAll("[data-ulu-slider-slide]")
+    track: container.querySelector(attrSelectorTrack),
+    trackContainer: container.querySelector(attrSelectorTrackContainer),
+    controlContext: container.querySelector(attrSelectorControlContext),
+    slides: container.querySelectorAll(attrSelectorSlide)
   };
-  // Add in any global settings
-  // Object.assign(config, {
-  //   callbacks: {}
-  // });
-  // /
+
   // This was added because there was an issue on the new windows, need to test this
   // config.transitionFade = true;
   if (elements.slides.length) {
@@ -109,8 +107,14 @@ export function setupSlider(container) {
   }
 }
 
+/**
+ * Class that controls slider
+ */
 export class Slider {
   static instances = [];
+  /**
+   * Default options for slider
+   */
   static defaults = {
     classAccessiblyHidden: "hidden-visually",
     namespace: "Slider",
@@ -120,18 +124,22 @@ export class Slider {
     transitionDuration: 700,
     transitionDurationExit: 400,
     transitionTimingFunction: "ease-in-out",
-    buttonClasses: ["Slider__control-icon", "button", "button--icon"],
-    iconClassesPrevious: ["css-icon", "css-icon--angle-left"],
-    iconClassesNext: ["css-icon", "css-icon--angle-right"]
-    // transition: true
+    buttonClasses: ["button", "button--icon"],
+    iconClassPrevious: wrapSettingString("iconClassPrevious"),
+    iconClassNext: wrapSettingString("iconClassNext"),
+    swipeEnabled: true,
+    swipeOptions: {
+      preventScroll: true
+    }
   }
-  // constructor(container, title, trackContainer, track, slides, config, debug = false) {
-  constructor(elements, config, debug = false) {
+  constructor(elements, config) {
     const options = Object.assign({}, Slider.defaults, config);
-    this.debug = debugMode || debug;
     this.options = options;
     this.slide = null;
     this.index = null;
+    this.swipeInstance = null;
+    this.swipeListener = null;
+    this.swipeImageListener = null;
     this.transitioning = false;
 
     if (!hasRequiredProps(requiredElements)) {
@@ -399,13 +407,50 @@ export class Slider {
     const trackCss = trimWhitespace(this.trackCss());
     const trackContainerStyles = trimWhitespace(this.trackContainerStyles());
     const slideCss = trimWhitespace(this.slideCss());
+
     track.setAttribute("style", trackCss);
     trackContainer.setAttribute("style", trackContainerStyles);
+
     this.slides.forEach(slide => {
       slide.element.setAttribute("style", slideCss);
       slide.element.setAttribute('tabindex', '-1');
     });
+    
     container.classList.add(this.getClass());
+
+    if (this.options.swipeEnabled) {
+      this.setupSwipe();
+    }
+  }
+  setupSwipe() {
+    const images = this.elements.track.querySelectorAll("img");
+    
+    // Cache for future destroy
+    // this.swipeInstance = setupSwipeListener(track, {
+    //   preventScroll: true
+    // });
+    this.swipeListener = (event) => {
+      this.onSwipe(event);
+    }
+    this.swipeImageListener = (event) => {
+      event.preventDefault(); // Allow swiping on images
+    };
+    this.slides.forEach(slide => {
+      const { element } = slide;
+      slide.swipeInstance = setupSwipeListener(element, this.options.swipeOptions);
+      element.addEventListener("swipe", this.swipeListener);
+    });
+    
+    images.forEach(image => {
+      image.addEventListener('dragstart', this.swipeImageListener);
+    });
+  }
+  onSwipe(event) {
+    const { directions } = event.detail;
+    const method = directions.left ? "next" : directions.right ? "previous" : null;
+    if (method) {
+      this[method](event);
+    }
   }
   trackContainerStyles() {
     // Crop translated track
@@ -454,6 +499,7 @@ export class Slider {
     const button = document.createElement("button");
     button.classList.add(this.getClass("control-button"));
     button.classList.add(this.getClass(`control-button--${ action }`));
+    
     button.classList.add(...this.options.buttonClasses);
     button.setAttribute("data-slider-control", action);
     button.setAttribute("type", "button");
@@ -509,21 +555,20 @@ export class Slider {
     const button = document.createElement("button");
     button.classList.add(this.getClass("nav-button"));
     button.setAttribute("type", "button");
-    button.innerHTML = this.getNavContent(slide.number);
+    button.innerHTML = this.getNavContent(slide);
     slide.navButton = button; // Add reference to slide object
     button.addEventListener("click", this.goto.bind(this, index));
     return button;
   }
-  // change to css-icon 
   getControlContent(action) {
-    const classes = this.options[action === "next" ? "iconClassesNext" : "iconClassesPrevious"];
+    const classes = this.options[action === "next" ? "iconClassNext" : "iconClassPrevious"];
     return `
-      <span class="hidden-visually">${ action }</span>
-      <span class="${ classes.join(' ') }" aria-hidden="true"></span>
+      <span class="${ this.options.classAccessiblyHidden }">${ action }</span>
+      <span class="${ this.getClass("control-icon") } ${ classes }" aria-hidden="true"></span>
     `;
   }
-  getNavContent(number) {
-    return `<span class="hidden-visually">Item ${ number }</span>`;
+  getNavContent(slide) {
+    return `<span class="${ this.options.classAccessiblyHidden }">Item ${ slide.number }</span>`;
   }
   emit(name, args) {
     if (this.options.events[name]) {