@ulu/frontend 0.1.0-beta.14 → 0.1.0-beta.16

package/js/settings.js

@@ -0,0 +1,78 @@
+/**
+ * @module settings
+ * @description Manages shared configuration for the library.
+ */
+
+// Default configuration settings
+const defaults = {
+  iconClassClose: "css-icon css-icon--close",
+  iconClassDragX: "css-icon css-icon--drag-x",
+  iconClassPrevious: "css-icon  css-icon--angle-left",
+  iconClassNext: "css-icon  css-icon--angle-right"
+};
+
+// Current configuration, initialized with defaults
+let currentSettings = { ...defaults };
+
+/**
+ * Retrieves a copy of the default settings.
+ * @returns {object} A copy of the default settings object.
+ */
+export function getDefaultSettings() {
+  return { ...defaults };
+}
+
+/**
+ * Updates multiple configuration settings.
+ * @param {object} changes An object containing the settings to update.
+ */
+export function updateSettings(changes) {
+  Object.assign(currentSettings, changes);
+}
+
+/**
+ * Retrieves a copy of the current configuration settings.
+ * @returns {object} A copy of the current settings object.
+ */
+export function getSettings() {
+  return { ...currentSettings };
+}
+
+/**
+ * Retrieves a specific configuration setting by key.
+ * @param {string} key The key of the setting to retrieve.
+ * @returns {*} The value of the setting, or undefined if not found.
+ */
+export function getSetting(key) {
+  if (!currentSettings.hasOwnProperty(key)) {
+    console.warn(`Attempted to access non-existent setting: ${key}`);
+    return undefined;
+  }
+  return currentSettings[key];
+}
+
+/**
+ * Updates a specific configuration setting.
+ * @param {string} key The key of the setting to update.
+ * @param {*} value The new value for the setting.
+ */
+export function updateSetting(key, value) {
+  currentSettings[key] = value;
+}
+
+/**
+ * Creates a wrapped string representation of a configuration setting.
+ * This function returns an object with a `toString()` method that, when called,
+ * retrieves the current value of the specified setting. This allows the setting
+ * to be used as a string literal, dynamically retrieving its value.
+ *
+ * @param {string} key The key of the setting to wrap.
+ * @returns {object} An object with a `toString()` method that returns the setting value.
+ */
+export function wrapSettingString(key) {
+  return {
+    toString() {
+      return getSetting(key);
+    }
+  };
+}

package/js/ui/modal-builder.js

@@ -4,6 +4,7 @@
 
 // Note this needs to be run before dialogs are initialized!
 
+import { wrapSettingString } from "../settings.js";
 import { getName } from "../events/index.js";
 import { createElementFromHtml } from "@ulu/utils/browser/dom.js";
 import { Resizer } from "./resizer.js";
