alchemy_cms 7.0.16 → 7.1.0.pre.b1

data/app/javascript/alchemy_admin/components/uploader/file_upload.js

@@ -0,0 +1,266 @@
+import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
+import { formatFileSize } from "alchemy_admin/utils/format"
+import { translate } from "alchemy_admin/i18n"
+
+export class FileUpload extends AlchemyHTMLElement {
+  /**
+   * @param {File} file
+   * @param {XMLHttpRequest} request
+   */
+  constructor(file, request) {
+    super({})
+
+    this.file = file
+    this.request = request
+
+    this.progressEventLoaded = 0
+    this.progressEventTotal = file ? file.size : 0
+    this.className = "in-progress"
+    this.valid = true
+    this.value = 0
+
+    this._validateFile()
+    this._addRequestEventListener()
+  }
+
+  render() {
+    return `
+      <sl-progress-bar value="${this.value}"></sl-progress-bar>
+      <div class="description">
+        <span class="file-name">${this.file?.name}</span>
+        <span class="loaded-size">${this.loadedSize}</span>
+        <span class="error-message">${this.errorMessage}</span>
+      </div>
+      <sl-tooltip content="${translate("Abort upload")}">
+        <button class="icon_button" aria-label="${translate("Abort upload")}">
+          <i class="icon ri-close-line ri-fw"></i>
+        </button>
+      </sl-tooltip>
+    `
+  }
+
+  afterRender() {
+    this.querySelector("button").addEventListener("click", () => this.cancel())
+
+    if (this.file?.type.includes("image")) {
+      const reader = new FileReader()
+      reader.readAsDataURL(this.file)
+      reader.addEventListener("load", () => {
+        const image = new Image()
+        image.src = reader.result
+        this.prepend(image)
+      })
+    }
+  }
+
+  /**
+   * cancel the upload
+   */
+  cancel() {
+    if (!this.finished) {
+      this.status = "canceled"
+      this.request?.abort()
+      this.dispatchCustomEvent("FileUpload.Change")
+    }
+  }
+
+  /**
+   * validate given file with the `Alchemy.uploader_defaults` - configuration
+   * @private
+   */
+  _validateFile() {
+    const config = Alchemy.uploader_defaults
+    const maxFileSize = config.file_size_limit * Math.pow(1024, 2) // in Byte
+    let errorMessage = undefined
+
+    if (this.file?.size > maxFileSize) {
+      errorMessage = translate("Uploaded bytes exceed file size")
+    }
+
+    const fileConfiguration = this.file?.type.includes("image")
+      ? "allowed_filetype_pictures"
+      : "allowed_filetype_attachments"
+
+    const isFileFormatSupported =
+      config[fileConfiguration] === "*" ||
+      config[fileConfiguration].includes(
+        this.file?.type.replace(/^\w+\/(\w+)(\+\w+)?/i, "$1")
+      )
+
+    if (!isFileFormatSupported) {
+      errorMessage = translate("File type not allowed")
+    }
+
+    if (errorMessage) {
+      this.valid = false
+      this.errorMessage = errorMessage
+    }
+  }
+
+  /**
+   * register event listeners to react on request changes
+   * @private
+   */
+  _addRequestEventListener() {
+    // prevent errors if the component will be called without a request - object
+    if (!this.request) {
+      return
+    }
+
+    // update the progress bar and currently loaded size information
+    this.request.upload.onprogress = (progressEvent) => {
+      this.progressEvent = progressEvent
+    }
+
+    // triggers, when the upload is done
+    this.request.onload = () => {
+      if (this.request.status < 400) {
+        this.status = "successful"
+        Alchemy.growl(this.responseMessage)
+      } else {
+        this.status = "failed"
+        this.errorMessage = this.responseMessage
+      }
+      this.dispatchCustomEvent("FileUpload.Change")
+    }
+
+    // catch request errors
+    this.request.onerror = () => {
+      this.errorMessage = translate("An error occurred during the transaction")
+    }
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  get active() {
+    return this.valid && this.status !== "canceled"
+  }
+
+  /**
+   * @returns {string}
+   */
+  get errorMessage() {
+    return this._errorMessage || ""
+  }
+
+  /**
+   * @param {string} message
+   */
+  set errorMessage(message) {
+    this._errorMessage = message
+    const errorMessageContainer = this.querySelector(".error-message")
+    if (errorMessageContainer) {
+      errorMessageContainer.textContent = message
+    }
+    Alchemy.growl(message, "error")
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  get finished() {
+    return ["canceled", "successful", "failed"].includes(this.status)
+  }
+
+  /**
+   * format the loaded and total size and present that as a string
+   * @returns {string}
+   */
+  get loadedSize() {
+    return `${formatFileSize(this.progressEventLoaded)} / ${formatFileSize(
+      this.progressEventTotal
+    )}`
+  }
+
+  /**
+   * @returns {HTMLProgressElement|undefined}
+   */
+  get progressElement() {
+    return this.querySelector("sl-progress-bar")
+  }
+
+  /**
+   * @param {ProgressEvent} progressEvent
+   */
+  set progressEvent(progressEvent) {
+    this.progressEventLoaded = progressEvent.loaded
+    this.progressEventTotal = progressEvent.total
+
+    this.value = Math.round((progressEvent.loaded / progressEvent.total) * 100)
+    this.querySelector(".loaded-size").textContent = this.loadedSize
+  }
+
+  /**
+   * @returns {string}
+   */
+  get responseMessage() {
+    try {
+      const response = JSON.parse(this.request.responseText)
+      return response["message"]
+    } catch (error) {
+      return translate("Could not parse JSON result")
+    }
+  }
+
+  /**
+   * @returns {string}
+   */
+  get status() {
+    return this._status
+  }
+
+  /**
+   * @param {string} status
+   */
+  set status(status) {
+    this._status = status
+    this.className = status
+
+    this.progressElement?.toggleAttribute(
+      "indeterminate",
+      status === "upload-finished"
+    )
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  get valid() {
+    return this._valid
+  }
+
+  /**
+   * @param {boolean} isValid
+   */
+  set valid(isValid) {
+    this._valid = isValid
+    this.classList.toggle("invalid", !isValid)
+  }
+
+  /**
+   * get the progress value of the current file
+   * @returns {number}
+   */
+  get value() {
+    return this._value
+  }
+
+  /**
+   * @param {number} value
+   */
+  set value(value) {
+    this._value = value
+    if (this.progressElement) {
+      this.progressElement.value = value
+    }
+
+    if (value === 100) {
+      this.status = "upload-finished"
+    }
+
+    this.dispatchCustomEvent("FileUpload.Change")
+  }
+}
+
+customElements.define("alchemy-file-upload", FileUpload)

data/app/javascript/alchemy_admin/components/uploader/progress.js

@@ -0,0 +1,258 @@
+import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
+import { FileUpload } from "alchemy_admin/components/uploader/file_upload"
+import { formatFileSize } from "alchemy_admin/utils/format"
+import { translate } from "alchemy_admin/i18n"
+
+export class Progress extends AlchemyHTMLElement {
+  #visible = false
+
+  /**
+   * @param {FileUpload[]} fileUploads
+   */
+  constructor(fileUploads = []) {
+    super()
+    this.buttonLabel = translate("Cancel all uploads")
+    this.fileUploads = fileUploads
+    this.fileCount = fileUploads.length
+    this.className = "in-progress"
+    this.visible = true
+    this.handleFileChange = () => this._updateView()
+  }
+
+  /**
+   * append file progress - components for each file
+   */
+  afterRender() {
+    this.actionButton = this.querySelector("button")
+    this.actionButton.addEventListener("click", () => {
+      if (this.finished) {
+        this.onComplete(this.status)
+        this.visible = false
+      } else {
+        this.cancel()
+      }
+    })
+
+    this.fileUploads.forEach((fileUpload) => {
+      this.querySelector(".single-uploads").append(fileUpload)
+    })
+  }
+
+  /**
+   * cancel requests in all remaining uploads
+   */
+  cancel() {
+    this._activeUploads().forEach((upload) => {
+      upload.cancel()
+    })
+    this._setupCloseButton()
+  }
+
+  /**
+   * update view and register change event
+   */
+  connected() {
+    this._updateView()
+    this.addEventListener("Alchemy.FileUpload.Change", this.handleFileChange)
+  }
+
+  /**
+   * deregister file upload change - event
+   */
+  disconnected() {
+    this.removeEventListener("Alchemy.FileUpload.Change", this.handleFileChange)
+  }
+
+  /**
+   * a complete hook to allow the uploader to react and trigger an event
+   * it would be possible to trigger the event here, but the dispatching would happen
+   * in the scope of that component and can't be cached o uploader - component level
+   */
+  onComplete(_status) {}
+
+  render() {
+    return `
+      <sl-progress-bar value="0"></sl-progress-bar>
+      <div class="overall-progress-value">
+        <span class="value-text"></span>
+
+        <sl-tooltip content="${this.buttonLabel}">
+          <button class="icon_button" aria-label="${this.buttonLabel}">
+            <i class="icon ri-close-line ri-fw"></i>
+          </button>
+        </sl-tooltip>
+      </div>
+      <div class="single-uploads" style="--progress-columns: ${
+        this.fileCount > 3 ? 3 : this.fileCount
+      }"></div>
+      <div class="overall-upload-value value-text"></div>
+    `
+  }
+
+  /**
+   * get all active upload components
+   * @returns {FileUpload[]}
+   * @private
+   */
+  _activeUploads() {
+    return this.fileUploads.filter((upload) => upload.active)
+  }
+
+  /**
+   * replace cancel button to be the close button
+   * @private
+   */
+  _setupCloseButton() {
+    this.buttonLabel = translate("Close")
+    this.actionButton.ariaLabel = this.buttonLabel
+    this.actionButton.parentElement.content = this.buttonLabel // update tooltip content
+  }
+
+  /**
+   * @param {string} field
+   * @returns {number}
+   * @private
+   */
+  _sumFileProgresses(field) {
+    return this._activeUploads().reduce(
+      (accumulator, upload) => upload[field] + accumulator,
+      0
+    )
+  }
+
+  /**
+   * don't render the whole element new, because it would prevent selecting buttons
+   * @private
+   */
+  _updateView() {
+    const status = this.status
+
+    // update progress bar
+    this.progressElement.value = this.totalProgress
+    this.progressElement.toggleAttribute(
+      "indeterminate",
+      status === "upload-finished"
+    )
+
+    // show progress in file size and percentage
+    this.querySelector(`.overall-progress-value > span`).textContent =
+      this.overallProgressValue
+    this.querySelector(`.overall-upload-value`).textContent =
+      this.overallUploadSize
+
+    if (this.finished) {
+      this._setupCloseButton()
+      this.onComplete(status)
+    }
+
+    this.className = status
+    this.visible = true
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  get finished() {
+    return this._activeUploads().every((entry) => entry.finished)
+  }
+
+  /**
+   * @returns {string}
+   */
+  get overallUploadSize() {
+    const uploadedFileCount = this._activeUploads().filter(
+      (fileProgress) => fileProgress.value >= 100
+    ).length
+    const overallProgressValue = `${
+      this.totalProgress
+    }% (${uploadedFileCount} / ${this._activeUploads().length})`
+
+    return `${formatFileSize(
+      this._sumFileProgresses("progressEventLoaded")
+    )} / ${formatFileSize(this._sumFileProgresses("progressEventTotal"))}`
+  }
+
+  /**
+   * @returns {string}
+   */
+  get overallProgressValue() {
+    const uploadedFileCount = this._activeUploads().filter(
+      (fileProgress) => fileProgress.value >= 100
+    ).length
+    return `${this.totalProgress}% (${uploadedFileCount} / ${
+      this._activeUploads().length
+    })`
+  }
+
+  /**
+   * @returns {HTMLProgressElement|undefined}
+   */
+  get progressElement() {
+    return this.querySelector("sl-progress-bar")
+  }
+
+  /**
+   * get status of file progresses and accumulate the overall status
+   * @returns {string}
+   */
+  get status() {
+    const uploadsStatuses = this._activeUploads().map(
+      (upload) => upload.className
+    )
+
+    // mark as failed, if any upload failed
+    if (uploadsStatuses.includes("failed")) {
+      return "failed"
+    }
+
+    // no active upload means that every upload was canceled
+    if (uploadsStatuses.length === 0) {
+      return "canceled"
+    }
+
+    // all uploads are successful or upload-finished or in-progress
+    if (uploadsStatuses.every((entry) => entry === uploadsStatuses[0])) {
+      return uploadsStatuses[0]
+    }
+
+    return "in-progress"
+  }
+
+  /**
+   * @returns {number}
+   */
+  get totalProgress() {
+    const totalSize = this._activeUploads().reduce(
+      (accumulator, upload) => accumulator + upload.file.size,
+      0
+    )
+    let totalProgress = Math.ceil(
+      this._activeUploads().reduce((accumulator, upload) => {
+        const weight = upload.file.size / totalSize
+        return upload.value * weight + accumulator
+      }, 0)
+    )
+    // prevent rounding errors
+    if (totalProgress > 100) {
+      totalProgress = 100
+    }
+    return totalProgress
+  }
+
+  /**
+   * @returns {boolean}
+   */
+  get visible() {
+    return this.#visible
+  }
+
+  /**
+   * @param {boolean} visible
+   */
+  set visible(visible) {
+    this.classList.toggle("visible", visible)
+    this.#visible = visible
+  }
+}
+
+customElements.define("alchemy-upload-progress", Progress)

data/app/javascript/alchemy_admin/components/uploader.js

@@ -0,0 +1,132 @@
+/**
+ * @typedef {object} PersistedFile
+ * @property {string} name
+ * @property {number} size
+ */
+import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
+import { Progress } from "alchemy_admin/components/uploader/progress"
+import { FileUpload } from "alchemy_admin/components/uploader/file_upload"
+import { translate } from "alchemy_admin/i18n"
+import { getToken } from "alchemy_admin/utils/ajax"
+
+export class Uploader extends AlchemyHTMLElement {
+  static properties = {
+    dropzone: { default: false }
+  }
+
+  connected() {
+    this.fileInput.addEventListener("change", (event) => {
+      this._uploadFiles(Array.from(event.target.files))
+    })
+    if (this.dropzone) {
+      this._dragAndDropBehavior()
+    }
+  }
+
+  /**
+   * add dragover class to indicate, if the file is draggable
+   * @private
+   */
+  _dragAndDropBehavior() {
+    const dropzoneElement = document.querySelector(this.dropzone)
+    let isDraggedOver = false
+
+    const toggleDropzoneClass = (enabled) => {
+      if (isDraggedOver !== enabled) {
+        isDraggedOver = enabled
+        dropzoneElement.classList.toggle("dragover")
+      }
+    }
+
+    dropzoneElement.addEventListener("dragleave", () =>
+      toggleDropzoneClass(false)
+    )
+    dropzoneElement.addEventListener("drop", async (event) => {
+      event.preventDefault()
+      toggleDropzoneClass(false)
+
+      const files = [...event.dataTransfer.items].map((item) =>
+        item.getAsFile()
+      )
+
+      this._uploadFiles(files)
+    })
+
+    dropzoneElement.addEventListener("dragover", (event) => {
+      event.preventDefault() // dragover has to be disabled to use the custom drop event
+      toggleDropzoneClass(true)
+    })
+  }
+
+  /**
+   * @param {File[]} files
+   * @private
+   */
+  _uploadFiles(files) {
+    // prepare file progress bars and server request
+    let fileUploadCount = 0
+
+    const fileUploads = files.map((file) => {
+      const request = new XMLHttpRequest()
+      const fileUpload = new FileUpload(file, request)
+
+      if (Alchemy.uploader_defaults.upload_limit - 1 < fileUploadCount) {
+        fileUpload.valid = false
+        fileUpload.errorMessage = translate("Maximum number of files exceeded")
+      } else if (fileUpload.valid) {
+        fileUploadCount++
+        this._submitFile(request, file)
+      }
+
+      return fileUpload
+    })
+
+    this._createProgress(fileUploads)
+  }
+
+  /**
+   * @param {XMLHttpRequest} request
+   * @param {File} file
+   * @private
+   */
+  _submitFile(request, file) {
+    const form = this.querySelector("form")
+    const formData = new FormData(form)
+    formData.set(this.fileInput.name, file)
+    request.open("POST", form.action)
+    request.setRequestHeader("X-CSRF-Token", getToken())
+    request.setRequestHeader("X-Requested-With", "XMLHttpRequest")
+    request.setRequestHeader("Accept", "application/json")
+    request.send(formData)
+  }
+
+  /**
+   * create (and maybe remove the old) progress bar - component
+   * @param {FileUpload[]} fileUploads
+   * @private
+   */
+  _createProgress(fileUploads) {
+    if (this.uploadProgress) {
+      this.uploadProgress.cancel()
+      document.body.removeChild(this.uploadProgress)
+    }
+    this.uploadProgress = new Progress(fileUploads)
+    this.uploadProgress.onComplete = (status) => {
+      if (status === "successful" || status === "canceled") {
+        this.uploadProgress.visible = false
+      }
+      this.dispatchCustomEvent(`upload.${status}`)
+    }
+
+    document.body.append(this.uploadProgress)
+  }
+
+  /**
+   * @returns {HTMLInputElement}
+   */
+  get fileInput() {
+    return this.querySelector("input[type='file']")
+  }
+}
+
+customElements.define("alchemy-uploader", Uploader)

data/app/javascript/alchemy_admin/dirty.js

@@ -0,0 +1,49 @@
+function isPageDirty() {
+  return $("#element_area").find("alchemy-element-editor.dirty").length > 0
+}
+
+function checkPageDirtyness(element) {
+  let callback = () => {}
+
+  if ($(element).is("form")) {
+    callback = function () {
+      const $form = $(
+        `<form action="${element.action}" method="POST" style="display: none" />`
+      )
+      $form.append($(element).find("input"))
+      $form.appendTo("body")
+
+      Alchemy.pleaseWaitOverlay()
+      $form.submit()
+    }
+  } else if ($(element).is("a")) {
+    callback = () => Turbo.visit(element.pathname)
+  }
+
+  if (isPageDirty()) {
+    Alchemy.openConfirmDialog(Alchemy.t("page_dirty_notice"), {
+      title: Alchemy.t("warning"),
+      ok_label: Alchemy.t("ok"),
+      cancel_label: Alchemy.t("cancel"),
+      on_ok: function () {
+        window.onbeforeunload = void 0
+        callback()
+      }
+    })
+    return false
+  }
+  return true
+}
+
+function PageLeaveObserver() {
+  $("#main_navi a").on("click", function (event) {
+    if (!checkPageDirtyness(event.currentTarget)) {
+      event.preventDefault()
+    }
+  })
+}
+
+export default {
+  checkPageDirtyness,
+  PageLeaveObserver
+}

data/app/javascript/alchemy_admin/file_editors.js

@@ -16,7 +16,7 @@ class FileEditor {
     this.fileIcon.innerHTML = ""
     this.fileName.innerHTML = ""
     this.deleteLink.classList.add("hidden")
-    Alchemy.setElementDirty(this.container.closest(".element-editor"))
+    this.container.closest("alchemy-element-editor").setDirty()
     return false
   }
 }