Make image cropper container responsive

inc/admin.php

@@ -913,36 +913,36 @@ function ppom_admin_bar_menu() {
 function ppom_add_black_friday_data( $configs ) {
 	$config = $configs['default'];
 
-	$message = __( 'Conditional fields, file uploads, pricing formulas. Let customers configure products the way they need. Exclusively for existing PPOM users.', 'woocommerce-product-addon' );
+	$message   = __( 'Conditional fields, file uploads, pricing formulas. Let customers configure products the way they need. Exclusively for existing PPOM users.', 'woocommerce-product-addon' );
 	$cta_label = __( 'Get PPOM Pro', 'woocommerce-product-addon' );
 
-	$plan    = apply_filters( 'product_ppom_license_plan', 0 );
-	$license = apply_filters( 'product_ppom_license_key', false );
-	$status  = apply_filters( 'product_ppom_license_status', false );
+	$plan             = apply_filters( 'product_ppom_license_plan', 0 );
+	$license          = apply_filters( 'product_ppom_license_key', false );
+	$status           = apply_filters( 'product_ppom_license_status', false );
 	$pro_product_slug = defined( 'PPOM_PRO_BASENAME' ) ? PPOM_PRO_BASENAME : '';
 
-	$is_pro  = 'valid' === $status;
+	$is_pro     = 'valid' === $status;
 	$is_expired = 'expired' === $status || 'active-expired' === $status;
 
 	if ( $is_pro ) {
 		// translators: %s is the discount percentage.
 		$config['plugin_meta_message'] = sprintf( __( 'Black Friday Sale - up to %s off', 'woocommerce-product-addon' ), '30%' );
 		// translators: %1$s - discount, %2$s - discount.
-		$message = sprintf( __( 'Upgrade your PPOM Pro plan: %1$s off this week. Already on the plan you need? Renew early and save up to %2$s.', 'woocommerce-product-addon' ), '30%', '20%' );
+		$message   = sprintf( __( 'Upgrade your PPOM Pro plan: %1$s off this week. Already on the plan you need? Renew early and save up to %2$s.', 'woocommerce-product-addon' ), '30%', '20%' );
 		$cta_label = __( 'See your options', 'woocommerce-product-addon' );
 	} elseif ( $is_expired ) {
 		// translators: %s is the discount percentage.
 		$config['plugin_meta_message'] = sprintf( __( 'Black Friday Sale - %s off', 'woocommerce-product-addon' ), '50%' );
-		$message = __( 'Your PPOM Pro features are still here, just locked. Renew at a reduced rate this week.', 'woocommerce-product-addon' );
-		$cta_label = __( 'Reactivate now', 'woocommerce-product-addon' );
+		$message                       = __( 'Your PPOM Pro features are still here, just locked. Renew at a reduced rate this week.', 'woocommerce-product-addon' );
+		$cta_label                     = __( 'Reactivate now', 'woocommerce-product-addon' );
 	} else {
 		// translators: %s is the discount percentage.
 		$config['plugin_meta_message'] = sprintf( __( 'Black Friday Sale - %s off', 'woocommerce-product-addon' ), '60%' );
 		// translators: %s - discount.
 		$config['title'] = sprintf( __( 'PPOM Pro: %s off this week', 'woocommerce-product-addon' ), '60%' );
 	}
 
-	$url_params    = array(
+	$url_params = array(
 		'utm_term' => $is_pro ? 'plan-' . $plan : 'free',
 		'lkey'     => ! empty( $license ) ? $license : false,
 		'expired'  => $is_expired ? '1' : false,

js/file-upload.js

@@ -335,6 +335,9 @@ function ppom_show_cropped_preview(
 		.prop( 'disabled', false );
 	cropp_preview_container.find( '.ppom-cropping-size' ).show();
 
+	const container_width = jQuery(
+		'#ppom-file-container-' + file_name
+	).width();
 	const croppie_container = jQuery( '<div/>' )
 		.addClass( 'ppom-croppie-preview-' + image_id )
 		.attr( 'data-image_id', image_id )
@@ -388,6 +391,8 @@ function ppom_show_cropped_preview(
 	file_list_preview_containers[ file_name ].image_id = image_id;
 	file_list_preview_containers[ file_name ].image_url = image_url;
 
+	file_list_preview_containers[ file_name ].container_width =
+		container_width;
 	ppom_set_croppie_options( file_name, undefined, image_id );
 }
 
@@ -401,10 +406,19 @@ function ppom_set_croppie_options( file_name, viewport, image_id ) {
 				option.viewport = viewport;
 			}
 
+			const preview = file_list_preview_containers[ file_name ];
+			let applied = option;
+			if (
+				preview.container_width !== undefined &&
+				preview.container_width !== null
+			) {
+				applied = get_responsive_croppie_options(
+					option,
+					preview.container_width
+				);
+			}
 			// console.log($filelist_DIV[file_name]['croppie'][image_id]);
-			file_list_preview_containers[ file_name ].croppie[
-				image_id
-			].croppie( option );
+			preview.croppie[ image_id ].croppie( applied );
 		}
 	} );
 }
@@ -898,3 +912,62 @@ function ppom_generate_cropper_data_for_cart( field_name ) {
 				} );
 		} );
 }
+
+/**
+ * Scale Croppie boundary/viewport when the field container is narrower than
+ * configured dimensions (responsive cropper).
+ *
+ * @param {Object} baseOptions Croppie options object for the field.
+ * @param {number} max_width  Container width in pixels.
+ * @return {Object} Options safe to pass to .croppie() without mutating globals.
+ */
+function get_responsive_croppie_options( baseOptions, max_width ) {
+	const boundary = baseOptions.boundary || {};
+
+	const boundaryWidthOriginal = Number( boundary.width );
+	const boundaryHeightOriginal = Number( boundary.height );
+	if (
+		! Number.isFinite( boundaryWidthOriginal ) ||
+		! Number.isFinite( boundaryHeightOriginal ) ||
+		boundaryWidthOriginal <= 0 ||
+		boundaryHeightOriginal <= 0
+	) {
+		return baseOptions;
+	}
+	if ( max_width >= boundaryWidthOriginal ) {
+		return baseOptions;
+	}
+	if ( ! Number.isFinite( max_width ) ) {
+		return baseOptions;
+	}
+	const aspectRatio = boundaryHeightOriginal / boundaryWidthOriginal || 1;
+	const boundaryWidth = Math.floor( max_width );
+	const boundaryHeight = Math.floor( boundaryWidth * aspectRatio );
+
+	const result = {
+		...baseOptions,
+		boundary: {
+			...baseOptions.boundary,
+			width: boundaryWidth,
+			height: boundaryHeight,
+		},
+	};
+
+	if (
+		baseOptions.viewport &&
+		baseOptions.viewport.width &&
+		baseOptions.viewport.height
+	) {
+		const scale = boundaryWidth / boundaryWidthOriginal;
+		const viewportWidth = Math.floor( baseOptions.viewport.width * scale );
+		const viewportHeight = Math.floor( baseOptions.viewport.height * scale );
+
+		result.viewport = {
+			...baseOptions.viewport,
+			width: Math.min( viewportWidth, boundaryWidth - 2 ),
+			height: Math.min( viewportHeight, boundaryHeight - 2 ),
+		};
+	}
+
+	return result;
+}