@@ -37,8 +38,8 @@ export const defaults = {
   print: false,
   noMinHeight: false,
   class: "",
-  classCloseIcon: "css-icon css-icon--close",
-  classResizerIcon: "css-icon css-icon--drag-x",
+  classCloseIcon: wrapSettingString("iconClassClose"),
+  classResizerIcon: wrapSettingString("iconClassDragX"),
   debug: false,
   templateCloseIcon(config) {
     return `<span class="modal__close-icon ${ config.classCloseIcon }" aria-hidden="true"></span>`;

package/js/ui/overflow-scroller.js

@@ -10,6 +10,7 @@
  * @todo - Document that user could use something like [https://github.com/LachlanArthur/scroll-snap-api/tree/master/src] to have it go between items
  * 
  */
+import { wrapSettingString } from "../settings.js";
 import { hasRequiredProps } from '@ulu/utils/object.js';
 import { logError } from "../utils/class-logger.js";
 const requiredElements = [
@@ -26,8 +27,8 @@ export class OverflowScroller {
     offsetEnd: 100,
     amount: "auto",
     buttonClasses: ["button", "button--icon"],
-    iconClassesPrevious: ["css-icon", "css-icon--angle-left"],
-    iconClassesNext: ["css-icon", "css-icon--angle-right"]
+    iconClassPrevious: wrapSettingString("iconClassPrevious"),
+    iconClassNext: wrapSettingString("iconClassNext"),
   }
   constructor(elements, config) {
     this.options = Object.assign({}, OverflowScroller.defaults, config);
@@ -87,10 +88,10 @@ export class OverflowScroller {
     return button;
   }
   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="${ classes }" aria-hidden="true"></span>
     `;
   }
   onScroll(event) {

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,8 +44,8 @@ export class ProgrammaticModalManager {
     });
   }
   createAndOpen(config, afterCreate) {
-    const { selector, noClickTrigger, removeOnClose } = config;
-    const content = document.querySelector(selector);
+    const { noClickTrigger, removeOnClose, element } = config;
+    const content = getElement(element);
     if (!content.id) {
       content.id = newId();
     }
@@ -57,7 +58,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/slider.js

@@ -27,6 +27,7 @@
 //                            https://dev.opera.com/articles/css-will-change-property/
 //                              * Will Change use
 
+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";
@@ -120,9 +121,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"]
+    buttonClasses: ["button", "button--icon"],
+    iconClassPrevious: wrapSettingString("iconClassPrevious"),
+    iconClassNext: wrapSettingString("iconClassNext"),
     // transition: true
   }
   // constructor(container, title, trackContainer, track, slides, config, debug = false) {
@@ -454,6 +455,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");
@@ -514,12 +516,11 @@ 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"];
+    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.getClass("control-icon") } ${ classes }" aria-hidden="true"></span>
     `;
   }
   getNavContent(number) {

package/js/utils/font-awesome.js

@@ -0,0 +1,18 @@
+/**
+ * @module settings
+ * @description Utility module for setting up Font Awesome
+ */
+
+import { updateSettings } from "../settings.js";
+
+/**
+ * Sets icon settings to Font Awesome icons
+ */
+export function configureIcons() {
+  updateSettings({
+    iconClassClose: "fas fa-xmark",
+    iconClassDragX: "fas fa-solid fa-grip-lines-vertical",
+    iconClassPrevious: "fas fa-solid fa-chevron-left",
+    iconClassNext: "fas fa-solid fa-chevron-right"
+  });
+}

package/js/utils/index.js

@@ -4,4 +4,5 @@ export * as floatingUi from "./floating-ui.js";
 export * as id from "./id.js";
 export * as index from "./index.js";
 export * as pauseYoutubeVideo from "./pause-youtube-video.js";
-export * as fileSave from "./file-save.js";
+export * as fileSave from "./file-save.js";
+export * as fontAwesome from "./font-awesome.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.14", 
+  "version": "0.1.0-beta.16", 
   "description": "Modular Sass Theming Library",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/components/_slider.scss

@@ -37,7 +37,7 @@ $config: (
   "margin-bottom" : 3rem,
   "margin-top" : 1rem,
   "button-icon-offset-x" : 2rem,
-  "button-icon-offset-y" : false,
+  "button-icon-offset-y" : null,
   "button-margin" : 2rem,
   "button-size" : 3rem,
   "button-height": 2.5rem,
@@ -97,11 +97,7 @@ $config: (
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
-  }
-  @if get("button-icon-offset-y") {
-    #{ $prefix-plugin }__control-icon {
-      margin-top: get("button-icon-offset-y");
-    }
+    margin-top: get("button-icon-offset-y");
   }
   #{ $prefix-plugin }__nav {
     display: flex;
@@ -164,19 +160,11 @@ $config: (
   }
   #{ $prefix-plugin }__control-button--previous {
     left: 0;
-    @if get("button-icon-offset-x")  {
-      #{ $prefix-plugin }__control-icon {
-        margin-left: get("button-icon-offset-x");
-      }
-    }
+    margin-left: get("button-icon-offset-x");
   }
   #{ $prefix-plugin }__control-button--next {
     right: 0;
-    @if get("button-icon-offset-x")  {
-      #{ $prefix-plugin }__control-icon {
-        margin-right: get("button-icon-offset-x");
-      }
-    }
+    margin-right: get("button-icon-offset-x");
   }
   #{ $prefix }--inset-controls {
     #{ $prefix }__slide-gap-for-controls {
@@ -186,20 +174,11 @@ $config: (
     }
     #{ $prefix-plugin }__control-button--previous {
       left: 0;
-      @if get("button-icon-offset-x")  {
-        &#{ $prefix-plugin }__control-icon {
-          margin-left: get("button-icon-offset-x");
-          
-        }
-      }
+      margin-left: get("button-icon-offset-x");
     }
     #{ $prefix-plugin }__control-button--next {
       right: 0;
-      @if get("button-icon-offset-x")  {
-        &#{ $prefix-plugin }__control-icon {
-          margin-right: get("button-icon-offset-x");
-        }
-      }
+      margin-right: get("button-icon-offset-x");
     }
   }
 }

package/types/index.d.ts

@@ -1,3 +1,4 @@
+export * as settings from "./settings.js";
 export * as events from "./events/index.js";
 export * as ui from "./ui/index.js";
 export * as utils from "./utils/index.js";

