alchemy_cms 8.2.7 → 8.3.0

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

@@ -1,38 +1,22 @@
-import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
 import { formatFileSize } from "alchemy_admin/utils/format"
 import { translate } from "alchemy_admin/i18n"
 import { growl } from "alchemy_admin/growler"
 
-export class FileUpload extends AlchemyHTMLElement {
-  constructor() {
-    super()
-
-    this.file = null
-    this.request = null
-
-    this.progressEventLoaded = 0
-    this.progressEventTotal = 0
-    this.className = "in-progress"
-    this.valid = true
-    this.value = 0
-  }
-
-  /**
-   * Initialize the component with file and request
-   * @param {File} file
-   * @param {XMLHttpRequest} request
-   */
-  initialize(file, request) {
-    this.file = file
-    this.request = request
-    this.progressEventTotal = file ? file.size : 0
-
-    this._validateFile()
-    this._addRequestEventListener()
-  }
-
-  render() {
-    return `
+export class FileUpload extends HTMLElement {
+  // public — used by callers (Uploader, Progress, tests)
+  file = null
+  request = null
+  progressEventLoaded = 0
+  progressEventTotal = 0
+
+  // private — backing state for getters/setters
+  #valid = true
+  #value = 0
+  #status = undefined
+  #errorMessage = ""
+
+  connectedCallback() {
+    this.innerHTML = `
       <sl-progress-bar value="${this.value}"></sl-progress-bar>
       <div class="description">
         <span class="file-name">${this.file?.name}</span>
@@ -45,9 +29,7 @@ export class FileUpload extends AlchemyHTMLElement {
         </button>
       </sl-tooltip>
     `
-  }
 
-  afterRender() {
     this.querySelector("button").addEventListener("click", () => this.cancel())
 
     if (this.file?.type.includes("image")) {
@@ -61,6 +43,21 @@ export class FileUpload extends AlchemyHTMLElement {
     }
   }
 
+  /**
+   * Initialize the component with file and request
+   * @param {File} file
+   * @param {XMLHttpRequest} request
+   */
+  initialize(file, request) {
+    this.file = file
+    this.request = request
+    this.progressEventTotal = file ? file.size : 0
+    this.status = "in-progress"
+
+    this.#validateFile()
+    this.#addRequestEventListener()
+  }
+
   /**
    * cancel the upload
    */
@@ -72,11 +69,18 @@ export class FileUpload extends AlchemyHTMLElement {
     }
   }
 
+  /**
+   * Dispatches a custom event with given name, namespaced under `Alchemy.`.
+   * @param {string} name The name of the custom event
+   */
+  dispatchCustomEvent(name) {
+    this.dispatchEvent(new CustomEvent(`Alchemy.${name}`, { bubbles: true }))
+  }
+
   /**
    * validate given file with the `Alchemy.uploader_defaults` - configuration
-   * @private
    */
-  _validateFile() {
+  #validateFile() {
     const config = Alchemy.uploader_defaults
     const maxFileSize = config.file_size_limit * Math.pow(1024, 2) // in Byte
     let errorMessage = undefined
@@ -107,9 +111,8 @@ export class FileUpload extends AlchemyHTMLElement {
 
   /**
    * register event listeners to react on request changes
-   * @private
    */
-  _addRequestEventListener() {
+  #addRequestEventListener() {
     // prevent errors if the component will be called without a request - object
     if (!this.request) {
       return
@@ -149,14 +152,14 @@ export class FileUpload extends AlchemyHTMLElement {
    * @returns {string}
    */
   get errorMessage() {
-    return this._errorMessage || ""
+    return this.#errorMessage || ""
   }
 
   /**
    * @param {string} message
    */
   set errorMessage(message) {
-    this._errorMessage = message
+    this.#errorMessage = message
     const errorMessageContainer = this.querySelector(".error-message")
     if (errorMessageContainer) {
       errorMessageContainer.textContent = message
@@ -215,14 +218,14 @@ export class FileUpload extends AlchemyHTMLElement {
    * @returns {string}
    */
   get status() {
-    return this._status
+    return this.#status
   }
 
   /**
    * @param {string} status
    */
   set status(status) {
-    this._status = status
+    this.#status = status
     this.className = status
 
     this.progressElement?.toggleAttribute(
@@ -235,14 +238,14 @@ export class FileUpload extends AlchemyHTMLElement {
    * @returns {boolean}
    */
   get valid() {
-    return this._valid
+    return this.#valid
   }
 
   /**
    * @param {boolean} isValid
    */
   set valid(isValid) {
-    this._valid = isValid
+    this.#valid = isValid
     this.classList.toggle("invalid", !isValid)
   }
 
@@ -251,14 +254,14 @@ export class FileUpload extends AlchemyHTMLElement {
    * @returns {number}
    */
   get value() {
-    return this._value
+    return this.#value
   }
 
   /**
    * @param {number} value
    */
   set value(value) {
-    this._value = value
+    this.#value = value
     if (this.progressElement) {
       this.progressElement.value = value
     }

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

@@ -1,36 +1,41 @@
-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 {
+const template = (buttonLabel, fileCount) => `
+  <sl-progress-bar value="0"></sl-progress-bar>
+  <div class="overall-progress-value">
+    <span class="value-text"></span>
+
+    <sl-tooltip content="${buttonLabel}">
+      <button class="icon_button" aria-label="${buttonLabel}">
+        <alchemy-icon name="close"></alchemy-icon>
+      </button>
+    </sl-tooltip>
+  </div>
+  <div class="single-uploads" style="--progress-columns: ${
+    fileCount > 3 ? 3 : fileCount
+  }"></div>
+  <div class="overall-upload-value value-text"></div>
+`
+
+export class Progress extends HTMLElement {
+  // public — accessed by Uploader and tests
+  fileCount = 0
+
+  // private — backing state and internals
+  #fileUploads = []
+  #buttonLabel = translate("Cancel all uploads")
+  #actionButton = null
   #visible = false
+  #handleFileChange = () => this.#updateView()
 
-  constructor() {
-    super()
-    this.buttonLabel = translate("Cancel all uploads")
-    this.fileUploads = []
-    this.fileCount = 0
-    this.className = "in-progress"
+  connectedCallback() {
+    this.innerHTML = template(this.#buttonLabel, this.fileCount)
     this.visible = true
-    this.handleFileChange = () => this._updateView()
-  }
 
-  /**
-   * Initialize the component with file uploads
-   * @param {FileUpload[]} fileUploads
-   */
-  initialize(fileUploads = []) {
-    this.fileUploads = fileUploads
-    this.fileCount = fileUploads.length
-  }
-
-  /**
-   * append file progress - components for each file
-   */
-  afterRender() {
-    this.actionButton = this.querySelector("button")
-    this.actionButton.addEventListener("click", () => {
+    this.#actionButton = this.querySelector("button")
+    this.#actionButton.addEventListener("click", () => {
       if (this.finished) {
         this.onComplete(this.status)
       } else {
@@ -38,34 +43,38 @@ export class Progress extends AlchemyHTMLElement {
       }
     })
 
-    this.fileUploads.forEach((fileUpload) => {
+    this.#fileUploads.forEach((fileUpload) => {
       this.querySelector(".single-uploads").append(fileUpload)
     })
+
+    this.#updateView()
+    this.addEventListener("Alchemy.FileUpload.Change", this.#handleFileChange)
   }
 
-  /**
-   * cancel requests in all remaining uploads
-   */
-  cancel() {
-    this._activeUploads().forEach((upload) => {
-      upload.cancel()
-    })
-    this._setupCloseButton()
+  disconnectedCallback() {
+    this.removeEventListener(
+      "Alchemy.FileUpload.Change",
+      this.#handleFileChange
+    )
   }
 
   /**
-   * update view and register change event
+   * Initialize the component with file uploads
+   * @param {FileUpload[]} fileUploads
    */
-  connected() {
-    this._updateView()
-    this.addEventListener("Alchemy.FileUpload.Change", this.handleFileChange)
+  initialize(fileUploads = []) {
+    this.#fileUploads = fileUploads
+    this.fileCount = fileUploads.length
   }
 
   /**
-   * deregister file upload change - event
+   * cancel requests in all remaining uploads
    */
-  disconnected() {
-    this.removeEventListener("Alchemy.FileUpload.Change", this.handleFileChange)
+  cancel() {
+    this.#activeUploads().forEach((upload) => {
+      upload.cancel()
+    })
+    this.#setupCloseButton()
   }
 
   /**
@@ -75,51 +84,29 @@ export class Progress extends AlchemyHTMLElement {
    */
   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}">
-            <alchemy-icon name="close"></alchemy-icon>
-          </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)
+  #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
+  #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(
+  #sumFileProgresses(field) {
+    return this.#activeUploads().reduce(
       (accumulator, upload) => upload[field] + accumulator,
       0
     )
@@ -127,9 +114,8 @@ export class Progress extends AlchemyHTMLElement {
 
   /**
    * don't render the whole element new, because it would prevent selecting buttons
-   * @private
    */
-  _updateView() {
+  #updateView() {
     const status = this.status
     this.className = status
 
@@ -147,7 +133,7 @@ export class Progress extends AlchemyHTMLElement {
       this.overallUploadSize
 
     if (this.finished) {
-      this._setupCloseButton()
+      this.#setupCloseButton()
       this.onComplete(status)
     } else {
       this.visible = true
@@ -158,34 +144,34 @@ export class Progress extends AlchemyHTMLElement {
    * @returns {boolean}
    */
   get finished() {
-    return this._activeUploads().every((entry) => entry.finished)
+    return this.#activeUploads().every((entry) => entry.finished)
   }
 
   /**
    * @returns {string}
    */
   get overallUploadSize() {
-    const uploadedFileCount = this._activeUploads().filter(
+    const uploadedFileCount = this.#activeUploads().filter(
       (fileProgress) => fileProgress.value >= 100
     ).length
     const overallProgressValue = `${
       this.totalProgress
-    }% (${uploadedFileCount} / ${this._activeUploads().length})`
+    }% (${uploadedFileCount} / ${this.#activeUploads().length})`
 
     return `${formatFileSize(
-      this._sumFileProgresses("progressEventLoaded")
-    )} / ${formatFileSize(this._sumFileProgresses("progressEventTotal"))}`
+      this.#sumFileProgresses("progressEventLoaded")
+    )} / ${formatFileSize(this.#sumFileProgresses("progressEventTotal"))}`
   }
 
   /**
    * @returns {string}
    */
   get overallProgressValue() {
-    const uploadedFileCount = this._activeUploads().filter(
+    const uploadedFileCount = this.#activeUploads().filter(
       (fileProgress) => fileProgress.value >= 100
     ).length
     return `${this.totalProgress}% (${uploadedFileCount} / ${
-      this._activeUploads().length
+      this.#activeUploads().length
     })`
   }
 
@@ -201,7 +187,7 @@ export class Progress extends AlchemyHTMLElement {
    * @returns {string}
    */
   get status() {
-    const uploadsStatuses = this._activeUploads().map(
+    const uploadsStatuses = this.#activeUploads().map(
       (upload) => upload.className
     )
 
@@ -227,12 +213,12 @@ export class Progress extends AlchemyHTMLElement {
    * @returns {number}
    */
   get totalProgress() {
-    const totalSize = this._activeUploads().reduce(
+    const totalSize = this.#activeUploads().reduce(
       (accumulator, upload) => accumulator + upload.file.size,
       0
     )
     let totalProgress = Math.ceil(
-      this._activeUploads().reduce((accumulator, upload) => {
+      this.#activeUploads().reduce((accumulator, upload) => {
         const weight = upload.file.size / totalSize
         return upload.value * weight + accumulator
       }, 0)

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

@@ -3,36 +3,75 @@
  * @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 }
-  }
+export class Uploader extends HTMLElement {
+  #dropzoneElement = null
+  #isDraggedOver = false
 
-  connected() {
-    this.fileInput.addEventListener("change", (event) => {
-      this._uploadFiles(Array.from(event.target.files))
-    })
+  connectedCallback() {
+    this.fileInput.addEventListener("change", this.#onFileInputChange)
     if (this.dropzone) {
-      this._dragAndDropBehavior()
+      this.#setupDropZone()
     }
     this.addEventListener("Alchemy.upload.successful", this)
   }
 
+  disconnectedCallback() {
+    this.fileInput?.removeEventListener("change", this.#onFileInputChange)
+    if (this.#dropzoneElement) {
+      this.#dropzoneElement.removeEventListener(
+        "dragleave",
+        this.#onDropzoneDragleave
+      )
+      this.#dropzoneElement.removeEventListener("drop", this.#onDropzoneDrop)
+      this.#dropzoneElement.removeEventListener(
+        "dragover",
+        this.#onDropzoneDragover
+      )
+      this.#dropzoneElement = null
+    }
+  }
+
   handleEvent(evt) {
     switch (evt.type) {
       case "Alchemy.upload.successful":
-        this._handleUploadComplete()
+        this.#handleUploadComplete()
         break
     }
   }
 
-  _handleUploadComplete() {
+  #onFileInputChange = (event) => {
+    this.uploadFiles(Array.from(event.target.files))
+  }
+
+  #toggleDropzoneClass = (enabled) => {
+    if (this.#isDraggedOver !== enabled) {
+      this.#isDraggedOver = enabled
+      this.#dropzoneElement.classList.toggle("dragover")
+    }
+  }
+
+  #onDropzoneDragleave = () => this.#toggleDropzoneClass(false)
+
+  #onDropzoneDrop = async (event) => {
+    event.preventDefault()
+    this.#toggleDropzoneClass(false)
+
+    const files = [...event.dataTransfer.items].map((item) => item.getAsFile())
+
+    this.uploadFiles(files)
+  }
+
+  #onDropzoneDragover = (event) => {
+    event.preventDefault() // dragover has to be disabled to use the custom drop event
+    this.#toggleDropzoneClass(true)
+  }
+
+  #handleUploadComplete() {
     setTimeout(() => {
       const url = this.redirectUrl
       const turboFrame = this.closest("turbo-frame")
@@ -53,42 +92,22 @@ export class Uploader extends AlchemyHTMLElement {
    * 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")
-      }
-    }
+  #setupDropZone() {
+    this.#dropzoneElement = document.querySelector(this.dropzone)
+    if (!this.#dropzoneElement) return
 
-    dropzoneElement.addEventListener("dragleave", () =>
-      toggleDropzoneClass(false)
+    this.#dropzoneElement.addEventListener(
+      "dragleave",
+      this.#onDropzoneDragleave
     )
-    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)
-    })
+    this.#dropzoneElement.addEventListener("drop", this.#onDropzoneDrop)
+    this.#dropzoneElement.addEventListener("dragover", this.#onDropzoneDragover)
   }
 
   /**
    * @param {File[]} files
-   * @private
    */
-  _uploadFiles(files) {
+  uploadFiles(files) {
     // prepare file progress bars and server request
     let fileUploadCount = 0
 
@@ -102,13 +121,13 @@ export class Uploader extends AlchemyHTMLElement {
         fileUpload.errorMessage = translate("Maximum number of files exceeded")
       } else if (fileUpload.valid) {
         fileUploadCount++
-        this._submitFile(request, file)
+        this.#submitFile(request, file)
       }
 
       return fileUpload
     })
 
-    this._createProgress(fileUploads)
+    this.#createProgress(fileUploads)
   }
 
   /**
@@ -116,7 +135,7 @@ export class Uploader extends AlchemyHTMLElement {
    * @param {File} file
    * @private
    */
