alchemy_cms 5.3.4 → 6.0.0.b1

data/package/src/image_cropper.js

@@ -0,0 +1,103 @@
+export default class ImageCropper {
+  constructor(
+    minSize,
+    defaultBox,
+    aspectRatio,
+    trueSize,
+    formFieldIds,
+    elementId
+  ) {
+    this.initialized = false
+
+    this.minSize = minSize
+    this.defaultBox = defaultBox
+    this.aspectRatio = aspectRatio
+    this.trueSize = trueSize
+    this.cropFromField = document.getElementById(formFieldIds[0])
+    this.cropSizeField = document.getElementById(formFieldIds[1])
+    this.elementId = elementId
+    this.dialog = Alchemy.currentDialog()
+    this.dialog.options.closed = this.destroy
+
+    this.init()
+    this.bind()
+  }
+
+  get jcropOptions() {
+    return {
+      onSelect: this.update.bind(this),
+      setSelect: this.box,
+      aspectRatio: this.aspectRatio,
+      minSize: this.minSize,
+      boxWidth: 800,
+      boxHeight: 600,
+      trueSize: this.trueSize,
+      closed: this.destroy.bind(this)
+    }
+  }
+
+  get cropFrom() {
+    if (this.cropFromField.value) {
+      return this.cropFromField.value.split("x").map((v) => parseInt(v))
+    }
+  }
+
+  get cropSize() {
+    if (this.cropSizeField.value) {
+      return this.cropSizeField.value.split("x").map((v) => parseInt(v))
+    }
+  }
+
+  get box() {
+    if (this.cropFrom && this.cropSize) {
+      return [
+        this.cropFrom[0],
+        this.cropFrom[1],
+        this.cropFrom[0] + this.cropSize[0],
+        this.cropFrom[1] + this.cropSize[1]
+      ]
+    } else {
+      return this.defaultBox
+    }
+  }
+
+  init() {
+    if (!this.initialized) {
+      this.api = $.Jcrop("#imageToCrop", this.jcropOptions)
+      this.initialized = true
+    }
+  }
+
+  update(coords) {
+    this.cropFromField.value = Math.round(coords.x) + "x" + Math.round(coords.y)
+    this.cropFromField.dispatchEvent(new Event("change"))
+    this.cropSizeField.value = Math.round(coords.w) + "x" + Math.round(coords.h)
+    this.cropFromField.dispatchEvent(new Event("change"))
+  }
+
+  reset() {
+    this.api.setSelect(this.defaultBox)
+    this.cropFromField.value = `${this.box[0]}x${this.box[1]}`
+    this.cropSizeField.value = `${this.box[2]}x${this.box[3] - this.box[1]}`
+  }
+
+  destroy() {
+    if (this.api) {
+      this.api.destroy()
+    }
+    this.initialized = false
+    return true
+  }
+
+  bind() {
+    this.dialog.dialog_body.find('button[type="submit"]').click(() => {
+      Alchemy.setElementDirty(`[data-element-id='${this.elementId}']`)
+      this.dialog.close()
+      return false
+    })
+    this.dialog.dialog_body.find('button[type="reset"]').click(() => {
+      this.reset()
+      return false
+    })
+  }
+}

data/package/src/image_loader.js

