@hortonstudio/main 1.9.7 → 1.9.9

package/autoInit/accessibility/README.md

@@ -2,7 +2,7 @@
 
 ## **Overview**
 
-The accessibility system provides 11 modular functions to enhance website accessibility and functionality. Each function operates independently and can be customized through data attributes.
+The accessibility system provides 7 modular functions to enhance website accessibility and functionality. Each function operates independently and can be customized through data attributes.
 
 **Note:** This module auto-initializes and loads all functions on page load.
 
@@ -24,63 +24,35 @@ Adds proper ARIA `role="list"` and `role="listitem"` to custom-styled lists.
 
 ---
 
-### **3. Remove List Accessibility**
-Removes list semantics by stripping ARIA roles and converting `<ul>/<ol>/<li>` to divs.
-
-**Use case:** Decorative list layouts that shouldn't be announced as lists.
-
----
-
-### **4. Convert to Span**
-Converts most HTML elements to span elements while preserving attributes and content.
-
-**Use case:** Removing semantic meaning from purely decorative wrapper elements.
-
----
-
-### **5. Year Replacement**
+### **3. Year Replacement**
 Replaces `{{year}}` and `{{month}}` placeholders with current year and month.
 
 **Use case:** Auto-updating copyright years and date-based content.
 
 ---
 
-### **6. Prevent Default**
-Prevents default behavior on elements including clicks and keyboard activation.
-
-**Use case:** Decorative buttons or preventing anchor link scrolling.
-
----
-
-### **7. Custom Values Replacement**
-Collects custom name-value pairs and replaces `{{name}}` placeholders throughout the page.
-
-**Use case:** Dynamic content replacement for user-defined values.
-
----
-
-### **8. Click Forwarding**
+### **4. Click Forwarding**
 Forwards clicks from decorative wrapper elements to actual interactive trigger elements.
 
 **Use case:** Making entire card areas clickable while maintaining semantic structure.
 
 ---
 
-### **9. Text Synchronization**
+### **5. Text Synchronization**
 Synchronizes text content and aria-labels from original element to multiple match elements in real-time.
 
 **Use case:** Keeping duplicate content in sync across multiple locations.
 
 ---
 
-### **10. Table of Contents (TOC)**
+### **6. Table of Contents (TOC)**
 Automatically generates a table of contents from H2 headings with smooth scrolling, focus management, and active state tracking.
 
 **Use case:** Auto-generated TOC navigation for blog posts and documentation pages.
 
 ---
 
-### **11. Dropdown**
+### **7. Dropdown**
 Universal dropdown system for FAQ, summary/read-more, and general toggle components. Syncs ARIA with Webflow interactions and optionally updates text content.
 
 **Use case:** All dropdown/accordion/toggle patterns with unified ARIA management and optional text swapping.
@@ -95,11 +67,7 @@ Each function has detailed documentation in its respective folder:
 
 - `functions/blog-remover/README.md`
 - `functions/list-accessibility/README.md`
-- `functions/remove-list-accessibility/README.md`
-- `functions/convert-to-span/README.md`
 - `functions/year-replacement/README.md`
-- `functions/prevent-default/README.md`
-- `functions/custom-values-replacement/README.md`
 - `functions/click-forwarding/README.md`
 - `functions/text-synchronization/README.md`
 - `functions/toc/README.md`

package/autoInit/accessibility/accessibility.js

