Add Early Click Handling for WUBox and Improve Pre-Commit Hook

🎯 Overview

This PR includes two important improvements:

1. WUBox early click handling - Prevents lost clicks on slow connections
2. Enhanced pre-commit hook - Automatic PHPCBF fixing with better UX

🖱️ WUBox Early Click Handling

The Problem

Users clicking on .wubox elements before the script fully loads would experience:

• ❌ Click being ignored
• ❌ No visual feedback
• ❌ Need to click again after page loads
• ❌ Poor user experience on slow connections or heavy pages

The Solution

Implemented a two-phase early click capture system:

Phase 1: Inline Script (Before wubox.js loads)

File: inc/class-scripts.php

Added an inline script that runs immediately before wubox.js loads:

window.__wuboxEarlyClicks = [];
window.__wuboxEarlyClickHandler = function(e) {
    if (window.__wuboxReady) return;
    var t = e.target.closest('.wubox');
    if (!t) return;
    e.preventDefault();
    e.stopPropagation();
    t.style.cursor = 'wait';
    window.__wuboxEarlyClicks.push(t);
};
document.addEventListener('click', window.__wuboxEarlyClickHandler, true);

What it does:

1. 🎣 Captures clicks on .wubox elements immediately
2. 🛑 Prevents default action and event propagation
3. ⏳ Shows 'wait' cursor for instant visual feedback
4. 📝 Queues clicked elements for later processing

Phase 2: Processing Queue (When wubox.js loads)

File: assets/js/wubox.js

When wubox.js loads and DOMContentLoaded fires:

window.__wuboxReady = true;

// Remove early click listener
if (window.__wuboxEarlyClickHandler) {
    document.removeEventListener('click', window.__wuboxEarlyClickHandler, true);
    delete window.__wuboxEarlyClickHandler;
}

// Process queued clicks
if (window.__wuboxEarlyClicks && window.__wuboxEarlyClicks.length > 0) {
    const uniqueClicks = [...new Set(window.__wuboxEarlyClicks)];
    uniqueClicks.forEach((target) => {
        const caption = target.title || target.name || '';
        const url = target.href || target.alt;
        const imageGroup = target.rel || false;
        target.style.cursor = '';
        window.wubox.show(caption, url, imageGroup);
    });
    window.__wuboxEarlyClicks = [];
}

What it does:

1. ✅ Marks wubox as ready
2. 🧹 Removes the early click listener (cleanup)
3. 🔍 Deduplicates queued clicks
4. ⚡ Processes each unique click through wubox.show()
5. 🎨 Restores cursor to normal

Benefits

✅ No more lost clicks on slow connections
✅ Immediate visual feedback with wait cursor
✅ Automatic queue processing when ready
✅ Prevents duplicate processing of same element
✅ Clean cleanup of event listeners
✅ Better user experience overall

Use Case

Perfect for:

• 🌐 Slow network connections
• 📱 Mobile devices
• ⚡ Heavy pages with lots of scripts
• 🎨 Image galleries with many thumbnails
• 📊 Admin pages with complex UI

🔧 Pre-Commit Hook Improvements

File: .githooks/pre-commit

Enhanced auto-fixing capabilities for better developer experience

Before This Change:

1. PHPCS finds errors ❌
2. Shows error messages 📝
3. Commit fails ⛔
4. Developer manually runs PHPCBF 🔧
5. Developer manually stages fixes 📤
6. Developer tries commit again 🔄

After This Change:

1. PHPCS finds errors ❌
2. Automatically runs PHPCBF 🤖
3. Re-stages fixed files ✅
4. Re-validates after fixes 🔍
5. Only fails if errors still remain ⚠️
6. Shows clear success/failure messages 📊

New Features

1. Auto-Fix Attempt

if [ $HAS_PHPCS_ERRORS -ne 0 ]; then
    echo "PHPCS found errors. Running PHPCBF to auto-fix..."
    vendor/bin/phpcbf "$FILE"
}

2. Smart Re-Staging

if vendor/bin/phpcs --colors "$FILE" 2>&1; then
    echo "✓ Auto-fixed: $FILE"
    git add "$FILE"  # Automatically stage the fixed file
fi

3. Clear Feedback

• ✅ Green checkmarks for successfully fixed files
• ❌ Red X for files that couldn't be auto-fixed
• 📊 Summary of results

4. Re-Validation

After auto-fixing, re-runs PHPCS to check if all errors are resolved:

# Re-check if there are still errors after auto-fixing
HAS_PHPCS_ERRORS=0
for FILE in $STAGED_FILES; do
    vendor/bin/phpcs "$FILE" > /dev/null 2>&1 || HAS_PHPCS_ERRORS=1
done

Benefits

✅ Fewer manual interventions needed
✅ Faster commit workflow - no manual PHPCBF runs
✅ Automatic compliance with coding standards
✅ Better developer experience - less context switching
✅ Clearer error reporting - know exactly what needs fixing

📁 Files Changed

WUBox Early Click Handling:

1. inc/class-scripts.php - Added inline early click handler script
2. assets/js/wubox.js - Added queue processing on DOMContentLoaded
3. assets/js/wubox.min.js - Updated minified version

Pre-Commit Hook:

4. .githooks/pre-commit - Enhanced with auto-fixing capabilities

Stats: +99 additions, -11 deletions

🎬 Demo Scenarios

Scenario 1: WUBox on Slow Connection

Before:

1. User clicks image thumbnail
2. Nothing happens (script not loaded yet)
3. User clicks again
4. Modal opens

After:

1. User clicks image thumbnail
2. Cursor changes to 'wait' ⏳
3. Click is queued
4. When script loads, modal opens automatically
5. Cursor returns to normal

Scenario 2: Pre-Commit Hook

Before:

$ git commit -m "Fix bug"
Running PHPCS...
ERROR: Found 5 violations
Pre-commit checks failed!
$ vendor/bin/phpcbf file.php
$ git add file.php
$ git commit -m "Fix bug"

After:

$ git commit -m "Fix bug"
Running PHPCS...
ERROR: Found 5 violations
Running PHPCBF to auto-fix...
✓ Auto-fixed: file.php
All errors fixed automatically!
[main abc123] Fix bug

✨ Impact Summary

WUBox:

• 🚀 Better performance on slow connections
• 👆 No more lost clicks - every click counts
• ⏳ Visual feedback during loading
• 🎯 Improved UX for all users

Pre-Commit Hook:

• ⚡ Faster workflow - automatic fixes
• 🔧 Auto-compliance with coding standards
• 📊 Clear feedback on what was fixed
• 🎨 Better DX - fewer interruptions

🧪 Testing

Manual Testing - WUBox

1. Throttle network to slow 3G
2. Navigate to page with .wubox elements
3. Click element immediately as page loads
4. Verify cursor changes to 'wait'
5. Verify modal opens when script loads

Manual Testing - Pre-Commit Hook

1. Stage a PHP file with PHPCS violations
2. Try to commit
3. Verify PHPCBF runs automatically
4. Verify file is re-staged
5. Verify commit succeeds if all errors fixed

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com

Summary by CodeRabbit

• Bug Fixes
  • Enhanced wubox lightbox component to properly handle clicks occurring before the script fully loads, ensuring user interactions are seamlessly queued and processed without loss.

_{✏️ Tip: You can customize this high-level summary in your review settings.}