From 7de440bfb460ac0e011b7a833390c980c0753984 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Bernd=20Ble=C3=9Fmann?= Date: Tue, 2 Mar 2021 08:51:23 +0100 Subject: [PATCH] =?utf8?q?Dateimanagement:=20gr=C3=B6=C3=9Fere=20Vorschaub?= =?utf8?q?ilder=20beim=20Dr=C3=BCberfahren?= MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit --- SL/Controller/File.pm | 31 +++++++++++++++++++++++------- css/common.css | 12 ++++++++++++ js/kivi.File.js | 32 +++++++++++++++++++++++++++++++ templates/webpages/file/list.html | 10 +++++++--- 4 files changed, 75 insertions(+), 10 deletions(-) diff --git a/SL/Controller/File.pm b/SL/Controller/File.pm index 1429912c8..4ff35db44 100644 --- 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 c8ade1fbe..af807c950 100644 --- 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 327ef5211..8645a09c5 100644 --- 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 cf5666572..fe90f4c37 100644 --- a/templates/webpages/file/list.html +++ b/templates/webpages/file/list.html @@ -65,9 +65,13 @@ [%- ELSE %] [%- IF file.thumbnail %] - - [% file.file_name %] - +
+ [% file.file_name %] + +
[%- ELSE %] - [%- END %] -- 2.20.1