iron-cms 0.17.2 → 0.17.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7441460ff6c611510525a11808f5fe2deb724574380f91b5ffab5edbb1c571a0
-  data.tar.gz: 157944fd97ba5e0b6aba79409fd0b456bd6bef4cb802ed836eba2dc9b693de15
+  metadata.gz: 902cb70c9fa801865eb767b180e48c892600b733fa3dbd68aecd7037c26be303
+  data.tar.gz: 6d446f80c7e37f3ff23f2c35dff923ed91a4d78dfcaacd6ec334991a3f711158
 SHA512:
-  metadata.gz: 5fd0f51df8afd88331e30b3349eee6e1dfb6df988ab1f17b5a5362d2e94f71d6fbabfb2e62001c8627c6e2a2c5c0a0ad998c4ae9b192319b6cf37d392ef13fe2
-  data.tar.gz: a6a1b3169c158dae96b9190b0553b0e83eaf450df510cefcc70915aca31087284d495fc28269c271a9827f3a59f2d04cca87657b00e22e0e392cd3eedbec8ae7
+  metadata.gz: f5ea399948c341b561a0bc750b6f8cfa77125ae7b19e9cbf5771530ce59d65d2de131fb670675a487f805e88027ee603de18715e34b9d9affbbb70bf4f4dbd07
+  data.tar.gz: 6bfd83e521d7c923be66718088dbef7a07ac1cc466eb89fbec9d0da7e6d0f186c66365f32e395e89df42470fcffdc7b5acbf78cfa0ff1a7731763602d12d374a

data/app/assets/builds/iron.css

@@ -7032,6 +7032,25 @@ dialog.modal {
     color: var(--color-amber-400);
   }
 }
