Skip to content

Commit

Permalink
Merge pull request #2991 from AlchemyCMS/backport/7.1-stable/pr-2987
Browse files Browse the repository at this point in the history
[7.1-stable] fix PictureEditor defaultCropSize
  • Loading branch information
tvdeyen authored Aug 10, 2024
2 parents 14c0ed0 + c671bd5 commit b5a14cd
Show file tree
Hide file tree
Showing 2 changed files with 151 additions and 3 deletions.
6 changes: 3 additions & 3 deletions app/javascript/alchemy_admin/picture_editors.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const UPDATE_DELAY = 125
const IMAGE_PLACEHOLDER = '<i class="icon ri-image-line ri-fw"></i>'
const THUMBNAIL_SIZE = "160x120"

class PictureEditor {
export class PictureEditor {
constructor(container) {
this.container = container
this.cropFromField = container.querySelector("[data-crop-from]")
Expand Down Expand Up @@ -131,10 +131,10 @@ class PictureEditor {
if (!this.imageCropperEnabled) return []

const mask = this.targetSize.split("x").map((n) => parseInt(n))
const zoom = max([
const zoom = max(
mask[0] / this.imageFileWidth,
mask[1] / this.imageFileHeight
])
)

return [Math.round(mask[0] / zoom), Math.round(mask[1] / zoom)]
}
Expand Down
148 changes: 148 additions & 0 deletions spec/javascript/alchemy_admin/picture_editors.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
import { PictureEditor } from "alchemy_admin/picture_editors"

jest.mock("alchemy_admin/image_loader", () => ({
__esModule: true,
default: jest.fn().mockImplementation(() => ({
load: jest.fn()
}))
}))

describe("PictureEditor", () => {
describe("defaultCropSize", () => {
describe("when image cropper is enabled", () => {
beforeEach(() => {
document.body.innerHTML = `
<div class="ingredient-editor picture">
<div
data-target-size="1200x480"
data-image-cropper="true"
class="picture_thumbnail"
>
<div class="picture_image">
<button class="picture_tool delete"></button>
<div class="thumbnail_background">
<img src="/image.jpg" />
</div>
</div>
</div>
<input
value="1"
data-picture-id="true"
data-image-file-width="5644"
data-image-file-height="3761"
type="hidden"
/>
<input
data-link-value="true"
type="hidden"
value=""
/>
<input
data-link-title="true"
type="hidden"
value=""
/>
<input
data-link-class="true"
type="hidden"
value=""
/>
<input
data-link-target="true"
type="hidden"
value=""
/>
<input
data-crop-from="true"
type="hidden"
value="0x423"
/>
<input
data-crop-size="true"
type="hidden"
value="5644x2258"
/>
<input
type="hidden"
value="3"
/>
</div>
`
})

it("is the image size", () => {
const container = document.querySelector(".ingredient-editor")
const editor = new PictureEditor(container)
expect(editor.defaultCropSize).toEqual([5644, 2258])
})
})

describe("when image cropper is disabled", () => {
beforeEach(() => {
document.body.innerHTML = `
<div class="ingredient-editor picture">
<div
data-target-size="1200x480"
data-image-cropper="false"
class="picture_thumbnail"
>
<div class="picture_image">
<button class="picture_tool delete"></button>
<div class="thumbnail_background">
<img src="/image.jpg" />
</div>
</div>
</div>
<input
value="1"
data-picture-id="true"
data-image-file-width="5644"
data-image-file-height="3761"
type="hidden"
/>
<input
data-link-value="true"
type="hidden"
value=""
/>
<input
data-link-title="true"
type="hidden"
value=""
/>
<input
data-link-class="true"
type="hidden"
value=""
/>
<input
data-link-target="true"
type="hidden"
value=""
/>
<input
data-crop-from="true"
type="hidden"
value="0x423"
/>
<input
data-crop-size="true"
type="hidden"
value="5644x2258"
/>
<input
type="hidden"
value="3"
/>
</div>
`
})

it("is empty", () => {
const container = document.querySelector(".ingredient-editor")
const editor = new PictureEditor(container)
expect(editor.defaultCropSize).toEqual([])
})
})
})
})

0 comments on commit b5a14cd

Please sign in to comment.