upskill-event-manager/assets/js/background-preview.js
Ben Reed cdc5ea85f4 feat: Add comprehensive CSS, JavaScript and theme asset infrastructure
Add massive collection of CSS, JavaScript and theme assets that were previously excluded:

**CSS Files (681 total):**
- HVAC plugin-specific styles (hvac-*.css): 34 files including dashboard, certificates, registration, mobile nav, accessibility fixes, animations, and welcome popup
- Theme framework files (Astra, builder systems, layouts): 200+ files
- Plugin compatibility styles (WooCommerce, WPForms, Elementor, Contact Form 7): 150+ files
- WordPress core and editor styles: 50+ files
- Responsive and RTL language support: 200+ files

**JavaScript Files (400+ total):**
- HVAC plugin functionality (hvac-*.js): 27 files including menu systems, dashboard enhancements, profile sharing, mobile responsive features, accessibility, and animations
- Framework and library files: jQuery plugins, GSAP, AOS, Swiper, Chart.js, Lottie, Isotope
- Plugin compatibility scripts: WPForms, WooCommerce, Elementor, Contact Form 7, LifterLMS
- WordPress core functionality: customizer, admin, block editor compatibility
- Third-party integrations: Stripe, SMTP, analytics, search functionality

**Assets:**
- Certificate background images and logos
- Comprehensive theme styling infrastructure
- Mobile-responsive design systems
- Cross-browser compatibility assets
- Performance-optimized minified versions

**Updated .gitignore:**
- Fixed asset directory whitelisting patterns to properly include CSS/JS/images
- Added proper directory structure recognition (!/assets/css/, !/assets/js/, etc.)
- Maintains security by excluding sensitive files while including essential assets

This commit provides the complete frontend infrastructure needed for:
- Full theme functionality and styling
- Plugin feature implementations
- Mobile responsiveness and accessibility
- Cross-browser compatibility
- Performance optimization
- Developer workflow support
2025-08-11 16:20:31 -03:00

66 lines
1.6 KiB
JavaScript

/* global wpforms_gutenberg_form_selector */
/* jshint es3: false, esversion: 6 */
import PropTypes from 'prop-types';
/**
* @param strings.remove_image
*/
/**
* React component for the background preview.
*
* @since 1.8.8
*
* @param {Object} props Component props.
* @param {Object} props.attributes Block attributes.
* @param {Function} props.onRemoveBackground Function to remove the background.
* @param {Function} props.onPreviewClicked Function to handle the preview click.
*
* @return {Object} React component.
*/
const BackgroundPreview = ( { attributes, onRemoveBackground, onPreviewClicked } ) => {
const { Button } = wp.components;
const { strings } = wpforms_gutenberg_form_selector;
return (
<div className="wpforms-gutenberg-form-selector-background-preview">
<style>
{ `
.wpforms-gutenberg-form-selector-background-preview-image {
--wpforms-background-url: ${ attributes.backgroundUrl };
}
` }
</style>
<input
className="wpforms-gutenberg-form-selector-background-preview-image"
onClick={ onPreviewClicked }
tabIndex={ 0 }
type="button"
onKeyDown={
( event ) => {
if ( event.key === 'Enter' || event.key === ' ' ) {
onPreviewClicked();
}
}
}
>
</input>
<Button
isSecondary
className="is-destructive"
onClick={ onRemoveBackground }
>
{ strings.remove_image }
</Button>
</div>
);
};
BackgroundPreview.propTypes = {
attributes: PropTypes.object.isRequired,
onRemoveBackground: PropTypes.func.isRequired,
onPreviewClicked: PropTypes.func.isRequired,
};
export default BackgroundPreview;