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 09:35:49 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implement hoverpic using stimulus.

Browse source
This commit is contained in:
Jan Böhmer 2022-07-29 23:54:49 +02:00
parent 9519150fb9
commit 671e0944a2
6 changed files with 25 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

20
assets/controllers/elements/hoverpic_controller.js Normal file
View file

@ -0,0 +1,20 @@
import {Controller} from "@hotwired/stimulus";
import {Popover} from "bootstrap";
export default class extends Controller {
connect() {
const thumbnail_url = this.element.dataset.thumbnail;
this._popover = Popover.getOrCreateInstance(this.element, {
html: true,
trigger: 'hover',
placement: 'right',
container: 'body',
content: function () {
return '<img class="img-fluid" src="' + thumbnail_url + '" />';
}
});
this._popover.hide();
}
}

7
assets/js/register_events.js
View file

@ -7,6 +7,7 @@ import "bootstrap-fileinput/css/fileinput.css"
import "bootstrap-fileinput";
import {Popover} from "bootstrap";
class RegisterEventHelper {
@ -16,8 +17,6 @@ class RegisterEventHelper {
this.registerFileInput();
this.registerSpecialCharInput();
this.registerHoverPics();
}
registerLoadHandler(fn) {
@ -34,10 +33,6 @@ class RegisterEventHelper {
});
}
registerHoverPics() {
}
registerFileInput() {
this.registerLoadHandler(() => {
$(".file").fileinput();

2
src/DataTables/AttachmentDataTable.php
View file

@ -89,7 +89,7 @@ final class AttachmentDataTable implements DataTableTypeInterface
}
return sprintf(
'<img alt="%s" src="%s" data-thumbnail="%s" class="%s" data-title="%s">',
'<img alt="%s" src="%s" data-thumbnail="%s" class="%s" data-title="%s" data-controller="elements--hoverpic">',
'Part image',
$this->attachmentURLGenerator->getThumbnailURL($context),
$this->attachmentURLGenerator->getThumbnailURL($context, 'thumbnail_md'),

2
src/DataTables/PartsDataTable.php
View file

@ -166,7 +166,7 @@ final class PartsDataTable implements DataTableTypeInterface
}
return sprintf(
'<img alt="%s" src="%s" data-thumbnail="%s" class="%s" data-title="%s">',
'<img alt="%s" src="%s" data-thumbnail="%s" class="%s" data-title="%s" data-controller="elements--hoverpic">',
'Part image',
$this->attachmentURLGenerator->getThumbnailURL($preview_attachment),
$this->attachmentURLGenerator->getThumbnailURL($preview_attachment, 'thumbnail_md'),

2
templates/Parts/lists/_info_card.html.twig
View file

@ -8,7 +8,7 @@
<div class="accordion-header">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#entityInfo">
{% if entity.masterPictureAttachment is not null and attachment_manager.isFileExisting(entity.masterPictureAttachment) %}
<img class="hoverpic ms-0 me-0 d-inline" data-thumbnail="{{ entity.masterPictureAttachment | entityURL('file_view') }}" src="{{ attachment_thumbnail(entity.masterPictureAttachment, 'thumbnail_sm') }}">
<img class="hoverpic ms-0 me-0 d-inline" {{ stimulus_controller('elements/hoverpic') }} data-thumbnail="{{ entity.masterPictureAttachment | entityURL('file_view') }}" src="{{ attachment_thumbnail(entity.masterPictureAttachment, 'thumbnail_sm') }}">
{% endif %}
{{ header_label | trans }}:&nbsp;<b>{{ entity.name }}</b>
</button>

2
templates/helper.twig
View file

@ -13,7 +13,7 @@
<a target="_blank" data-turbo="false" rel="noopener" href="{{ attachment|entityURL('file_view') }}">
{% endif %}
{% if attachment.picture %}
<img class="hoverpic" data-thumbnail="{{ attachment|entityURL('file_view') }}" src="{{ attachment|entityURL('file_view') }}">
<img class="hoverpic" {{ stimulus_controller('elements/hoverpic') }} data-thumbnail="{{ attachment|entityURL('file_view') }}" src="{{ attachment|entityURL('file_view') }}">
{% else %}
<i class="text-dark {{ class }} {{ ext_to_fa_icon(attachment.extension) }}"></i>
{% endif %}