From 8a4d50a54595d0ea13ca854b5f1e40f057308467 Mon Sep 17 00:00:00 2001
From: Rasso Hilber <mail@rassohilber.com>
Date: Wed, 24 Jul 2024 23:15:44 +0200
Subject: [PATCH] Support for images in ACF blocks

---
 focal-point-picker.js    | 22 +++++++++++++++-------
 focal-point-picker.php   |  2 +-
 package.json             |  1 +
 readme.md                |  8 ++++++++
 src/FocalPoint.php       | 20 ++++++++++++++++++++
 src/FocalPointPicker.php |  2 +-
 6 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/focal-point-picker.js b/focal-point-picker.js
index d258170..ce7265f 100644
--- a/focal-point-picker.js
+++ b/focal-point-picker.js
@@ -98,20 +98,25 @@
       const mediaModalRoot = this.closest(".media-frame-content");
       const classicRoot = this.closest("#post-body-content");
 
-      this.imageWrap = mediaModalRoot
+      const imageWrap = mediaModalRoot
         ? mediaModalRoot.querySelector(".thumbnail-image")
         : classicRoot
           ? classicRoot.querySelector(".wp_attachment_image p")
           : undefined;
 
-      if (
-        !this.imageWrap ||
-        this.imageWrap.hasAttribute("data-fcp-wrap")
-      ) {
+      if (!imageWrap) {
+        console.error("No imageWrap found", this);
+        return;
+      }
+
+      if (imageWrap.hasAttribute("data-fcp-wrap")) {
+        console.log("already initialized", this);
         return;
       }
-      this.imageWrap.setAttribute("data-fcp-wrap", "");
 
+      imageWrap.setAttribute("data-fcp-wrap", "");
+
+      this.imageWrap = imageWrap;
       this.img = this.imageWrap.querySelector("img");
       if (!this.img) {
         console.error("no image found in imageWrap", this.imageWrap);
@@ -130,7 +135,7 @@
      * @return {void}
      */
     disconnectedCallback() {
-      const { handle, preview, img, resetButton } = this;
+      const { handle, preview, img, imageWrap, resetButton } = this;
 
       if (preview) {
         this.appendChild(preview);
@@ -141,6 +146,9 @@
       if (img) {
         img.removeEventListener("click", this.onImageClick);
       }
+      if (imageWrap) {
+        imageWrap.removeAttribute("data-fcp-wrap");
+      }
       if (resetButton) {
         resetButton.removeEventListener("click", this.reset);
       }
diff --git a/focal-point-picker.php b/focal-point-picker.php
index 3651b0c..f3d93d8 100644
--- a/focal-point-picker.php
+++ b/focal-point-picker.php
@@ -3,7 +3,7 @@
 /**
  * Plugin Name: focal-point-picker
  * Description: Set a custom focal point for your images, directly in the WP media grid
- * Version: 1.2.6
+ * Version: 1.3.0
  * Author: Rasso Hilber
  * Author URI: https://rassohilber.com/
  * Tested up to: 6.7
diff --git a/package.json b/package.json
index ab7eccd..8a7ae65 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "prepare": "husky",
+    "format:assets": "npx prettier --write '**/*.{js,css}'",
     "format:php": "vendor/bin/php-cs-fixer fix --config .phpcsfixer.config.php --allow-risky=yes",
     "readme:generate": "curl -L https://raw.githubusercontent.com/fumikito/wp-readme/master/wp-readme.php | php"
   },
diff --git a/readme.md b/readme.md
index 6b2a27b..f7f8e7e 100644
--- a/readme.md
+++ b/readme.md
@@ -48,6 +48,14 @@ object(FocalPointPicker\FocalPoint)#2796 (4) {
   float(50)
   ["topPercent"]=>
   float(50)
+  ["x"]=>
+  float(0.5)
+  ["y"]=>
+  float(0.5)
+  ["xPercent"]=>
+  float(50)
+  ["yPercent"]=>
+  float(50)
 }
 ```
 
diff --git a/src/FocalPoint.php b/src/FocalPoint.php
index 0be48e7..0749985 100644
--- a/src/FocalPoint.php
+++ b/src/FocalPoint.php
@@ -17,6 +17,12 @@ final class FocalPoint
     public float $leftPercent;
     public float $topPercent;
 
+    public float $x;
+    public float $y;
+
+    public float $xPercent;
+    public float $yPercent;
+
     public function __construct(WP_Post|int $post)
     {
         $post = get_post($post);
@@ -32,6 +38,20 @@ public function __construct(WP_Post|int $post)
 
         $this->leftPercent = $this->left * 100;
         $this->topPercent = $this->top * 100;
+
+        $this->x = $this->left;
+        $this->y = $this->top;
+
+        $this->xPercent = $this->x * 100;
+        $this->yPercent = $this->y * 100;
+    }
+
+    /**
+     * Is the focal point's value equal to the default (0.5, 0.5)?
+     */
+    public function hasDefaultValue(): bool
+    {
+        return $this->x === 0.5 && $this->y === 0.5;
     }
 
     /**
diff --git a/src/FocalPointPicker.php b/src/FocalPointPicker.php
index 649ef0f..ad31a1d 100644
--- a/src/FocalPointPicker.php
+++ b/src/FocalPointPicker.php
@@ -60,7 +60,7 @@ public static function attachmentFieldsToEdit(
         <focal-point-picker>
             <div data-focalpoint-input-wrap>
                 <input data-focalpoint-input type='text' readonly value="<?php esc_attr_e($focalPoint->left) ?> <?php esc_attr_e($focalPoint->top) ?>" id='focalpoint-input' name='attachments[<?php esc_attr_e($post->ID) ?>][focalpoint]'>
-                <button data-focalpoint-reset disabled type="button" class="button-primary">Reset</button>
+                <button data-focalpoint-reset <?= disabled($focalPoint->hasDefaultValue()) ?> type="button" class="button-primary">Reset</button>
             </div>
 
             <div data-focalpoint-preview aria-hidden="true">