preview multiple images as a carousel

Author: streamtw

public/css/lfm.css

@@ -1,5 +1,9 @@
 /* General */
 
+body {
+  padding-bottom: 4rem;
+}
+
 a {
   color: #333844;
   text-decoration: none !important;
@@ -18,6 +22,26 @@ a {
   color: #333844;
 }
 
+#actions {
+  display: flex;
+}
+
+#actions > a {
+  display: inline-block;
+  line-height: 4rem;
+  text-align: center;
+  width: 100%;
+  font-size: 1.25rem;
+}
+
+#actions > a > i {
+  margin-right: .25rem;
+}
+
+#actions > a + a {
+  border-left: 1px solid #dee2e6;
+}
+
 #main {
   width: 100%;
 }
@@ -62,6 +86,13 @@ a {
   font-size: 10rem;
 }
 
+.carousel-image {
+  height: 50vh;
+  background-position: center;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
 /* Loader */
 
 #lfm-loader {

public/js/script.js

@@ -56,7 +56,9 @@ $(document).ready(function () {
   actions.reverse().forEach(function (action) {
     $('#nav-buttons > ul').prepend(
       $('<li>').addClass('nav-item').append(
-        $('<a>').addClass('nav-link d-none').attr('data-action', action.name)
+        $('<a>').addClass('nav-link d-none')
+          .attr('data-action', action.name)
+          .attr('data-multiple', action.multiple)
           .append($('<i>').addClass('fa fa-fw fa-' + action.icon))
           .append($('<span>').text(action.label))
       )
@@ -196,8 +198,8 @@ function toggleActions() {
 
   $('[data-action=use]').toggleClass('d-none', !(many_selected && only_file))
   $('[data-action=rename]').toggleClass('d-none', !one_selected)
-  $('[data-action=preview]').toggleClass('d-none', !(one_selected && only_image))
-  $('[data-action=move]').toggleClass('d-none', !(one_selected))
+  $('[data-action=preview]').toggleClass('d-none', !(many_selected && only_image))
+  $('[data-action=move]').toggleClass('d-none', !(many_selected))
   $('[data-action=download]').toggleClass('d-none', !(one_selected && only_file))
   $('[data-action=resize]').toggleClass('d-none', !(one_selected && only_image))
   $('[data-action=crop]').toggleClass('d-none', !(one_selected && only_image))
@@ -377,12 +379,20 @@ function download(item) {
   location.href = lfm_route + '/download?' + $.param(data);
 }
 
-function preview(item) {
-  notify(
-    $('<img>')
-      .addClass('w-100')
-      .attr('src', item.url + '?timestamp=' + item.time)
-  );
+function preview(items) {
+  var carousel = $('#carouselTemplate').clone().attr('id', 'previewCarousel').removeClass('d-none');
+  var imageTemplate = carousel.find('.carousel-item').clone().removeClass('active');
+  carousel.children('.carousel-inner').html('');
+
+  items.forEach(function (item, index) {
+    var carouselItem = imageTemplate.clone()
+      .addClass(index === 0 ? 'active' : '');
+    carouselItem.find('.carousel-image')
+      .css('background-image', 'url(\'' + item.url + '?timestamp=' + item.time + '\')');
+    carousel.children('.carousel-inner').append(carouselItem);
+  });
+
+  notify(carousel);
 }
 
 function move(item) {

src/views/index.blade.php

@@ -14,7 +14,7 @@
 
   <title>{{ trans('laravel-filemanager::lfm.title-page') }}</title>
   <link rel="shortcut icon" type="image/png" href="{{ asset('vendor/laravel-filemanager/img/72px color.png') }}">
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.css">
   <link rel="stylesheet" href="{{ asset('vendor/laravel-filemanager/css/cropper.min.css') }}">
@@ -68,6 +68,11 @@
     </div>
   </nav>
 
+  <nav class="bg-light fixed-bottom border-top d-none" id="actions">
+    <a data-action="preview" data-multiple="true"><i class="fa fa-image"></i>Preview</a>
+    <a data-action="use" data-multiple="true"><i class="fa fa-check"></i>Confirm</a>
+  </nav>
+
   <div class="d-flex flex-row">
     <div id="tree"></div>
 
@@ -153,13 +158,29 @@
     </div>
   </div>
 
+  <div id="carouselTemplate" class="d-none carousel slide" data-ride="carousel" >
+    <div class="carousel-inner">
+      <div class="carousel-item active">
+        <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>
+      <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>
+      <span class="sr-only">Next</span>
+    </a>
+  </div>
+
   {{-- <div id="lfm-loader">
     <img src="{{asset('vendor/laravel-filemanager/img/loader.svg')}}">
   </div> --}}
 
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
   <script src="{{ asset('vendor/laravel-filemanager/js/cropper.min.js') }}"></script>
   <script src="{{ asset('vendor/laravel-filemanager/js/jquery.form.min.js') }}"></script>
@@ -168,12 +189,12 @@
     var lfm_route = "{{ url(config('lfm.url_prefix')) }}";
     var lang = {!! json_encode(trans('laravel-filemanager::lfm')) !!};
     var actions = [
-      {
-        name: 'use',
-        icon: 'check',
-        label: 'Confirm',
-        multiple: true
-      },
+      // {
+      //   name: 'use',
+      //   icon: 'check',
+      //   label: 'Confirm',
+      //   multiple: true
+      // },
       {
         name: 'rename',
         icon: 'edit',
@@ -186,12 +207,12 @@
         label: lang['menu-download'],
         multiple: true
       },
-      {
-        name: 'preview',
-        icon: 'image',
-        label: lang['menu-view'],
-        multiple: true
-      },
+      // {
+      //   name: 'preview',
+      //   icon: 'image',
+      //   label: lang['menu-view'],
+      //   multiple: true
+      // },
       {
         name: 'move',
         icon: 'sign-out',