+[data-controller="file-upload"] {
+  [data-file-upload-target="documentPreview"] {
+    display: none;
+  }
+  [data-file-icon] {
+    display: none;
+  }
+  [data-file-upload-target="previewWrapper"]:not([data-file-kind="image"]) {
+    [data-file-upload-target="preview"] {
+      display: none;
+    }
+    [data-file-upload-target="documentPreview"] {
+      display: flex;
+    }
+  }
+  [data-file-kind="pdf"] [data-file-icon="pdf"], [data-file-kind="audio"] [data-file-icon="audio"], [data-file-kind="video"] [data-file-icon="video"], [data-file-kind="file"] [data-file-icon="file"] {
+    display: block;
+  }
+}
 :root {
   --highlight-1: rgb(136, 118, 38);
   --highlight-2: rgb(185, 94, 6);

data/app/assets/tailwind/iron/application.css

@@ -29,6 +29,7 @@
 @import './components/selection-list.css';
 @import './components/file-scope-picker.css';
 @import './components/content-type-card.css';
+@import './components/file-upload.css';
 @import './lexxy.css';
 
 @plugin '@tailwindcss/typography';

data/app/assets/tailwind/iron/components/file-upload.css

@@ -0,0 +1,26 @@
+[data-controller="file-upload"] {
+  [data-file-upload-target="documentPreview"] {
+    @apply hidden;
+  }
+
+  [data-file-icon] {
+    @apply hidden;
+  }
+
+  [data-file-upload-target="previewWrapper"]:not([data-file-kind="image"]) {
+    [data-file-upload-target="preview"] {
+      @apply hidden;
+    }
+
+    [data-file-upload-target="documentPreview"] {
+      @apply flex;
+    }
+  }
+
+  [data-file-kind="pdf"] [data-file-icon="pdf"],
+  [data-file-kind="audio"] [data-file-icon="audio"],
+  [data-file-kind="video"] [data-file-icon="video"],
+  [data-file-kind="file"] [data-file-icon="file"] {
+    @apply block;
+  }
+}

data/app/javascript/iron/controllers/file_upload_controller.js

@@ -1,7 +1,7 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class FileUploadController extends Controller {
-  static targets = ["preview", "placeholder", "previewWrapper"];
+  static targets = ["preview", "placeholder", "previewWrapper", "filename"];
 
   connect() {
     if (this.hasPreviewTarget) {
@@ -16,19 +16,27 @@ export default class FileUploadController extends Controller {
     const file = event.target.files[0];
     if (!file) return;
 
-    if (this.hasPreviewTarget) {
-      this.previewTarget.src = URL.createObjectURL(file);
-    }
-    if (this.hasPlaceholderTarget) {
-      this.placeholderTarget.classList.add("hidden");
+    const kind = this.#kindOf(file.type);
+
+    if (kind === "image") {
+      if (this.hasPreviewTarget) {
+        this.previewTarget.src = URL.createObjectURL(file);
+      }
+    } else if (this.hasFilenameTarget) {
+      this.filenameTarget.textContent = file.name;
     }
-    this.previewElement?.classList.remove("hidden");
+
+    this.#markFileKind(kind);
+    this.#revealPreview();
   }
 
   reset() {
     if (this.hasPreviewTarget) {
       this.previewTarget.src = this.originalSrc;
     }
+    if (this.hasPreviewWrapperTarget) {
+      delete this.previewWrapperTarget.dataset.fileKind;
+    }
     if (this.originalHidden) {
       this.previewElement?.classList.add("hidden");
       if (this.hasPlaceholderTarget) {
@@ -42,4 +50,27 @@ export default class FileUploadController extends Controller {
     if (this.hasPreviewTarget) return this.previewTarget;
     return null;
   }
+
+  // Private
+
+  #markFileKind(kind) {
+    if (this.hasPreviewWrapperTarget) {
+      this.previewWrapperTarget.dataset.fileKind = kind;
+    }
+  }
+
+  #revealPreview() {
+    if (this.hasPlaceholderTarget) {
+      this.placeholderTarget.classList.add("hidden");
+    }
+    this.previewElement?.classList.remove("hidden");
+  }
+
+  #kindOf(contentType) {
+    if (contentType.startsWith("image/")) return "image";
+    if (contentType === "application/pdf") return "pdf";
+    if (contentType.startsWith("audio/")) return "audio";
+    if (contentType.startsWith("video/")) return "video";
+    return "file";
+  }
 }

data/app/views/iron/entries/fields/_file.html.erb

@@ -49,6 +49,13 @@
         class="h-full w-full object-cover object-center"
         data-file-upload-target="preview"
       >
+      <div class="h-full w-full flex-col items-center justify-center gap-2 p-4 text-stone-500 dark:text-stone-400" data-file-upload-target="documentPreview">
+        <%= icon "file", class: "size-10", data: { file_icon: "file" } %>
+        <%= icon "file-text", class: "size-10", data: { file_icon: "pdf" } %>
+        <%= icon "file-audio", class: "size-10", data: { file_icon: "audio" } %>
+        <%= icon "file-video", class: "size-10", data: { file_icon: "video" } %>
+        <p class="text-sm font-medium truncate max-w-full" data-file-upload-target="filename"></p>
+      </div>
     </div>
   <% end %>
 

data/lib/iron/version.rb

@@ -1,3 +1,3 @@
 module Iron
-  VERSION = "0.17.2"
+  VERSION = "0.17.3"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: iron-cms
 version: !ruby/object:Gem::Version
-  version: 0.17.2
+  version: 0.17.3
 platform: ruby
 authors:
 - Massimo De Marchi
@@ -290,6 +290,7 @@ files:
 - app/assets/tailwind/iron/components/field-definition.css
 - app/assets/tailwind/iron/components/fieldset.css
 - app/assets/tailwind/iron/components/file-scope-picker.css
+- app/assets/tailwind/iron/components/file-upload.css
 - app/assets/tailwind/iron/components/form.css
 - app/assets/tailwind/iron/components/icon-picker.css
 - app/assets/tailwind/iron/components/input.css