package/types/settings.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Retrieves a copy of the default settings.
+ * @returns {object} A copy of the default settings object.
+ */
+export function getDefaultSettings(): object;
+/**
+ * Updates multiple configuration settings.
+ * @param {object} changes An object containing the settings to update.
+ */
+export function updateSettings(changes: object): void;
+/**
+ * Retrieves a copy of the current configuration settings.
+ * @returns {object} A copy of the current settings object.
+ */
+export function getSettings(): object;
+/**
+ * Retrieves a specific configuration setting by key.
+ * @param {string} key The key of the setting to retrieve.
+ * @returns {*} The value of the setting, or undefined if not found.
+ */
+export function getSetting(key: string): any;
+/**
+ * Updates a specific configuration setting.
+ * @param {string} key The key of the setting to update.
+ * @param {*} value The new value for the setting.
+ */
+export function updateSetting(key: string, value: any): void;
+/**
+ * Creates a wrapped string representation of a configuration setting.
+ * This function returns an object with a `toString()` method that, when called,
+ * retrieves the current value of the specified setting. This allows the setting
+ * to be used as a string literal, dynamically retrieving its value.
+ *
+ * @param {string} key The key of the setting to wrap.
+ * @returns {object} An object with a `toString()` method that returns the setting value.
+ */
+export function wrapSettingString(key: string): object;
+//# sourceMappingURL=settings.d.ts.map

package/types/settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../js/settings.js"],"names":[],"mappings":"AAgBA;;;GAGG;AACH,sCAFa,MAAM,CAIlB;AAED;;;GAGG;AACH,wCAFW,MAAM,QAIhB;AAED;;;GAGG;AACH,+BAFa,MAAM,CAIlB;AAED;;;;GAIG;AACH,gCAHW,MAAM,OAShB;AAED;;;;GAIG;AACH,mCAHW,MAAM,oBAKhB;AAED;;;;;;;;GAQG;AACH,uCAHW,MAAM,GACJ,MAAM,CAQlB"}

package/types/ui/modal-builder.d.ts

