feat: Add picture-editor component

app/javascript/alchemy_admin/components/element_editor.js

@@ -1,5 +1,4 @@
 import fileEditors from "alchemy_admin/file_editors"
-import pictureEditors from "alchemy_admin/picture_editors"
 import SortableElements from "alchemy_admin/sortable_elements"
 import IngredientAnchorLink from "alchemy_admin/ingredient_anchor_link"
 import { post } from "alchemy_admin/utils/ajax"
@@ -54,7 +53,6 @@ export class ElementEditor extends HTMLElement {
     fileEditors(
       `#${this.id} .ingredient-editor.file, #${this.id} .ingredient-editor.audio, #${this.id} .ingredient-editor.video`
     )
-    pictureEditors(`#${this.id} .ingredient-editor.picture`)
     SortableElements(`#${this.id} .nested-elements`)
   }
 

app/javascript/alchemy_admin/components/index.js

@@ -26,6 +26,7 @@ import "alchemy_admin/components/overlay"
 import "alchemy_admin/components/page_publication_fields"
 import "alchemy_admin/components/page_select"
 import "alchemy_admin/components/picture_description_select"
+import "alchemy_admin/components/picture_editor"
 import "alchemy_admin/components/picture_thumbnail"
 import "alchemy_admin/components/preview_window"
 import "alchemy_admin/components/select"

app/javascript/alchemy_admin/picture_editors.js → app/javascript/alchemy_admin/components/picture_editor.js

@@ -7,18 +7,19 @@ const UPDATE_DELAY = 125
 const IMAGE_PLACEHOLDER = '<alchemy-icon name="image" size="xl"></alchemy-icon>'
 const THUMBNAIL_SIZE = "160x120"
 
