Sha256: eb4c0c2a53c87fa0450ce99e61fb6837dded22d746d9fec6e9ac03042aaf3743
Contents?: true
Size: 1.53 KB
Versions: 27
Compression:
Stored size: 1.53 KB
Contents
import { Controller } from "@hotwired/stimulus"
import getIconByMime from "../support/mime_icon"
import DomElement from "../support/dom_element"
// Connects to data-controller="attachment-preview"
export default class extends Controller {
static targets = ["thumbnail", "thumbnailLink"]
static values = {
mimeType: String,
thumbnailUrl: String,
}
connect() {
if (!this.hasThumbnailTarget) return;
if (this.thumbnailUrlValue) {
this.useThumbnailPreview()
} else {
this.useMimeIconPreview()
}
}
remove() {
this.element.remove()
}
useThumbnailPreview() {
const thumbnail = DomElement.fromTemplate(`
<img src="${this.thumbnailUrlValue}" class="w-full h-full object-cover" />
`)
this.thumbnailLinkTarget.innerHTML = null
this.thumbnailLinkTarget.appendChild(thumbnail)
}
useMimeIconPreview() {
const mime = getIconByMime(this.mimeTypeValue)
// Configure the icon
mime.icon.classList.add(
'w-3/5', // 60% width
'h-4/5', // 80% height
'rounded-lg',
'shadow-lg',
'bg-white',
'p-2' // Add some padding inside the icon container
)
// Center the icon in the container
this.thumbnailLinkTarget.classList.add(
'flex',
'items-center',
'justify-center'
)
// Set the background color
this.thumbnailLinkTarget.style.backgroundColor = mime.color
// Clear and append the icon
this.thumbnailLinkTarget.innerHTML = null
this.thumbnailLinkTarget.appendChild(mime.icon)
}
}
Version data entries
27 entries across 27 versions & 1 rubygems