-  _submitFile(request, file) {
+  #submitFile(request, file) {
     const form = this.querySelector("form")
     const formData = new FormData(form)
     formData.set(this.fileInput.name, file)
@@ -132,7 +151,7 @@ export class Uploader extends AlchemyHTMLElement {
    * @param {FileUpload[]} fileUploads
    * @private
    */
-  _createProgress(fileUploads) {
+  #createProgress(fileUploads) {
     if (this.uploadProgress) {
       this.uploadProgress.cancel()
       document.body.removeChild(this.uploadProgress)
@@ -140,12 +159,18 @@ export class Uploader extends AlchemyHTMLElement {
     this.uploadProgress = new Progress()
     this.uploadProgress.initialize(fileUploads)
     this.uploadProgress.onComplete = (status) => {
-      this.dispatchCustomEvent(`upload.${status}`)
+      this.dispatchEvent(
+        new CustomEvent(`Alchemy.upload.${status}`, { bubbles: true })
+      )
     }
 
     document.body.append(this.uploadProgress)
   }
 
+  get dropzone() {
+    return this.getAttribute("dropzone")
+  }
+
   /**
    * @returns {HTMLInputElement}
    */

data/app/javascript/alchemy_admin/dialog.js

@@ -126,6 +126,9 @@ export class Dialog {
   init() {
     Hotkeys(this.dialog_body)
     this.watch_remote_forms()
+    window.requestAnimationFrame(() => {
+      this.dialog_body.find("[autofocus]").focus()
+    })
   }
 
   // Watches ajax requests inside of dialog body and replaces the content accordingly

data/app/javascript/alchemy_admin/hotkeys.js

@@ -1,23 +1,7 @@
 import "keymaster"
-import { openDialog } from "alchemy_admin/dialog"
 
 const bindedHotkeys = []
 
-function showHelp(evt) {
-  if (
-    !$(evt.target).is("input, textarea") &&
-    String.fromCharCode(evt.which) === "?"
-  ) {
-    openDialog("/admin/help", {
-      title: Alchemy.t("help"),
-      size: "400x492"
-    })
-    return false
-  } else {
-    return true
-  }
-}
-
 export default function (scope = document) {
   // The scope can be a jQuery object because we still use jQuery in alchemy_admin/dialog.js.
   if (scope instanceof jQuery) {
@@ -26,8 +10,6 @@ export default function (scope = document) {
 
   // Unbind all previously registered hotkeys if we are not inside a dialog.
   if (scope === document) {
-    document.removeEventListener("keypress", showHelp)
-    document.addEventListener("keypress", showHelp)
     bindedHotkeys.forEach((hotkey) => key.unbind(hotkey))
   }