@@ -0,0 +1,58 @@
+// Shows spinner while loading images and
+// fades the image after its been loaded
+
+const DEFAULT_SPINNER_OPTIONS = { fill: "#fff" }
+
+export default class ImageLoader {
+  static init(scope = document, spinnerOptions = DEFAULT_SPINNER_OPTIONS) {
+    if (typeof scope === "string") {
+      scope = document.querySelector(scope)
+    }
+    scope.querySelectorAll("img").forEach((image) => {
+      const loader = new ImageLoader(image, spinnerOptions)
+      loader.load()
+    })
+  }
+
+  constructor(image, spinnerOptions = DEFAULT_SPINNER_OPTIONS) {
+    this.image = image
+    this.parent = image.parentNode
+    this.spinner = new Alchemy.Spinner("small", spinnerOptions)
+    this.bind()
+  }
+
+  bind() {
+    this.image.addEventListener("load", this.onLoaded.bind(this))
+    this.image.addEventListener("error", this.onError.bind(this))
+  }
+
+  load(force = false) {
+    if (!force && this.image.complete) return
+
+    this.image.classList.add("loading")
+    this.spinner.spin(this.image.parentElement)
+  }
+
+  onLoaded() {
+    this.removeSpinner()
+    this.image.classList.remove("loading")
+    this.unbind()
+  }
+
+  onError() {
+    this.removeSpinner()
+    this.parent.innerHtml = '<span class="icon warn"></span>'
+    this.unbind()
+  }
+
+  unbind() {
+    this.image.removeEventListener("load", this.onLoaded)
+    this.image.removeEventListener("error", this.onError)
+  }
+
+  removeSpinner() {
+    this.parent.querySelectorAll(".spinner").forEach((spinner) => {
+      spinner.remove()
+    })
+  }
+}

data/package/src/node_tree.js

@@ -1,12 +1,12 @@
 import Sortable from "sortablejs"
