add to JS : Can choose between name and title (alt custom properties)…

… to show name of the file
webplusmultimedia · Apr 25, 2024 · 83304e3 · 83304e3
1 parent 8c3b699
commit 83304e3
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 43 deletions.
diff --git a/resources/dist/components/gallery-json-media.js b/resources/dist/components/gallery-json-media.js
diff --git a/resources/js/index.js b/resources/js/index.js
@@ -13,6 +13,7 @@ export function galleryFileUpload(
         isDisabled,
         isDownloadable,
         uploadingMessage,
+        changeNameToAlt,
         isReorderable,
         acceptedFileTypes,
         hasCustomPropertiesAction,
@@ -59,16 +60,19 @@ export function galleryFileUpload(
                 },
             )
         },
-        /**@param {String} name */
-        getFileName: function(name) {
-            if (name.startsWith('blob:') || name.startsWith('livewire:')) {
-                return name
+        /**@param {Object : { name : string,alt : string}} file */
+        getFileName: function(file) {
+            if (file.name.startsWith('blob:') || file.name.startsWith('livewire:')) {
+                return file.name
             }
-            let last_slash = name.lastIndexOf('/')
+            if(changeNameToAlt){
+                return file.alt
+            }
+            let last_slash = file.name.lastIndexOf('/')
             if (last_slash !== -1) {
-                return name.slice(last_slash + 1)
+                return file.name.slice(last_slash + 1)
             }
-            return name
+            return file.name
         },
         getContentImage(file) {
             return contentFile(file).getFile()

diff --git a/resources/js/support/FileInfo.js b/resources/js/support/FileInfo.js
@@ -1,7 +1,7 @@
 export function humanFileSize(size) {
     if (size) {
         if (size > (1000 * 1000)) {
-            return ((size / (1000 *1000)).toFixed(1) + ' Mb').replace('.', ',')
+            return ((size / (1000 * 1000)).toFixed(1) + ' Mb').replace('.', ',')
         }
         if (size > 1024) {
             return ((size / 1000).toFixed(1) + ' kb').replace('.', ',')
@@ -17,18 +17,19 @@ export function humanFileSize(size) {
  * @param {String} uuid
  * @returns {Object}
  * **/
-export function normalizeFileToShow(file,uuid) {
+export function normalizeFileToShow(file, uuid) {
     if (!(file instanceof File)) {
         return false
     }
     return {
         name: file.name,
+        alt : file.name,
         size: file.size,
         mime_type: file.type,
         is_new: true,
         is_success: false,
-        error : false,
-        filekey : uuid,
+        error: false,
+        filekey: uuid,
         progress: 0,
         'url': URL.createObjectURL(file),
     }
@@ -40,26 +41,26 @@ export function normalizeFileToShow(file,uuid) {
  * */
 export function checkFile(file) {
     return {
-        _minSize : null,
-        _maxSize : null,
-        _acceptedFileTypes : null,
-        minSize(minSize){
+        _minSize: null,
+        _maxSize: null,
+        _acceptedFileTypes: null,
+        minSize(minSize) {
             this._minSize = minSize
             return this
         },
         maxSize(maxSize) {
             this._maxSize = maxSize
             return this
         },
-        fileType(acceptedFileTypes){
+        fileType(acceptedFileTypes) {
             this._acceptedFileTypes = acceptedFileTypes
             return this
         },
         check() {
             return !checkFileType(file, this._acceptedFileTypes)
                 || !checkMaxSize(file, this._maxSize)
                 || !checkMinSize(file, this._minSize)
-        }
+        },
     }
 }
 
@@ -72,28 +73,30 @@ export function checkFile(file) {
  */
 export function checkMaxFile(nbPresentFile, maxFiles, nbFilesUpload) {
     const nbFiles = nbPresentFile + nbFilesUpload
-     if(!maxFiles) {
-         return true
-     }
-    return   nbFiles <= maxFiles;
+    if (!maxFiles) {
+        return true
+    }
+    return nbFiles <= maxFiles
 }
+
 /**
  * @param {File} file
- * @param {number|none} minSize
+ * @param {number|null} minSize
  *
  * @return {boolean}
  */
 export function checkMinSize(file, minSize) {
-    return !(minSize && file.size > minSize);
+    return !(minSize && file.size > minSize)
 }
+
 /**
  * @param {File} file
- * @param {number|none} maxSize
+ * @param {number|null} maxSize
  *
  * @return {boolean}
  */
 export function checkMaxSize(file, maxSize) {
-    return !(maxSize && file.size >( maxSize * 1024));
+    return !(maxSize && file.size > (maxSize * 1024))
 }
 
 /**
@@ -103,8 +106,8 @@ export function checkMaxSize(file, maxSize) {
  * @return {boolean}
  */
 export function checkFileType(file, fileTypes) {
-    if(fileTypes) {
-        let type = fileTypes.filter(type => type === file.type);
+    if (fileTypes) {
+        let type = fileTypes.filter(type => type === file.type)
         return type.length > 0
     }
     return true
@@ -125,6 +128,6 @@ export function uuid() {
                     new Uint8Array(1),
                 )[0] &
                 (15 >> (c / 4)))
-        ).toString(16)
+        ).toString(16),
     )
 }
diff --git a/resources/views/forms/content/gallery-content.blade.php b/resources/views/forms/content/gallery-content.blade.php
@@ -7,28 +7,21 @@
         @dragend="$event.target.setAttribute('draggable', false);stopDragging = true"
         @dragover="updateListOrder($event)"
         draggable="false"
-        :class="{
-                            'opacity-25': indexBeingDragged === fileIndex
-                        }"
-
+        :class="{ 'opacity-25': indexBeingDragged === fileIndex }"
     >
         <div class="flex w-full max-h-fit"
              :class="{'pointer-events-none': indexBeingDragged}"
         >
-
             <div class="gallery-header"
                  :class="{ 'webplusm-finish-uploading' : file.is_success  && file.is_new, 'webplusm-error-uploading' : file.error  && file.is_new }"
             >
                 <div style="overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;"
-                     x-text="getFileName(file.name)"></div>
+                     x-text="getFileName(file)"></div>
                 <div x-text="getHumanSize(file.size)"></div>
             </div>
             <div class="flex w-full pointer-events-none object-cover" x-html="getContentImage(file)"
                  :class="{ 'blur-[2px]' : startUpload && file.is_new && !file.is_success }"
             >
-                {{--<img :src="file.url" :alt="file.name" class="object-cover w-full" loading="lazy"
-                     :class="{ 'blur-[2px]' : startUpload && file.is_new && !file.is_success }"
-                 >--}}
             </div>
             <div class="absolute inset-0 m-auto  w-28 h-28 flex items-center justify-center rounded-full z-[3] pointer-events-none"
                  :style="{'--wm-progress' : `calc(${file.progress??0} * 1%)`,backgroundImage: `conic-gradient(white var(--wm-progress), transparent var(--wm-progress))`}"

diff --git a/resources/views/forms/gallery-file-upload.blade.php b/resources/views/forms/gallery-file-upload.blade.php
@@ -31,6 +31,7 @@
                      isMultiple : @js($isMultiple()),
                      acceptedFileTypes : @js($getAcceptedFileTypes()),
                      uploadingMessage: @js($getUploadingMessage()),
+                     changeNameToAlt : @js($hasNameReplaceByTitle()),
                      removeUploadedFileUsing: async (fileKey) => {
                         return await $wire.removeFormUploadedFile(@js($getStatePath()), fileKey)
                     },

diff --git a/resources/views/infolist/document.blade.php b/resources/views/infolist/document.blade.php
@@ -23,13 +23,13 @@
                 <a href="{{ $document->getUrl() }}" target="_blank"
                    class="inline-flex items-center gap-x-1 text-xs text-primary-600 hover:text-primary-500"
                 >
-                    @svg('heroicon-o-document','h-6 w-6')    {{ $document->getCustomProperty('alt') }}
+                    @svg('heroicon-o-document','h-6 w-6')  <span class="flex-1">{{ $document->getCustomProperty('alt') }}</span>
                 </a>
             @endforeach
         </x-filament::grid>
     @else
-        <div>
-            {{ __('gallery-json-media::infolist.document.nothing-to-show') }}
+        <div class="text-sm">
+            {{ __('gallery-json-media::gallery-json-media.infoList.document.nothing-to-show') }}
         </div>
     @endif
 </div>
diff --git a/src/Form/JsonMediaGallery.php b/src/Form/JsonMediaGallery.php
@@ -25,6 +25,8 @@ class JsonMediaGallery extends BaseFileUpload
 
     protected ?string $acceptedFileText = null;
 
+    protected Closure | bool $hasAltToName = false;
+
     public function document(): static
     {
         $this->acceptedFileTypes = config('gallery-json-media.form.default.document_accepted_file_type');
@@ -33,6 +35,18 @@ public function document(): static
         return $this;
     }
 
+    public function replaceNameByTitle(bool | Closure $hasAltToName = true): JsonMediaGallery
+    {
+        $this->hasAltToName = $hasAltToName;
+
+        return $this;
+    }
+
+    public function hasNameReplaceByTitle(): bool
+    {
+        return $this->evaluate($this->hasAltToName);
+    }
+
     public function image(): static
     {
         $this->acceptedFileTypes = config('gallery-json-media.form.default.image_accepted_file_type');
@@ -143,10 +157,10 @@ public function getUploadedFiles(): array
 
             $fileName = data_get($file, 'file');
             $mimeType = data_get($file, 'mime_type');
-
             $url[$fileKey] = [
                 'name' => $fileName,
                 'size' => data_get($file, 'size'),
+                'alt' => data_get($file, 'customProperties.alt'),
                 'mime_type' => $mimeType,
                 'url' => ($this->isImageFile($mimeType) and ! $this->isSvgFile($mimeType))
                     ? (new Croppa(filesystem: $storage, filePath: $fileName, width: $this->getThumbWidth(), height: $this->getThumbHeight()))