@@ -38,8 +38,8 @@ export namespace defaults {
     export let noMinHeight: boolean;
     let _class: string;
     export { _class as class };
-    export let classCloseIcon: string;
-    export let classResizerIcon: string;
+    export let classCloseIcon: any;
+    export let classResizerIcon: any;
     export let debug: boolean;
     export function templateCloseIcon(config: any): string;
     export function templateResizerIcon(config: any): string;

package/types/ui/modal-builder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../js/ui/modal-builder.js"],"names":[],"mappings":"AA+FA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAGC;AAED;;GAEG;AACH,8BAGC;AAED;;;GAGG;AACH,sCAFW,IAAI,QAMd;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EAmDd;;;;;;;;;;;;;;;;;;IA5IC,uDAEC;IACD,yDAEC;IACD;;;;;OAKG;IACH,0DAmCC"}
+{"version":3,"file":"modal-builder.d.ts","sourceRoot":"","sources":["../../js/ui/modal-builder.js"],"names":[],"mappings":"AAgGA;;GAEG;AACH,gDAEC;AAED;;;GAGG;AACH,6BAGC;AAED;;GAEG;AACH,8BAGC;AAED;;;GAGG;AACH,sCAFW,IAAI,QAMd;AAED;;;;GAIG;AACH,oCAHW,IAAI;;EAmDd;;;;;;;;;;;;;;;;;;IA5IC,uDAEC;IACD,yDAEC;IACD;;;;;OAKG;IACH,0DAmCC"}

package/types/ui/overflow-scroller.d.ts

@@ -8,8 +8,8 @@ export class OverflowScroller {
         offsetEnd: number;
         amount: string;
         buttonClasses: string[];
-        iconClassesPrevious: string[];
-        iconClassesNext: string[];
+        iconClassPrevious: any;
+        iconClassNext: any;
     };
     constructor(elements: any, config: any);
     options: any;

package/types/ui/overflow-scroller.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overflow-scroller.d.ts","sourceRoot":"","sources":["../../js/ui/overflow-scroller.js"],"names":[],"mappings":"AAkBA;IACE,wBAAsB;IACtB;;;;;;;;;;MAUC;IACD,wCAeC;IAdC,aAAmE;IAInE,cAGC;IACD,qBAAuB;IACvB,yBAA2B;IAC3B,gCAA4C;IAK9C,sBAGC;IADC,qBAAwD;IAE1D;;;;;;MA2BC;IACD,oDAQC;IACD,uCAMC;IACD,2BAGC;IACD,2BAiBC;IACD,8CAeC;IACD,6BAaC;IACD,aAMC;IACD,iBAMC;IACD,6BAGC;CACF"}
+{"version":3,"file":"overflow-scroller.d.ts","sourceRoot":"","sources":["../../js/ui/overflow-scroller.js"],"names":[],"mappings":"AAmBA;IACE,wBAAsB;IACtB;;;;;;;;;;MAUC;IACD,wCAeC;IAdC,aAAmE;IAInE,cAGC;IACD,qBAAuB;IACvB,yBAA2B;IAC3B,gCAA4C;IAK9C,sBAGC;IADC,qBAAwD;IAE1D;;;;;;MA2BC;IACD,oDAQC;IACD,uCAMC;IACD,2BAGC;IACD,2BAiBC;IACD,8CAeC;IACD,6BAaC;IACD,aAMC;IACD,iBAMC;IACD,6BAGC;CACF"}

package/types/ui/slider.d.ts

@@ -20,8 +20,8 @@ export class Slider {
         transitionDurationExit: number;
         transitionTimingFunction: string;
         buttonClasses: string[];
-        iconClassesPrevious: string[];
-        iconClassesNext: string[];
+        iconClassPrevious: any;
+        iconClassNext: any;
     };
     constructor(elements: any, config: any, debug?: boolean);
     debug: boolean;

package/types/ui/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../js/ui/slider.js"],"names":[],"mappings":"AA8EA,6BAGC;AAED,8BAGC;AAED,kDAqBC;;;;;;;;AAED;IACE,wBAAsB;IACtB;;;;;;;;;;;;MAaC;IAED,yDAiCC;IA/BC,eAA+B;IAC/B,aAAsB;IACtB;;;;MAAiB;IACjB,WAAiB;IACjB,uBAA0B;IAQ1B;;;;QAME;IACF,cAIC;IAED;;;cACuF;IAMzF;;OAEG;IACH,qBAKC;IACD;;OAEG;IACH,2BAOC;IACD;;OAEG;IACH,uBAMC;IACD;;;;;;OAMG;IACH,8BAJW,MAAM,YACN,MAAM,kCAqChB;IACD;;OAEG;IACH,wCASC;IACD;;;OAGG;IACH,oDASC;IACD;;OAEG;IACH,yCAOC;IACD;;OAEG;IACH;;;;;;sBAoDC;IACD;;OAEG;IACH;;;sBAUC;IACD;;OAEG;IACH;;;YAOC;IACD,qDA0CC;IACD,cAYC;IACD,+BAKC;IACD,qCAOC;IACD,mBAQC;IACD,mBASC;IACD,yCASC;IACD,oDASC;IACD;;;;;;MAwBC;IACD;;;;MAmBC;IACD,2DAQC;IAED,uCAMC;IACD,mCAEC;IACD,iCAIC;CACF"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../js/ui/slider.js"],"names":[],"mappings":"AA+EA,6BAGC;AAED,8BAGC;AAED,kDAqBC;;;;;;;;AAED;IACE,wBAAsB;IACtB;;;;;;;;;;;;MAaC;IAED,yDAiCC;IA/BC,eAA+B;IAC/B,aAAsB;IACtB;;;;MAAiB;IACjB,WAAiB;IACjB,uBAA0B;IAQ1B;;;;QAME;IACF,cAIC;IAED;;;cACuF;IAMzF;;OAEG;IACH,qBAKC;IACD;;OAEG;IACH,2BAOC;IACD;;OAEG;IACH,uBAMC;IACD;;;;;;OAMG;IACH,8BAJW,MAAM,YACN,MAAM,kCAqChB;IACD;;OAEG;IACH,wCASC;IACD;;;OAGG;IACH,oDASC;IACD;;OAEG;IACH,yCAOC;IACD;;OAEG;IACH;;;;;;sBAoDC;IACD;;OAEG;IACH;;;sBAUC;IACD;;OAEG;IACH;;;YAOC;IACD,qDA0CC;IACD,cAYC;IACD,+BAKC;IACD,qCAOC;IACD,mBAQC;IACD,mBASC;IACD,yCASC;IACD,oDAUC;IACD;;;;;;MAwBC;IACD;;;;MAmBC;IACD,2DAQC;IACD,uCAMC;IACD,mCAEC;IACD,iCAIC;CACF"}

package/types/utils/font-awesome.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Sets icon settings to Font Awesome icons
+ */
+export function configureIcons(): void;
+//# sourceMappingURL=font-awesome.d.ts.map

package/types/utils/font-awesome.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-awesome.d.ts","sourceRoot":"","sources":["../../js/utils/font-awesome.js"],"names":[],"mappings":"AAOA;;GAEG;AACH,uCAOC"}

package/types/utils/index.d.ts

@@ -5,5 +5,6 @@ export * as id from "./id.js";
 export * as index from "./index.js";
 export * as pauseYoutubeVideo from "./pause-youtube-video.js";
 export * as fileSave from "./file-save.js";
+export * as fontAwesome from "./font-awesome.js";
 declare namespace ___Users_joescherben_Personal_Projects_ULU_frontend_js_utils_index_ { }
 //# sourceMappingURL=index.d.ts.map