Implement hoverpic using stimulus.

assets/controllers/elements/hoverpic_controller.js

@@ -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();
+    }
+}

assets/js/register_events.js

@@ -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();

src/DataTables/AttachmentDataTable.php

@@ -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'),

src/DataTables/PartsDataTable.php

@@ -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'),

templates/Parts/lists/_info_card.html.twig

@@ -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>

templates/helper.twig

@@ -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 %}