-import { patch } from "./utils/ajax"
+import ajax from "./utils/ajax"
 import { on } from "./utils/events"
 
 function displayNodeFolders() {
   document.querySelectorAll("li.menu-item").forEach((el) => {
     const leftIconArea = el.querySelector(".nodes_tree-left_images")
     const list = el.querySelector(".children")
-    const node = { folded: el.dataset.folded === "true", id: el.dataset.id }
+    const node = { folded: el.dataset.folded === "true", id: el.dataset.id, type: el.dataset.type }
 
     if (list.children.length > 0 || node.folded) {
       leftIconArea.innerHTML = HandlebarsTemplates.node_folder({ node: node })
@@ -17,13 +17,13 @@ function displayNodeFolders() {
 }
 
 function onFinishDragging(evt) {
-  const url = Alchemy.routes.move_api_node_path(evt.item.dataset.id)
+  const url = Alchemy.routes[evt.item.dataset.type].move_api_path(evt.item.dataset.id)
   const data = {
-    target_parent_id: evt.to.dataset.nodeId,
+    target_parent_id: evt.to.dataset.recordId,
     new_position: evt.newIndex
   }
 
-  patch(url, data)
+  ajax("PATCH", url, data)
     .then(() => {
       const message = Alchemy.t("Successfully moved menu item")
       Alchemy.growl(message)
@@ -36,12 +36,12 @@ function onFinishDragging(evt) {
 
 function handleNodeFolders() {
   on("click", ".nodes_tree", ".node_folder", function () {
-    const nodeId = this.dataset.nodeId
+    const nodeId = this.dataset.recordId
     const menu_item = this.closest("li.menu-item")
-    const url = Alchemy.routes.toggle_folded_api_node_path(nodeId)
+    const url = Alchemy.routes[this.dataset.recordType].toggle_folded_api_path(nodeId)
     const list = menu_item.querySelector(".children")
 
-    patch(url)
+    ajax("PATCH", url)
       .then(() => {
         list.classList.toggle("folded")
         menu_item.dataset.folded =

data/package/src/picture_editors.js

@@ -0,0 +1,169 @@
+import debounce from "lodash/debounce"
+import max from "lodash/max"
+import ajax from "./utils/ajax"
+import ImageLoader from "./image_loader"
+
+const UPDATE_DELAY = 125
+const IMAGE_PLACEHOLDER = '<i class="icon far fa-image fa-fw"></i>'
+const EMPTY_IMAGE = '<img src="" class="img_paddingtop" />'
+const THUMBNAIL_SIZE = "160x120"
+
+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.thumbnailBackground = container.querySelector(".thumbnail_background")
+    this.deleteButton = container.querySelector(".picture_tool.delete")
+    this.cropLink = container.querySelector(".crop_link")
+
+    this.targetSize = this.targetSizeField.dataset.targetSize
+    this.pictureId = this.pictureIdField.value
+
+    if (this.image) {
+      this.imageLoader = new ImageLoader(this.image)
+    }
+
+    this.update = debounce(() => {
+      this.updateImage()
+      this.updateCropLink()
+    }, UPDATE_DELAY)
+
+    this.deleteButton.addEventListener("click", this.removeImage.bind(this))
+  }
+
+  observe() {
+    const 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 })
+  }
+
+  mutationCallback(mutationsList) {
+    for (const mutation of mutationsList) {
+      if ("pictureId" in mutation.target.dataset) {
+        this.cropFromField.value = ""
+        this.cropSizeField.value = ""
+        this.pictureId = mutation.target.value
+      }
+      this.update()
+    }
+  }
+
+  updateImage() {
+    if (!this.pictureId) return
+
+    this.ensureImage()
+    this.image.removeAttribute("alt")
+    this.image.removeAttribute("src")
+    this.imageLoader.load(true)
+    ajax("GET", `/admin/pictures/${this.pictureId}/url`, {
+      crop: this.imageCropperEnabled,
+      crop_from: this.cropFrom,
+      crop_size: this.cropSize,
+      flatten: true,
+      size: THUMBNAIL_SIZE
+    })
+      .then(({ data }) => {
+        this.image.src = data.url
+        this.image.alt = data.alt
+        this.image.title = data.title
+      })
+      .catch((error) => {
+        console.error(error.message || error)
+        Alchemy.growl(error.message || error, "error")
+      })
+  }
+
+  ensureImage() {
+    if (this.image) return
+
+    this.thumbnailBackground.innerHTML = EMPTY_IMAGE
+    this.image = this.container.querySelector("img")
+    this.imageLoader = new ImageLoader(this.image)
+  }
+
+  removeImage() {
+    this.thumbnailBackground.innerHTML = IMAGE_PLACEHOLDER
+    this.pictureIdField.value = ""
+    this.image = null
+    this.cropLink.classList.add("disabled")
+    Alchemy.setElementDirty(this.container.closest(".element-editor"))
+  }
+
+  updateCropLink() {
+    if (!this.pictureId || !this.imageCropperEnabled) return
+
+    this.cropLink.classList.remove("disabled")
+
+    if (this.cropLink.href.match(/(picture_id=)\d+/)) {
+      this.cropLink.href = this.cropLink.href.replace(
+        /(picture_id=)\d+/,
+        "$1" + this.pictureId
+      )
+    } else {
+      this.cropLink.href = this.cropLink.href + `&picture_id=${this.pictureId}`
+    }
+  }
+
+  get cropFrom() {
+    if (this.cropFromField.value === "") {
+      return this.defaultCropFrom.join("x")
+    }
+    return this.cropFromField.value
+  }
+
+  get cropSize() {
+    if (this.cropSizeField.value === "") {
+      return this.defaultCropSize.join("x")
+    }
+    return this.cropSizeField.value
+  }
+
+  get defaultCropSize() {
+    if (!this.imageCropperEnabled) return []
+
+    const mask = this.targetSize.split("x").map((n) => parseInt(n))
+    const zoom = max([
+      mask[0] / this.imageFileWidth,
+      mask[1] / this.imageFileHeight
+    ])
+
+    return [Math.round(mask[0] / zoom), Math.round(mask[1] / zoom)]
+  }
+
+  get defaultCropFrom() {
+    if (!this.imageCropperEnabled) return []
+
+    const dimensions = this.defaultCropSize
+
+    return [
+      Math.round((this.imageFileWidth - dimensions[0]) / 2),
+      Math.round((this.imageFileHeight - dimensions[1]) / 2)
+    ]
+  }
+
+  get imageFileWidth() {
+    return parseInt(this.pictureIdField.dataset.imageFileWidth)
+  }
+
+  get imageFileHeight() {
+    return parseInt(this.pictureIdField.dataset.imageFileHeight)
+  }
+
+  get imageCropperEnabled() {
+    return this.targetSizeField.dataset.imageCropper === "true"
+  }
+}
+
+export default function init(selector) {
+  document.querySelectorAll(selector).forEach((node) => {
+    const thumbnail = new PictureEditor(node)
+    thumbnail.observe()
+  })
+}

data/package/src/utils/__tests__/ajax.spec.js

@@ -1,5 +1,5 @@
 import xhrMock from "xhr-mock"
-import { get, patch, post } from "../ajax"
+import ajax from "../ajax"
 
 const token = "s3cr3t"
 
@@ -8,13 +8,13 @@ beforeEach(() => {
   xhrMock.setup()
 })
 
-describe("get", () => {
+describe("ajax('get')", () => {
   it("sends X-CSRF-TOKEN header", async () => {
     xhrMock.get("http://localhost/users", (req, res) => {
       expect(req.header("X-CSRF-TOKEN")).toEqual(token)
       return res.status(200).body('{"message":"Ok"}')
     })
-    await get("/users")
+    await ajax("get", "/users")
   })
 
   it("sends Content-Type header", async () => {
@@ -24,7 +24,7 @@ describe("get", () => {
       )
       return res.status(200).body('{"message":"Ok"}')
     })
-    await get("/users")
+    await ajax("get", "/users")
   })
 
   it("sends Accept header", async () => {
@@ -32,14 +32,14 @@ describe("get", () => {
       expect(req.header("Accept")).toEqual("application/json")
       return res.status(200).body('{"message":"Ok"}')
     })
-    await get("/users")
+    await ajax("get", "/users")
   })
 
   it("returns JSON", async () => {
     xhrMock.get("http://localhost/users", (_req, res) => {
       return res.status(200).body('{"email":"mail@example.com"}')
     })
-    await get("/users").then((res) => {
+    await ajax("get", "/users").then((res) => {
       expect(res.data).toEqual({ email: "mail@example.com" })
     })
   })
@@ -49,7 +49,7 @@ describe("get", () => {
       return res.status(200).body('email => "mail@example.com"')
     })
     expect.assertions(1)
-    await get("/users").catch((e) => {
+    await ajax("get", "/users").catch((e) => {
       expect(e.message).toMatch("Unexpected token")
     })
   })
@@ -59,7 +59,7 @@ describe("get", () => {
       return Promise.reject(new Error())
     })
     expect.assertions(1)
-    await get("/users").catch((e) => {
+    await ajax("get", "/users").catch((e) => {
       expect(e.message).toEqual("An error occurred during the transaction")
     })
   })
@@ -69,7 +69,7 @@ describe("get", () => {
       return res.status(401).body('{"error":"Unauthorized"}')
     })
     expect.assertions(1)
-    await get("/users").catch((e) => {
+    await ajax("get", "/users").catch((e) => {
       expect(e.error).toEqual("Unauthorized")
     })
   })
@@ -79,7 +79,7 @@ describe("get", () => {
       return res.status(401).body("Unauthorized")
     })
     expect.assertions(1)
-    await get("/users").catch((e) => {
+    await ajax("get", "/users").catch((e) => {
       expect(e.message).toMatch("Unexpected token")
     })
   })
@@ -88,54 +88,18 @@ describe("get", () => {
     xhrMock.get("http://localhost/users?name=foo", (_req, res) => {
       return res.status(200).body(`{"name":"foo"}`)
     })
-    const { data } = await get("/users", { name: "foo" })
+    const { data } = await ajax("get", "/users", { name: "foo" })
     expect(data.name).toEqual("foo")
   })
 })
 
-describe("patch", () => {
-  it("sends X-CSRF-TOKEN header", async () => {
-    xhrMock.patch("http://localhost/users", (req, res) => {
-      expect(req.header("X-CSRF-TOKEN")).toEqual(token)
-      return res.status(200).body('{"message":"Ok"}')
-    })
-    await patch("/users")
-  })
-
-  it("sends Content-Type header", async () => {
-    xhrMock.patch("http://localhost/users", (req, res) => {
-      expect(req.header("Content-Type")).toEqual(
-        "application/json; charset=utf-8"
-      )
-      return res.status(200).body('{"message":"Ok"}')
-    })
-    await patch("/users")
-  })
-
-  it("sends Accept header", async () => {
-    xhrMock.patch("http://localhost/users", (req, res) => {
-      expect(req.header("Accept")).toEqual("application/json")
-      return res.status(200).body('{"message":"Ok"}')
-    })
-    await patch("/users")
-  })
-
-  it("sends JSON data", async () => {
-    xhrMock.patch("http://localhost/users", (req, res) => {
-      expect(req.body()).toEqual('{"email":"mail@example.com"}')
-      return res.status(200).body('{"message":"Ok"}')
-    })
-    await patch("/users", { email: "mail@example.com" })
-  })
-})
-
-describe("post", () => {
+describe("ajax('post')", () => {
   it("sends X-CSRF-TOKEN header", async () => {
     xhrMock.post("http://localhost/users", (req, res) => {
       expect(req.header("X-CSRF-TOKEN")).toEqual(token)
       return res.status(200).body('{"message":"Ok"}')
     })
-    await post("/users")
+    await ajax("post", "/users")
   })
 
   it("sends Content-Type header", async () => {
@@ -145,7 +109,7 @@ describe("post", () => {
       )
       return res.status(200).body('{"message":"Ok"}')
     })
-    await post("/users")
+    await ajax("post", "/users")
   })
 
   it("sends Accept header", async () => {
@@ -153,7 +117,7 @@ describe("post", () => {
       expect(req.header("Accept")).toEqual("application/json")
       return res.status(200).body('{"message":"Ok"}')
     })
-    await post("/users")
+    await ajax("post", "/users")
   })
 
   it("sends JSON data", async () => {
@@ -161,7 +125,7 @@ describe("post", () => {
       expect(req.body()).toEqual('{"email":"mail@example.com"}')
       return res.status(200).body('{"message":"Ok"}')
     })
-    await post("/users", { email: "mail@example.com" })
+    await ajax("post", "/users", { email: "mail@example.com" })
   })
 })
 

data/package/src/utils/ajax.js

@@ -29,18 +29,6 @@ function getToken() {
   return metaTag.attributes.content.textContent
 }
 
-export function get(url, params) {
-  return ajax("GET", url, params)
-}
-
-export function patch(url, data) {
-  return ajax("PATCH", url, data)
-}
-
-export function post(url, data) {
-  return ajax("POST", url, data)
-}
-
 export default function ajax(method, path, data) {
   const xhr = new XMLHttpRequest()
   const promise = buildPromise(xhr)

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alchemy_cms/admin",
-  "version": "5.3.4",
+  "version": "0.2.0",
   "description": "AlchemyCMS",
   "browser": "package/admin.js",
   "files": [
@@ -24,12 +24,13 @@
   },
   "homepage": "https://github.com/AlchemyCMS/alchemy_cms#readme",
   "dependencies": {
+    "lodash-es": "^4.17.21",
     "sortablejs": "^1.10.2"
   },
   "devDependencies": {
     "@babel/core": "^7.9.6",
     "@babel/preset-env": "^7.9.6",
-    "babel-jest": "^26.0.1",
+    "babel-jest": "^27.0.1",
     "jest": "^25.2.7",
     "prettier": "^2.0.2",
     "xhr-mock": "^2.5.1"