dw-sheet-data-checker/NEW_FEATURES_PLAN.md

New Features Implementation Plan - v1.3.0

Date: November 15, 2024
Features: Image output, Security tab, Multiple buttons fix

---

🎯 Feature 1: Image Output Type

Requirements

• Add "Image" type to output settings
• Render as <img> tag with proper width
• Show thumbnail by default
• Lightbox on click to see larger image
• Support for image URLs from Google Sheet

Implementation Steps

1.1 Update Output Settings Template

File: templates/editor/js-template-setting-output.php

• Add "Image" option to type dropdown (line 22)
• Add image width field (conditional, shown only for image type)
• Add thumbnail width field

1.2 Update Backend Output Settings

File: includes/class-Sheet-Data-Checker-Pro.php

• Add image_width to load_output_setting() (line 493-503)
• Add thumbnail_width to load_output_setting()

1.3 Update Frontend Rendering

File: assets/public.js

• Add image type handling in all 4 display types
• Render thumbnail with data-fullsize attribute
• Add lightbox functionality

1.4 Add Lightbox Library

• Use lightweight solution: CSS-only or simple JS
• Or integrate PhotoSwipe/GLightbox

---

🔒 Feature 2: Security Tab with Rate Limiting

Requirements

• New "Security" tab at same level as General, Form, Result
• Local rate limiting (IP-based)
• Option to integrate reCAPTCHA v3
• Option to integrate Cloudflare Turnstile

Implementation Steps

2.1 Create Security Tab Template

File: templates/editor/setting-table-security.php (NEW)

• Rate limiting settings
• Max attempts per IP
• Time window (minutes)
• Block duration
• reCAPTCHA toggle and keys
• Turnstile toggle and keys

2.2 Update Settings Navigation

File: templates/editor/settings.php

• Add Security tab to navigation (line 4-6)
• Include security template (line 10-12)

2.3 Create Security Handler Class

File: includes/class-Security.php (NEW)

• Rate limiting logic
• IP tracking with WordPress transients
• reCAPTCHA verification
• Turnstile verification

2.4 Update Shortcode Class

File: includes/class-Shortcode.php

• Check rate limit before processing
• Verify CAPTCHA if enabled
• Return error if blocked

2.5 Update Frontend JS

File: assets/public.js

• Load reCAPTCHA/Turnstile if enabled
• Send token with AJAX request
• Handle rate limit errors

---

🐛 Feature 3: Fix Multiple Buttons Bug

Problem Analysis

Current code wraps button in <a> tag:

r = '<a href="'+r+'" class="button dw-checker-value-button">'+button_text+'</a>';

Issue: If multiple fields have button type, they all get same class and might conflict.

Solution

Make buttons unique per field:

r = '<a href="'+r+'" class="button dw-checker-value-button dw-checker-btn-'+id+'" target="_blank">'+button_text+'</a>';

Also ensure proper event delegation if needed.

---

📋 Implementation Order

Phase 1: Quick Fixes (30 min)

1. ✅ Fix multiple buttons bug
2. ✅ Add image output type to template

Phase 2: Image Feature (1-2 hours)

1. Update backend to handle image settings
2. Update frontend to render images
3. Add lightbox functionality
4. Test all display types

Phase 3: Security Feature (2-3 hours)

1. Create security tab template
2. Create security handler class
3. Integrate with shortcode
4. Update frontend
5. Test rate limiting
6. Test CAPTCHA integration

---

🎨 UI/UX Considerations

Image Output

• Thumbnail size: 150px default, configurable
• Full size: Original or max 1200px
• Lightbox: Dark overlay, close on click outside
• Loading state for images

Security Tab

• Clear explanations for each setting
• Warning messages for security implications
• Test buttons to verify CAPTCHA keys
• Visual indicator when rate limit is active

---

🧪 Testing Checklist

Image Output

• Image renders in vertical table
• Image renders in div display
• Image renders in standard table
• Image renders in card display
• Thumbnail size is correct
• Lightbox opens on click
• Lightbox closes properly
• Multiple images work
• Broken image URLs handled gracefully

Security

• Rate limiting blocks after max attempts
• Rate limit resets after time window
• Block duration works correctly
• reCAPTCHA v3 verifies correctly
• Turnstile verifies correctly
• Error messages are clear
• Settings save correctly
• Works with multiple checkers

Multiple Buttons

• Multiple link buttons work
• Multiple WhatsApp buttons work
• Mixed button types work
• Buttons open correct URLs
• Buttons work in all display types

---

📦 Dependencies

Image Feature

• No external dependencies (use native HTML)
• Optional: GLightbox or PhotoSwipe for better UX

Security Feature

• WordPress transients (built-in)
• reCAPTCHA v3 API (optional)
• Cloudflare Turnstile API (optional)

---

🔄 Backward Compatibility

All new features are additive:

• Existing checkers continue to work
• Image type is optional
• Security is disabled by default
• Multiple buttons fix doesn't break existing functionality

---

📝 Documentation Needed

1. How to use image output type
2. How to configure security settings
3. How to get reCAPTCHA keys
4. How to get Turnstile keys
5. Best practices for rate limiting

---

Ready to implement!