ver 1.4.0

2025-11-16 01:01:53 +07:00
commit 430e063f91
36 changed files with 9419 additions and 0 deletions
--- a/NEW_FEATURES_PLAN.md
+++ b/NEW_FEATURES_PLAN.md
@@ -0,0 +1,210 @@
+# 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:
+```javascript
+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:
+```javascript
+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!**