mirror/Part-DB.Part-DB-server
1
0
Fork 1
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-06-21 01:25:55 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Show higher resolution thumbnail when hover over a table picture.

Browse source 
Also use thumbnails for attachment edit preview.
This commit is contained in:
Jan Böhmer 2019-10-06 15:44:19 +02:00
parent a545e04554
commit 4c7767feed
9 changed files with 35 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/ts_src/ajax_ui.ts
View file

@ -532,10 +532,12 @@ class AjaxUI {
//Set the correct title in the table.
let title = $('#part-card-header-src');
$('#part-card-header').html(title.html());
$(document).trigger('ajaxUI:dt_loaded');
//Attach event listener to update links after new page selection:
$('#dt').on('draw.dt', function() {
ajaxUI.registerLinks();
$(document).trigger('ajaxUI:dt_loaded');
});
});
});

9
assets/ts_src/event_listeners.ts
View file

@ -304,6 +304,15 @@ $(document).on("ajaxUI:reload ajaxUI:start", function () {
});
});
/**
* Load the higher resolution version of hover pictures.
*/
$(document).on("ajaxUI:reload ajaxUI:start ajaxUI:dt_loaded", function () {
$(".hoverpic[data-thumbnail]").mouseenter(function() {
$(this).attr('src', $(this).data('thumbnail'));
});
});
/*
* Register the button which is used to
*/

7
config/packages/liip_imagine.yaml
View file

@ -14,7 +14,6 @@ liip_imagine:
thumbnail_md:
quality: 75
filters:
filters:
thumbnail:
size: [300, 300]
mode: inset
thumbnail:
size: [250, 250]
mode: inset

3
src/DataTables/AttachmentDataTable.php
View file

@ -91,9 +91,10 @@ class AttachmentDataTable implements DataTableTypeInterface
&& !$context->isExternal()
&& $this->attachmentHelper->isFileExisting($context)) {
return sprintf(
'<img alt="%s" src="%s" class="%s">',
'<img alt="%s" src="%s" data-thumbnail="%s" class="%s">',
'Part image',
$this->attachmentURLGenerator->getThumbnailURL($context),
$this->attachmentURLGenerator->getThumbnailURL($context, 'thumbnail_md'),
'img-fluid hoverpic'
);
}

3
src/DataTables/PartsDataTable.php
View file

@ -166,9 +166,10 @@ class PartsDataTable implements DataTableTypeInterface
}
return sprintf(
'<img alt="%s" src="%s" class="%s">',
'<img alt="%s" src="%s" data-thumbnail="%s" class="%s">',
'Part image',
$this->attachmentURLGenerator->getThumbnailURL($preview_attachment),
$this->attachmentURLGenerator->getThumbnailURL($preview_attachment, 'thumbnail_md'),
'img-fluid hoverpic'
);
}

10
src/Services/Attachments/AttachmentURLGenerator.php
View file

@ -139,8 +139,14 @@ class AttachmentURLGenerator
return $this->urlGenerator->generate('attachment_view', ['id' => $attachment->getID()]);
}
//For builtin ressources it is not useful to create a thumbnail
//because the footprints images are small and highly optimized already.
if ($filter_name === 'thumbnail_md' && $attachment->isBuiltIn()) {
return $this->assets->getUrl($asset_path);
}
//Otherwise we can serve the relative path via Asset component
return $this->filterService->getUrlOfFilteredImage($asset_path, 'thumbnail_sm');
return $this->filterService->getUrlOfFilteredImage($asset_path, $filter_name);
}
/**
@ -151,6 +157,6 @@ class AttachmentURLGenerator
public function getDownloadURL(Attachment $attachment) : string
{
//Redirect always to download controller, which sets the correct headers for downloading:
$this->urlGenerator->generate('attachment_download', ['id' => $attachment->getID()]);
return $this->urlGenerator->generate('attachment_download', ['id' => $attachment->getID()]);
}
}

9
src/Twig/AppExtension.php
View file

@ -34,6 +34,7 @@ use App\Entity\Base\DBElement;
use App\Entity\Parts\MeasurementUnit;
use App\Entity\PriceInformations\Currency;
use App\Services\AmountFormatter;
use App\Services\Attachments\AttachmentURLGenerator;
use App\Services\EntityURLGenerator;
use App\Services\MoneyFormatter;
use App\Services\SIFormatter;
@ -56,11 +57,13 @@ class AppExtension extends AbstractExtension
protected $moneyFormatter;
protected $siformatter;
protected $amountFormatter;
protected $attachmentURLGenerator;
public function __construct(EntityURLGenerator $entityURLGenerator, AdapterInterface $cache,
SerializerInterface $serializer, TreeBuilder $treeBuilder,
MoneyFormatter $moneyFormatter,
SIFormatter $SIFormatter, AmountFormatter $amountFormatter)
SIFormatter $SIFormatter, AmountFormatter $amountFormatter,
AttachmentURLGenerator $attachmentURLGenerator)
{
$this->entityURLGenerator = $entityURLGenerator;
$this->cache = $cache;
@ -69,6 +72,7 @@ class AppExtension extends AbstractExtension
$this->moneyFormatter = $moneyFormatter;
$this->siformatter = $SIFormatter;
$this->amountFormatter = $amountFormatter;
$this->attachmentURLGenerator = $attachmentURLGenerator;
}
public function getFilters()
@ -95,7 +99,8 @@ class AppExtension extends AbstractExtension
public function getFunctions()
{
return [
new TwigFunction('generateTreeData', [$this, 'treeData'])
new TwigFunction('generateTreeData', [$this, 'treeData']),
new TwigFunction('attachment_thumbnail', [$this->attachmentURLGenerator, 'getThumbnailURL'])
];
}

2
templates/AdminPages/_attachments.html.twig
View file

@ -42,7 +42,7 @@
{% endif %}
{% if attach.picture %}
<a href="{{ attach | entityURL('file_view') }}" target="_blank" data-no-ajax>
<img class="img-fluid img-thumbnail thumbnail-sm" src="{{ attach | entityURL('file_view') }}" alt="{% trans %}attachment.preview.alt{% endtrans %}" />
<img class="img-fluid img-thumbnail thumbnail-sm" src="{{ attachment_thumbnail(attach, 'thumbnail_md') }}" alt="{% trans %}attachment.preview.alt{% endtrans %}" />
</a>
{% else %}
<a href="{{ attach | entityURL('file_view') }}" target="_blank" data-no-ajax class="link-external">{% trans %}attachment.view{% endtrans %}</a>

2
templates/Parts/edit/_attachments.html.twig
View file

@ -42,7 +42,7 @@
{% if attach.picture %}
<a href="{{ attach | entityURL('file_view') }}" target="_blank" data-no-ajax>
<img class="img-fluid img-thumbnail thumbnail-sm" src="{{ attach | entityURL('file_view') }}" alt="{% trans %}attachment.preview.alt{% endtrans %}" />
<img class="img-fluid img-thumbnail thumbnail-sm" src="{{ attachment_thumbnail(attach, 'thumbnail_md') }}" alt="{% trans %}attachment.preview.alt{% endtrans %}" />
</a>
{% else %}
<a href="{{ attach | entityURL('file_view') }}" target="_blank" data-no-ajax class="link-external">{% trans %}attachment.view{% endtrans %}</a>