DepthText v1.2.0

Added

• New layerClassMap option: Map custom CSS classes to individual layers by index
  • Allows unique styling per layer (e.g., different colors for each depth level)
  • Available via JavaScript API: layerClassMap: ["front", "middle", "back"]
  • Combines with addClass for maximum flexibility
  • Example: Create rainbow gradients across depth layers
• Auto-generated layer classes: Each layer now receives depthtext-layer-N class (0-indexed)
  • Enables precise CSS targeting: .depthtext-layer-0, .depthtext-layer-1, etc.
  • Works independently of layerClassMap for even more control
• Public .update() method: Dynamically modify options after initialization
  • Change depth, layers, event type, etc. without recreating instance
  • Useful for responsive designs and interactive controls
  • Example: instance.update({ depth: "2rem", event: "scroll" })

Fixed

• CRITICAL: data-depth attribute parsing
  • Fixed bug where data-depth value was incorrectly assigned to engaged option
  • Now correctly uses data-depth-engaged for enabling/disabling instances
  • data-depth now exclusively controls depth value as intended
  • Prevents accidental instance disabling when using numeric depth values
• Enhanced engaged validation
  • Properly handles boolean, string boolean ("true"/"false"), and undefined values
  • More robust type coercion prevents unexpected behavior
• Event type validation
  • Added whitelist validation for event option
  • Console warning for invalid event types with automatic fallback to "none"
  • Prevents silent failures from typos
• ResizeObserver memory leak
  • Added destruction check in ResizeObserver callback
  • Prevents updates on destroyed instances
  • Improves cleanup and garbage collection
• Duplicate CSS classes
  • Layer creation now uses Set to eliminate duplicate class names
  • More efficient and cleaner DOM output
• Data attribute parsing
  • Now supports both camelCase and lowercase variants: data-depth-event-rotation and data-depth-eventrotation
  • Empty string data attributes (data-depth="") now correctly treated as undefined
  • Improved robustness across different HTML coding styles

Changed

• Type safety improvements
  • Removed any from MaybeElement type definition
  • Now strictly typed as HTMLElement | Element | null
  • Better TypeScript inference and error catching
• Destruction tracking
  • Added internal _isDestroyed flag
  • Prevents double-destroy and updates on destroyed instances
  • More predictable lifecycle management

Technical

• Refactored _validateOptions() with specialized normalizer functions
• Added normalizeEngaged() and normalizeEvent() helpers
• Improved options merging logic in DepthTextify()
• Enhanced data attribute reading with getDataAttr() helper
• Layer class application now uses Set for deduplication
• Better separation of concerns in validation layer

Documentation

• Added important notes about layer styling limitations
• Documented layerClassMap behavior when fewer classes than layers
• Updated all examples to reflect new data-depth-engaged attribute
• Added CSS best practices for individual layer coloring