Different focus selection for different widths (#12)

* Adding more Fields to the front-end * Sending and receiveing Widths through ajax * updateing controller for requested widths * Added Multiple Focus Areas for diffrent widths * Added translatable strings * resolveing merge conflicts * phpcs * phpcs * added new lines * updated ajax for getFocusPoints * build * updateing ajax for all and build * removed data fields * codestyle * fix * codestyle fix * fix maxWidth and maxHeight * fix space * fix
brianteeman · Jul 17, 2018 · b9271c7 · b9271c7
1 parent 87dcea4
commit b9271c7
Show file tree

Hide file tree

Showing 9 changed files with 217 additions and 119 deletions.
diff --git a/administrator/components/com_media/src/Controller/AdaptiveImageController.php b/administrator/components/com_media/src/Controller/AdaptiveImageController.php
@@ -42,30 +42,28 @@ public function execute($task)
 		{
 			case "setfocus" :
 				$imgPath = $this->input->getString('path');
+				$width   = $this->input->getInt('width');
 				$dataFocus = array (
-					"box-left"			=> $this->input->getInt('box-left'),
-					"box-top"			=> $this->input->getInt('box-top'),
-					"box-width"			=> $this->input->getInt('box-width'),
-					"box-height"		=> $this->input->getInt('box-height')
+					"box-left"   => $this->input->getInt('box-left'),
+					"box-top"    => $this->input->getInt('box-top'),
+					"box-width"  => $this->input->getInt('box-width'),
+					"box-height" => $this->input->getInt('box-height')
 				);
 				$storage = new JSONFocusStore;
-				$storage->setFocus($dataFocus, $imgPath);
-				$this->cropImage($imgPath);
+				$storage->setFocus($dataFocus, $width, $imgPath);
 				return true;
 				break;
 			case "cropBoxData" :
 				$this->app->setHeader('Content-Type', 'application/json');
 				$imgPath = $this->input->getString('path');
+				$width   = $this->input->getInt('width');
 				$storage = new JSONFocusStore;
-				echo $storage->getFocus($imgPath);
+				echo $storage->getFocus($imgPath, $width);
 				$this->app->close();
 				return true;
 				break;
 			case "cropImage" :
-				// @TODO Resize image to any aspect ratio.
-				$imgPath = "/images/" . $this->input->getString('path');
-
-				// $finalWidth = $this->input->getFloat('width');
+				$imgPath = $this->input->getString('path');
 				$this->cropImage($imgPath);
 				return true;
 				break;
@@ -77,20 +75,24 @@ public function execute($task)
 	 * Crop the images around the focus area
 	 * 
 	 * @param   string  $imgPath  image path
+	 * @param   array   $widths   requested widths
 	 * 
 	 * @return  boolean
 	 * 
 	 * @since 4.0.0 
 	 */
-	public function cropImage($imgPath)
+	public function cropImage($imgPath, $widths = null)
 	{
 		$storage = new JSONFocusStore;
-		$dataFocus = json_decode($storage->getFocus($imgPath), true);
-		$width = array(240, 360, 480, 768, 940, 1024);
-		foreach ($width as $finalWidth)
+		if ($widths == null)
+		{
+			$widths = array(240, 360, 480, 768, 940, 1024);
+		}
+		foreach ($widths as $width)
 		{
+			$dataFocus = json_decode($storage->getFocus($imgPath, $width), true);
 			$image = new SmartCrop(".." . $imgPath);
-			$image->compute($dataFocus, $finalWidth);
+			$image->compute($dataFocus, $width);
 		}
 		return true;
 	}

diff --git a/administrator/language/en-GB/en-GB.plg_media-action_smartcrop.ini b/administrator/language/en-GB/en-GB.plg_media-action_smartcrop.ini
@@ -7,4 +7,5 @@ PLG_MEDIA-ACTION_SMARTCROP_PARAM_X="data focus x"
 PLG_MEDIA-ACTION_SMARTCROP_PARAM_X_PRE="Focus-X"
 PLG_MEDIA-ACTION_SMARTCROP_PARAM_Y="data focus top"
 PLG_MEDIA-ACTION_SMARTCROP_PARAM_Y_PRE="Focus-Y"
+PLG_MEDIA-ACTION_SMARTCROP_REQUESTED_WIDTH="Choose focus for diffrent sizes (optional)."
 PLG_MEDIA-ACTION_SMARTCROP_QUALITY="Quality"
diff --git a/libraries/src/AdaptiveImage/FocusStoreInterface.php b/libraries/src/AdaptiveImage/FocusStoreInterface.php
@@ -22,25 +22,27 @@ interface FocusStoreInterface
 	 * Pubic function for storeing the focus points
 	 * to the file system.
 	 *
-	 * @param   array   $dataFocus  Focus point selected
-	 * @param   string  $filePath   Path of the image
+	 * @param   array    $dataFocus  Focus point selected
+	 * @param   integer  $width      Width of the image
+	 * @param   string   $filePath   Path of the image
 	 *
 	 * @return void
 	 *
 	 * @since 4.0.0
 	 */
-	public function setFocus($dataFocus,$filePath);
+	public function setFocus($dataFocus, $width, $filePath);
 
 	/**
 	 * Public function for getting the focus point
 	 * from the file system
 	 *
-	 * @param   string  $imgSrc  Path of the image
-	 *
+	 * @param   string   $imgSrc  Path of the image
+	 * @param   integer  $width   Width of the image
+	 * 
 	 * @return string
 	 *
 	 * @since 4.0.0
 	 */
-	public function getFocus($imgSrc);
+	public function getFocus($imgSrc, $width);
 
 }
diff --git a/libraries/src/AdaptiveImage/JSONFocusStore.php b/libraries/src/AdaptiveImage/JSONFocusStore.php
@@ -46,22 +46,24 @@ public function __construct()
 	 *
 	 * index.php?option=com_media&task=adaptiveimage.setfocus&path=/images/sampledata/fruitshop/bananas_1.jpg
 	 *
-	 * @param   array   $dataFocus  Array of the values of diffrent focus point
-	 *
-	 * @param   string  $imgPath    Full path for the file
+	 * @param   array    $dataFocus  Array of the values of diffrent focus point
+	 * @param   integer  $width      Width of the image
+	 * @param   string   $imgPath    Full path for the file
 	 *
 	 * @return  boolean
 	 *
 	 * @since 4.0.0
 	 */
-	public function setFocus($dataFocus,$imgPath)
+	public function setFocus($dataFocus, $width, $imgPath)
 	{
 		$newEntry = array(
 			$imgPath => array(
-				"box-left"			=> $dataFocus['box-left'],
-				"box-top"			=> $dataFocus['box-top'],
-				"box-width"			=> $dataFocus['box-width'],
-				"box-height"		=> $dataFocus['box-height']
+				$width => array(
+					"box-left"   => $dataFocus['box-left'],
+					"box-top"    => $dataFocus['box-top'],
+					"box-width"  => $dataFocus['box-width'],
+					"box-height" => $dataFocus['box-height']
+				)
 			)
 		);
 
@@ -71,15 +73,20 @@ public function setFocus($dataFocus,$imgPath)
 
 			$prevData = json_decode($prevData, true);
 
-			$prevData[$imgPath]["box-left"] 			= $dataFocus['box-left'];
-			$prevData[$imgPath]["box-top"] 				= $dataFocus['box-top'];
-			$prevData[$imgPath]["box-width"] 			= $dataFocus['box-width'];
-			$prevData[$imgPath]["box-height"] 			= $dataFocus['box-height'];
+			$prevData[$imgPath][$width]["box-left"]   = $dataFocus['box-left'];
+			$prevData[$imgPath][$width]["box-top"]    = $dataFocus['box-top'];
+			$prevData[$imgPath][$width]["box-width"]  = $dataFocus['box-width'];
+			$prevData[$imgPath][$width]["box-height"] = $dataFocus['box-height'];
+
+			$max = $this->findMax($prevData[$imgPath]);
+			$prevData[$imgPath]["max"] = $max;
 
 			file_put_contents(static::$dataLocation, json_encode($prevData));
 		}
 		else
 		{
+			$newEntry[$imgPath]["max"] = $newEntry[$imgPath][$width];
+
 			file_put_contents(static::$dataLocation, json_encode($newEntry));
 		}
 
@@ -90,13 +97,14 @@ public function setFocus($dataFocus,$imgPath)
 	/**
 	 * Function to get the focus point
 	 *
-	 * @param   string  $imgPath  Image Path
+	 * @param   string   $imgPath  Image Path
+	 * @param   integer  $width    Width of the corresponding data focus point
 	 *
 	 * @return  array
 	 *
 	 * @since 4.0.0
 	 */
-	public function getFocus($imgPath)
+	public function getFocus($imgPath, $width = null)
 	{
 		if (!filesize(static::$dataLocation))
 		{
@@ -109,7 +117,14 @@ public function getFocus($imgPath)
 
 		if (array_key_exists($imgPath, $prevData))
 		{
-			return json_encode($prevData[$imgPath]);
+			if (array_key_exists($width, $prevData[$imgPath]))
+			{
+				return json_encode($prevData[$imgPath][$width]);
+			}
+			else
+			{
+				return json_encode($prevData[$imgPath]["max"]);
+			}
 		}
 		else
 		{
@@ -134,4 +149,38 @@ private function checkStorage($dataLocation)
 
 		return true;
 	}
+	/**
+	 * Fine the max value of all the focus area selected
+	 * 
+	 * @param   array  $dataFocuses  Collection of dataFocus for diffrent sizes.
+	 * 
+	 * @return  array
+	 * 
+	 * @since 4.0.0
+	 */
+	private function findMax($dataFocuses)
+	{
+		$minX = 9999;
+		$minY = 9999;
+		$maxX = 0;
+		$maxY = 0;
+
+		foreach ($dataFocuses as $width => $focus)
+		{
+			if ($width != "max")
+			{
+				$minX = min($minX, $focus["box-left"]);
+				$minY = min($minY, $focus["box-top"]);
+				$maxX = max($maxX, $focus["box-left"] + $focus["box-width"]);
+				$maxY = max($maxY, $focus["box-top"] + $focus["box-height"]);
+			}
+		}
+		$maxFocus = array(
+			"box-left"   => $minX,
+			"box-top"    => $minY,
+			"box-width"  => $maxX - $minX,
+			"box-height" => $maxY - $minY
+		);
+		return $maxFocus;
+	}
 }
diff --git a/media/plg_media-action_smartcrop/css/smartcrop.css b/media/plg_media-action_smartcrop/css/smartcrop.css
@@ -1 +1,6 @@
-/* This is the CSS File for Smart Crop */
+/* This is the CSS File for Smart Crop */
+#attrib-smartcrop
+{
+    overflow-y: auto
+}
+
diff --git a/media/plg_media-action_smartcrop/css/smartcrop.min.css b/media/plg_media-action_smartcrop/css/smartcrop.min.css
@@ -0,0 +1 @@
+#attrib-smartcrop{overflow-y:auto}