@@ -8,11 +8,7 @@ export async function init() {
   const functionMap = {
     "blog-remover": () => import("./functions/blog-remover/blog-remover.js"),
     "list-accessibility": () => import("./functions/list-accessibility/list-accessibility.js"),
-    "remove-list-accessibility": () => import("./functions/remove-list-accessibility/remove-list-accessibility.js"),
-    "convert-to-span": () => import("./functions/convert-to-span/convert-to-span.js"),
     "year-replacement": () => import("./functions/year-replacement/year-replacement.js"),
-    "prevent-default": () => import("./functions/prevent-default/prevent-default.js"),
-    "custom-values-replacement": () => import("./functions/custom-values-replacement/custom-values-replacement.js"),
     "click-forwarding": () => import("./functions/click-forwarding/click-forwarding.js"),
     "text-synchronization": () => import("./functions/text-synchronization/text-synchronization.js"),
     "toc": () => import("./functions/toc/toc.js"),

package/index.js

@@ -25,8 +25,8 @@ const initializeHsMain = async () => {
 
   const moduleMap = {
     transition: () => import("./autoInit/transition/transition.js"),
-    "data-hs-util-ba": () => import("./utils/before-after.js"),
-    "data-hs-util-slider": () => import("./utils/slider.js"),
+    "data-hs-util-ba": () => import("./utils/before-after/before-after.js"),
+    "data-hs-util-slider": () => import("./utils/slider/slider.js"),
     "smooth-scroll": () => import("./autoInit/smooth-scroll/smooth-scroll.js"),
     navbar: () => import("./autoInit/navbar/navbar.js"),
     accessibility: () => import("./autoInit/accessibility/accessibility.js"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hortonstudio/main",
-  "version": "1.9.7",
+  "version": "1.9.9",
   "description": "Animation and utility library for client websites",
   "main": "index.js",
   "type": "module",

package/utils/before-after/README.md

@@ -0,0 +1,243 @@
+# **Before/After Image Comparison**
+
+## **Overview**
+
+Interactive before/after image comparison utility with multiple viewing modes, slider controls, and carousel functionality. Supports keyboard navigation, touch gestures, and accessibility features.
+
+**Note:** This utility is loaded via `data-hs-util-ba` attribute on the script tag in index.js.
+
+---
+
+## **Features**
+
+- **Three Viewing Modes**: Before, After, and Split (slider)
+- **Multiple Items**: Carousel navigation with arrows and pagination
+- **Slider Control**: Draggable slider with click-to-position
+- **Keyboard Support**: Arrow keys for navigation and slider control
+- **Touch Gestures**: Full mobile touch support
+- **Accessibility**: ARIA attributes and keyboard navigation
+
+---
+
+## **Required Elements**
+
+**Wrapper**
+* data-hs-ba="wrapper"
+* Container for entire before/after instance
+
+**Image Wrapper**
+* data-hs-ba="image-wrapper"
+* Container for before/after images
+* Focusable for keyboard slider control
+
+**Before Image**
+* data-hs-ba="image-before"
+* Background/base image layer
+
+**After Image**
+* data-hs-ba="image-after"
+* Foreground image with clip-path
+
+**Slider** *(optional)*
+* data-hs-ba="slider"
+* Draggable handle for split view
+
+**Mode Buttons** *(optional)*
+* data-hs-ba="mode-before"
+* data-hs-ba="mode-after"
+* data-hs-ba="mode-split"
+
+**Navigation** *(optional, for multiple items)*
+* data-hs-ba="left" - Previous item
+* data-hs-ba="right" - Next item
+
+**Pagination** *(optional)*
+* data-hs-ba="pagination"
+* Container with template dot (first child)
+
+---
+
+## **Usage Example**
+
+### **Single Comparison**
+
+```html
+<div data-hs-ba="wrapper">
+  <div data-hs-ba="image-wrapper">
+    <img data-hs-ba="image-before" src="before.jpg" alt="Before">
+    <img data-hs-ba="image-after" src="after.jpg" alt="After">
+    <div data-hs-ba="slider">
+      <!-- Slider handle content -->
+    </div>
+  </div>
+
+  <!-- Mode buttons -->
+  <button data-hs-ba="mode-before">Before</button>
+  <button data-hs-ba="mode-split">Split</button>
+  <button data-hs-ba="mode-after">After</button>
+</div>
+```
+
+---
+
+### **Multiple Items with Carousel**
+
+```html
+<div data-hs-ba="wrapper">
+  <!-- Item 1 -->
+  <div>
+    <div data-hs-ba="image-wrapper">
+      <img data-hs-ba="image-before" src="before-1.jpg">
+      <img data-hs-ba="image-after" src="after-1.jpg">
+      <div data-hs-ba="slider"></div>
+    </div>
+    <button data-hs-ba="mode-before">Before</button>
+    <button data-hs-ba="mode-split">Split</button>
+    <button data-hs-ba="mode-after">After</button>
+  </div>
+
+  <!-- Item 2 -->
+  <div>
+    <div data-hs-ba="image-wrapper">
+      <img data-hs-ba="image-before" src="before-2.jpg">
+      <img data-hs-ba="image-after" src="after-2.jpg">
+      <div data-hs-ba="slider"></div>
+    </div>
+    <button data-hs-ba="mode-before">Before</button>
+    <button data-hs-ba="mode-split">Split</button>
+    <button data-hs-ba="mode-after">After</button>
+  </div>
+
+  <!-- Navigation -->
+  <button data-hs-ba="left">Previous</button>
+  <button data-hs-ba="right">Next</button>
+
+  <!-- Pagination -->
+  <div data-hs-ba="pagination">
+    <div class="dot"></div> <!-- Template -->
+  </div>
+</div>
+```
+
+---
+
+## **Viewing Modes**
+
+### **Before Mode**
+- Shows only the before image
+- Hides slider
+- Clips after image to 100% (invisible)
+
+### **After Mode**
+- Shows only the after image
+- Hides slider
+- Clips after image to 0% (fully visible)
+
+### **Split Mode** *(default)*
+- Shows both images side by side
+- Slider visible and draggable
+- Default split at 50%
+- Clicking split mode button resets to 50%
+
+---
+
+## **Keyboard Navigation**
+
+### **Main Wrapper Focus:**
+- `Arrow Left/Right/Up/Down`: Navigate between items
+
+### **Image Wrapper Focus:**
+- `Arrow Left`: Move slider left (in split mode)
+- `Arrow Right`: Move slider right (in split mode)
+- Step size: 5% per press (configurable)
+
+---
+
+## **Configuration**
+
+Default configuration can be updated via `window.hsmain.utilBeforeAfter.updateConfig()`:
+
+```javascript
+{
+  defaultMode: "split",           // Initial viewing mode
+  sliderPosition: 50,             // Default slider position (%)
+  touchSensitivity: 1,            // Touch drag sensitivity
+  keyboardStep: 5,                // Keyboard arrow step (%)
+  autoPlay: false,                // Auto-advance items
+  autoPlayInterval: 5000          // Auto-play interval (ms)
+}
+```
+
+---
+
+## **API Methods**
+
+Accessible via `window.hsmain.utilBeforeAfter`:
+
+### **showSlide(instanceId, index)**
+Navigate to specific item in carousel
+
+```javascript
+window.hsmain.utilBeforeAfter.showSlide(0, 2); // Go to third item
+```
+
+### **setMode(instanceId, mode)**
+Change viewing mode programmatically
+
+```javascript
+window.hsmain.utilBeforeAfter.setMode(0, 'before');
+```
+
+### **updateConfig(newConfig)**
+Update global configuration
+
+```javascript
+window.hsmain.utilBeforeAfter.updateConfig({
+  sliderPosition: 60,
+  keyboardStep: 10
+});
+```
+
+---
+
+## **Accessibility Features**
+
+- Wrapper has `role="application"` with descriptive aria-label
+- Image wrapper has `role="img"` and keyboard instructions
+- Pagination dots have proper ARIA attributes
+- All interactive elements are keyboard accessible
+- Focus management between items
+- Slider position persists across item navigation
+
+---
+
+## **Touch Support**
+
+- Drag slider handle on touch devices
+- Click/tap image wrapper to position slider
+- Touch-friendly navigation buttons
+- Prevents default scroll during drag
+
+---
+
+## **How It Works**
+
+1. **Initialization**: Finds all `[data-hs-ba="wrapper"]` elements
+2. **Instance Creation**: Each wrapper becomes independent instance
+3. **Carousel Setup**: Multiple items get navigation and pagination
+4. **Mode Management**: Buttons control image visibility via clip-path
+5. **Slider Dragging**: Mouse/touch events update clip-path in real-time
+6. **Keyboard Control**: Arrow keys navigate items and adjust slider
+7. **State Persistence**: Slider position maintained across item changes
+
+---
+
+## **Notes**
+
+- Each wrapper is an independent instance
+- Slider position persists when navigating items
+- Pagination automatically generated from items
+- First pagination dot used as template
+- Supports any number of items (1+)
+- Cleanup on destroy for Barba.js compatibility
+- Caches DOM queries for performance