diff --git a/js/ppom.inputs.js b/js/ppom.inputs.js index 4a20ae0..e3b6369 100644 --- 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 index 44f1213..bad7223 100644 --- 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="" data-optionid="" data-data_name="data_name() ); ?>" value="" + data-max-selected="" > @@ -223,6 +225,7 @@ class="" data-optionid="" data-data_name="data_name() ); ?>" value="" + data-max-selection="" data-allow-multiple="yes" data-required="yes"