Dateimanagement: größere Vorschaubilder beim Drüberfahren

diff --git a/SL/Controller/File.pm b/SL/Controller/File.pm
index 1429912..4ff35db 100644 (file)
--- a/SL/Controller/File.pm
+++ b/SL/Controller/File.pm
@@ -17,6 +17,7 @@ use File::Slurp qw(slurp);
 use File::Spec::Unix;
 use File::Spec::Win32;
 use File::MimeInfo::Magic;
+use MIME::Base64;
 use SL::DB::Helper::Mappings;
 use SL::DB::Order;
 use SL::DB::DeliveryOrder;
@@ -310,6 +311,20 @@ sub action_download {
   }
 }
 
+sub action_ajax_get_thumbnail {
+  my ($self) = @_;
+
+  my $file      = SL::File->get(id => $::form->{file_id});
+  my $thumbnail = _create_thumbnail($file, $::form->{size});
+
+  my $overlay_selector = '#enlarged_thumb_' . $::form->{file_id};
+  $self->js
+    ->attr($overlay_selector, 'src', 'data:' . $thumbnail->{thumbnail_img_content_type} . ';base64,' . MIME::Base64::encode_base64($thumbnail->{thumbnail_img_content}))
+    ->data($overlay_selector, 'is-overlay-loaded', '1')
+    ->render;
+}
+
+
 #
 # filters
 #
@@ -609,7 +624,9 @@ sub _get_sources {
 # ignores all errros
 # todo: cache thumbs?
 sub _create_thumbnail {
-  my ($file) = @_;
+  my ($file, $size) = @_;
+
+  $size //= 64;
 
   my $filename;
   if (!eval { $filename = $file->get_file(); 1; }) {
@@ -621,7 +638,7 @@ sub _create_thumbnail {
   # Maybe use mime info stored in db?
   my $mime_type = File::MimeInfo::Magic::magic($filename);
   if ($mime_type =~ m{pdf}) {
-    $filename = _convert_pdf_to_png($filename);
+    $filename = _convert_pdf_to_png($filename, size => $size);
   }
   return if !$filename;
 
@@ -632,7 +649,7 @@ sub _create_thumbnail {
   }
 
   my $ret;
-  if (!eval { $ret = file_probe_type($content); 1; }) {
+  if (!eval { $ret = file_probe_type($content, size => $size); 1; }) {
     $::lxdebug->message(LXDebug::WARN(), "SL::File::_create_thumbnail file_probe_type failed: " . $EVAL_ERROR);
     return;
   }
@@ -648,11 +665,11 @@ sub _create_thumbnail {
 }
 
 sub _convert_pdf_to_png {
-  my ($filename) = @_;
-
-  my $sfile = SL::SessionFile::Random->new();
+  my ($filename, %params) = @_;
 
-  my $command = 'pdftoppm -singlefile -scale-to 64 -png' . ' ' . $filename . ' ' . $sfile->file_name;
+  my $size    = $params{size} // 64;
+  my $sfile   = SL::SessionFile::Random->new();
+  my $command = 'pdftoppm -singlefile -scale-to ' . $size . ' -png' . ' ' . $filename . ' ' . $sfile->file_name;
 
   if (system($command) == -1) {
     $::lxdebug->message(LXDebug::WARN(), "SL::File::_convert_pdf_to_png: system call failed: " . $ERRNO);

diff --git a/css/common.css b/css/common.css
index c8ade1f..af807c9 100644 (file)
--- a/css/common.css
+++ b/css/common.css
@@ -221,3 +221,15 @@ span.upload_drop_zone {
   border-style: solid;
   background-color: whitesmoke;
 }
+
+.ovlerlay_div {
+  position: relative;
+}
+
+.overlay_img {
+  position: absolute;
+  top: -100px;
+  left: -100px;
+  z-index: 2;
+  cursor: pointer;
+}

diff --git a/js/kivi.File.js b/js/kivi.File.js
index 327ef52..8645a09 100644 (file)
--- a/js/kivi.File.js
+++ b/js/kivi.File.js
@@ -301,6 +301,35 @@ namespace('kivi.File', function(ns) {
     return false;
   }
 
+  ns.add_enlarged_thumbnail = function(e) {
+    var file_id        = $(e.target).data('file-id');
+    var overlay_img_id = 'enlarged_thumb_' + file_id;
+    var overlay_img    = $('#' + overlay_img_id);
+
+    if (overlay_img.data('is-overlay-shown') == 1) return;
+
+    $('.thumbnail').off('mouseover');
+    overlay_img.data('is-overlay-shown', 1);
+    overlay_img.show();
+
+    if (overlay_img.data('is-overlay-loaded') == 1) return;
+
+    var data = {
+      action:         'File/ajax_get_thumbnail',
+      file_id:        file_id,
+      file_version:   $(e.target).data('file-version'),
+      size:           512
+    };
+
+    $.post("controller.pl", data, kivi.eval_json_result);
+  };
+
+  ns.remove_enlarged_thumbnail = function(e) {
+    $(e.target).hide();
+    $(e.target).data('is-overlay-shown', 0);
+    $('.thumbnail').on('mouseover', ns.add_enlarged_thumbnail);
+  };
+
   ns.init = function() {
     // Preventing page from redirecting
     $("#" + ns.list_div_id).on("dragover", function(e) {
@@ -341,6 +370,9 @@ namespace('kivi.File', function(ns) {
       ns.upload_files(object_id, object_type, file_type, maxsize, is_global, files);
     });
 
+    $('.thumbnail').on('mouseover', ns.add_enlarged_thumbnail);
+    $('.overlay_img').on('click', ns.remove_enlarged_thumbnail);
+    $('.overlay_img').on('mouseout', ns.remove_enlarged_thumbnail);
   };
 
 });

diff --git a/templates/webpages/file/list.html b/templates/webpages/file/list.html
index cf56665..fe90f4c 100644 (file)
--- a/templates/webpages/file/list.html
+++ b/templates/webpages/file/list.html
@@ -65,9 +65,13 @@
       [%- ELSE %]
        <td align="left">
         [%- IF file.thumbnail %]
-         <a href="controller.pl?action=File/download&id=[% file.id %][%- IF file.version %]&version=[%- file.version %][%- END %]">
-          <img src="data:[% HTML.escape(file.thumbnail.thumbnail_img_content_type) %];base64,[% file.thumbnail.thumbnail_img_content.encode_base64 %]" alt="[% file.file_name %]">
-         </a>
+         <div class="ovlerlay_div">
+          <img id="thumb_[% file.id %]" class="thumbnail"
+               data-file-id="[% file.id %]" data-file-version="[% file.version %]"
+               src="data:[% HTML.escape(file.thumbnail.thumbnail_img_content_type) %];base64,[% file.thumbnail.thumbnail_img_content.encode_base64 %]"
+               alt="[% file.file_name %]">
+          <img id="enlarged_thumb_[% file.id %]" class="overlay_img">
+         </div>
         [%- ELSE %]
          -
         [%- END %]