@fiddle-digital/string-tune 1.1.47 → 1.1.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -71,7 +71,7 @@ declare class RenderState {
71
71
  }
72
72
 
73
73
  type ScrollDirection = 'vertical' | 'horizontal';
74
- type ScrollMode = 'smooth' | 'disable' | 'default';
74
+ type ScrollMode = 'smooth' | 'disable' | 'default' | (string & {});
75
75
  /**
76
76
  * Describes current scroll-related state for all calculations and modules.
77
77
  */
@@ -132,6 +132,7 @@ declare class ScrollState {
132
132
  declare class SystemState {
133
133
  fpsTracker: boolean;
134
134
  positionTracker: boolean;
135
+ suppressMasonryResize: boolean;
135
136
  }
136
137
 
137
138
  /**
@@ -230,6 +231,10 @@ interface IStringModule {
230
231
  destroy(): void;
231
232
  /** Called once when the module is initialized. */
232
233
  onInit(): void;
234
+ /** Called once when the module is registered and can subscribe to events. */
235
+ onSubscribe(): void;
236
+ /** Called once when the module is being removed and should unsubscribe. */
237
+ onUnsubscribe(): void;
233
238
  /** Called on each frame with current scroll and state data. */
234
239
  onFrame(data: StringData): void;
235
240
  /** Called when the window or layout is resized. */
@@ -240,7 +245,7 @@ interface IStringModule {
240
245
  onDOMRebuild(): void;
241
246
  /** Called when scroll position changes. */
242
247
  onScroll(data: StringData): void;
243
- /** Called when scroll change diraction. */
248
+ /** Called when scroll change direction. */
244
249
  onDirectionChange(): void;
245
250
  /** Called when scrolling starts (user begins scroll). */
246
251
  onScrollStart(): void;
@@ -529,6 +534,14 @@ declare class HoverTracker {
529
534
  activeObjects(): StringObject[];
530
535
  }
531
536
 
537
+ interface ISettingsChangeData {
538
+ isDesktop: boolean;
539
+ isForceRebuild: boolean;
540
+ widthChanged: boolean;
541
+ heightChanged: boolean;
542
+ scrollHeightChanged: boolean;
543
+ }
544
+
532
545
  /**
533
546
  * Base interface for injectable core tools in the String system.
534
547
  * Each tool takes input and returns output (transform, extract, calculate).
@@ -1007,31 +1020,9 @@ interface SplitOptionsParserInput {
1007
1020
  attributeValue: string | null;
1008
1021
  }
1009
1022
 
1010
- /**
1011
- * Tool responsible for parsing the string value of a split attribute
1012
- * (e.g., "line[center]|char[random(0,10)|abs]") into a structured
1013
- * ISplitOptions object.
1014
- * Implements the IStringTool interface.
1015
- */
1016
1023
  declare class SplitOptionsParserTool implements IStringTool<SplitOptionsParserInput, ISplitOptions> {
1017
- /**
1018
- * Parses the attribute string into an ISplitOptions object.
1019
- * Handles splitting by '|', parsing prefixes (word-, char-), main types (line, word, char),
1020
- * and parameters within brackets (align, random, abs).
1021
- *
1022
- * @param input - An object containing the attributeValue string (can be null).
1023
- * @returns An ISplitOptions object representing the parsed rules.
1024
- * Returns an object with empty arrays if the attributeValue is null or empty.
1025
- */
1026
1024
  process({ attributeValue }: SplitOptionsParserInput): ISplitOptions;
1027
- /**
1028
- * Parses an array of string parameters (extracted from within brackets `[...]`).
1029
- * Determines alignment, random settings, and absolute flag.
1030
- * Example input: ['center'], ['random(0, 10)', 'abs']
1031
- *
1032
- * @param params - An array of string parameters.
1033
- * @returns An ISplitOptionItem object representing the parsed parameters.
1034
- */
1025
+ private toCamelCase;
1035
1026
  private parseParamsArray;
1036
1027
  }
1037
1028
 
@@ -1147,38 +1138,6 @@ interface StringToolsContainer {
1147
1138
  ruleParser: RuleParserTool;
1148
1139
  }
1149
1140
 
1150
- /**
1151
- * Shared context object passed to all modules and core controllers.
1152
- *
1153
- * Provides access to shared tools, data, settings, and event handling.
1154
- */
1155
- interface StringContext {
1156
- /**
1157
- * Collection of utility tools (e.g. lerp, dom parser, unit converter).
1158
- */
1159
- tools: StringToolsContainer;
1160
- /**
1161
- * Reactive state container including scroll, viewport, cursor, etc.
1162
- */
1163
- data: StringData;
1164
- /**
1165
- * Global configuration settings for modules and system behavior.
1166
- */
1167
- settings: StringSettings;
1168
- /**
1169
- * Centralized event emitter and listener system.
1170
- */
1171
- events: EventManager;
1172
- /**
1173
- * Caches the center positions of string objects.
1174
- */
1175
- centers: CenterCache;
1176
- /**
1177
- * Tracks hover states of string objects.
1178
- */
1179
- hover: HoverTracker;
1180
- }
1181
-
1182
1141
  type AttributeType = "string" | "number" | "boolean" | "json" | "dimension" | "breakpoint-dimension" | "tuple" | "easing" | "color" | {
1183
1142
  type: "enum";
1184
1143
  values: string[];
@@ -1286,6 +1245,10 @@ declare class StringModule implements IStringModule {
1286
1245
  * Tracker for managing hover states of objects.
1287
1246
  */
1288
1247
  protected hover: HoverTracker;
1248
+ /**
1249
+ * Object manager for layout refreshes and in-view recalculation.
1250
+ */
1251
+ protected objectManager: ObjectManager;
1289
1252
  permissions: ModuleLifecyclePermissions;
1290
1253
  constructor(context: StringContext);
1291
1254
  /**
@@ -1401,6 +1364,10 @@ declare class StringModule implements IStringModule {
1401
1364
  destroy(): void;
1402
1365
  /** Called once when the module is initialized. */
1403
1366
  onInit(): void;
1367
+ /** Called once when the module is registered and can subscribe to events. */
1368
+ onSubscribe(): void;
1369
+ /** Called once when the module is being removed and should unsubscribe. */
1370
+ onUnsubscribe(): void;
1404
1371
  /** Called on each frame with current scroll and state data. */
1405
1372
  onFrame(data: StringData): void;
1406
1373
  onMutate(data: StringData): void;
@@ -1412,7 +1379,7 @@ declare class StringModule implements IStringModule {
1412
1379
  onResizeWidth(): void;
1413
1380
  /** Called when scroll position changes. */
1414
1381
  onScroll(data: StringData): void;
1415
- /** Called when user changed scroll diraction. */
1382
+ /** Called when user changed scroll direction. */
1416
1383
  onDirectionChange(): void;
1417
1384
  /** Called when user starts scrolling. */
1418
1385
  onScrollStart(): void;
@@ -1440,6 +1407,179 @@ declare class StringModule implements IStringModule {
1440
1407
  onDOMMutate(added: NodeList, removed: NodeList): void;
1441
1408
  }
1442
1409
 
1410
+ declare class ModuleManager {
1411
+ private data;
1412
+ private modules;
1413
+ private uiModules;
1414
+ private allModules;
1415
+ constructor(data: StringData);
1416
+ register(module: StringModule): void;
1417
+ find<T>(type: new (...args: any[]) => T): T | undefined;
1418
+ onInit(): void;
1419
+ onFrame(): void;
1420
+ onMutate(): void;
1421
+ onScrollMeasure(): void;
1422
+ onMouseMoveMeasure(): void;
1423
+ onScroll(): void;
1424
+ onResizeWidth(): void;
1425
+ onResize(): void;
1426
+ onMouseMove(e: MouseEvent): void;
1427
+ onWheel(e: WheelEvent): void;
1428
+ onDirectionChange(): void;
1429
+ onScrollStart(): void;
1430
+ onScrollStop(): void;
1431
+ onAxisChange(): void;
1432
+ onDeviceChange(): void;
1433
+ onScrollConfigChange(): void;
1434
+ onSettingsChange(_data: ISettingsChangeData): void;
1435
+ onDOMMutate(added: NodeList, removed: NodeList): void;
1436
+ destroy(): void;
1437
+ get all(): IStringModule[];
1438
+ get core(): IStringModule[];
1439
+ get ui(): IStringModule[];
1440
+ private callAll;
1441
+ private callLifecycle;
1442
+ private rebuildAllModules;
1443
+ }
1444
+
1445
+ declare class ObjectManager {
1446
+ private data;
1447
+ private modules;
1448
+ private events;
1449
+ private tools;
1450
+ private objects;
1451
+ private connectQueue;
1452
+ private mirrors;
1453
+ private mirrorId;
1454
+ private globalId;
1455
+ private domBatcher;
1456
+ private domBatcherEnabled;
1457
+ private inviewStarts;
1458
+ private inviewEnds;
1459
+ private inviewActive;
1460
+ private inviewStartIdx;
1461
+ private inviewEndIdx;
1462
+ private inviewIndexDirty;
1463
+ private lastInviewScrollPos;
1464
+ private intersectionObserverEnabled;
1465
+ constructor(data: StringData, modules: ModuleManager, events: EventManager, tools: StringToolsContainer);
1466
+ /**
1467
+ * Returns the object map (read-only).
1468
+ */
1469
+ get all(): ReadonlyMap<string, StringObject>;
1470
+ /**
1471
+ * Adds a new object from an element.
1472
+ */
1473
+ add(el: HTMLElement): void;
1474
+ setDOMBatcherEnabled(enabled: boolean): void;
1475
+ setIntersectionObserverEnabled(enabled: boolean): void;
1476
+ invalidateInviewIndex(): void;
1477
+ refreshLayoutForRoot(root: HTMLElement): void;
1478
+ /**
1479
+ * Removes an object by its id.
1480
+ */
1481
+ remove(id: string): void;
1482
+ /**
1483
+ * Add an element that will connect later.
1484
+ */
1485
+ enqueueConnection(id: string, element: HTMLElement): void;
1486
+ linkMirror(id: string, element: HTMLElement): void;
1487
+ private attachMirrorToObject;
1488
+ private detachMirrorByElement;
1489
+ private detachMirrorById;
1490
+ private getMirrorIds;
1491
+ private setMirrorIds;
1492
+ private clearMirrorIds;
1493
+ /**
1494
+ * Retrieves all attributes of a given HTML element and returns them as a record.
1495
+ *
1496
+ * @param el - The HTML element from which to extract attributes.
1497
+ * @returns A record where the keys are attribute names and the values are attribute values.
1498
+ */
1499
+ private getAllAttributes;
1500
+ /**
1501
+ * Initializes IntersectionObservers for a given object and its associated HTML element.
1502
+ *
1503
+ * This method sets up observer:
1504
+ * - A "progress" observer to track when the object enters or leaves the viewport.
1505
+ *
1506
+ * The observers are configured with custom root margins and thresholds based on the object's properties.
1507
+ * Existing observers, if any, are disconnected before creating new ones.
1508
+ *
1509
+ * @param obj - The `StringObject` instance containing properties and methods for interaction.
1510
+ * @param el - The `HTMLElement` to observe for intersection changes.
1511
+ */
1512
+ private initObservers;
1513
+ /**
1514
+ * Observes DOM mutations to auto-add/remove elements with [string] attribute.
1515
+ * Should be called once after DOM is ready.
1516
+ */
1517
+ observeDOM(): void;
1518
+ /**
1519
+ * Removes an object and its observers.
1520
+ */
1521
+ private handleRemoved;
1522
+ /**
1523
+ * Re-applies module initialization logic to all managed objects after settings change.
1524
+ *
1525
+ * This method should be called when `StringSettings` are updated at runtime,
1526
+ * especially if the new settings affect how modules calculate offsets,
1527
+ * easing, origins, or custom configuration.
1528
+ *
1529
+ * Internally, it re-runs `initializeObject`, `calculatePositions`, and `connectObject`
1530
+ * for each core module that can connect to the object.
1531
+ *
1532
+ * This is useful for supporting dynamic configuration updates without requiring
1533
+ * a full DOM rebuild or reinitialization.
1534
+ */
1535
+ onSettingsChange(data: ISettingsChangeData): void;
1536
+ /**
1537
+ * Checks whether the element is marked as fixed (not managed).
1538
+ */
1539
+ private isFixed;
1540
+ checkInview(): void;
1541
+ private checkInviewForObject;
1542
+ private updateInviewWindow;
1543
+ private rebuildInviewIndex;
1544
+ private upperBound;
1545
+ }
1546
+
1547
+ /**
1548
+ * Shared context object passed to all modules and core controllers.
1549
+ *
1550
+ * Provides access to shared tools, data, settings, and event handling.
1551
+ */
1552
+ interface StringContext {
1553
+ /**
1554
+ * Collection of utility tools (e.g. lerp, dom parser, unit converter).
1555
+ */
1556
+ tools: StringToolsContainer;
1557
+ /**
1558
+ * Reactive state container including scroll, viewport, cursor, etc.
1559
+ */
1560
+ data: StringData;
1561
+ /**
1562
+ * Global configuration settings for modules and system behavior.
1563
+ */
1564
+ settings: StringSettings;
1565
+ /**
1566
+ * Centralized event emitter and listener system.
1567
+ */
1568
+ events: EventManager;
1569
+ /**
1570
+ * Caches the center positions of string objects.
1571
+ */
1572
+ centers: CenterCache;
1573
+ /**
1574
+ * Tracks hover states of string objects.
1575
+ */
1576
+ hover: HoverTracker;
1577
+ /**
1578
+ * Manages all interactive objects (elements with `string-*` attributes).
1579
+ */
1580
+ objectManager: ObjectManager;
1581
+ }
1582
+
1443
1583
  /**
1444
1584
  * StringCursor Module
1445
1585
  *
@@ -1528,6 +1668,27 @@ declare class StringImpulse extends StringModule {
1528
1668
  onFrame(_: StringData): void;
1529
1669
  }
1530
1670
 
1671
+ declare class StringMasonry extends StringModule {
1672
+ private states;
1673
+ constructor(context: StringContext);
1674
+ private parseEasing;
1675
+ onObjectConnected(object: StringObject): void;
1676
+ onFrame(data: StringData): void;
1677
+ onResize(): void;
1678
+ cleanupObject(object: StringObject): void;
1679
+ private createState;
1680
+ private handleAnimationEnd;
1681
+ private scheduleLayout;
1682
+ /**
1683
+ * Performs the layout calculation and application synchronously.
1684
+ * Optimizes for batched DOM reads and writes via `styleTxn`.
1685
+ */
1686
+ private performSyncLayout;
1687
+ private getGridSettings;
1688
+ private attachImgLoaders;
1689
+ private cleanupImgListeners;
1690
+ }
1691
+
1531
1692
  declare class StringMagnetic extends StringModule {
1532
1693
  constructor(context: StringContext);
1533
1694
  initializeObject(globalId: number, object: StringObject, element: HTMLElement, attributes: Record<string, any>): void;
@@ -2053,6 +2214,11 @@ interface ScrollMarkRule {
2053
2214
  */
2054
2215
  className: string;
2055
2216
  };
2217
+ /**
2218
+ * Internal state tracking whether the rule is currently active.
2219
+ * prevents redundant callbacks and class toggles.
2220
+ */
2221
+ isActive?: boolean;
2056
2222
  }
2057
2223
 
2058
2224
  declare class StringSequence extends StringModule {
@@ -2176,6 +2342,92 @@ declare class StyleTxn {
2176
2342
  }
2177
2343
  declare const styleTxn: StyleTxn;
2178
2344
 
2345
+ declare class StringRandom extends StringModule {
2346
+ constructor(context: StringContext);
2347
+ onObjectConnected(object: StringObject): void;
2348
+ }
2349
+
2350
+ /**
2351
+ * Base class for managing scroll behavior in the system.
2352
+ * Handles abstract scroll state and updates, intended for extension.
2353
+ */
2354
+ declare class ScrollController {
2355
+ /** Shared context containing data and tools */
2356
+ protected context: StringContext;
2357
+ /** Reference to the document object */
2358
+ protected document: Document;
2359
+ /** Name of the scroll mode (e.g. 'default', 'smooth', etc.) */
2360
+ name: string;
2361
+ /** Whether the system is in programmatic scroll mode */
2362
+ isProg: boolean;
2363
+ /** Whether parallax-related logic should be active */
2364
+ isParallaxEnabled: boolean;
2365
+ /** Scroll direction: vertical or horizontal */
2366
+ protected _scrollDirection: "vertical" | "horizontal";
2367
+ /**
2368
+ * Current scroll direction.
2369
+ * - `true` — scrolling down
2370
+ * - `false` — scrolling up
2371
+ * - `null` — unknown (initial state)
2372
+ */
2373
+ protected isBottomScrollDirection: boolean | null;
2374
+ protected isLastBottomScrollDirection: boolean;
2375
+ protected scrollTriggerRules: Array<ScrollMarkRule>;
2376
+ /**
2377
+ * Sets scroll direction and updates internal scroll logic.
2378
+ * @param scrollDirection Either 'vertical' or 'horizontal'.
2379
+ */
2380
+ set scrollDirection(scrollDirection: "vertical" | "horizontal");
2381
+ /**
2382
+ * Creates a new ScrollController instance.
2383
+ * @param context Shared context containing data and settings.
2384
+ */
2385
+ constructor(context: StringContext);
2386
+ /**
2387
+ * Called when scroll direction changes (up ↔ down).
2388
+ * Override this callback in subclasses or instances.
2389
+ */
2390
+ onChangeDirection: () => void;
2391
+ /**
2392
+ * Called when scroll starts (user input).
2393
+ * Override this callback in subclasses or instances.
2394
+ */
2395
+ onScrollStart: () => void;
2396
+ /**
2397
+ * Called when scroll ends.
2398
+ * Override this callback in subclasses or instances.
2399
+ */
2400
+ onScrollStop: () => void;
2401
+ /**
2402
+ * Scroll-to function called on each frame.
2403
+ * This will be reassigned depending on scroll direction.
2404
+ */
2405
+ onCalcUpdate: () => void;
2406
+ /**
2407
+ * Called every animation frame.
2408
+ * Intended to be overridden in subclasses.
2409
+ */
2410
+ onFrame(): void;
2411
+ /**
2412
+ * Called when wheel event is fired.
2413
+ * Override to implement custom scroll interaction.
2414
+ * @param e Wheel event.
2415
+ */
2416
+ onWheel(e: any): void;
2417
+ /**
2418
+ * Called when native scroll event is fired.
2419
+ * Override to track native scroll position.
2420
+ * @param e Scroll event.
2421
+ */
2422
+ onScroll(e: any): void;
2423
+ disableScrollEvents(): void;
2424
+ enableScrollEvents(): void;
2425
+ protected triggerScrollRules(): void;
2426
+ addScrollMark(rule: ScrollMarkRule): void;
2427
+ removeScrollMark(id: string): void;
2428
+ scrollTo(position: number): void;
2429
+ }
2430
+
2179
2431
  interface ModuleBatchContext {
2180
2432
  module: StringModule;
2181
2433
  object: StringObject;
@@ -2222,6 +2474,8 @@ declare class StringTune {
2222
2474
  private onResizeBind;
2223
2475
  /** Bound mouse move handler */
2224
2476
  private onMouseMoveBind;
2477
+ /** Bound scroll to handler */
2478
+ private onScrollToBind;
2225
2479
  private onContainerTransitionEndBind;
2226
2480
  private onResizeObserverBind;
2227
2481
  private pendingScroll;
@@ -2335,6 +2589,19 @@ declare class StringTune {
2335
2589
  * @param settings Optional settings specific to this module.
2336
2590
  */
2337
2591
  use(objectClass: typeof StringModule, settings?: any): void;
2592
+ /**
2593
+ * Registers a new scroll mode (provider) to the system.
2594
+ * Allows integrating custom scroll implementations (e.g. Lenis, Locomotive).
2595
+ *
2596
+ * @param name The unique name for this scroll mode (e.g. 'smooth', 'lenis').
2597
+ * @param factory A function that receives the StringContext and returns a ScrollController instance, OR a ScrollController class constructor.
2598
+ *
2599
+ * Example:
2600
+ * ```ts
2601
+ * stringTune.registerScrollMode("lenis", (context) => new LenisAdapter(context));
2602
+ * ```
2603
+ */
2604
+ registerScrollMode(name: string, factory: ((context: StringContext) => ScrollController) | (new (context: StringContext) => ScrollController)): void;
2338
2605
  /**
2339
2606
  * Subscribes to a global event within the system.
2340
2607
  *
@@ -2445,28 +2712,9 @@ declare class StringTune {
2445
2712
  * Rebuilds layout and triggers module resize if size really changed.
2446
2713
  */
2447
2714
  onResize(force?: boolean): void;
2448
- /**
2449
- * Scrolls the container to the specified element identified by a CSS selector, applying an optional offset.
2450
- *
2451
- * Calculates the vertical position of the target element relative to the scroll container and updates the scroll delta accordingly.
2452
- * If the element is not found, a warning is logged to the console.
2453
- *
2454
- * @param selector - The CSS selector string used to identify the target element.
2455
- * @param offset - Optional. The number of pixels to offset from the target element's top position. Defaults to 0.
2456
- */
2457
- scrollToElement(selector: string, offset?: number): void;
2458
- scrollTo(position: number): void;
2459
2715
  invalidateCenter(id: string): void;
2460
- /**
2461
- * Forces center cache recalculation for all tracked objects.
2462
- * Useful when DOM geometry changes outside of StringTune's control.
2463
- */
2464
- invalidateCenters(): void;
2465
- /**
2466
- * Cleans up the system, removes all event listeners, stops the loop,
2467
- * and destroys modules and event subscriptions.
2468
- */
2716
+ scrollTo(position: number): void;
2469
2717
  destroy(): void;
2470
2718
  }
2471
2719
 
2472
- export { CursorReactiveModule, DOMBatcher, type ScrollMarkRule as ScrollTriggerRule, StringAnchor, type StringContext, StringCursor, StringData, StringDelayLerpTracker, StringFPSTracker, StringForm, StringGlide, StringImpulse, StringLazy, StringLerp, StringLerpTracker, StringLoading, StringMagnetic, StringModule, StringObject, StringParallax, StringPositionTracker, StringProgress, StringProgressPart, StringResponsive, StringScrollbar, StringScroller, StringSequence, StringSplit, StringSpotlight, StringTune, StringVideoAutoplay, StringTune as default, frameDOM, styleTxn };
2720
+ export { CursorReactiveModule, DOMBatcher, ScrollController, type ScrollMarkRule as ScrollTriggerRule, StringAnchor, type StringContext, StringCursor, StringData, StringDelayLerpTracker, StringFPSTracker, StringForm, StringGlide, StringImpulse, StringLazy, StringLerp, StringLerpTracker, StringLoading, StringMagnetic, StringMasonry, StringModule, StringObject, StringParallax, StringPositionTracker, StringProgress, StringProgressPart, StringRandom, StringResponsive, StringScrollbar, StringScroller, StringSequence, StringSplit, StringSpotlight, StringTune, StringVideoAutoplay, StringTune as default, frameDOM, styleTxn };