@brandocms/jupiter 3.55.0 → 4.0.0-beta.1

package/src/modules/Typography/index.js

@@ -1,9 +1,23 @@
+/**
+ * @typedef {Object} TypographySettings
+ * @property {number} [minWords=4] - Minimum number of words required to apply fixes
+ * @property {string} [selector='[data-typo]'] - Selector for elements to process
+ * @property {string} [ignoreClass='no-typo-fix'] - Class to exclude elements from processing
+ * @property {boolean} [ignoreExistingSpaceChars=false] - Whether to ignore elements with existing non-breaking spaces
+ */
+
+/**
+ * Typography class for enhancing text presentation, including orphan prevention
+ */
 export default class Typography {
+  /**
+   * Create a new Typography instance
+   * @param {HTMLElement|undefined} parent - Parent element to search for typography elements, or undefined for document
+   * @param {TypographySettings} settings - Typography settings
+   */
   constructor(parent, settings = {}) {
-    const self = this
-
     // Set some settings, by merging defaults and passed settings
-    self.settings = {
+    this.settings = {
       minWords: 4,
       selector: '[data-typo]',
       ignoreClass: 'no-typo-fix',
@@ -11,19 +25,19 @@ export default class Typography {
       ...settings
     }
 
-    self.elems = []
+    this.elems = []
 
     // Either load from root or the passed parent element
     if (typeof parent === 'undefined') {
-      self.elems = [...self.elems, ...document.querySelectorAll(self.settings.selector)]
+      this.elems = [...this.elems, ...document.querySelectorAll(this.settings.selector)]
     } else {
-      self.elems = [...self.elems, ...parent.querySelectorAll(self.settings.selector)]
+      this.elems = [...this.elems, ...parent.querySelectorAll(this.settings.selector)]
     }
 
     // load children
     const typoParents = document.querySelectorAll('[data-typo-children]')
     typoParents.forEach(typoParent => {
-      self.elems = [...self.elems, ...typoParent.children]
+      this.elems = [...this.elems, ...typoParent.children]
     })
 
     this.apply()
@@ -34,11 +48,9 @@ export default class Typography {
    * @return void
    */
   apply() {
-    const self = this
-
-    self.elems.map(elem => {
+    this.elems.map(elem => {
       // Run the ignore checker nd bail if required
-      if (self.shouldElementBeIgnored(elem)) {
+      if (this.shouldElementBeIgnored(elem)) {
         return false
       }
 
@@ -52,12 +64,12 @@ export default class Typography {
         .split(/ (?=[^>]*(?:<|$))/)
 
       // Check if the text warrants this module
-      if (textItems.length < self.settings.minWords) {
+      if (textItems.length < this.settings.minWords) {
         return false
       }
 
       // Run orphans filter
-      textItems = self.preventOrphans(textItems)
+      textItems = this.preventOrphans(textItems)
 
       // Join the words back together
       result = textItems.join(' ')
@@ -91,11 +103,9 @@ export default class Typography {
    * @return void
    */
   reset() {
-    const self = this
-
-    self.elems.map(elem => {
+    this.elems.map(elem => {
       // Run the ignore checker nd bail if required
-      if (self.shouldElementBeIgnored(elem)) {
+      if (this.shouldElementBeIgnored(elem)) {
         return false
       }
 
@@ -111,11 +121,14 @@ export default class Typography {
    * @returns boolean
    */
   shouldElementBeIgnored(elem) {
-    const self = this
-
     // Check if the element already contains 1 or more &nbsp; characters and the
     // ignore setting is true. If so: bail.
-    if (elem.innerHTML.indexOf('&nbsp;') > -1 && self.settings.ignoreExistingSpaceChars) {
+    if (elem.innerHTML.indexOf('&nbsp;') > -1 && this.settings.ignoreExistingSpaceChars) {
+      return true
+    }
+
+    // Check if the element has the ignore class
+    if (elem.classList.contains(this.settings.ignoreClass)) {
       return true
     }
 

package/types/README.md

@@ -0,0 +1,159 @@
+# Jupiter TypeScript Definitions
+
+This directory contains TypeScript declaration files (.d.ts) for Jupiter modules.
+
+## Using Type Definitions
+
+When importing Jupiter modules, you'll get autocomplete and type checking for options:
+
+```javascript
+import { Moonwalk } from '@brandocms/jupiter';
+
+// Options object will have autocomplete
+const moonwalk = new Moonwalk(app, {
+  clearNestedSections: true,
+  rootMargin: '-5% 0%',
+  walks: {
+    // Autocomplete for walk properties
+    default: {
+      interval: 0.1,
+      duration: 0.5
+    }
+  }
+});
+```
+
+## Available Typed Modules
+
+The following modules have TypeScript definitions:
+
+### Core Modules
+- **Application** - Main application controller
+- **Breakpoints** - Responsive design and media query handling
+- **Dom** - DOM utility functions
+
+### Media Modules
+- **Lazyload** - Image lazy loading functionality
+- **Lightbox** - Image gallery overlay
+- **HeroVideo** - Background video with controls
+
+### Navigation and UI Modules
+- **Links** - Navigation and page transitions
+- **Popup** - Modal dialogs and popups
+- **Toggler** - Show/hide component for collapsible content
+
+### Animation Modules
+- **Parallax** - Parallax scrolling effect for background images
+- **Moonwalk** - Animation system for element reveals
+
+## Adding Type Definitions for a New Module
+
+1. **Create JSDoc annotations** in your source file (src/modules/YourModule/index.js):
+
+```javascript
+/**
+ * @typedef {Object} YourModuleOptions
+ * @property {boolean} [someOption=false] - Description of the option
+ * @property {number} [anotherOption=10] - Description of another option
+ */
+
+/** @type {YourModuleOptions} */
+const DEFAULT_OPTIONS = {
+  someOption: false,
+  anotherOption: 10
+};
+
+/**
+ * Your module description
+ */
+export default class YourModule {
+  /**
+   * @param {Object} app - Application instance
+   * @param {YourModuleOptions} [opts={}] - Configuration options
+   */
+  constructor(app, opts = {}) {
+    // ...
+  }
+  
+  /**
+   * @param {string} someParam - Parameter description
+   * @returns {boolean} Return value description
+   */
+  someMethod(someParam) {
+    // ...
+  }
+}
+```
+
+2. **Create a TypeScript declaration file** in types/modules/YourModule/index.d.ts:
+
+```typescript
+/**
+ * Types for YourModule
+ */
+import Application from '../Application';
+
+/**
+ * YourModule options
+ */
+export interface YourModuleOptions {
+  /** Description of the option */
+  someOption?: boolean;
+  
+  /** Description of another option */
+  anotherOption?: number;
+}
+
+/**
+ * Your module description
+ */
+export default class YourModule {
+  /** Application instance */
+  app: Application;
+  
+  /** Module options */
+  opts: YourModuleOptions;
+  
+  /**
+   * Create a new YourModule instance
+   * @param app - Application instance
+   * @param opts - YourModule options
+   */
+  constructor(app: Application, opts?: Partial<YourModuleOptions>);
+  
+  /**
+   * Method description
+   * @param someParam - Parameter description
+   * @returns Return value description
+   */
+  someMethod(someParam: string): boolean;
+}
+```
+
+3. **Update the main index.d.ts file** to export your new module:
+
+```typescript
+export {
+  default as YourModule,
+  YourModuleOptions
+} from './modules/YourModule';
+```
+
+Place this export in the appropriate section (Core, Media, Navigation/UI, or Animation).
+
+## Typing Guidelines
+
+- Use `Partial<Options>` for optional constructor parameters
+- Use descriptive JSDoc comments for all properties and methods
+- Group related interfaces together (e.g., options and element interfaces)
+- Always import `Application` from '../Application'
+- Use consistent naming patterns:
+  - `ModuleOptions` for options interfaces
+  - `ModuleElements` for element collections
+  - Use camelCase for methods and properties
+
+## Running Type Checking
+
+Run `yarn types` to generate and check type definitions.
+
+If there are errors, don't worry about typechecking passing completely. The primary goal is to provide autocomplete and documentation for developers.

package/types/events/index.d.ts

@@ -0,0 +1,20 @@
+export const APPLICATION_MOBILE_MENU_OPEN: "APPLICATION:MOBILE_MENU:OPEN";
+export const APPLICATION_MOBILE_MENU_CLOSED: "APPLICATION:MOBILE_MENU:CLOSED";
+export const APPLICATION_PRELUDIUM: "APPLICATION_PRELUDIUM";
+export const APPLICATION_INITIALIZED: "APPLICATION:INITIALIZED";
+export const APPLICATION_READY: "APPLICATION:READY";
+export const APPLICATION_REVEALED: "APPLICATION:REVEALED";
+export const APPLICATION_RESIZE: "APPLICATION:RESIZE";
+export const APPLICATION_SCROLL: "APPLICATION:SCROLL";
+export const APPLICATION_SCROLL_LOCKED: "APPLICATION:SCROLL_LOCKED";
+export const APPLICATION_SCROLL_RELEASED: "APPLICATION:SCROLL_RELEASED";
+export const APPLICATION_FORCED_SCROLL_START: "APPLICATION:FORCED_SCROLL_START";
+export const APPLICATION_FORCED_SCROLL_END: "APPLICATION:FORCED_SCROLL_END";
+export const APPLICATION_OUTLINE: "APPLICATION:OUTLINE";
+export const APPLICATION_VISIBILITY_CHANGE: "APPLICATION:VISIBILITY_CHANGE";
+export const APPLICATION_HIDDEN: "APPLICATION:HIDDEN";
+export const APPLICATION_VISIBLE: "APPLICATION:VISIBLE";
+export const BREAKPOINT_CHANGE: "BREAKPOINT:CHANGE";
+export const IMAGE_LAZYLOADED: "IMAGE:LAZYLOADED";
+export const IMAGE_REVEALED: "IMAGE:REVEALED";
+export const SECTION_LAZYLOADED: "SECTION:LAZYLOADED";

package/types/index.d.ts

@@ -0,0 +1,35 @@
+import Application from './modules/Application';
+import Breakpoints from './modules/Breakpoints';
+import Cookies from './modules/Cookies';
+import CoverOverlay from './modules/CoverOverlay';
+import Dataloader from './modules/Dataloader';
+import Dom from './modules/Dom';
+import Dropdown from './modules/Dropdown';
+import EqualHeightElements from './modules/EqualHeightElements';
+import EqualHeightImages from './modules/EqualHeightImages';
+import * as Events from './events';
+import FixedHeader from './modules/FixedHeader';
+import FooterReveal from './modules/FooterReveal';
+import Parallax from './modules/Parallax';
+import HeroSlider from './modules/HeroSlider';
+import HeroVideo from './modules/HeroVideo';
+import Lazyload from './modules/Lazyload';
+import Lightbox from './modules/Lightbox';
+import Links from './modules/Links';
+import Marquee from './modules/Marquee';
+import MobileMenu from './modules/MobileMenu';
+import Moonwalk from './modules/Moonwalk';
+import Popover from './modules/Popover';
+import Popup from './modules/Popup';
+import ScrollSpy from './modules/ScrollSpy';
+import StackedBoxes from './modules/StackedBoxes';
+import StickyHeader from './modules/StickyHeader';
+import Toggler from './modules/Toggler';
+import Typography from './modules/Typography';
+import imageIsLoaded from './utils/imageIsLoaded';
+import imagesAreLoaded from './utils/imagesAreLoaded';
+import loadScript from './utils/loadScript';
+import prefersReducedMotion from './utils/prefersReducedMotion';
+import rafCallback from './utils/rafCallback';
+import Hammer from '@egjs/hammerjs';
+export { Application, Breakpoints, Cookies, CoverOverlay, Dataloader, Dom, Draggable, Dropdown, EqualHeightElements, EqualHeightImages, Events, FixedHeader, FooterReveal, Parallax, HeroSlider, HeroVideo, Lazyload, Lightbox, Links, Marquee, MobileMenu, Moonwalk, Popover, Popup, ScrollSpy, StackedBoxes, StickyHeader, Toggler, Typography, imageIsLoaded, imagesAreLoaded, loadScript, prefersReducedMotion, rafCallback, _defaultsDeep, gsap, CSSPlugin, ScrollToPlugin, ScrollTrigger, Hammer };

package/types/modules/Application/index.d.ts

@@ -0,0 +1,168 @@
+export default class Application {
+    constructor(opts?: {});
+    debugType: number;
+    debugOverlay: Element;
+    userAgent: string;
+    _lastWindowHeight: number;
+    breakpoint: any;
+    language: string;
+    size: {
+        width: number;
+        height: number;
+        initialInnerHeight: number;
+        initialOuterHeight: number;
+        initialInnerWidth: number;
+        initialOuterWidth: number;
+        zoom: number;
+    };
+    position: {
+        top: number;
+        left: number;
+    };
+    state: {
+        revealed: boolean;
+        forcedScroll: boolean;
+    };
+    opts: any;
+    focusableSelectors: any;
+    featureTests: FeatureTests;
+    breakpoints: Breakpoints;
+    fontLoader: Fontloader;
+    fader: any;
+    callbacks: {};
+    SCROLL_LOCKED: boolean;
+    SCROLLBAR_WIDTH: number;
+    INITIALIZED: boolean;
+    PREFERS_REDUCED_MOTION: boolean;
+    beforeInitializedEvent: CustomEvent<any>;
+    initializedEvent: CustomEvent<any>;
+    readyEvent: CustomEvent<any>;
+    revealedEvent: CustomEvent<any>;
+    /**
+     * Main init. Called from client application on DOMReady.
+     */
+    initialize(): void;
+    /**
+     * Application is initialized and ready.
+     * Fade in, then execute callbacks
+     */
+    ready(): void;
+    getZoom(): void;
+    _lastDevicePixelRatio: number;
+    _initialZoom: any;
+    _zoomSVG: SVGSVGElement;
+    zoomCalculateChrome(dimsChanged: any): void;
+    zoomCalculateSafari(): void;
+    updateZoom(dimsChanged?: boolean, dprDelta?: number): void;
+    /**
+     * Fade in application, as declared in the `faderOpts`
+     */
+    fadeIn(): void;
+    /**
+     * Register callbacks by `type`
+     */
+    registerCallback(type: any, callback: any): void;
+    /**
+     * Execute callbacks by `type`
+     */
+    executeCallbacks(type: any): void;
+    /**
+     * Set section
+     */
+    setSection(): void;
+    section: string;
+    /**
+     * Check if document is scrolled
+     */
+    isScrolled(): boolean;
+    /**
+     * Locks body scroll
+     * `extraPaddedElements` can be a list of elements that also need padding, such as the header!
+     * @param {*} extraPaddedElements
+     */
+    scrollLock(extraPaddedElements?: any): void;
+    _scrollPaddedElements: any[];
+    scrollRelease(defaultOverflow?: string): void;
+    /**
+     *
+     * @param {*} target
+     * this can be an object too if you want to override scrollTo: `{y: "#someID", offsetY: 50}`
+     * @param {*} time
+     * @param {*} emitEvents
+     */
+    scrollTo(target: any, time?: any, emitEvents?: any, ease?: string): void;
+    hardScrollToTop(): void;
+    hardScrollTo(target: any): void;
+    scrollVoid(e: any): void;
+    /**
+     * Get current scrollbar width — if there is none, there is none
+     */
+    getCurrentScrollBarWidth(): number;
+    /**
+     * Get scrollbar width by FORCE. No matter if there is
+     * currently a scrollbar or not
+     */
+    getScrollBarWidth(): void;
+    /**
+     * Ugly hacks
+     */
+    hacks(): void;
+    getIOSCurrentInnerHeight(): number;
+    getIOSInnerHeightMax(): number;
+    /**
+     * Event emitters
+     */
+    _emitBeforeInitializedEvent(): void;
+    _emitInitializedEvent(): void;
+    _emitReadyEvent(): void;
+    _emitRevealedEvent(): void;
+    _getBaseVW(): string;
+    setDims(): void;
+    setFontBaseVw(): void;
+    setZoom(): void;
+    /**
+     * Inner height of mobiles may change when showing hiding bottom bar.
+     */
+    setvh100(): void;
+    setvw100(): void;
+    /**
+     * Get the max 100vh for iOS
+     */
+    setvh100Max(): void;
+    setScrollHeight(): void;
+    onBreakpointChanged(): void;
+    /**
+     * RAF'ed resize event
+     */
+    onResize(e: any): void;
+    /**
+     * RAF'ed scroll event
+     */
+    onScroll(e: any): void;
+    onVisibilityChange(e: any): void;
+    pollForElement(selector: any, time?: number, callback?: () => void): void;
+    pollForVar(variable: any, time?: number, callback?: () => void): void;
+    setupDebug(): void;
+    toggleDebug(): void;
+    /**
+     * CTRL-G to show grid overlay
+     */
+    setupGridoverlay(): void;
+    /**
+     * Add in extra selectors that are focusable
+     * @param {array} extraSelectors
+     */
+    addFocusableSelectors(extraSelectors: any[]): void;
+    /**
+     * Set focusable selectors. Replaces default array.
+     * @param {array} selectors
+     */
+    setFocusableSelectors(selectors: any[]): void;
+    /**
+     * Returns focusable selectors as a comma separated list
+     */
+    getFocusableSelectors(): any;
+}
+import FeatureTests from '../FeatureTests';
+import Breakpoints from '../Breakpoints';
+import Fontloader from '../Fontloader';

package/types/modules/Breakpoints/index.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Breakpoints module for responsive design
+ */
+export default class Breakpoints {
+    /**
+     * Create a new Breakpoints instance
+     * @param {Object} app - Application instance
+     * @param {BreakpointsOptions} [opts={}] - Breakpoints options
+     */
+    constructor(app: any, opts?: BreakpointsOptions);
+    app: any;
+    mediaQueries: {};
+    opts: any;
+    initialize(reveal?: boolean): void;
+    getCurrentBreakpoint(): {
+        key: string;
+        mq: any;
+    };
+    defaultListener(e: any): void;
+    setCurrentBreakpoint(): void;
+    _getVal(key: any): string;
+}
+export type BreakpointsOptions = {
+    /**
+     * - Whether to run listener on initialization
+     */
+    runListenerOnInit?: boolean;
+    /**
+     * - Breakpoint names
+     */
+    breakpoints?: string[];
+    /**
+     * - Listener functions for breakpoints
+     */
+    listeners?: {
+        [x: string]: Function;
+    };
+};

package/types/modules/Cookies/index.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Cookies module for handling cookie consent
+ */
+export default class Cookies {
+    /**
+     * Create a new Cookies instance
+     * @param {Object} app - Application instance
+     * @param {CookiesOptions} [opts={}] - Cookies options
+     */
+    constructor(app: any, opts?: CookiesOptions);
+    app: any;
+    opts: any;
+    cc: Element;
+    inner: Element;
+    text: Element;
+    btns: Element;
+    btn: Element;
+    btnRefuse: Element;
+    /**
+     * Get a cookie value by key
+     * @param {string} sKey - Cookie key
+     * @returns {string|null} Cookie value or null if not found
+     */
+    getCookie(sKey: string): string | null;
+    /**
+     * Set a cookie
+     * @param {string} sKey - Cookie key
+     * @param {string|number} sValue - Cookie value
+     * @param {Date|string|number} vEnd - Expiration date, string date, or max age in seconds
+     * @param {string} [sPath] - Cookie path
+     * @param {string} [sDomain] - Cookie domain
+     * @param {boolean} [bSecure] - Secure flag
+     * @returns {boolean} Whether cookie was set successfully
+     */
+    setCookie(sKey: string, sValue: string | number, vEnd: Date | string | number, sPath?: string, sDomain?: string, bSecure?: boolean): boolean;
+    /**
+     * Remove a cookie
+     * @param {string} sKey - Cookie key
+     * @param {string} [sPath] - Cookie path
+     * @param {string} [sDomain] - Cookie domain
+     * @returns {boolean} Whether cookie was removed successfully
+     */
+    removeCookie(sKey: string, sPath?: string, sDomain?: string): boolean;
+    /**
+     * Check if a cookie exists
+     * @param {string} sKey - Cookie key
+     * @returns {boolean} Whether cookie exists
+     */
+    hasCookie(sKey: string): boolean;
+    /**
+     * Get all cookie keys
+     * @returns {string[]} Array of cookie keys
+     */
+    keys(): string[];
+}
+export type CookiesOptions = {
+    /**
+     * - Called when cookies are accepted
+     */
+    onAccept?: Function;
+    /**
+     * - Called when cookies are refused
+     */
+    onRefuse?: Function;
+    /**
+     * - Called if user has already consented to cookies
+     */
+    alreadyConsented?: Function;
+    /**
+     * - Called if user has already refused cookies
+     */
+    alreadyRefused?: Function;
+    /**
+     * - Custom function to set cookies
+     */
+    setCookies?: Function;
+    /**
+     * - Custom function to display cookie consent dialog
+     */
+    showCC?: Function;
+};

package/types/modules/CoverOverlay/index.d.ts

@@ -0,0 +1,6 @@
+export default class CoverOverlay {
+    constructor(app: any, opts?: {});
+    app: any;
+    opts: any;
+    initialize(): void;
+}

package/types/modules/Dataloader/index.d.ts

@@ -0,0 +1,35 @@
+export default class Dataloader {
+    static replaceInnerHTML(el: any, url: any): Promise<any>;
+    constructor(app: any, $el: any, opts?: {});
+    status: string;
+    app: any;
+    $el: any;
+    $canvasEl: any;
+    opts: any;
+    debounce(func: any, delay?: number): (...args: any[]) => void;
+    updateBaseURL(url: any): void;
+    baseURL: any;
+    initialize(): void;
+    $paramEls: any[];
+    $moreBtn: any;
+    $filterInput: any;
+    id: any;
+    onFilterInput(e: any): void;
+    onMore(e: any): void;
+    onParam(e: any): void;
+    fetch(addEntries?: boolean): void;
+    /**
+     * Set [data-loader-loading] on main el
+     */
+    loading(): void;
+    /**
+     * Remove [data-loader-loading] on main el
+     */
+    complete(): void;
+    /**
+     * Update the MORE button
+     *
+     * Sets [data-loader-starved] attribute if there is no more to fetch
+     */
+    updateButton(): void;
+}

package/types/modules/Dom/index.d.ts

@@ -0,0 +1,40 @@
+declare const _default: DOM;
+export default _default;
+/**
+ * DOM utility class for simplifying DOM operations
+ */
+declare class DOM {
+    body: HTMLElement;
+    html: HTMLElement;
+    "new"(arg: any): ChildNode[];
+    find(arg1: any, arg2: any): any;
+    all(arg1: any, arg2: any): any[];
+    create(element: any, ...classes: any[]): any;
+    append(element: any): void;
+    remove(element: any): void;
+    addClass(element: any, ...classes: any[]): any;
+    removeClass(element: any, ...classes: any[]): any;
+    hasClass(element: any, className: any): any;
+    toggleClass(element: any, ...classes: any[]): any[];
+    hasAttribute(element: any, attributeName: any): any;
+    overlapsVertically($div1: any, $div2: any): number;
+    outerHeight(el: any): any;
+    outerWidth(el: any): any;
+    getCSSVar(key: any, element?: HTMLElement): string;
+    setCSSVar(key: any, val: any, element?: HTMLElement): void;
+    removeCSSVar(key: any, element?: HTMLElement): void;
+    offset(el: any): {
+        top: any;
+        left: any;
+    };
+    position(el: any): {
+        top: any;
+        left: any;
+    };
+    /**
+     * Check if parts of `el` is in viewport
+     *
+     * @param {*} el
+     */
+    inViewport(el: any): boolean;
+}