Make the focal point resettable

hirasso · Jul 11, 2024 · 4ea9f2f · 4ea9f2f
1 parent db9a786
commit 4ea9f2f
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 18 deletions.
diff --git a/wp-focalpoint.css b/wp-focalpoint.css
@@ -5,10 +5,33 @@
   /* display: none !important; */
 }
 
+/**
+ * Hidden elements if not initialized
+ */
+focal-point-picker [data-focalpoint-handle],
+focal-point-picker [data-focalpoint-preview] {
+  display: none;
+}
+
+/**
+ * The input element
+ */
+[data-focalpoint-input-wrap] {
+  display: flex;
+  gap: 0.5rem;
+}
+[data-focalpoint-input-wrap] > * {
+  flex: 1;
+}
+[data-focalpoint-reset] {
+  cursor: pointer;
+  max-width: fit-content;
+}
+
 /**
  * The handle
  */
-[data-focal-point-handle] {
+[data-focalpoint-handle] {
   box-sizing: border-box;
   position: absolute;
   z-index: 2;
@@ -22,10 +45,10 @@
   user-select: all;
   filter: drop-shadow(1px 1px 2px rgb(0 0 0 / 0.3));
 }
-[data-focal-point-handle]:focus {
+[data-focalpoint-handle]:focus {
   outline: 0 !important;
 }
-[data-focal-point-handle]::before {
+[data-focalpoint-handle]::before {
   content: "";
   display: block;
   position: absolute;
@@ -35,7 +58,7 @@
   background: white;
   transform: translate(-50%, -50%);
 }
-[data-focal-point-handle]:after {
+[data-focalpoint-handle]:after {
   content: "";
   display: block;
   --size: 1.2rem;
@@ -71,7 +94,7 @@
   z-index: 99999999;
   --size: 20svw;
   width: var(--size);
-  top: 0;
+  bottom: 0;
   right: 0;
   box-sizing: border-box;
   padding: 1rem;

diff --git a/wp-focalpoint.js b/wp-focalpoint.js
@@ -50,6 +50,8 @@
     preview;
     /** @type {HTMLButtonElement} handle */
     handle;
+    /** @type {HTMLButtonElement} resetButton */
+    resetButton;
     /** @type {boolean} dragging */
     dragging = false;
 
@@ -62,7 +64,10 @@
         this.querySelector("[data-focalpoint-preview]")
       );
       this.handle = /** @type {!HTMLButtonElement} */ (
-        this.querySelector("[data-focal-point-handle]")
+        this.querySelector("[data-focalpoint-handle]")
+      );
+      this.resetButton = /** @type {!HTMLButtonElement} */ (
+        this.querySelector("[data-focalpoint-reset]")
       );
     }
 
@@ -124,14 +129,20 @@
      * @return {void}
      */
     disconnectedCallback() {
-      const { handle, preview } = this;
+      const { handle, preview, img, resetButton } = this;
 
       if (preview) {
         this.appendChild(preview);
       }
       if (handle) {
         this.appendChild(handle);
       }
+      if (img) {
+        img.removeEventListener("click", this.onImageClick);
+      }
+      if (resetButton) {
+        resetButton.removeEventListener("click", this.reset);
+      }
       window.removeEventListener("resize", this.onResize);
     }
 
@@ -140,7 +151,7 @@
      * @return {void}
      */
     initializeUI = () => {
-      const { imageWrap, img, handle, preview } = this;
+      const { imageWrap, img, handle, preview, resetButton } = this;
 
       if (!imageWrap || !img) {
         console.error("Some elements are missing", { imageWrap, img });
@@ -156,12 +167,9 @@
       this.onResize();
 
       img.addEventListener("click", this.onImageClick);
+      resetButton.addEventListener("click", this.reset);
 
-      $(handle).on("dblclick", () => {
-        this.setHandlePosition(0.5, 0.5);
-        this.applyFocalPointFromHandle();
-        $("#focalpoint-input").trigger("change");
-      });
+      $(handle).on("dblclick", this.reset);
 
       $(handle).on("mouseenter", () => this.togglePreview(true));
       $(handle).on("mouseleave", () => {
@@ -253,6 +261,15 @@
       );
     };
 
+    /**
+     * Resets the focal point
+     */
+    reset = () => {
+      this.setHandlePosition(0.5, 0.5);
+      this.applyFocalPointFromHandle();
+      $("#focalpoint-input").trigger("change");
+    };
+
     /**
      * Set the handle position, based on the image
      * @param {number} leftPercent - The left position as a percentage.
@@ -298,10 +315,20 @@
       const handleRect = handle.getBoundingClientRect();
       const imgRect = img.getBoundingClientRect();
 
-      return [
+      const point = [
         (handleRect.left - imgRect.left) / imgRect.width,
         (handleRect.top - imgRect.top) / imgRect.height,
-      ].map((number) => parseFloat((number * 100).toFixed(2)));
+      ].map((value) => {
+        /** We want percentages */
+        value *= 100;
+        /** Round if close to 50 */
+        if (Math.abs(value - 50) < 2) {
+          value = 50;
+        }
+        return value;
+      });
+
+      return point.map((number) => parseFloat(number.toFixed(2)));
     }
 
     /**

diff --git a/wp-focalpoint.php b/wp-focalpoint.php
@@ -71,12 +71,16 @@ public static function attachmentFieldsToEdit(
         ob_start() ?>
 
         <focal-point-picker>
-            <input type='text' readonly value="<?= $focalPoint['left'] ?> <?= $focalPoint['top'] ?>" id='focalpoint-input' name='attachments[<?= $post->ID ?>][focalpoint]'>
+            <div data-focalpoint-input-wrap>
+                <input data-focalpoint-input type='text' readonly value="<?= $focalPoint['left'] ?> <?= $focalPoint['top'] ?>" id='focalpoint-input' name='attachments[<?= $post->ID ?>][focalpoint]'>
+                <button data-focalpoint-reset type="button" class="button-primary">Reset</button>
+            </div>
+
             <div data-focalpoint-preview aria-hidden="true">
-                <div data-landscape></div>
                 <div data-portrait></div>
+                <div data-landscape></div>
             </div>
-            <button data-focal-point-handle aria-hidden="true" tabindex="-1" type="button" title="Drag to change. Double-click to reset."></button>
+            <button data-focalpoint-handle aria-hidden="true" tabindex="-1" type="button" title="Drag to change. Double-click to reset."></button>
         </focal-point-picker>
 
 <?php $html = ob_get_clean();