show file name in preview carousel

Author: streamtw

public/css/lfm.css

@@ -97,6 +97,29 @@ a {
   margin: 0 auto;
 }
 
+.carousel-indicators {
+  bottom: 0;
+}
+
+.carousel-label, .carousel-label:hover {
+  position: absolute;
+  bottom: 0;
+  background: linear-gradient(transparent 10px, rgba(0, 0, 0, .4), rgba(0, 0, 0, .5));
+  padding: 40px 20px 30px;
+  width: 100%;
+  color: white;
+  word-break: break-word;
+  text-align: center;
+}
+
+.carousel-control-background {
+  border-radius: 50%;
+  width: 25px;
+  height: 25px;
+  box-shadow: 0 0 10px #666;
+  background-color: #666;
+}
+
 #uploadForm > .dz-default.dz-message {
   border: 2px dashed #ccc;
   border-radius: 5px;

public/js/script.js

@@ -419,6 +419,7 @@ function preview(items) {
   var indicatorTemplate = carousel.find('.carousel-indicators > li').clone().removeClass('active');
   carousel.children('.carousel-inner').html('');
   carousel.children('.carousel-indicators').html('');
+  carousel.children('.carousel-indicators,.carousel-control-prev,.carousel-control-next').toggle(items.length > 1);
 
   items.forEach(function (item, index) {
     var carouselItem = imageTemplate.clone()
@@ -430,6 +431,10 @@ function preview(items) {
       carouselItem.find('.carousel-image').css('width', '50vh').append($('<div>').addClass('mime-icon ico-' + item.icon));
     }
 
+    carouselItem.find('.carousel-label').attr('target', '_blank').attr('href', item.url)
+      .append(item.name)
+      .append($('<i class="fas fa-external-link-alt ml-2"></i>'));
+
     carousel.children('.carousel-inner').append(carouselItem);
 
     var carouselIndicator = indicatorTemplate.clone()

src/views/index.blade.php

@@ -156,21 +156,26 @@
     </div>
   </div>
 
-  <div id="carouselTemplate" class="d-none carousel slide" data-ride="carousel">
+  <div id="carouselTemplate" class="d-none carousel slide bg-light" data-ride="carousel">
     <ol class="carousel-indicators">
       <li data-target="#previewCarousel" data-slide-to="0" class="active"></li>
     </ol>
     <div class="carousel-inner">
       <div class="carousel-item active">
+        <a class="carousel-label"></a>
         <div class="carousel-image"></div>
       </div>
     </div>
     <a class="carousel-control-prev" href="#previewCarousel" role="button" data-slide="prev">
-      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <div class="carousel-control-background" aria-hidden="true">
+        <i class="fas fa-chevron-left"></i>
+      </div>
       <span class="sr-only">Previous</span>
     </a>
     <a class="carousel-control-next" href="#previewCarousel" role="button" data-slide="next">
-      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      <div class="carousel-control-background" aria-hidden="true">
+        <i class="fas fa-chevron-right"></i>
+      </div>
       <span class="sr-only">Next</span>
     </a>
   </div>