-export class PictureEditor {
-  constructor(container) {
-    this.container = container
-    this.cropFromField = container.querySelector("[data-crop-from]")
-    this.cropSizeField = container.querySelector("[data-crop-size]")
-    this.pictureIdField = container.querySelector("[data-picture-id]")
-    this.targetSizeField = container.querySelector("[data-target-size]")
-    this.imageCropperField = container.querySelector("[data-image-cropper]")
-    this.image = container.querySelector("img")
-    this.pictureThumbnail = container.querySelector("alchemy-picture-thumbnail")
-    this.deleteButton = container.querySelector(".picture_tool.delete")
-    this.cropLink = container.querySelector(".crop_link")
+export class PictureEditor extends HTMLElement {
+  constructor() {
+    super()
+
+    this.cropFromField = this.querySelector("[data-crop-from]")
+    this.cropSizeField = this.querySelector("[data-crop-size]")
+    this.pictureIdField = this.querySelector("[data-picture-id]")
+    this.targetSizeField = this.querySelector("[data-target-size]")
+    this.imageCropperField = this.querySelector("[data-image-cropper]")
+    this.image = this.querySelector("img")
+    this.pictureThumbnail = this.querySelector("alchemy-picture-thumbnail")
+    this.deleteButton = this.querySelector(".picture_tool.delete")
+    this.cropLink = this.querySelector(".crop_link")
 
     this.targetSize = this.targetSizeField.dataset.targetSize
     this.pictureId = this.pictureIdField.value
@@ -33,12 +34,16 @@ export class PictureEditor {
     this.deleteButton.addEventListener("click", this.removeImage.bind(this))
   }
 
-  observe() {
-    const observer = new MutationObserver(this.mutationCallback.bind(this))
+  connectedCallback() {
+    this.observer = new MutationObserver(this.mutationCallback.bind(this))
 
-    observer.observe(this.cropFromField, { attributes: true })
-    observer.observe(this.cropSizeField, { attributes: true })
-    observer.observe(this.pictureIdField, { attributes: true })
+    this.observer.observe(this.cropFromField, { attributes: true })
+    this.observer.observe(this.cropSizeField, { attributes: true })
+    this.observer.observe(this.pictureIdField, { attributes: true })
+  }
+
+  disconnectedCallback() {
+    this.observer.disconnect()
   }
 
   mutationCallback(mutationsList) {
@@ -84,7 +89,7 @@ export class PictureEditor {
   }
 
   setElementDirty() {
-    this.container.closest(".element-editor").setDirty(this.container)
+    this.closest(".element-editor").setDirty(this)
   }
 
   updateCropLink() {
@@ -152,9 +157,4 @@ export class PictureEditor {
   }
 }
 
-export default function init(selector) {
-  document.querySelectorAll(selector).forEach((node) => {
-    const thumbnail = new PictureEditor(node)
-    thumbnail.observe()
-  })
-}
+customElements.define("alchemy-picture-editor", PictureEditor)

app/javascript/alchemy_admin/components/picture_thumbnail.js

@@ -30,7 +30,7 @@ export default class PictureThumbnail extends HTMLElement {
 
   connectedCallback() {
     if (this.image) {
-      this.appendChild(this.image)
+      this.replaceChildren(this.image)
     }
   }
 

app/views/alchemy/ingredients/_picture_editor.html.erb

@@ -1,6 +1,6 @@
 <% options = local_assigns.fetch(:options, {}) %>
 
-<%= content_tag :div,
+<%= content_tag "alchemy-picture-editor",
   class: picture_editor.css_classes,
   data: picture_editor.data_attributes do %>
   <%= element_form.fields_for(:ingredients, picture_editor.ingredient) do |f| %>
@@ -14,7 +14,7 @@
         image_cropper: picture_editor.thumbnail_url_options[:crop],
       },
       class: "picture_thumbnail" do %>
-      <button class="picture_tool delete">
+      <button type="button" class="picture_tool delete">
         <%= render_icon("close") %>
       </button>
       <div class="picture_image">

spec/features/admin/page_editing_feature_spec.rb

@@ -183,29 +183,29 @@
       it "renders editors for all element ingredients" do
         visit alchemy.admin_elements_path(page_version_id: everything_page.draft_version.id)
 
-        expect(page).to have_selector("div.ingredient-editor.boolean")
-        expect(page).to have_selector("div.ingredient-editor.datetime")
-        expect(page).to have_selector("div.ingredient-editor.file")
-        expect(page).to have_selector("div.ingredient-editor.html")
-        expect(page).to have_selector("div.ingredient-editor.link")
-        expect(page).to have_selector("div.ingredient-editor.picture")
-        expect(page).to have_selector("div.ingredient-editor.richtext")
-        expect(page).to have_selector("div.ingredient-editor.select")
-        expect(page).to have_selector("div.ingredient-editor.text")
+        expect(page).to have_selector(".ingredient-editor.boolean")
+        expect(page).to have_selector(".ingredient-editor.datetime")
+        expect(page).to have_selector(".ingredient-editor.file")
+        expect(page).to have_selector(".ingredient-editor.html")
+        expect(page).to have_selector(".ingredient-editor.link")
+        expect(page).to have_selector(".ingredient-editor.picture")
+        expect(page).to have_selector(".ingredient-editor.richtext")
+        expect(page).to have_selector(".ingredient-editor.select")
+        expect(page).to have_selector(".ingredient-editor.text")
       end
 
       it "renders data attribute based on ingredient role" do
         visit alchemy.admin_elements_path(page_version_id: everything_page.draft_version.id)
 
-        expect(page).to have_selector("div[data-ingredient-role=boolean]")
-        expect(page).to have_selector("div[data-ingredient-role=datetime]")
-        expect(page).to have_selector("div[data-ingredient-role=file]")
-        expect(page).to have_selector("div[data-ingredient-role=html]")
-        expect(page).to have_selector("div[data-ingredient-role=link]")
-        expect(page).to have_selector("div[data-ingredient-role=picture]")
-        expect(page).to have_selector("div[data-ingredient-role=richtext]")
-        expect(page).to have_selector("div[data-ingredient-role=select]")
-        expect(page).to have_selector("div[data-ingredient-role=text]")
+        expect(page).to have_selector("[data-ingredient-role=boolean]")
+        expect(page).to have_selector("[data-ingredient-role=datetime]")
+        expect(page).to have_selector("[data-ingredient-role=file]")
+        expect(page).to have_selector("[data-ingredient-role=html]")
+        expect(page).to have_selector("[data-ingredient-role=link]")
+        expect(page).to have_selector("[data-ingredient-role=picture]")
+        expect(page).to have_selector("[data-ingredient-role=richtext]")
+        expect(page).to have_selector("[data-ingredient-role=select]")
+        expect(page).to have_selector("[data-ingredient-role=text]")
       end
     end
   end

spec/javascript/alchemy_admin/components/element_editor.spec.js

@@ -1,6 +1,5 @@
 import { vi } from "vitest"
 import fileEditors from "alchemy_admin/file_editors"
-import pictureEditors from "alchemy_admin/picture_editors"
 import IngredientAnchorLink from "alchemy_admin/ingredient_anchor_link"
 import { ElementEditor } from "alchemy_admin/components/element_editor"
 import { renderComponent } from "./component.helper"
@@ -139,7 +138,6 @@ describe("alchemy-element-editor", () => {
   describe("connectedCallback", () => {
     beforeEach(() => {
       fileEditors.mockClear()
-      pictureEditors.mockClear()
     })
 
     describe("if dragged", () => {
@@ -162,7 +160,6 @@ describe("alchemy-element-editor", () => {
 
     it("initializes picture editors", () => {
       getComponent(html)
-      expect(pictureEditors).toHaveBeenCalled()
     })
   })