jcore-utils

JCORE-Utils (jUtils) is a collection of handy JavaScript utility scripts for DOM manipulation, UI behaviors, and common frontend tasks. It is designed to be lightweight, modular, and easy to integrate into any browser-based project.

Features

• Sticky Elements: Easily make elements sticky on scroll with optional spacers.
• Scroll Detection: Add classes and CSS variables based on scroll position and direction.
• Height Synchronization: Dynamically set CSS variables for element heights.
• Toggle System: Flexible toggling of classes on elements via click, hover, or focus, with group and timeout support.
• Helper Functions: Utilities for querying elements, debouncing, focus detection, and more.

Installation

pnpm add @jcodigital/jcore-utils
# or
npm install @jcodigital/jcore-utils
# or
yarn add @jcodigital/jcore-utils

Usage

Bundle the library in your project (see the build script for browser bundling). The main entry point will automatically initialize all utilities on DOMContentLoaded.

import "@jcodigital/jcore-utils";

Or, if you want to initialize specific features manually:

import { scrollInit } from "@jcodigital/jcore-utils/dist/scroll";
import { toggleInit } from "@jcodigital/jcore-utils/dist/toggle";
import { heightInit } from "@jcodigital/jcore-utils/dist/height";

scrollInit();
toggleInit();
heightInit();

API Reference

Sticky Elements

Add data-jsticky to any element to make it sticky when scrolling past its position. Optionally, add data-jsticky-no-spacer to disable the automatic spacer.

<div data-jsticky>Sticky Header</div>

Scroll Detection

Add data-jscroll to elements to enable scroll-based class toggling and CSS variable updates.

• data-threshold: (optional) Number of pixels to trigger up/down classes (default: 75)
• data-scrollstart: (optional) Scroll position to toggle the scrollTop class

<nav data-jscroll data-threshold="100" data-scrollstart="50">...</nav>

Classes added:

• scrollActive: Always present when enabled
• scrollTop: When above scrollstart
• scrollUp / scrollDown: When scrolling up/down past the threshold

CSS variable:

• --jutils-height: Set to the element's height

Height Synchronization

Add data-jheight to an element to set a CSS variable with its height on itself and/or target elements.

• data-jheight: (optional) CSS selector(s) for target elements (comma-separated)
• data-name: (optional) Name for the CSS variable (default: jcore-height)

<div data-jheight="#target" data-name="header-height">Header</div>
<div id="target" style="height:var(--header-height)"></div>

Toggle System

Add data-jtoggle to elements to enable toggling classes on targets via click, hover, or focus.

• data-class: (optional) Class to toggle (default: toggle)
• data-timeout: (optional) Timeout for activation/deactivation (ms)
• data-group: (optional) Group name for exclusive toggling
• data-jhover, data-jfocus: Enable hover/focus triggers

Targets are specified via data-jtoggle (selector or "parent"). Triggers can be set with data-jtrigger.

<button data-jtoggle="#menu" data-class="open" data-group="nav">Menu</button>
<div id="menu">...</div>

Helper Functions

You can import and use helper functions directly:

• getHTMLElements(selector: string): HTMLElement[]
• getHTMLTargets(element: HTMLElement, key: string): HTMLElement[]
• getNumericDataValue(value: string | undefined, defaultValue: number): number
• debounce(func: Function, timeout = 300): Function
• isFocusable(el: HTMLElement): boolean

Development

• Format code: pnpm run format
• Lint code: pnpm run lint
• Build: pnpm run build
• Watch: pnpm run watch

License

GPL-3.0-or-later

Author

JCO Digital [email protected]

Links

• GitHub Repository
• Report Issues