Fixed debugging and updated docs

jonom · Jun 26, 2021 · e01e4c3 · e01e4c3
1 parent eb0372f
commit e01e4c3
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 39 deletions.
diff --git a/changelog.md b/changelog.md
@@ -2,6 +2,16 @@
 
 > 🎶 Turn and face the strange 🎶
 
+## 4.0
+
+* Refactored to facilitate performance improvements (thanks @tractorcow and @kinglozzer)
+* Minimum PHP requirement raised to 7.2
+
+#### Upgrading
+
+* If you're using `$PercentageX` and `$PercentageY` in your templates they'll need to be changed to `$FocusPoint.PercentageX` and `$FocusPoint.PercentageY`
+* For optimal performance, run the *'Hydrate the focuspoint extension image size cache'* dev task after installing.
+
 ## 3.0
 
 * Changed from two individual Fields on `Image` to a composite DB-field.

diff --git a/docs/en/advanced-usage.md b/docs/en/advanced-usage.md
@@ -16,8 +16,8 @@ When images are cropped/framed on the front-end of a website, you can pass throu
 ```html
 <% with $SomeImage %>
 	<div class="focuspoint"
-		data-focus-x="$FocusX"
-		data-focus-y="$FocusY"
+		data-focus-x="$FocusPoint.X"
+		data-focus-y="$FocusPoint.Y"
 		data-image-w="$Width"
 		data-image-h="$Height">
 		<img src="$Link" alt="" />
@@ -33,7 +33,7 @@ Try something like this to get a full-screen background image that preserves you
 <body
 	<% with $BGImage %>
 		style="background-image: url($Link);
-			background-position: $PercentageX% $PercentageY%;
+			background-position: {$FocusPoint.PercentageX}% {$FocusPoint.PercentageY}%;
 			background-size: cover;"
 	<% end_with %>
 >
@@ -44,7 +44,7 @@ Try something like this to get a full-screen background image that preserves you
 Ever made an image in a tile zoom in on roll over? You can make sure the zoom originates from the image's focus point like so:
 
 ```html
-<img src="$Link" style="transform-origin: $PercentageX% $PercentageY%" />
+<img src="$Link" style="transform-origin: {$FocusPoint.PercentageX}% {$FocusPoint.PercentageY}%" />
 ```
 
 ## Make the CMS preview bigger or smaller

diff --git a/docs/en/installation.md b/docs/en/installation.md
@@ -4,4 +4,8 @@
 composer require jonom/focuspoint
 ```
 
-See the [packagist listing](https://packagist.org/packages/jonom/focuspoint) and [installation instructions](https://docs.silverstripe.org/en/getting_started/composer/#adding-modules-to-your-project)
+See the [packagist listing](https://packagist.org/packages/jonom/focuspoint) and [installation instructions](https://docs.silverstripe.org/en/getting_started/composer/#adding-modules-to-your-project)
+
+## Hydration task
+
+For optimal performance, run the *'Hydrate the focuspoint extension image size cache'* dev task after installing. It [may take a while](https://github.com/jonom/silverstripe-focuspoint/pull/91#issuecomment-799409128) if you have many images, so you may want to do it during a quiet time for your site.
diff --git a/docs/en/troubleshooting.md b/docs/en/troubleshooting.md
@@ -15,7 +15,7 @@ FocusPointField:
 
 ### Debug front-end image
 
-Add `.DebugFocusPoint` to the end of an image object in your template to output html markup showing you the focuspoint of the image.
+Add `.DebugFocusPoint` to the end of an image object in your template to output html markup showing you the focus point of the image.
 
 ```html
 $MyImage.ScaleWidth(200).DebugFocusPoint

diff --git a/src/Extensions/FocusPointExtension.php b/src/Extensions/FocusPointExtension.php
@@ -22,38 +22,6 @@
  */
 class FocusPointExtension extends Extension
 {
-    /**
-     * Generate a percentage based description of x focus point for use in CSS.
-     * Range is 0% - 100%. Example x=.5 translates to 75%
-     * Use in templates with {$PercentageX}%.
-     *
-     * @return int
-     */
-    public function PercentageX(): int
-    {
-        $field = $this->owner->FocusPoint;
-        if ($field) {
-            return intval(round(DBFocusPoint::focusCoordToOffset($field->getX()) * 100));
-        }
-        return 0;
-    }
-
-    /**
-     * Generate a percentage based description of y focus point for use in CSS.
-     * Range is 0% - 100%. Example y=-.5 translates to 75%
-     * Use in templates with {$PercentageY}%.
-     *
-     * @return int
-     */
-    public function PercentageY(): int
-    {
-        $field = $this->owner->FocusPoint;
-        if ($field) {
-            return intval(round(DBFocusPoint::focusCoordToOffset($field->getY()) * 100));
-        }
-        return 0;
-    }
-
     /**
      * Debug output for this focus point image
      *

diff --git a/src/FieldType/DBFocusPoint.php b/src/FieldType/DBFocusPoint.php
@@ -9,6 +9,8 @@
 use SilverStripe\Assets\Image_Backend;
 use SilverStripe\Assets\Storage\DBFile;
 use SilverStripe\ORM\FieldType\DBComposite;
+use SilverStripe\ORM\FieldType\DBHTMLText;
+use SilverStripe\View\Requirements;
 
 /**
  * Focus point composite field.
@@ -285,4 +287,28 @@ public function applyCrop(Image_Backend $backend, array $cropData): ?Image_Backe
                 return $backend->resize($width, $height);
         }
     }
+
+    /**
+     * Generate a percentage based description of x focus point for use in CSS.
+     * Range is 0% - 100%. Example x=.5 translates to 75%
+     * Use in templates with {$PercentageX}%.
+     *
+     * @return int
+     */
+    public function PercentageX(): int
+    {
+        return intval(round(DBFocusPoint::focusCoordToOffset($this->getX()) * 100));
+    }
+
+    /**
+     * Generate a percentage based description of y focus point for use in CSS.
+     * Range is 0% - 100%. Example y=-.5 translates to 25%
+     * Use in templates with {$PercentageY}%.
+     *
+     * @return int
+     */
+    public function PercentageY(): int
+    {
+        return intval(round(DBFocusPoint::focusCoordToOffset($this->getY()) * 100));
+    }
 }
diff --git a/templates/JonoM/FocusPoint/FocusPointDebug.ss b/templates/JonoM/FocusPoint/FocusPointDebug.ss
@@ -1,7 +1,7 @@
 <div class="focuspoint-debug">
 	<div class="focuspoint-debug__image">
 		<img src="$URL" alt="" width="$Width" height="$Height"  />
-		<span class="focuspoint-debug__crosshair" style="left:$PercentageX%; top:$PercentageY%;"></span>
+		<span class="focuspoint-debug__crosshair" style="left:$FocusPoint.PercentageX%; top:$FocusPoint.PercentageY%;"></span>
 	</div>
 	<p class="focuspoint-debug__info">$Name<br>FocusX: $FocusPoint.X, FocusY: $FocusPoint.Y, Class: $ClassName</p>
 </div>