alchemy_cms 5.1.4 → 6.0.0.b1

data/lib/tasks/alchemy/upgrade.rake

@@ -7,6 +7,7 @@ namespace :alchemy do
   task upgrade: [
     "alchemy:upgrade:prepare",
     "alchemy:upgrade:5.0:run",
+    "alchemy:upgrade:6.0:run",
   ] do
     Alchemy::Upgrader.display_todos
   end
@@ -59,5 +60,30 @@ namespace :alchemy do
         Alchemy::Upgrader::FivePointZero.remove_root_page
       end
     end
+
+    desc "Upgrade Alchemy to v6.0"
+    task "6.0" => [
+      "alchemy:upgrade:prepare",
+      "alchemy:upgrade:6.0:run",
+    ] do
+      Alchemy::Upgrader.display_todos
+    end
+
+    namespace "6.0" do
+      task "run" => [
+        "alchemy:upgrade:6.0:create_public_page_versions",
+        "alchemy:upgrade:6.0:create_ingredients",
+      ]
+
+      desc "Create public page versions"
+      task create_public_page_versions: [:environment] do
+        Alchemy::Upgrader::SixPointZero.create_public_page_versions
+      end
+
+      desc "Create ingredients for elements with ingredients defined"
+      task create_ingredients: [:environment] do
+        Alchemy::Upgrader::SixPointZero.create_ingredients
+      end
+    end
   end
 end

data/package.json

@@ -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"

data/package/admin.js

@@ -1,5 +1,10 @@
 import translate from "./src/i18n"
+import translationData from "./src/translations"
 import NodeTree from "./src/node_tree"
+import fileEditors from "./src/file_editors"
+import pictureEditors from "./src/picture_editors"
+import ImageLoader from "./src/image_loader"
+import ImageCropper from "./src/image_cropper"
 
 // Global Alchemy object
 if (typeof window.Alchemy === "undefined") {
@@ -10,5 +15,10 @@ if (typeof window.Alchemy === "undefined") {
 Object.assign(Alchemy, {
   // Global utility method for translating a given string
   t: translate,
-  NodeTree
+  translations: Object.assign(Alchemy.translations || {}, translationData),
+  NodeTree,
+  fileEditors,
+  pictureEditors,
+  ImageLoader: ImageLoader.init,
+  ImageCropper
 })

data/package/src/__tests__/i18n.spec.js

@@ -15,12 +15,20 @@ describe("translate", () => {
     })
 
     describe("if translation is present", () => {
+      beforeEach(() => {
+        Alchemy.translations = { en: { help: "Help" } }
+      })
+
       it("Returns translated string", () => {
         expect(translate("help")).toEqual("Help")
       })
 
       describe("if key includes a period", () => {
         describe("that is translated", () => {
+          beforeEach(() => {
+            Alchemy.translations = { en: { formats: { date: "Y-m-d" } } }
+          })
+
           it("splits into group", () => {
             expect(translate("formats.date")).toEqual("Y-m-d")
           })
@@ -40,6 +48,10 @@ describe("translate", () => {
       })
 
       describe("if replacement is given", () => {
+        beforeEach(() => {
+          Alchemy.translations = { en: { allowed_chars: "of %{number} chars" } }
+        })
+
         it("replaces it", () => {
           expect(translate("allowed_chars", 5)).toEqual("of 5 chars")
         })
@@ -67,4 +79,15 @@ describe("translate", () => {
       spy.mockRestore()
     })
   })
+
+  describe("if Alchemy.translations is not set", () => {
+    it("Returns passed string and logs a warning", () => {
+      const spy = jest.spyOn(console, "warn").mockImplementation(() => {})
+      expect(translate("help")).toEqual("help")
+      expect(spy.mock.calls).toEqual([
+        ["Translations for locale kl not found!"]
+      ])
+      spy.mockRestore()
+    })
+  })
 })

data/package/src/file_editors.js

@@ -0,0 +1,28 @@
+class FileEditor {
+  constructor(container) {
+    this.container = container
+    this.deleteLink = container.querySelector(".remove_file_link")
+    this.fileIcon = container.querySelector(".file_icon")
+    this.fileName = container.querySelector(".file_name")
+    this.deleteLink.addEventListener("click", this.removeFile.bind(this))
+    this.formFieldId = this.deleteLink.dataset.formFieldId
+    this.formField = container.querySelector(`#${this.formFieldId}`)
+    this.assignFileText = this.deleteLink.dataset.assignFileText
+  }
+
+  removeFile(event) {
+    event.stopPropagation()
+    this.formField.value = ""
+    this.fileIcon.innerHTML = ""
+    this.fileName.innerHTML = ""
+    this.deleteLink.classList.add("hidden")
+    Alchemy.setElementDirty(this.container.closest(".element-editor"))
+    return false
+  }
+}
+
+export default function init(selector) {
+  document.querySelectorAll(selector).forEach((node) => {
+    new FileEditor(node)
+  })
+}

data/package/src/i18n.js

@@ -1,5 +1,3 @@
-import translationData from "./translations"
-
 const KEY_SEPARATOR = /\./
 
 function currentLocale() {
@@ -11,7 +9,7 @@ function currentLocale() {
 
 function getTranslations() {
   const locale = currentLocale()
-  const translations = translationData[locale]
+  const translations = Alchemy.translations && Alchemy.translations[locale]
 
   if (translations) {
     return translations

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

@@ -6,7 +6,7 @@ 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,9 +17,9 @@ 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
   }
 
@@ -36,9 +36,9 @@ 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")
 
     ajax("PATCH", url)

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()
+  })
+}