Optimize edit preview

Author: aatanasovdev

css/cloudinary.css

@@ -123,15 +123,15 @@ public function rest_save_asset( $request ) {
 		$text_overlay = $request->get_param( 'textOverlay' );
 
 		if ( isset( $text_overlay ) && array_key_exists( 'transformation', (array) $text_overlay ) ) {
-			$result = $this->save_transformation_type( $attachment_id, $text_overlay['transformation'], $type, 'text_overlay' );
+			$result = $this->save_transformation_type( $attachment_id, $text_overlay['transformation'], $type, 'text_overlay', $text_overlay );
 			$return = array_merge( $return, $result );
 		}
 
 		// Save image overlay even if empty (allow clearing).
 		$image_overlay = $request->get_param( 'imageOverlay' );
 
 		if ( isset( $image_overlay ) && array_key_exists( 'transformation', (array) $image_overlay ) ) {
-			$result = $this->save_transformation_type( $attachment_id, $image_overlay['transformation'], $type, 'image_overlay' );
+			$result = $this->save_transformation_type( $attachment_id, $image_overlay['transformation'], $type, 'image_overlay', $image_overlay );
 			$return = array_merge( $return, $result );
 		}
 
@@ -145,27 +145,32 @@ public function rest_save_asset( $request ) {
 	 * @param string $transformation Transformation string.
 	 * @param string $type Resource type.
 	 * @param string $save_type Type to save (transformations, text_overlay, image_overlay).
+	 * @param array  $full_data Full data for the transformation type.
 	 * @return array
 	 */
-	protected function save_transformation_type( $attachment_id, $transformation, $type, $save_type ) {
+	protected function save_transformation_type( $attachment_id, $transformation, $type, $save_type, $full_data = null ) {
 		$media                = $this->assets->media;
 		$transformation_array = $media->get_transformations_from_string( $transformation, $type );
 		$cleaned              = Api::generate_transformation_string( $transformation_array, $type );
 
+		if ( ! empty( $full_data ) ) {
+			$full_data['transformation'] = $cleaned;
+		}
+
 		switch ( $save_type ) {
 			case 'transformations':
 				Relate::update_transformations( $attachment_id, $cleaned );
 				break;
 			case 'text_overlay':
-				break;
 			case 'image_overlay':
+				Relate::update_transformations_overlay( $attachment_id, $full_data, $save_type );
 				break;
 		}
 
 		$result = array( $save_type => $cleaned );
 
 		if ( $cleaned !== $transformation ) {
-			$result['note'] = __( 'Some transformations were invalid and were removed.', 'cloudinary' );
+			$result['note'] = __( 'There are incorrect transformations, please set correct ones.', 'cloudinary' );
 		}
 
 		return $result;

js/asset-edit.js

@@ -93,6 +93,24 @@ public static function update_transformations( $attachment_id, $transformations
 		$relationship->save();
 	}
 
+	/**
+	 * Update transformations for an asset.
+	 *
+	 * @param int        $attachment_id   The attachment ID.
+	 * @param array|null $overlay_data    The overlay transformations.
+	 * @param string     $save_type       The type of overlay.
+	 */
+	public static function update_transformations_overlay( $attachment_id, $overlay_data, $save_type ) {
+		$relationship = Relationship::get_relationship( $attachment_id );
+
+		if ( ! in_array( $save_type, array( 'text_overlay', 'image_overlay' ), true ) ) {
+			return;
+		}
+
+		$relationship->$save_type = json_encode( $overlay_data );
+		$relationship->save();
+	}
+
 	/**
 	 * Get the transformations for an asset.
 	 *

php/assets/class-rest-assets.php

@@ -18,6 +18,10 @@ $color-cld-description: rgba(0, 0, 1, 0.5);
 $color-cld-dark-description: rgba(0, 0, 1, 0.75);
 $color-cld-coral: #ff5050;
 $color-grey-background: #f1f1f1;
+$color-transformations-blue: #51a3ff;
+$color-transformations-yellow: #f2d864;
+$color-transformations-cyan: #54c8db;
+$color-transformations-background: #262c35;
 
 /** Sizes */
 $content-width: 870px;

php/class-relate.php

@@ -90,5 +90,48 @@
 	.cld-ui-suffix {
 		margin-left: 0;
 	}
+
+	.cld-ui-preview {
+		box-sizing: border-box;
+	}
 }
 
+#asset-preview-transformation-string {
+	box-sizing: border-box;
+	display: block;
+	max-width: 100%;
+	overflow-wrap: normal;
+	word-break: break-all;
+	background: $color-transformations-background;
+	padding: 10px;
+
+	text-decoration: none;
+
+	&:hover {
+		span {
+			text-decoration: underline;
+		}
+	}
+
+	.string-preview {
+		&-base {
+			word-break: break-all;
+		}
+
+		&-transformations {
+			color: $color-white;
+		}
+
+		&-image-overlay {
+			color: $color-transformations-blue;
+		}
+
+		&-text-overlay {
+			color: $color-transformations-cyan;
+		}
+
+		&-public-id {
+			color: $color-transformations-yellow;
+		}
+	}
+}