rails_den 2.0.0

data/app/assets/javascript/rails_den/attachments.js

@@ -0,0 +1,733 @@
+(() => {
+  const PICKER_SELECTOR =
+    "[data-rails-den-attachment-picker]"
+
+  const INPUT_SELECTOR =
+    "[data-rails-den-attachment-input]"
+
+  const QUEUE_SELECTOR =
+    "[data-rails-den-attachment-queue]"
+
+  const ANNOUNCEMENT_SELECTOR =
+    "[data-rails-den-attachment-announcement]"
+
+  const COMPOSER_INPUT_SELECTOR =
+    "[data-rails-den-composer-input]"
+
+  const SAFE_IMAGE_PREVIEW_TYPES =
+    new Set([
+      "image/jpeg",
+      "image/png",
+      "image/gif",
+      "image/webp"
+    ])
+
+  const PASTED_IMAGE_EXTENSIONS = {
+    "image/jpeg": "jpg",
+    "image/png": "png",
+    "image/gif": "gif",
+    "image/webp": "webp"
+  }
+
+  const pickers =
+    new Map()
+
+  function humanFileSize(bytes) {
+    if (!Number.isFinite(bytes) || bytes < 1) {
+      return "0 Bytes"
+    }
+
+    const units = [
+      "Bytes",
+      "KB",
+      "MB",
+      "GB"
+    ]
+
+    const index =
+      Math.min(
+        Math.floor(
+          Math.log(bytes) /
+          Math.log(1024)
+        ),
+        units.length - 1
+      )
+
+    const value =
+      bytes /
+      (1024 ** index)
+
+    const precision =
+      index === 0 || value >= 10
+        ? 0
+        : 1
+
+    return `${value.toFixed(precision)} ${units[index]}`
+  }
+
+  function fileIdentity(file) {
+    return [
+      file.name,
+      file.size,
+      file.type,
+      file.lastModified
+    ].join(":")
+  }
+
+  function mergeFiles(currentFiles, incomingFiles) {
+    const merged =
+      new Map()
+
+    currentFiles.forEach((file) => {
+      merged.set(
+        fileIdentity(file),
+        file
+      )
+    })
+
+    incomingFiles.forEach((file) => {
+      merged.set(
+        fileIdentity(file),
+        file
+      )
+    })
+
+    return Array.from(
+      merged.values()
+    )
+  }
+
+  function synchronizeInput(input, files) {
+    const transfer =
+      new DataTransfer()
+
+    files.forEach((file) => {
+      transfer.items.add(file)
+    })
+
+    input.files =
+      transfer.files
+  }
+
+  function createFileDetails(file) {
+    const details =
+      document.createElement("span")
+
+    details.className =
+      "rails-den-attachment-queue-details"
+
+    const name =
+      document.createElement("strong")
+
+    name.className =
+      "rails-den-attachment-queue-name"
+
+    name.textContent =
+      file.name
+
+    const metadata =
+      document.createElement("span")
+
+    metadata.className =
+      "rails-den-attachment-queue-metadata"
+
+    metadata.textContent =
+      humanFileSize(file.size)
+
+    details.append(
+      name,
+      metadata
+    )
+
+    return details
+  }
+
+  function createPreview(file, objectUrls) {
+    if (
+      !SAFE_IMAGE_PREVIEW_TYPES.has(
+        file.type
+      )
+    ) {
+      const icon =
+        document.createElement("span")
+
+      icon.className =
+        "rails-den-attachment-queue-icon"
+
+      icon.setAttribute(
+        "aria-hidden",
+        "true"
+      )
+
+      icon.textContent =
+        "📎"
+
+      return icon
+    }
+
+    const image =
+      document.createElement("img")
+
+    const objectUrl =
+      URL.createObjectURL(file)
+
+    objectUrls.push(
+      objectUrl
+    )
+
+    image.className =
+      "rails-den-attachment-queue-thumbnail"
+
+    image.src =
+      objectUrl
+
+    image.alt = ""
+
+    return image
+  }
+
+  function transferContainsFiles(event) {
+    return Array
+      .from(
+        event.dataTransfer?.types || []
+      )
+      .includes("Files")
+  }
+
+  function normalizedPastedImage(file, index) {
+    if (
+      !file ||
+      !SAFE_IMAGE_PREVIEW_TYPES.has(
+        file.type
+      )
+    ) {
+      return null
+    }
+
+    const extension =
+      PASTED_IMAGE_EXTENSIONS[
+        file.type
+      ]
+
+    if (!extension) {
+      return null
+    }
+
+    const timestamp =
+      Date.now()
+
+    return new File(
+      [ file ],
+      `pasted-image-${timestamp}-${index + 1}.${extension}`,
+      {
+        type:
+          file.type,
+        lastModified:
+          timestamp
+      }
+    )
+  }
+
+  function pastedImageFiles(event) {
+    const clipboard =
+      event.clipboardData
+
+    if (!clipboard) {
+      return []
+    }
+
+    const directFiles =
+      Array.from(
+        clipboard.files || []
+      )
+
+    let imageFiles =
+      directFiles.filter((file) => {
+        return SAFE_IMAGE_PREVIEW_TYPES.has(
+          file.type
+        )
+      })
+
+    if (imageFiles.length === 0) {
+      imageFiles =
+        Array.from(
+          clipboard.items || []
+        )
+          .filter((item) => {
+            return (
+              item.kind === "file" &&
+              SAFE_IMAGE_PREVIEW_TYPES.has(
+                item.type
+              )
+            )
+          })
+          .map((item) => {
+            return item.getAsFile()
+          })
+          .filter(Boolean)
+    }
+
+    return imageFiles
+      .map(
+        normalizedPastedImage
+      )
+      .filter(Boolean)
+  }
+
+  function initializePicker(picker) {
+    if (
+      picker.dataset
+        .railsDenAttachmentPickerReady ===
+      "true"
+    ) {
+      return
+    }
+
+    const input =
+      picker.querySelector(
+        INPUT_SELECTOR
+      )
+
+    const queue =
+      picker.querySelector(
+        QUEUE_SELECTOR
+      )
+
+    const announcement =
+      picker.querySelector(
+        ANNOUNCEMENT_SELECTOR
+      )
+
+    if (!input || !queue) {
+      return
+    }
+
+    const form =
+      input.form
+
+    const dropTarget =
+      picker.closest(
+        ".rails-den-field"
+      ) || picker
+
+    let files =
+      Array.from(
+        input.files || []
+      )
+
+    let objectUrls = []
+    let dragDepth = 0
+
+    function revokeObjectUrls() {
+      objectUrls.forEach((url) => {
+        URL.revokeObjectURL(url)
+      })
+
+      objectUrls = []
+    }
+
+    function announce(message) {
+      if (!announcement) {
+        return
+      }
+
+      announcement.textContent =
+        ""
+
+      window.requestAnimationFrame(() => {
+        announcement.textContent =
+          message
+      })
+    }
+
+    function removeDragState() {
+      dragDepth = 0
+
+      picker.classList.remove(
+        "is-dragover"
+      )
+    }
+
+    function addFiles(
+      incomingFiles,
+      source = "selected"
+    ) {
+      const incoming =
+        Array.from(
+          incomingFiles || []
+        )
+
+      if (incoming.length === 0) {
+        return
+      }
+
+      const previousCount =
+        files.length
+
+      files =
+        mergeFiles(
+          files,
+          incoming
+        )
+
+      synchronizeInput(
+        input,
+        files
+      )
+
+      render()
+
+      const added =
+        files.length -
+        previousCount
+
+      if (added === 0) {
+        announce(
+          "Those files are already attached"
+        )
+
+        return
+      }
+
+      const noun =
+        added === 1
+          ? "file"
+          : "files"
+
+      if (source === "pasted") {
+        announce(
+          `${added} pasted ${noun} added`
+        )
+      } else if (source === "dropped") {
+        announce(
+          `${added} dropped ${noun} added`
+        )
+      } else {
+        announce(
+          `${added} ${noun} added`
+        )
+      }
+    }
+
+    function removeFile(index) {
+      const removed =
+        files[index]
+
+      files =
+        files.filter(
+          (_file, candidateIndex) =>
+            candidateIndex !== index
+        )
+
+      synchronizeInput(
+        input,
+        files
+      )
+
+      render()
+
+      if (removed) {
+        announce(
+          `Removed ${removed.name}`
+        )
+      }
+    }
+
+    function render() {
+      revokeObjectUrls()
+
+      queue.replaceChildren()
+
+      if (files.length === 0) {
+        queue.hidden =
+          true
+
+        return
+      }
+
+      queue.hidden =
+        false
+
+      files.forEach((file, index) => {
+        const item =
+          document.createElement("div")
+
+        item.className =
+          "rails-den-attachment-queue-item"
+
+        const preview =
+          createPreview(
+            file,
+            objectUrls
+          )
+
+        const details =
+          createFileDetails(file)
+
+        const remove =
+          document.createElement("button")
+
+        remove.type =
+          "button"
+
+        remove.className =
+          "rails-den-attachment-queue-remove"
+
+        remove.textContent =
+          "Remove"
+
+        remove.setAttribute(
+          "aria-label",
+          `Remove ${file.name}`
+        )
+
+        remove.addEventListener(
+          "click",
+          () => {
+            removeFile(index)
+          }
+        )
+
+        item.append(
+          preview,
+          details,
+          remove
+        )
+
+        queue.appendChild(
+          item
+        )
+      })
+    }
+
+    function handleChange() {
+      addFiles(
+        Array.from(
+          input.files || []
+        ),
+        "selected"
+      )
+    }
+
+    function handleDragEnter(event) {
+      if (!transferContainsFiles(event)) {
+        return
+      }
+
+      event.preventDefault()
+
+      dragDepth += 1
+
+      picker.classList.add(
+        "is-dragover"
+      )
+    }
+
+    function handleDragOver(event) {
+      if (!transferContainsFiles(event)) {
+        return
+      }
+
+      event.preventDefault()
+
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect =
+          "copy"
+      }
+
+      picker.classList.add(
+        "is-dragover"
+      )
+    }
+
+    function handleDragLeave(event) {
+      if (!transferContainsFiles(event)) {
+        return
+      }
+
+      dragDepth =
+        Math.max(
+          0,
+          dragDepth - 1
+        )
+
+      if (dragDepth === 0) {
+        picker.classList.remove(
+          "is-dragover"
+        )
+      }
+    }
+
+    function handleDrop(event) {
+      if (!transferContainsFiles(event)) {
+        return
+      }
+
+      event.preventDefault()
+      event.stopPropagation()
+
+      const droppedFiles =
+        Array.from(
+          event.dataTransfer?.files || []
+        )
+
+      removeDragState()
+
+      addFiles(
+        droppedFiles,
+        "dropped"
+      )
+    }
+
+    function handlePaste(event) {
+      const target =
+        event.target
+
+      const composerInput =
+        target?.closest?.(
+          COMPOSER_INPUT_SELECTOR
+        )
+
+      if (!composerInput) {
+        return
+      }
+
+      if (
+        form &&
+        composerInput.form !== form
+      ) {
+        return
+      }
+
+      const pastedFiles =
+        pastedImageFiles(event)
+
+      if (pastedFiles.length === 0) {
+        return
+      }
+
+      event.preventDefault()
+
+      addFiles(
+        pastedFiles,
+        "pasted"
+      )
+    }
+
+    input.addEventListener(
+      "change",
+      handleChange
+    )
+
+    dropTarget.addEventListener(
+      "dragenter",
+      handleDragEnter
+    )
+
+    dropTarget.addEventListener(
+      "dragover",
+      handleDragOver
+    )
+
+    dropTarget.addEventListener(
+      "dragleave",
+      handleDragLeave
+    )
+
+    dropTarget.addEventListener(
+      "drop",
+      handleDrop
+    )
+
+    document.addEventListener(
+      "paste",
+      handlePaste,
+      true
+    )
+
+    picker.dataset
+      .railsDenAttachmentPickerReady =
+      "true"
+
+    render()
+
+    pickers.set(
+      picker,
+      {
+        cleanup() {
+          input.removeEventListener(
+            "change",
+            handleChange
+          )
+
+          dropTarget.removeEventListener(
+            "dragenter",
+            handleDragEnter
+          )
+
+          dropTarget.removeEventListener(
+            "dragover",
+            handleDragOver
+          )
+
+          dropTarget.removeEventListener(
+            "dragleave",
+            handleDragLeave
+          )
+
+          dropTarget.removeEventListener(
+            "drop",
+            handleDrop
+          )
+
+          document.removeEventListener(
+            "paste",
+            handlePaste,
+            true
+          )
+
+          removeDragState()
+          revokeObjectUrls()
+
+          delete picker.dataset
+            .railsDenAttachmentPickerReady
+        }
+      }
+    )
+  }
+
+  function initializePickers() {
+    document
+      .querySelectorAll(
+        PICKER_SELECTOR
+      )
+      .forEach(
+        initializePicker
+      )
+  }
+
+  function cleanupPickers() {
+    pickers.forEach(
+      ({ cleanup }) => {
+        cleanup()
+      }
+    )
+
+    pickers.clear()
+  }
+
+  document.addEventListener(
+    "DOMContentLoaded",
+    initializePickers
+  )
+
+  document.addEventListener(
+    "turbo:load",
+    initializePickers
+  )
+
+  document.addEventListener(
+    "turbo:before-cache",
+    cleanupPickers
+  )
+})()