alchemy_cms 7.3.6 → 7.4.0

data/app/javascript/alchemy_admin/confirm_dialog.js

@@ -3,20 +3,18 @@ import pleaseWaitOverlay from "alchemy_admin/please_wait_overlay"
 import { createHtmlElement } from "alchemy_admin/utils/dom_helpers"
 import { translate } from "alchemy_admin/i18n"
 
+const DEFAULTS = {
+  size: "300x100",
+  title: translate("Please confirm"),
+  ok_label: translate("Yes"),
+  cancel_label: translate("No"),
+  on_ok() {}
+}
+
 class ConfirmDialog {
   constructor(message, options = {}) {
-    const DEFAULTS = {
-      size: "300x100",
-      title: translate("Please confirm"),
-      ok_label: translate("Yes"),
-      cancel_label: translate("No"),
-      on_ok() {}
-    }
-
-    options = { ...DEFAULTS, ...options }
-
     this.message = message
-    this.options = options
+    this.options = { ...DEFAULTS, ...options }
     this.#build()
     this.#bindEvents()
   }

data/app/javascript/alchemy_admin/dialog.js

@@ -0,0 +1,329 @@
+import Hotkeys from "alchemy_admin/hotkeys"
+import Spinner from "alchemy_admin/spinner"
+
+// Collection of all current dialog instances
+const currentDialogs = []
+
+const DEFAULTS = {
+  header_height: 36,
+  size: "400x300",
+  padding: true,
+  title: "",
+  modal: true,
+  overflow: "visible",
+  ready: () => {},
+  closed: () => {}
+}
+
+export class Dialog {
+  // Arguments:
+  //  - url: The url to load the content from via ajax
+  //  - options: A object holding options
+  //    - size: The maximum size of the Dialog
+  //    - title: The title of the Dialog
+  constructor(url, options = {}) {
+    this.url = url
+    this.options = { ...DEFAULTS, ...options }
+    this.$document = $(document)
+    this.$window = $(window)
+    this.$body = $("body")
+    const size = this.options.size.split("x")
+    this.width = parseInt(size[0], 10)
+    this.height = parseInt(size[1], 10)
+    this.build()
+    this.resize()
+  }
+
+  // Opens the Dialog and loads the content via ajax.
+  open() {
+    this.dialog.trigger("Alchemy.DialogOpen")
+    this.bind_close_events()
+    window.requestAnimationFrame(() => {
+      this.dialog_container.addClass("open")
+      if (this.overlay != null) {
+        return this.overlay.addClass("open")
+      }
+    })
+    this.$body.addClass("prevent-scrolling")
+    currentDialogs.push(this)
+    this.load()
+  }
+
+  // Closes the Dialog and removes it from the DOM
+  close() {
+    this.dialog.trigger("DialogClose.Alchemy")
+    this.$document.off("keydown")
+    this.dialog_container.removeClass("open")
+    if (this.overlay != null) {
+      this.overlay.removeClass("open")
+    }
+    this.$document.on(
+      "webkitTransitionEnd transitionend oTransitionEnd",
+      () => {
+        this.$document.off("webkitTransitionEnd transitionend oTransitionEnd")
+        this.dialog_container.remove()
+        if (this.overlay != null) {
+          this.overlay.remove()
+        }
+        this.$body.removeClass("prevent-scrolling")
+        currentDialogs.pop(this)
+        if (this.options.closed != null) {
+          return this.options.closed()
+        }
+      }
+    )
+    return true
+  }
+
+  // Loads the content via ajax and replaces the Dialog body with server response.
+  load() {
+    this.show_spinner()
+    $.get(this.url, (data) => {
+      this.replace(data)
+    }).fail((xhr) => {
+      this.show_error(xhr)
+    })
+  }
+
+  // Reloads the Dialog content
+  reload() {
+    this.dialog_body.empty()
+    this.load()
+  }
+
+  // Replaces the dialog body with given content and initializes it.
+  replace(data) {
+    this.remove_spinner()
+    this.dialog_body.hide()
+    this.dialog_body.html(data)
+    this.init()
+    this.dialog[0].dispatchEvent(
+      new CustomEvent("DialogReady.Alchemy", {
+        bubbles: true,
+        detail: {
+          body: this.dialog_body[0]
+        }
+      })
+    )
+    if (this.options.ready != null) {
+      this.options.ready(this.dialog_body)
+    }
+    this.dialog_body.show()
+  }
+
+  // Adds a spinner into Dialog body
+  show_spinner() {
+    this.spinner = new Spinner("medium")
+    this.spinner.spin(this.dialog_body[0])
+  }
+
+  // Removes the spinner from Dialog body
+  remove_spinner() {
+    this.spinner.stop()
+  }
+
+  // Initializes the Dialog body
+  init() {
+    Hotkeys(this.dialog_body)
+    this.watch_remote_forms()
+  }
+
+  // Watches ajax requests inside of dialog body and replaces the content accordingly
+  watch_remote_forms() {
+    const $form = $('[data-remote="true"]', this.dialog_body)
+
+    $form.on("ajax:success", (event) => {
+      const xhr = event.detail[2]
+      const content_type = xhr.getResponseHeader("Content-Type")
+      if (content_type.match(/javascript/)) {
+        return
+      } else {
+        this.dialog_body.html(xhr.responseText)
+        this.init()
+      }
+    })
+
+    $form.on("ajax:error", (event) => {
+      const statusText = event.detail[1]
+      const xhr = event.detail[2]
+      this.show_error(xhr, statusText)
+    })
+  }
+
+  // Displays an error message
+  show_error(xhr, statusText) {
+    if (xhr.status === 422) {
+      this.dialog_body.html(xhr.responseText)
+      this.init()
+      return
+    }
+
+    const { error_body, error_header, error_type } = this.error_messages(
+      xhr,
+      statusText
+    )
+
+    const $errorDiv = $(`<alchemy-message type="${error_type}">
+      <h1>${error_header}</h1>
+      <p>${error_body}</p>
+    </alchemy-message>`)
+
+    this.dialog_body.html($errorDiv)
+  }
+
+  // Returns error message based on xhr status
+  error_messages(xhr, statusText) {
+    let error_body,
+      error_header,
+      error_type = "warning"
+
+    switch (xhr.status) {
+      case 0:
+        error_header = "The server does not respond."
+        error_body = "Please check server and try again."
+        break
+      case 403:
+        error_header = "You are not authorized!"
+        error_body = "Please close this window."
+        break
+      default:
+        error_type = "error"
+        if (statusText) {
+          error_header = statusText
+          console.error(xhr.responseText)
+        } else {
+          error_header = `${xhr.statusText} (${xhr.status})`
+        }
+        error_body = "Please check log and try again."
+    }
+
+    return { error_header, error_body, error_type }
+  }
+
+  // Binds close events on:
+  // - Close button
+  // - Overlay (if the Dialog is a modal)
+  // - ESC Key
+  bind_close_events() {
+    this.close_button.on("click", () => {
+      this.close()
+    })
+    this.dialog_container.addClass("closable").on("click", (e) => {
+      if (e.target !== this.dialog_container.get(0)) {
+        return true
+      }
+      this.close()
+      return false
+    })
+    this.$document.keydown((e) => {
+      if (e.which === 27) {
+        this.close()
+        return false
+      } else {
+        return true
+      }
+    })
+  }
+
+  // Builds the html structure of the Dialog
+  build() {
+    this.dialog_container = $('<div class="alchemy-dialog-container" />')
+    this.dialog = $('<div class="alchemy-dialog" />')
+    this.dialog_body = $('<div class="alchemy-dialog-body" />')
+    this.dialog_header = $('<div class="alchemy-dialog-header" />')
+    this.dialog_title = $('<div class="alchemy-dialog-title" />')
+    this.close_button = $(
+      '<a class="alchemy-dialog-close"><alchemy-icon name="close"></alchemy-icon></a>'
+    )
+    this.dialog_title.text(this.options.title)
+    this.dialog_header.append(this.dialog_title)
+    this.dialog_header.append(this.close_button)
+    this.dialog.append(this.dialog_header)
+    this.dialog.append(this.dialog_body)
+    this.dialog_container.append(this.dialog)
+    if (this.options.modal) {
+      this.dialog.addClass("modal")
+    }
+    if (this.options.padding) {
+      this.dialog_body.addClass("padded")
+    }
+    if (this.options.modal) {
+      this.overlay = $('<div class="alchemy-dialog-overlay" />')
+      this.$body.append(this.overlay)
+    }
+    this.$body.append(this.dialog_container)
+  }
+
+  // Sets the correct size of the dialog
+  // It normalizes the given size, so that it never acceeds the window size.
+  resize() {
+    const { width, height } = this.getSize()
+
+    this.dialog.css({
+      width: width,
+      "min-height": height,
+      overflow: this.options.overflow
+    })
+
+    if (this.options.overflow === "hidden") {
+      this.dialog_body.css({
+        height: height,
+        overflow: "auto"
+      })
+    } else {
+      this.dialog_body.css({
+        "min-height": height,
+        overflow: "visible"
+      })
+    }
+  }
+
+  getSize() {
+    const padding = this.options.padding ? 16 : 0
+    const doc_width = this.$window.width()
+    const doc_height = this.$window.height()
+
+    let width = this.width
+    let height = this.height
+
+    if (width >= doc_width) {
+      width = doc_width - padding
+    }
+
+    if (height >= doc_height) {
+      height = doc_height - padding - DEFAULTS.header_height
+    }
+
+    return { width, height }
+  }
+}
+
+// Gets the last dialog instantiated, which is the current one.
+export function currentDialog() {
+  const { length } = currentDialogs
+  if (length === 0) {
+    return
+  }
+  return currentDialogs[length - 1]
+}
+
+// Utility function to close the current Dialog
+//
+// You can pass a callback function, that gets triggered after the Dialog gets closed.
+//
+export function closeCurrentDialog(callback) {
+  const dialog = currentDialog()
+  if (dialog != null) {
+    dialog.options.closed = callback
+    return dialog.close()
+  }
+}
+
+// Utility function to open a new Dialog
+export function openDialog(url, options) {
+  if (!url) {
+    throw "No url given! Please provide an url."
+  }
+  const dialog = new Dialog(url, options)
+  dialog.open()
+}

data/app/javascript/alchemy_admin/hotkeys.js

@@ -1,4 +1,5 @@
 import "keymaster"
+import { openDialog } from "alchemy_admin/dialog"
 
 const bindedHotkeys = []
 
@@ -7,7 +8,7 @@ function showHelp(evt) {
     !$(evt.target).is("input, textarea") &&
     String.fromCharCode(evt.which) === "?"
   ) {
-    Alchemy.openDialog("/admin/help", {
+    openDialog("/admin/help", {
       title: Alchemy.t("help"),
       size: "400x492"
     })
@@ -18,7 +19,7 @@ function showHelp(evt) {
 }
 
 export default function (scope = document) {
-  // The scope can be a jQuery object because we still use jQuery in Alchemy.Dialog.
+  // The scope can be a jQuery object because we still use jQuery in alchemy_admin/dialog.js.
   if (scope instanceof jQuery) {
     scope = scope[0]
   }

data/app/javascript/alchemy_admin/image_cropper.js

@@ -1,91 +1,108 @@
+import Cropper from "cropperjs"
+
 export default class ImageCropper {
+  #initialized = false
+  #cropper = null
+  #cropFromField = null
+  #cropSizeField = null
+
   constructor(
+    image,
     minSize,
     defaultBox,
     aspectRatio,
-    trueSize,
     formFieldIds,
     elementId
   ) {
-    this.initialized = false
-
+    this.image = image
     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.#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.dialog.options.closed = () => this.destroy()
     this.init()
     this.bind()
   }
 
-  get jcropOptions() {
+  get cropperOptions() {
     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)
+      viewMode: 1,
+      zoomable: false,
+      minCropBoxWidth: this.minSize && this.minSize[0],
+      minCropBoxHeight: this.minSize && this.minSize[1],
+      ready: (event) => {
+        const cropper = event.target.cropper
+        cropper.setData(this.box)
+      },
+      cropend: () => {
+        const data = this.#cropper.getData(true)
+        this.update(data)
+      }
     }
   }
 
   get cropFrom() {
-    if (this.cropFromField.value) {
-      return this.cropFromField.value.split("x").map((v) => parseInt(v))
+    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))
+    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]
-      ]
+      return {
+        x: this.cropFrom[0],
+        y: this.cropFrom[1],
+        width: this.cropSize[0],
+        height: this.cropSize[1]
+      }
     } else {
-      return this.defaultBox
+      return this.defaultBoxSize
+    }
+  }
+
+  get defaultBoxSize() {
+    return {
+      x: this.defaultBox[0],
+      y: this.defaultBox[1],
+      width: this.defaultBox[2],
+      height: this.defaultBox[3]
     }
   }
 
   init() {
-    if (!this.initialized) {
-      this.api = $.Jcrop("#imageToCrop", this.jcropOptions)
-      this.initialized = true
+    if (!this.#initialized) {
+      this.#cropper = new Cropper(this.image, this.cropperOptions)
+      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"))
+    this.#cropFromField.value = `${coords.x}x${coords.y}`
+    this.#cropFromField.dispatchEvent(new Event("change"))
+    this.#cropSizeField.value = `${coords.width}x${coords.height}`
+    this.#cropSizeField.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]}`
+    this.#cropper.setData(this.defaultBoxSize)
+    this.update(this.defaultBoxSize)
   }
 
   destroy() {
-    if (this.api) {
-      this.api.destroy()
+    if (this.#cropper) {
+      this.#cropper.destroy()
     }
-    this.initialized = false
+    this.#initialized = false
     return true
   }
 

data/app/javascript/alchemy_admin/image_overlay.js

@@ -0,0 +1,73 @@
+import ImageLoader from "alchemy_admin/image_loader"
+import { Dialog } from "alchemy_admin/dialog"
+
+export default class ImageOverlay extends Dialog {
+  constructor(url, options = {}) {
+    super(url, options)
+  }
+
+  init() {
+    ImageLoader.init(this.dialog_body[0])
+    $(".zoomed-picture-background").on("click", (e) => {
+      e.stopPropagation()
+      if (e.target.nodeName === "IMG") {
+        return
+      }
+      this.close()
+      return false
+    })
+    $(".picture-overlay-handle").on("click", (e) => {
+      this.dialog.toggleClass("hide-form")
+      return false
+    })
+    this.$previous = $(".previous-picture")
+    this.$next = $(".next-picture")
+    this.#initKeyboardNavigation()
+    super.init()
+  }
+
+  previous() {
+    if (this.$previous[0] != null) {
+      this.$previous[0].click()
+    }
+  }
+
+  next() {
+    if (this.$next[0] != null) {
+      this.$next[0].click()
+    }
+  }
+
+  build() {
+    this.dialog_container = $('<div class="alchemy-image-overlay-container" />')
+    this.dialog = $('<div class="alchemy-image-overlay-dialog" />')
+    this.dialog_body = $('<div class="alchemy-image-overlay-body" />')
+    this.close_button = $(`<a class="alchemy-image-overlay-close">
+      <alchemy-icon name="close" size="xl"></alchemy-icon>
+    </a>`)
+    this.dialog.append(this.close_button)
+    this.dialog.append(this.dialog_body)
+    this.dialog_container.append(this.dialog)
+    this.overlay = $('<div class="alchemy-image-overlay" />')
+    this.$body.append(this.overlay)
+    this.$body.append(this.dialog_container)
+  }
+
+  #initKeyboardNavigation() {
+    this.$document.keydown((e) => {
+      if (e.target.nodeName === "INPUT" || e.target.nodeName === "TEXTAREA") {
+        return true
+      }
+      switch (e.which) {
+        case 37:
+          this.previous()
+          return false
+        case 39:
+          this.next()
+          return false
+        default:
+          return true
+      }
+    })
+  }
+}

data/app/javascript/alchemy_admin/initializer.js

@@ -1,3 +1,11 @@
+import {
+  confirmToDeleteDialog,
+  openConfirmDialog
+} from "alchemy_admin/confirm_dialog"
+
+import Hotkeys from "alchemy_admin/hotkeys"
+import pleaseWaitOverlay from "alchemy_admin/please_wait_overlay"
+
 /**
  * add change listener to select to redirect the user after selecting another locale or site
  * @param {string} selectId
@@ -18,12 +26,53 @@ function selectHandler(selectId, parameterName, forcedReload = false) {
   })
 }
 
+// Watches elements for Alchemy Dialogs
+//
+// Links having a data-alchemy-confirm-delete
+// and input/buttons having a data-alchemy-confirm attribute get watched.
+//
+// You can pass a scope so that only elements inside this scope are queried.
+//
+// The href attribute of the link is the url for the overlay window.
+//
+// See Dialog for further options you can add to the data attribute.
+//
+function watchForConfirmDialogs(scope) {
+  if (scope == null) {
+    scope = "#alchemy"
+  }
+  $(scope).on("click", "[data-alchemy-confirm-delete]", function (event) {
+    const $this = $(this)
+    const options = $this.data("alchemy-confirm-delete")
+    confirmToDeleteDialog($this.attr("href"), options)
+    event.preventDefault()
+  })
+  $(scope).on("click", "[data-alchemy-confirm]", function (event) {
+    const options = $(this).data("alchemy-confirm")
+    openConfirmDialog(
+      options.message,
+      $.extend(options, {
+        ok_label: options.ok_label,
+        cancel_label: options.cancel_label,
+        on_ok: () => {
+          pleaseWaitOverlay()
+          this.form.submit()
+        }
+      })
+    )
+    event.preventDefault()
+  })
+}
+
 export default function Initializer() {
   // We obviously have javascript enabled.
   $("html").removeClass("no-js")
 
-  // Initialize the GUI.
-  Alchemy.GUI.init()
+  // Initialize hotkeys.
+  Hotkeys()
+
+  // Watch for click on confirm dialog links.
+  watchForConfirmDialogs()
 
   // Add observer for please wait overlay.
   $(".please_wait")

data/app/javascript/alchemy_admin/link_dialog.js

@@ -1,9 +1,10 @@
 import { translate } from "alchemy_admin/i18n"
+import { Dialog } from "alchemy_admin/dialog"
 
 // Represents the link Dialog that appears, if a user clicks the link buttons
 // in TinyMCE or on an Ingredient that has links enabled (e.g. Picture)
 //
-export class LinkDialog extends Alchemy.Dialog {
+export class LinkDialog extends Dialog {
   #onCreateLink
 
   constructor(link) {

data/app/javascript/alchemy_admin/node_tree.js

@@ -14,7 +14,9 @@ function displayNodeFolders() {
     }
 
     if (list.children.length > 0 || node.folded) {
-      leftIconArea.innerHTML = HandlebarsTemplates.node_folder({ node: node })
+      leftIconArea.innerHTML = Handlebars.templates["node_folder.hbs"]({
+        node: node
+      })
     } else {
       leftIconArea.innerHTML = " "
     }