v1.3.0-b2

- Added animation when thumbnail rotated

Author: IMC-GER

imcger/imgupload/composer.json

@@ -3,8 +3,8 @@
     "type": "phpbb-extension",
     "description": "Using ImageMagick php librarie for resize image attachments and creating thumbnails.",
     "homepage": "https://github.com/IMC-GER/phpBB-Image-upload-use-ImageMagick/tags",
-    "version": "1.3.0-b1",
-    "time": "2023-10-07",
+    "version": "1.3.0-b2",
+    "time": "2023-10-08",
     "license": "GPL-2.0-only",
     "authors": [
         {

imcger/imgupload/controller/save_rotated_img_controller.php

@@ -192,25 +192,25 @@ private function rotate_image($path, $deg)
 	}
 
 	/**
-	 * Generate json return
+	 * Generate json string
 	 *
 	 * @param 	int		$status			Status 0=id's, 3=redirect, 4=file not found, 5=error
 	 * @param	string	$title			Messagebox title
 	 * @param 	string	$message		Messagebox message
-	 * @param	int		$old_attach_id	Rotation angle
-	 * @param 	int		$new_attach_id	Path to the image file
+	 * @param	int		$old_attach_id	Previous attachment id
+	 * @param 	int		$new_attach_id	New attachment id
 	 *
 	 * @return	string	$json
 	 */
 	private function json_response($status, $title = '', $message = '', $old_attach_id = 0, $new_attach_id = 0)
 	{
-		$json = new JsonResponse(array(
+		$json = new JsonResponse([
 			'status'		=> (int) $status,
 			'title'			=> $title,
 			'message'		=> $message,
 			'oldAttachId'	=> (int) $old_attach_id,
 			'newAttachId'	=> (int) $new_attach_id,
-		));
+		]);
 
 		return $json;
 	}

imcger/imgupload/styles/all/template/event/overall_footer_body_after.html

@@ -132,8 +132,27 @@
 	imgOrientationIndex: [],
 	imgOrientationValue: [],
 
-	rotate: function(attach_id, deg) {
-		let image = document.getElementById('img-' + attach_id);
+	rotate: function(attach_id, deg, clockwise) {
+		let image = document.getElementById('img-' + attach_id),
+		deg_start, deg_ziel;
+
+		if (clockwise) {
+			deg_ziel  = deg == 0 ? 360 : deg;
+			deg_start = deg_ziel - 90;
+		} else {
+			deg_ziel  = (deg - 360) == (-360) ? 0 : (deg - 360);
+			deg_start = deg_ziel + 90;
+		}
+
+		image.animate(
+		  [
+			{ transform: 'rotate(' + deg_start + 'deg)' },
+			{ transform: 'rotate(' + deg_ziel + 'deg)' },
+		  ],
+		  {
+			duration: 150,
+		  },
+		);
 
 		image.style.webkitTransform = 'rotate(' + deg + 'deg)';
     	image.style.mozTransform    = 'rotate(' + deg + 'deg)';
@@ -157,7 +176,7 @@
 			this.imgOrientationValue[index] = 0;
 		}
 
-		this.rotate(attach_id, this.imgOrientationValue[index]);
+		this.rotate(attach_id, this.imgOrientationValue[index], true);
 	},
 
 	rotateLeft: function(attach_id) {
@@ -176,7 +195,7 @@
 			this.imgOrientationValue[index] += 360;
 		}
 
-		this.rotate(attach_id, this.imgOrientationValue[index]);
+		this.rotate(attach_id, this.imgOrientationValue[index], false);
 	},
 }