211 lines
5.3 KiB
Markdown
211 lines
5.3 KiB
Markdown
# 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!**
|