fix: add max image selection constrain to Image Field

Codeinwp · Sep 3, 2024 · 66bf9e8 · 66bf9e8
1 parent 649358f
commit 66bf9e8
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 14 deletions.
diff --git a/js/ppom.inputs.js b/js/ppom.inputs.js
@@ -167,18 +167,46 @@ function ppom_init_js_for_ppom_fields(ppom_fields) {
                     jQuery('.ppom-zoom-' + img_id).imageTooltip();
                 }
 
-                jQuery('.ppom-image-select input.ppom-input.image').click(function(){
-                    const multiple = jQuery(this).data('allow-multiple');
+                document.querySelectorAll('.ppom-image-select').forEach( ( /** @type{HTMLDivElement} */ container ) => {
 
-                    if( multiple ) {
-                        return;
-                    }
-
-                    if( jQuery(this).data('required') ) {
-                        jQuery(this).prop('checked', true);
-                    }
+                    /**
+                     * @type {HTMLInputElement[]} Holds the selected images.
+                     */
+                    const selectedImgs = [];
 
-                    jQuery(this).parents('.ppom-image-select').find('input.ppom-input.image').not(this).prop('checked', false);
+                    container.querySelectorAll('.pre_upload_image').forEach( (/** @type{HTMLDivElement} */ inputContainer) => {
+                        const input = inputContainer.querySelector('input');
+                        if ( ! input ) {
+                            return;
+                        }
+
+                        const multiple = input.dataset.allowMultiple;
+
+                        if ( ! multiple ) {
+                            if (input.dataset.required) {
+                                input.checked = true;
+                            }
+
+                            const siblings = Array.from(input.parentNode.parentNode.querySelectorAll('input.ppom-input.image'));
+                            siblings.filter(sibling => sibling !== input).forEach(sibling => sibling.checked = false);
+                        } else {
+                            const maxImgSelection = parseInt( input.dataset?.maxSelection ?? '0' );
+                            if ( maxImgSelection ) {
+                                inputContainer.querySelector('img')?.addEventListener( 'click', () => {
+                                    selectedImgs.push( input );
+
+                                    while( selectedImgs.length > maxImgSelection ) {
+                                        const oldestImgSelected = selectedImgs.shift();
+                                        if ( oldestImgSelected ) {
+                                            oldestImgSelected.checked = false;
+                                        }
+                                    }
+                                })
+
+                            }
+                        }
+
+                    });
                 });
 
                 // Data Tooltip

diff --git a/templates/frontend/inputs/image.php b/templates/frontend/inputs/image.php
@@ -13,10 +13,11 @@
 if ( ! defined( 'ABSPATH' ) ) {
 	exit;
 }
-$fm               = new PPOM_InputManager( $field_meta, 'image' );
-$legacy_view      = $fm->get_meta_value( 'legacy_view' );
-$multiple_allowed = $fm->get_meta_value( 'multiple_allowed' );
-$show_popup       = $fm->get_meta_value( 'show_popup' );
+$fm                = new PPOM_InputManager( $field_meta, 'image' );
+$legacy_view       = $fm->get_meta_value( 'legacy_view' );
+$multiple_allowed  = $fm->get_meta_value( 'multiple_allowed' );
+$show_popup        = $fm->get_meta_value( 'show_popup' );
+$max_img_selection = $fm->get_meta_value( 'max_checked' );
 $required = isset($field_meta['required']) && $field_meta['required'] === 'on';
 
 $input_classes = $fm->input_classes();
@@ -122,6 +123,7 @@ class="<?php echo esc_attr( $input_classes ); ?>"
 									data-optionid="<?php echo esc_attr( $option_id ); ?>"
 									data-data_name="<?php echo esc_attr( $fm->data_name() ); ?>"
 									value="<?php echo esc_attr( json_encode( $image ) ); ?>"
+									data-max-selected="<?php echo esc_attr( $max_img_selection ); ?>"
 									<?php echo $checked_option; ?>
 							>
 						<?php } else { ?>
@@ -223,6 +225,7 @@ class="<?php echo esc_attr( $option_class ); ?>"
 									data-optionid="<?php echo esc_attr( $option_id ); ?>"
 									data-data_name="<?php echo esc_attr( $fm->data_name() ); ?>"
 									value="<?php echo esc_attr( json_encode( $image ) ); ?>"
+									<?php if( $max_img_selection ) { ?> data-max-selection="<?php echo esc_attr( $max_img_selection ); ?>" <?php } ?>
 									<?php echo apply_filters( 'ppom_fe_form_element_custom_attr', '', $fm ); ?>
 									<?php if( $multiple_allowed ) { ?> data-allow-multiple="yes" <?php } ?>
 									<?php if( $required ) { ?>data-required="yes"<?php } ?>