@ulu/frontend 0.0.22 → 0.1.0-beta.0

package/js/ui/slider.js

@@ -28,10 +28,14 @@
 //                              * Will Change use
 
 import maintain from 'ally.js/maintain/_maintain';
-import { log, logError, logWarning } from "../utils/logger.js";
 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";
+
 const debugMode = false; // Global dev debug
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const eventOnce = { once: true };
@@ -50,6 +54,61 @@ const requiredElements = [
   "track", 
   "slides"
 ];
+
+/**
+ * Default data attributes
+ */
+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);
+}
+
+export function setupSlider(container) {
+  container.setAttribute(attrs.init, "");
+  const options = getDatasetOptionalJson(container, "uluScrollSlider");
+  const config = Object.assign({}, defaults, 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]")
+  };
+  // 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) {
+    instances.push(new Slider(elements, config, false));
+  }
+}
+
 export class Slider {
   static instances = [];
   static defaults = {
@@ -61,7 +120,9 @@ 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
   }
   // constructor(container, title, trackContainer, track, slides, config, debug = false) {
@@ -136,7 +197,7 @@ export class Slider {
    * @param {number} duration Duration to wait for complete 
    * @param {Function} beginTransition Css changes to begin/start transtion 
    */
-  ensureTranstionEnds(element, duration, beginTransition) {
+  ensureTransitionEnds(element, duration, beginTransition) {
     return new Promise(resolve => {
       const tid = {};
       // If the transition has started remove the fallback for start
@@ -179,7 +240,7 @@ export class Slider {
     const set = () => track.style.transform = `translateX(-${ x }px)`;
     // tell brwoser we're about to animate
     track.style.willChange =  "transform";
-    return this.ensureTranstionEnds(track, duration, set).then(() => {
+    return this.ensureTransitionEnds(track, duration, set).then(() => {
       // Remove to avoid any issues with optimization
       track.style.willChange =  "auto";
     });
@@ -205,7 +266,7 @@ export class Slider {
     const { options } = this;
     const { element } = slide;
     const duration = visible ? options.transitionDuration : options.transitionDurationExit;
-    return this.ensureTranstionEnds(element, duration, () => {
+    return this.ensureTransitionEnds(element, duration, () => {
       element.style.opacity = visible ? "1" : "0";
     });
   }
@@ -393,6 +454,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");
     button.innerHTML = this.getControlContent(action);
@@ -452,20 +514,20 @@ export class Slider {
     button.addEventListener("click", this.goto.bind(this, index));
     return button;
   }
+  // change to css-icon 
   getControlContent(action) {
+    const classes = this.options[action === "next" ? "iconClassesNext" : "iconClassesPrevious"];
     return `
       <span class="hidden-visually">${ action }</span>
-      <span aria-hidden="true">${ action === 'next' ? '→' : '←' }</span>
+      <span class="${ classes.join(' ') }" aria-hidden="true"></span>
     `;
   }
   getNavContent(number) {
-    return `<span class="hidden-visually">Item</span> <span>${ number }</span>`;
+    return `<span class="hidden-visually">Item ${ number }</span>`;
   }
   emit(name, args) {
     if (this.options.events[name]) {
       this.options.events[name].apply(this, args);
     }
   }
-}
-
-export default Slider;
+}

package/js/ui/tabs.js

@@ -2,91 +2,124 @@
  * @module ui/tabs
  */
 
-// * - Attribute to enable behavior 'data-site-tablist'
-// * - Options can be passed via JSON in data attribute
-// *   - openByUrlHash | Optionally add "openByUrlHash" to have the 
-// *     script open a tab and focus it on page load (and set it in history 
-// *     as they navigate)
-
-
 import AriaTablist from "aria-tablist";
 
-const errorHeader = "Site Tablist [data-site-tablist] error:";
+const initAttr = "data-ulu-tablist-init";
+const errorHeader = "[data-ulu-tablist] error:";
 
 /**
  * Array of current tab instances (exported if you need to interact with them)
  * @type {Array} 
  */
-const instances = [];
-
-// Init all instances currently in page
-window.addEventListener("load", () => {
-  initWithin(document);
-  // Run this on page load, optionally exported for use when page is running
-  instances.forEach(openByCurrentHash);
-});
-
-// Initialize when page updates/changes
-document.addEventListener("pageModified", e => initWithin(e.target));
+export const instances = [];
 
-function initWithin(context) {
-  if (!context) return;
-  const tablists = context.querySelectorAll("[data-site-tablist]");
-  tablists.forEach(init);
+/**
+ * Init all instances currently in document
+ * @param {Object} options Options to serve as defaults
+ */
+export function init(options = {}) {
+  const initial = () => {
+    initWithin(document, options);
+    // Run this on page load, optionally exported for use when page is running
+    instances.forEach(openByCurrentHash);
+  };
+  
+  if (document.readyState === "complete") {
+    initial();
+  } else {
+    window.addEventListener("load", initial);
+  }
+  // Initialize when page updates/changes
+  document.addEventListener("pageModified", e => initWithin(e.target, options));
 }
-function openByCurrentHash({ options, ariaTablist }) {
-  if (options.openByUrlHash) {
-    const { hash } = window.location;
-    if (hash && hash.length > 1) {
-      const possibleId = hash.substring(1);
-      ariaTablist.tabs.forEach(tab => {
-        if (possibleId === tab.id) {
-          ariaTablist.open(tab);
-        }
-      });
-    }
+
+/**
+ * Init all tabs within a certain context
+ * @param {Node} context Element to init within
+ * @param {Object} options Options to serve as defaults
+ */
+export function initWithin(context, options = {}) {
+  if (!context) {
+    console.warn("Missing context to initWithin, skipping init of tabs");
+    return;
   }
+  const tablists = context.querySelectorAll(`[data-ulu-tablist]:not([${ initAttr }])`);
+  tablists.forEach(element => setup(element, options));
 }
-function init(element) {
-  let options = {};
-  const config = {};
+
+/**
+ * 
+ * @param {Node} element Tablist Element
+ * @param {Node} options Options to set as defaults (can be overridden by element dataset options)
+ * @return {Object} Instance object
+ */
+export function setup(element, options = {}) {
+  let elementOptions = {};
   
-  if (element.dataset.siteTablist) {
+  if (element.dataset.uluTablist) {
     try {
-      options = JSON.parse(element.dataset.siteTablist);
+      elementOptions = JSON.parse(element.dataset.uluTablist);
     } catch(e) {
       console.error(errorHeader, "(JSON Parse for options)", element);
     }
   }
-  if (options.vertical) {
+
+  const config = Object.assign({}, options, elementOptions);
+
+  if (config.vertical) {
     config.allArrows = true;
   }
 
   // Need to render the markup before checking height
   //  - used to wait until images had loaded
-  ready();
+  const instance = { element, options };
+  instance.ariaTablist = AriaTablist(element, {
+    onOpen(...args) {
+      args.unshift(instance);
+      handleOpen.apply(null, args);
+    },
+    ...config
+  });
+  instances.push(instance);
 
-  if (options.equalHeights) {
+  if (config.equalHeights) {
     setHeights(element);
   }
+
+  element.setAttribute(initAttr, "");
   
-  function ready() {
-    const instance = { element, options };
-    instance.ariaTablist = AriaTablist(element, {
-      onOpen(...args) {
-        args.unshift(instance);
-        handleOpen.apply(null, args);
-      },
-      ...config
-    });
-    instances.push(instance);
+  return instance;
+}
+
+/**
+ * Opens the a tabpanel if it matches current hash (used in initial init)
+ */
+function openByCurrentHash({ options, ariaTablist }) {
+  if (options.openByUrlHash) {
+    const { hash } = window.location;
+    if (hash && hash.length > 1) {
+      const possibleId = hash.substring(1);
+      ariaTablist.tabs.forEach(tab => {
+        if (possibleId === tab.id) {
+          ariaTablist.open(tab);
+        }
+      });
+    }
   }
 }
+
+/**
+ * Responsible for setting hash on open if option is set
+ */
 function handleOpen({ options }, panel, tab) {
   if (options.openByUrlHash && window.history) {
     window.history.replaceState(null, "", `#${ tab.id }`);
   }
 }
+
+/**
+ * Responsible for creating equal height tab panels
+ */
 function setHeights(element) {
   const tabs = [ ...element.children];
   const panels = tabs.map(n => document.querySelector(`[aria-labelledby="${ n.id }"]`)); 
@@ -105,9 +138,3 @@ function setHeights(element) {
     panels.forEach(panel => panel.style.minHeight = `${ max }px`);
   });
 }
-
-export { instances };
-
-
-
-

package/js/ui/theme-toggle.js

@@ -0,0 +1,129 @@
+// Progressive Enhancement turns select elements into accessible autocomplete fields
+
+// import { getName } from "@ulu/frontend/js/events/index.js";
+import { getName } from "../events/index.js";
+
+const attrs = {
+  trigger: "data-site-theme-toggle",
+  icon: "data-site-theme-toggle-icon",
+  init: "data-site-theme-toggle-init",
+};
+
+const attrSelector = key => `[${ attrs[key] }]`;
+const attrSelectorInitial = key => `${ attrSelector(key) }:not([${ attrs.init }])`;
+
+// @dan change to options and remove options
+// add a preferred print theme option
+export const options = {
+  darkTheme: "theme-dark",
+  lightTheme: "theme-light",
+  defaultTheme: "dark",
+  darkIcon: "fa-solid fa-moon",
+  lightIcon: "fa-solid fa-sun",
+};
+
+const body = document.querySelector("[data-site-theme]");
+let currentTheme = body.classList.contains(options.darkTheme) ? options.darkTheme : options.lightTheme;
+// used to see if machine preference differs from default theme
+const defaultThemeInverse = options.defaultTheme === "dark" ? "light" : "dark";
+
+/**
+ * Initialize everything in document
+ * - This will only initialize elements once, it is safe to call on page changes
+ */
+export function init() {
+  // switch to light theme for printing
+  document.addEventListener(getName("beforePrint"), () => printSetup());
+  // switch back to original theme after printing
+  document.addEventListener(getName("afterPrint"), () => printTearDown());
+  // document.addEventListener(getName("pageModified"), () => setup());
+  setup();
+}
+
+export function setup(context = document) {
+  const body = context.querySelector("[data-site-theme]");
+  // Initial theme on load
+  setupTheme(body);
+  // Add toggle event listener to buttons
+  // @daniel add the init attribute
+  const elements = context.querySelectorAll(attrSelectorInitial("trigger"));
+  elements.forEach(element => {
+    element.setAttribute(attrs.init, "");
+    element.addEventListener("click", () => {
+      changeTheme(body);
+    });
+  });
+  // Initial icon setup
+  changeIcons();
+}
+
+/**
+ * 
+ * @param {Element} body Sets up initial theme on load based on user preference.
+ */
+function setupTheme(body) {
+  const sitePreference = localStorage.getItem("data-theme");
+  const machinePreference = window.matchMedia && window.matchMedia(`(prefers-color-scheme: ${defaultThemeInverse})`).matches;
+  if(sitePreference && sitePreference != currentTheme){
+    // Check if local storage has site specific preference. And that preference is not the default.
+    changeTheme(body);
+  } else if (machinePreference) {
+    // Check if user system preference differs from default theme.
+    changeTheme(body);
+  } 
+}
+
+/**
+ * 
+ * @param {Element} body Changes the theme of the body.
+ */
+function changeTheme(body) {
+  let newTheme;
+  let oldTheme;
+  if (body.classList.contains(options.darkTheme)) {
+    oldTheme = options.darkTheme;
+    newTheme = options.lightTheme;
+  } else if (body.classList.contains(options.lightTheme)) {
+    oldTheme = options.lightTheme;
+    newTheme = options.darkTheme;
+  }
+  body.classList.remove(oldTheme);
+  body.classList.add(newTheme);
+  localStorage.setItem("data-theme", newTheme);
+  currentTheme = newTheme;
+  changeIcons();
+}
+
+/**
+ * 
+ * @param {Element} body Used to check for theme.
+ * @param {Element} context Used to find the icons.
+ */
+function changeIcons(context = document) {
+  const icons = context.querySelectorAll(attrSelectorInitial("icon"));
+  icons.forEach(icon => {
+    if (currentTheme == options.lightTheme) {
+      icon.classList = options.darkIcon;
+    } else {
+      icon.classList = options.lightIcon;
+    }
+  });
+}
+
+// run on beforeprint event
+function printSetup() {
+  const body = document.querySelector("body"); 
+  if (body.classList.contains(options.darkTheme)) {
+    body.classList.remove(options.darkTheme);
+    body.classList.add(options.lightTheme);
+  }
+}
+
+// run on afterprint event
+function printTearDown() {
+  const body = document.querySelector("body"); 
+  if (!body.classList.contains(currentTheme)) {
+    body.classList.remove(options.lightTheme);
+    body.classList.add(options.darkTheme);
+  }
+}